@m4l/layouts 0.1.22 → 0.1.25

package/src/components/MFIsolationApp/index.tsx

@@ -0,0 +1,164 @@
+// react
+import { useCallback, useEffect, useMemo } from 'react';
+import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
+
+import { toast } from 'react-toastify';
+
+//m4l
+import { getLocaleFromNetwork, LocalesProvider } from '@m4l/graphics';
+import { AuthProvider } from '../../contexts/AuthContext';
+import {
+    axiosOperation,
+    EnvironmentProvider,
+    EnvironmentType,
+    EventListenerBase,
+    HostToolsProvider,
+    HostToolsType,
+    Maybe,
+    NetworkProvider,
+} from '@m4l/core';
+// external components
+import { createBrowserHistory } from 'history';
+import EventEmitter from 'eventemitter3';
+// mui
+// internal components
+// hooks /providers
+
+// sub comoponents
+import MFAuthApp from './subcomponents/MFAuthApp';
+// types
+import { MFIsolationAppProps } from './types';
+// network
+
+// config
+
+// utils
+
+// css
+import NProgress from 'nprogress';
+import BaseModule from '../BaseModule';
+import { AreasProvider } from '@m4l/components';
+
+const history = createBrowserHistory({ window });
+
+export function MFIsolationApp(props: MFIsolationAppProps) {
+    const {
+        children,
+        user,
+        pwd,
+        host_api_local,
+        host_api_remote,
+        host_static_assets,
+        environment_assets,
+        moduleId,
+        skeletonFlags,
+        moduleNameField,
+        privileges,
+        componentsDictionary,
+        onLoad,
+        activeAreasNetwork = false,
+    } = props;
+
+    const eventEmitter = useMemo(() => new EventEmitter(), []);
+
+    const events_add_listener = useCallback(
+        (eventName: string, handler: EventListenerBase) => {
+            eventEmitter.on(eventName, handler);
+        },
+        [eventEmitter],
+    );
+
+    const events_remove_listener = useCallback(
+        (eventName: string, handler: Maybe<EventListenerBase>) => {
+            if (handler === null) {
+                eventEmitter.removeListener(eventName);
+                return;
+            }
+            eventEmitter.removeListener(eventName, handler);
+        },
+        [eventEmitter],
+    );
+    const events_emit = useCallback(
+        (eventName: string, arg: any) => {
+            eventEmitter.emit(eventName, arg);
+        },
+        [eventEmitter],
+    );
+
+    const startProgress = () => {
+        NProgress.configure({
+            showSpinner: true,
+        });
+
+        NProgress.start();
+    };
+
+    const stopProgress = () => {
+        NProgress.done();
+    };
+
+    const environment: EnvironmentType = useMemo(
+        () => ({
+            host: '',
+            isLocalhost: true,
+            domain_token: 'lab1',
+            host_api_local,
+            host_api_remote,
+            host_static_assets,
+            environment_assets,
+        }),
+        [],
+    );
+
+    const hostTools: HostToolsType = useMemo(
+        () => ({
+            history,
+            toast,
+            startProgress,
+            stopProgress,
+            events_add_listener,
+            events_remove_listener,
+            events_emit,
+        }),
+        [],
+    );
+
+    useEffect(() => {
+        console.log('useEffect IsolationApp');
+    }, []);
+    return (
+        <EnvironmentProvider {...environment}>
+            <HostToolsProvider {...hostTools}>
+                <NetworkProvider axiosOperation={axiosOperation}>
+                    <HistoryRouter history={history}>
+                        <LocalesProvider
+                            isMicroFrontEnd={false}
+                            getLocaleFromNetwork={getLocaleFromNetwork}
+                        >
+                            <AuthProvider>
+                                <MFAuthApp user={user} pwd={pwd}>
+                                    <BaseModule
+                                        moduleId={moduleId}
+                                        privileges={privileges}
+                                        skeletonFlags={skeletonFlags}
+                                        componentsDictionary={componentsDictionary}
+                                        moduleNameField={moduleNameField}
+                                    >
+                                        <AreasProvider
+                                            onLoad={onLoad}
+                                            activeAreasNetwork={activeAreasNetwork}
+                                        >
+                                            {children}
+                                        </AreasProvider>
+                                    </BaseModule>
+                                </MFAuthApp>
+                            </AuthProvider>
+                        </LocalesProvider>
+                    </HistoryRouter>
+                </NetworkProvider>
+            </HostToolsProvider>
+        </EnvironmentProvider>
+    );
+}
+
+export default MFIsolationApp;

package/src/components/MFIsolationApp/subcomponents/MFAuthApp/index.tsx

