@jopijs/jopimod_uicore

This module is the Standard Library of the JopiJS framework. It provides the essential building blocks, hooks, and utilities required to build the user interface and handle client-side logic.

Role of the Module

The mod_uicore module serves as the foundation for:

• Routing & Navigation: Provides standard hooks (useLocation, useNavigate) and the <Link> component.
• Client-Server Communication: Utilities to easily send JSON or Form data to the server (useSubmit, sendJsonData).
• User Session Management: hooks to access current user info (useGetInfos) and check permissions (useHasAllRoles, <CheckRoles>).
• Cross-Tab Communication: The CrossTabEvent class to synchronize state between multiple browser tabs.

Structure

The module organizes its features through standard aliases:

• @alias/hooks: React hooks for logic (navigation, user session, network).
• @alias/lib: Pure logic classes and functions (CrossTabEvent, string tools).
• @alias/ui: Core UI components (Link, CheckRoles, Composite).

API Reference

Navigation (Router)

• useNavigate(): Programmatically change routes.
• useLocation(): Get current location object.
• useParams(): Get route parameters (e.g. id in /product/:id).
• useSearchParams(): Get query parameters (?q=search).
• <Link to="...">: Declarative navigation component.

User & Authentication

• useGetInfos(): Returns the current user's profile (or anonymous).
• useHasAllRoles(roles[]): Returns true if user has all specified roles.
• useLogOut(): Function to log the user out.
• <CheckRoles roles={[...]}>: Conditionally renders content based on permissions.

Server Interaction

• useSubmit(url, options): Hook to handle form submissions with loading states.
• sendJsonData(url, data): Helper to POST JSON data.

Utilities

• CrossTabEvent: Class to broadcast events to other open tabs of the same application.
• Composite: Component to create "slots" where other modules can inject content.

Examples

1. Navigation

import { Link } from "jopijs/router"; // Mapped to @alias/ui/jopijs.page.Link
import useNavigate from "jopijs/router/useNavigate"; // Mapped to hooks

export const MyNav = () => {
    const navigate = useNavigate();

    return (
        <div>
            <Link to="/home">Go Home</Link>
            <button onClick={() => navigate("/dashboard")}>
                Go to Dashboard
            </button>
        </div>
    );
};

2. Checking Permissions

import { CheckRoles } from "jopijs/security"; // Mapped to user components
import useGetInfos from "@/hooks/jopijs.user.useGetInfos";

export const AdminPanel = () => {
    const user = useGetInfos();

    return (
        <CheckRoles roles={["ADMIN"]}>
            <h1>Welcome, {user.login}</h1>
            <p>You have access to the secret panel.</p>
        </CheckRoles>
    );
};

3. Synchronizing Tabs

import { CrossTabEvent } from "@/lib/jopijs.client.CrossTabEvent";

const sync = new CrossTabEvent("my.app.sync");

// Send signal
sync.emit({ some: "data" });

// Listen in another tab
sync.listen((data) => {
    console.log("Received Sync:", data);
});