@@ -0,0 +1,98 @@
+// react
+import { useEffect } from 'react';
+import { format } from 'date-fns';
+//m4l
+
+import {
+    defaultThemeOptions,
+    fnComponentsOverrides,
+    FormatterProvider,
+    HostThemeProvider,
+    // ProgressBarStyle,
+} from '@m4l/graphics';
+// external components
+
+// mui
+
+// internal components
+
+// hooks /providers
+
+// sub comoponents
+
+// types
+
+// network
+
+// config
+
+// utils
+
+// css
+
+import { useAuth } from '../../../../hooks/useAuth';
+import { MFAuthAppProps } from './types';
+import { ToastContainer } from 'react-toastify';
+import { DomainCountry, DomainCountryProvider } from '@m4l/core';
+
+export function MFAuthApp(props: MFAuthAppProps) {
+    const { children, user, pwd } = props;
+    const { isAuthenticated, isInitialized, login, user: authUser } = useAuth();
+
+    useEffect(() => {
+        // Atenticarse si no lo logro en el paso anterior dado por el efecto de AuthProvider
+
+        if (isInitialized && isAuthenticated === false) {
+            console.log('useEffect MFAuthApp Login');
+            login(user, pwd, false);
+        }
+    }, [isInitialized, isAuthenticated]);
+
+    if (!isAuthenticated) return <div>Pendiente x atenticar</div>;
+
+    const domianCountry: DomainCountry = {
+        id: 1,
+        currency: 'USD',
+        currency_decimal_digits: 2,
+        decimal_symbol: '.',
+        thousands_symbol: ',',
+    };
+
+    if (authUser?.domain_country) {
+        domianCountry.id = authUser?.domain_country.id ?? domianCountry.id;
+        domianCountry.currency = authUser?.domain_country.currency ?? domianCountry.currency;
+        domianCountry.currency_decimal_digits =
+            authUser?.domain_country.currency_decimal_digits ??
+            domianCountry.currency_decimal_digits;
+        domianCountry.decimal_symbol =
+            authUser?.domain_country.decimal_symbol ?? domianCountry.decimal_symbol;
+        domianCountry.thousands_symbol =
+            authUser?.domain_country?.thousands_symbol ?? domianCountry.thousands_symbol;
+    }
+
+    return (
+        <HostThemeProvider
+            hostThemeOptions={defaultThemeOptions}
+            fnComponentsOverrides={fnComponentsOverrides}
+            isMicroFrontEnd={true}
+        >
+            <ToastContainer />
+            <DomainCountryProvider {...domianCountry} isMicroFrontEnd={false}>
+                <FormatterProvider
+                    isMicroFrontEnd={false}
+                    dateFormatter={{
+                        formatDate: format,
+                    }}
+                    currencyFormatter={{
+                        code: domianCountry.currency,
+                        decimalDigits: domianCountry.currency_decimal_digits,
+                    }}
+                >
+                    {children}
+                </FormatterProvider>
+            </DomainCountryProvider>
+        </HostThemeProvider>
+    );
+}
+
+export default MFAuthApp;

package/src/components/MFIsolationApp/subcomponents/MFAuthApp/types.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export type MFAuthAppProps = {
+    user: string;
+    pwd: string;
+    children: ReactNode;
+};

package/src/components/MFIsolationApp/types.ts

@@ -0,0 +1,12 @@
+import { BaseModuleProps } from '../BaseModule/types';
+
+export type MFIsolationAppProps = BaseModuleProps & {
+    user: string;
+    pwd: string;
+    host_api_local: string;
+    host_api_remote: string;
+    host_static_assets: string;
+    environment_assets: string;
+    onLoad: () => void;
+    activeAreasNetwork?: boolean;
+};

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export { MFIsolationApp } from './MFIsolationApp';
+export { MFHostApp } from './MFHostApp';
+export { BaseModule } from './BaseModule';
+
+export type { ByHostProps } from './MFHostApp/types';

package/src/contexts/AuthContext/index.tsx

@@ -0,0 +1,189 @@
+// react
+import { createContext, useEffect, useReducer } from 'react';
+// m4l
+import {
+    getLocalStorage,
+    setLocalStorage,
+    useEnvironment,
+    useHostTools,
+    useLocalStorageWithListener,
+    useNetwork,
+} from '@m4l/core';
+// utils
+
+// types
+
+import type { AuthProviderProps, AuthState, SessionActions, SessionContextType } from './types';
+
+// constants
+import { EnumTypes } from './types';
+import { EmitEvents } from '@m4l/core';
+
+const initialState: AuthState = {
+    isAuthenticated: false,
+    isInitialized: false,
+    user: null,
+};
+
+const JWTReducer = (state: AuthState, action: SessionActions) => {
+    switch (action.type) {
+        case 'INITIALIZE':
+            return {
+                isAuthenticated: action.payload.isAuthenticated,
+                isInitialized: true,
+                user: action.payload.user,
+            };
+        case 'LOGIN':
+            return {
+                ...state,
+                isAuthenticated: true,
+                user: action.payload.user,
+            };
+        case 'LOGOUT':
+            return {
+                ...state,
+                isAuthenticated: false,
+                user: null,
+            };
+
+        default:
+            return state;
+    }
+};
+
+const AuthContext = createContext<SessionContextType | null>(null);
+
+// ----------------------------------------------------------------------
+
+function dispatchInitial(dispatch: React.Dispatch<SessionActions>) {
+    dispatch({
+        type: EnumTypes.Initial,
+        payload: {
+            isAuthenticated: false,
+            user: null,
+        },
+    });
+}
+
+function AuthProvider(props: AuthProviderProps) {
+    const { children } = props;
+    const [state, dispatch] = useReducer(JWTReducer, initialState);
+    const { events_add_listener } = useHostTools();
+    const { networkOperation } = useNetwork();
+    const { domain_token } = useEnvironment();
+    const [nextValSession, setNextValSession] = useLocalStorageWithListener<string>(
+        //Variable para saber si ha cambiado la session en otro navegador
+        'vSession',
+        new Date().getTime() + '',
+    );
+
+    useEffect(() => {
+        //Verifica si el usuario esta logueado
+        //Si es por primera vez (No hay localstorage) se envía el lenguage del navegador
+
+        const initialize = async () => {
+            networkOperation({
+                method: 'GET',
+                endPoint: `auth/login`,
+                parms: { user_data: true },
+                checkUnAuthorized: false,
+            })
+                .then(response => {
+                    // const user_logged: User = response.user;
+
+                    dispatch({
+                        type: EnumTypes.Initial,
+                        payload: {
+                            isAuthenticated: true,
+                            user: response.user,
+                        },
+                    });
+                    //requintar el localstorage por si cambia externamente
+                    const useSaved = getLocalStorage('userData', {
+                        email: response.user.email,
+                        remember: true,
+                    });
+
+                    if (useSaved?.email !== response.user.email) {
+                        //Si cambiaron el usuario
+                        setLocalStorage('userData', { email: response.user.email }, true);
+                    }
+                })
+                .catch(() => {
+                    //No está logueado
+                    dispatchInitial(dispatch);
+                });
+        };
+
+        initialize();
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [nextValSession]);
+
+    const login = async (email: string, password: string, remember: boolean) => {
+        await networkOperation({
+            endPoint: `auth/login`,
+            method: 'POST',
+            data: {
+                email,
+                password,
+                domain_token,
+            },
+        }).then(response => {
+            const user = response.data;
+
+            if (remember) {
+                setLocalStorage('userData', { email, remember });
+            } else {
+                setLocalStorage('userData', { email: '', remember });
+            }
+
+            dispatch({
+                type: EnumTypes.Login,
+                payload: {
+                    user,
+                },
+            });
+            setNextValSession(new Date().getTime() + '');
+        });
+    };
+
+    const logout = async (isAuthenticated: boolean) => {
+        if (isAuthenticated) {
+            await networkOperation({
+                endPoint: `auth/logout`,
+                method: 'POST',
+            });
+        }
+        dispatch({ type: EnumTypes.Logout });
+        setNextValSession(new Date().getTime() + '');
+    };
+
+    const onNetserviceUnautorized = () => {
+        logout(false);
+    };
+
+    useEffect(() => {
+        //Verifica si el usuario esta logueado
+
+        events_add_listener(
+            EmitEvents.EMMIT_EVENT_NET_SERVICE_UNAUTHORIZED,
+            onNetserviceUnautorized,
+        );
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+        <AuthContext.Provider
+            value={{
+                ...state,
+                login,
+                logout,
+            }}
+        >
+            {children}
+        </AuthContext.Provider>
+    );
+}
+
+export { AuthContext, AuthProvider };

package/src/contexts/AuthContext/types.ts

@@ -0,0 +1,65 @@
+import { DomainCountry, Maybe } from '@m4l/core';
+import { ReactNode } from 'react';
+
+// eslint-disable-next-line no-shadow
+export enum EnumTypes {
+    Initial = 'INITIALIZE',
+    Login = 'LOGIN',
+    Logout = 'LOGOUT',
+}
+
+export type AuthProviderProps = {
+    children: ReactNode;
+};
+
+export type ActionMap<M extends { [index: string]: any }> = {
+    [Key in keyof M]: M[Key] extends undefined
+        ? {
+              type: Key;
+          }
+        : {
+              type: Key;
+              payload: M[Key];
+          };
+};
+
+export type SessionAuthPayload = {
+    [EnumTypes.Initial]: {
+        isAuthenticated: boolean;
+        user: AuthUser;
+    };
+    [EnumTypes.Login]: {
+        user: AuthUser;
+    };
+    [EnumTypes.Logout]: undefined;
+};
+
+export type SessionActions = ActionMap<SessionAuthPayload>[keyof ActionMap<SessionAuthPayload>];
+
+// export type AuthStoreState = {
+//     user: User;
+//     remember?: boolean;
+// };
+
+export interface User {
+    email: string;
+    id: number;
+    first_name: string;
+    last_name: string;
+    account_id: number;
+    domain_country: DomainCountry;
+    avatar_url?: Maybe<string>;
+}
+
+export type AuthUser = Maybe<User>;
+
+export type AuthState = {
+    isAuthenticated: boolean;
+    isInitialized: boolean;
+    user: AuthUser;
+};
+
+export interface SessionContextType extends AuthState {
+    login: (email: string, password: string, remember: boolean) => object | undefined;
+    logout: (isAuthenticated: boolean) => Promise<void>;
+}

package/src/contexts/index.ts

@@ -0,0 +1 @@
+export * from './AuthContext';

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from './useMasterDetail';
+
+export * from './useAuth';
+
+export * from './useModule';

package/src/hooks/useAuth/index.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { AuthContext } from '../../contexts/AuthContext';
+
+export const useAuth = () => {
+    const context = useContext(AuthContext);
+
+    if (!context) throw new Error('Auth context must be use inside AuthProvider');
+
+    return context;
+};
+
+export default useAuth;

package/src/hooks/useMasterDetail/index.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { MasterDetailContext } from '../../layouts/MasterDetailLayout/contexts/MasterDetailContext';
+
+// ----------------------------------------------------------------------
+
+export const useMasterDetail = () => useContext(MasterDetailContext);

package/src/hooks/useModule/index.ts

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { ModuleContext } from '../../layouts/ModuleLayout/contexts/ModuleContext';
+
+// ----------------------------------------------------------------------
+export const useModule = () => {
+    const context = useContext(ModuleContext);
+
+    if (!context) throw new Error('useModule context must be use inside ModuleContext');
+
+    return context;
+};
+
+export default useModule;

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './components';
+
+export * from './contexts';
+
+export * from './layouts';
+
+export * from './hooks';

package/src/layouts/MasterDetailLayout/components/ButtonDetail/index.tsx

@@ -0,0 +1,38 @@
+// react
+
+// mui
+import { Button } from '@mui/material';
+import { ComponentActionProps } from '@m4l/components';
+import { useMasterDetail } from '../../../../hooks/useMasterDetail';
+
+// external libraries
+
+// componentes estilados
+
+// sub components
+
+// dictionary
+
+// context
+
+// hooks
+
+// types
+
+// constants
+
+export function ButtonDetail(props: ComponentActionProps) {
+    const { masterSelection } = useMasterDetail();
+    const { onClick, description } = props;
+
+    return (
+        <Button
+            key="miDetail"
+            onClick={onClick}
+            variant="outlined"
+            disabled={masterSelection === undefined ? true : false}
+        >
+            {description}
+        </Button>
+    );
+}

package/src/layouts/MasterDetailLayout/contexts/MasterDetailContext/index.tsx

@@ -0,0 +1,34 @@
+// react
+import { createContext, useState } from 'react';
+import { voidFunction } from '@m4l/core';
+
+// types
+import { MasterDetailContextProps, MasterDetailProviderProps, MasterSelecion } from './types';
+
+const initialState: MasterDetailContextProps = {
+    masterSelection: undefined,
+    onChangeMasterSelection: voidFunction,
+};
+
+const MasterDetailContext = createContext<MasterDetailContextProps>(initialState);
+
+// ----------------------------------------------------------------------
+
+function MasterDetailProvider(props: MasterDetailProviderProps) {
+    const { children } = props;
+
+    const [masterSelection, setMasterSelection] = useState<MasterSelecion>(undefined);
+
+    return (
+        <MasterDetailContext.Provider
+            value={{
+                masterSelection,
+                onChangeMasterSelection: setMasterSelection,
+            }}
+        >
+            {children}
+        </MasterDetailContext.Provider>
+    );
+}
+
+export { MasterDetailProvider, MasterDetailContext };

package/src/layouts/MasterDetailLayout/contexts/MasterDetailContext/types.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+
+export type MasterSelecion = any | any[] | undefined;
+
+export interface MasterDetailContextStateProps {
+    masterSelection?: MasterSelecion;
+    // splitPosition?: SplitPosition;
+}
+
+export interface MasterDetailProviderProps {
+    // masterSelection: MasterSelecion;
+    // setMasterSelection: (newMasterSelecion: MasterSelecion) => void;
+    children: ReactNode;
+}
+
+export interface MasterDetailContextProps extends MasterDetailContextStateProps {
+    onChangeMasterSelection: (newMasterSelection: MasterSelecion) => void;
+    // onChangeSplitPosition: (newMasterSelection: MasterSelecion) => void;
+}