@dashadmin/dash-admin 1.3.73 → 1.3.74-srcfree.2

package/src/contexts/com/useLaravelEcho.tsx

@@ -1,432 +0,0 @@
-import { useState, useEffect, useContext, useCallback, useRef } from 'react';
-import { difference } from 'lodash';
-import usePrevious from '@rooks/use-previous';
-import { Channel } from 'laravel-echo/src/channel';
-import Echo, { EchoOptions } from 'laravel-echo';
-import Pusher from 'pusher-js';
-
-import { ConstantsContext } from '../../config/ConstantsService';
-import { getEnv } from  'dash-constants/src/DASHAdminSystemConstants';
-
-
-
-import { IDASHAppState } from 'dash-admin-state';
-import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
-import { useSelector } from 'react-redux';
-
-import { dashStorage } from 'dash-utils';
-// Make Pusher available globally
-(window as any).Pusher = Pusher;
-
-// Singleton manager for Echo clients
-class EchoClientManager {
-    private static instance: EchoClientManager;
-    public clients: Map<string, Echo<"pusher">>;
-
-    private constructor() {
-        this.clients = new Map();
-    }
-
-    public static getInstance(): EchoClientManager {
-        if (!EchoClientManager.instance) {
-            EchoClientManager.instance = new EchoClientManager();
-        }
-        return EchoClientManager.instance;
-    }
-
-    public setClient(hash: string, client: Echo<"pusher">): void {
-        this.clients.set(hash, client);
-    }
-
-    public getClient(hash: string): Echo<"pusher"> | undefined {
-        return this.clients.get(hash);
-    }
-
-    public removeClient(hash: string): boolean {
-        return this.clients.delete(hash);
-    }
-
-    public hasClient(hash: string): boolean {
-        return this.clients.has(hash);
-    }
-}
-
-export const echoManager = EchoClientManager.getInstance();
-
-const useLaravelEcho = ({
-    type,
-    channel,
-    events,
-    userId,
-    socketId,
-    pingInterval = 30000, // Default ping interval: 30 seconds
-    debug = true,
-    enabled = false
-}: {
-    type: 'public' | 'private';
-    channel: string;
-    events?: { [key: string]: (e: any) => any };
-    userId?: number;
-    socketId?: string;
-    pingInterval?: number;
-    debug?: boolean,
-    enabled?:boolean
-}) => {
-    const [echoChannel, setEchoChannel] = useState<Channel | null>(null);
-    const [laravelEchoClient, setLaravelEchoClient] = useState<Echo<"pusher"> | null>(null);
-    const [lastEvent, setLastEvent] = useState<{ event: string, data: any ,channel?:string}>(null);
-    const [isConnected, setIsConnected] = useState(false);
-    const prevChannel = usePrevious(channel);
-    const constants = useContext(ConstantsContext);
-    const pingTimerRef = useRef<number | null>(null);
-
-    const auth: any = useSelector(
-        (state: IDASHAppState<any, any, IDashAutoAdminResourceConfig>) =>
-            state.auth
-    );
-    const [currentUserId, setCurrentUserId] = useState(null);
-
-    console.log('🔍 useLaravelEcho: Hook called with params:', {
-        type,
-        channel,
-        userId,
-        enabled,
-        hasAuth: !!auth?.user,
-        authUserId: auth?.user?.id,
-        authenticated: auth?.authenticated
-    });
-
-    useEffect(() => {
-
-        if (auth.user?.id && typeof auth.user.id === 'number' && auth.user.id !== userId) {
-            setCurrentUserId(auth.user.id);
-        }
-        if (auth?.authenticated === false) {
-            setCurrentUserId(null);
-        }
-
-    }, [auth])
-
-    const isProd = getEnv('APP_ENV') === 'production';
-    //const isProd = false;
-    const log = (message: string, data?: any) => {
-        if (debug) {
-            console.log(`%c📡 ${message}`, 'color: #2196F3; font-weight: bold; font-size: 12px;', data || '');
-        }
-    };
-
-    const logError = (message: string, error?: any) => {
-        if (debug) {
-            console.error(`%c📡 ${message}`, 'color: #f44336; font-weight: bold; font-size: 12px;', error || '');
-        }
-    };
-
-    const pingConnection = useCallback(() => {
-        if (laravelEchoClient && laravelEchoClient.connector && laravelEchoClient.connector.pusher) {
-            try {
-                log('Sending custom ping event...');
-                laravelEchoClient.connector.pusher.send_event('client-ping', {
-                    timestamp: new Date().toISOString()
-                });
-            } catch (error) {
-                logError('Error pinging WebSocket connection:', error);
-            }
-        }
-    }, [laravelEchoClient, debug]);
-
-    // Hash for the client, it has to be like that, because public channel is open parallel to private which requires userid
-    // For now this implementation is constrained to 2 clients, one for public and one for private only. 
-    const getClientId = useCallback(() => {
-        //return `${type}-${userId || 'public'}`;
-        return `${type}-${channel || 'global'}-${userId || 'public'}`;
-    }, [type, userId, channel]);
-
-    const cleanup = useCallback(() => {
-        if (pingTimerRef.current) {
-            window.clearInterval(pingTimerRef.current);
-            pingTimerRef.current = null;
-        }
-        //if (laravelEchoClient) {
-        log('Disconnecting Laravel Echo client...', getClientId());
-        //echoManager.getClient(getClientId()).disconnect();
-        laravelEchoClient && laravelEchoClient.disconnect();
-        //echoManager.getClient(getClientId()).disconnect();
-        log('Setting Laravel Echo client to null...');
-        setLaravelEchoClient(null);
-        log('Setting Echo channel to null...');
-        setEchoChannel(null);
-        log('Clearing current events...');
-        setLastEvent(null);
-        log('Setting connection status to false...');
-        setIsConnected(false);
-        log('Removing client from Echo manager...');
-        //echoManager.removeClient(getClientId())
-        //}
-    }, [laravelEchoClient]);
-
-    useEffect(() => {
-        
-        if(!enabled) {
-            console.log('🔍 useLaravelEcho: Hook disabled, skipping WebSocket setup');
-            return;
-        }
-
-        if (!(JSON.parse(getEnv('APP_SOCKETS_ENABLED')))) {
-            console.log('🔍 useLaravelEcho: WebSockets disabled by APP_SOCKETS_ENABLED env var');
-            return;
-        }
-        
-        /*
-        if (!userId) {
-            return
-        }
-
-        if (type === 'private' && !userId) {
-            console.log('[WebSocket] Skipping private channel - no userId specified');
-            return;
-        }
-        */
-
-        const clientId = getClientId();
-
-        console.log('🔍 useLaravelEcho: Setting up WebSocket connection...', {
-            clientId,
-            type,
-            channel,
-            userId,
-            enabled
-        });
-
-        // For private channels, we need a userId for authentication
-        if (type === 'private' && !userId) {
-            console.log('🔍 useLaravelEcho: Skipping private channel setup - no userId provided');
-            return;
-        }
-
-        if (type === 'public' || (type === 'private' && userId)) {
-
-
-            if (echoManager.clients.has(clientId)) {
-                const existingClient = echoManager.getClient(clientId);
-
-                console.log('🔍 useLaravelEcho: Using existing Echo client:', clientId);
-                setLaravelEchoClient(existingClient);
-                return;
-            }
-
-            const token = userId ? dashStorage.getItem('token') : null;
-
-            const authConfig = token ? {
-                headers: {
-                    Authorization: `Bearer ${token}`,
-                    Accept: 'application/json',
-                    'X-Requested-With': 'XMLHttpRequest',
-                }
-            } : undefined;
-
-       
-           try {
-    const socketHostEnv = getEnv('APP_SOCKETS_HOST');
-    const socketScheme = getEnv('APP_SOCKETS_SCHEME')?.toLowerCase();
-    const isSSL = socketScheme === 'https';
-
-    // Use host from env or fallback to window.location.hostname
-    const wsHost = socketHostEnv || window.location.hostname;
-
-    const portEnv = getEnv('APP_SOCKETS_PORT');
-    const completeConfig = {
-        broadcaster: 'pusher',
-        key: getEnv('APP_SOCKETS_KEY') || 'dash',
-        wsHost,
-        ...(portEnv && portEnv !== '' ? { wsPort: portEnv } : {}),
-        secure: isSSL,
-        forceTLS: isSSL,
-        encrypted: isSSL,
-        useTLS: isSSL,
-        disableStats: !isSSL,
-        enabledTransports: isSSL ? ['wss', 'ws'] : ['ws'],
-        disableCluster: true,
-        cluster: 'mt1',
-        logToConsole: debug,
-        activityTimeout: 120000,
-        pongTimeout: 30000,
-    };
-                console.log('🔍 useLaravelEcho: WebSocket config:', completeConfig);
-
-                if (authConfig) {
-                    const baseUrl = getEnv('APP_BACKEND_URL') || window.location.origin;
-                    const authPath = getEnv('APP_SOCKETS_AUTH_ENDPOINT') || '/api/ws/auth';
-                    const formattedBaseUrl = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
-                    const formattedAuthPath = authPath.startsWith('/') ? authPath.substring(1) : authPath;
-                    const authEndpoint = `${formattedBaseUrl}${formattedAuthPath}`;
-
-                    console.log('🔍 useLaravelEcho: Using auth endpoint:', authEndpoint);
-                    completeConfig['authEndpoint'] = authEndpoint;
-                    completeConfig['auth'] = authConfig;
-                }
-
-                console.log('🔍 useLaravelEcho: Initializing Echo client with config:', completeConfig);
-                const echo = new Echo(completeConfig as EchoOptions<"pusher">);
-                if (echo.connector && echo.connector.pusher) {
-                    echo.connector.pusher.bind_global((eventName, data) => {
-                        log(`Global event received: ${eventName}`, data);
-                        setLastEvent({ event: eventName, data });
-                        /*if (typeof events[eventName] === 'function') {
-                            events[eventName](data);
-                        }*/
-                    });
-
-                    echo.connector.pusher.connection.bind('connected', () => {
-                        log('Connected to Pusher!');
-                        setIsConnected(true);
-                        dashStorage.setItem('socketConnectionState', 'true');
-
-                        if (pingTimerRef.current) {
-                            window.clearInterval(pingTimerRef.current);
-                        }
-                        pingTimerRef.current = window.setInterval(pingConnection, pingInterval);
-                    });
-
-                    echo.connector.pusher.connection.bind('disconnected', () => {
-                        log('Disconnected from Pusher');
-                        setIsConnected(false);
-
-                        if (pingTimerRef.current) {
-                            window.clearInterval(pingTimerRef.current);
-                            pingTimerRef.current = null;
-                        }
-                    });
-
-                    echo.connector.pusher.connection.bind('error', (err: any) => {
-                        logError('Pusher connection error:', err);
-                        setIsConnected(false);
-                    });
-                }
-
-                log('Setting Echo client', clientId);
-                echoManager.setClient(clientId, echo);
-                setLaravelEchoClient(echo);
-            } catch (error) {
-            
-                logError('Error initializing Echo client:', error);
-                cleanup();
-            }
-        }
-        return () => {
-            if (debug) {
-                console.log("%c📡 Socket listener unmounted!", "color: #ff6b6b; font-weight: bold;");
-                cleanup();
-            }
-            }
-        
-    }, [userId, enabled, channel]);
-
-
-
-
-    useEffect(() => {
-        if (!laravelEchoClient || !channel) return;
-        if (type === 'private' && !userId) return;
-
-        log(`Attempting to subscribe to ${type} channel: ${channel}`);
-
-        const isSubscribed = laravelEchoClient.connector.channels[channel.includes('.') ? `private-${channel}` : channel] !== undefined;
-        if (isSubscribed) {
-            log(`Skipping, already suscribed`);
-            return;
-        }
-
-        if (echoChannel && prevChannel && channel !== prevChannel) {
-            log(`Leaving previous channel: ${prevChannel}`);
-            laravelEchoClient.leaveChannel(prevChannel);
-            setEchoChannel(null);
-            //setCurrentEvents([]);
-        }
-
-        if (!echoChannel || channel !== prevChannel) {
-            try {
-                let newChannel;
-
-                if (type === 'private') {
-                    log(`Subscribing to private channel: ${channel}`);
-                    newChannel = laravelEchoClient.private(channel.replace('{userId}', userId.toString()));
-                } else {
-                    log(`Subscribing to public channel: ${channel}`);
-                    newChannel = laravelEchoClient.channel(channel);
-                }
-
-                setEchoChannel(newChannel);
-                log('Channel subscription successful:', newChannel);
-            } catch (error) {
-                logError(`Error subscribing to ${type} channel ${channel}:`, error);
-            }
-        }
-
-        return () => {
-            if (laravelEchoClient && channel) {
-                laravelEchoClient.leaveChannel(channel);
-            }
-        };
-    }, [laravelEchoClient, channel, type, userId, prevChannel, debug]);
-
-    useEffect(() => {
-        if (!laravelEchoClient || !isConnected) return;
-
-        const handleVisibilityChange = () => {
-            if (document.visibilityState === 'visible') {
-                if (laravelEchoClient.connector &&
-                    laravelEchoClient.connector.pusher &&
-                    laravelEchoClient.connector.pusher.connection.state !== 'connected') {
-                    log('Tab is visible again, reconnecting...');
-                    laravelEchoClient.connector.pusher.connect();
-                }
-            }
-        };
-
-        const handleOnline = () => {
-            log('Browser is online, reconnecting...');
-            if (laravelEchoClient.connector && laravelEchoClient.connector.pusher) {
-                laravelEchoClient.connector.pusher.connect();
-            }
-        };
-
-        document.addEventListener('visibilitychange', handleVisibilityChange);
-        window.addEventListener('online', handleOnline);
-
-        return () => {
-            document.removeEventListener('visibilitychange', handleVisibilityChange);
-            window.removeEventListener('online', handleOnline);
-        };
-    }, [laravelEchoClient, isConnected, debug]);
-
-    const addListener = useCallback((eventName: string, callback: (data: any) => void) => {
-      
-        if (!echoChannel) return;
-        console.log(`Adding listener for event: ${eventName}`);
-        //const formattedEventName = eventName.startsWith('.') ? eventName : `.${eventName}`;
-        const formattedEventName = eventName;
-        echoChannel.listen(formattedEventName, callback);
-        //setCurrentEvents(prev => [...prev, eventName]);
-    }, [echoChannel]);
-
-    const removeListener = useCallback((eventName: string) => {
-      
-        if (!echoChannel) return;
-        console.log(`Adding listener for event: ${eventName}`);
-        //const formattedEventName = eventName.startsWith('.') ? eventName : `.${eventName}`;
-        const formattedEventName = eventName;
-        echoChannel.stopListening(formattedEventName);
-        //setCurrentEvents(prev => prev.filter(e => e !== eventName));
-    }, [echoChannel]);
-
-    return {
-        echoChannel,
-        isConnected,
-        lastEvent,
-        ping: pingConnection,
-        addListener,
-        removeListener
-    };
-};
-
-export default useLaravelEcho;

package/src/contexts/dictionary/DictionaryContext.tsx

@@ -1,94 +0,0 @@
-
-import React, { FC } from 'react';
-
-/**
- * Defines the interface for the DictionaryContext, which provides access to a dictionary of key-value pairs and a set of replacements to be applied to strings.
- *
- * @interface IDictionaryContext
- * @property {{[key: string]: any}} dictionary - An object containing the dictionary of key-value pairs.
- * @property {{[key: string]: any}} replacements - An object containing the replacements to be applied to strings.
- * @property {function(string, boolean?): string} get - A function that retrieves the value for a given key from the dictionary, optionally applying the replacements.
- */
-export interface IDictionaryContext {
-	dictionary: { [key: string]: any };
-	replacements:  { [key: string]: any };
-	get: (key: string, replace?:boolean) => string;
-}
-
-/**
- * Recursively replaces all occurrences of keys in the provided `dictionary` object with their corresponding values in the given `string`.
- *
- * @param string - The input string to perform the replacements on.
- * @param dictionary - An object containing key-value pairs to use for the replacements.
- * @returns The input string with all replacements made.
- */
-function replaceDictValues(string: string, dictionary: { [key: string]: string }): string {
-	for (const [key, value] of Object.entries(dictionary)) {
-		if (typeof value === 'object' && value !== null) {
-			string = replaceDictValues(string, value);
-		} else {
-			string = Array.isArray(string) ? string.join(', ').replace(key, value) : typeof string === 'string' ? string.replace(key, value) : string;
-		}
-	}
-
-	return string;
-}
-
-
-/**
- * Provides a context for accessing a dictionary of key-value pairs and a set of replacements to be applied to strings.
- *
- * The `DictionaryContext` exposes an interface with the following properties:
- * - `dictionary`: An object containing the dictionary of key-value pairs.
- * - `replacements`: An object containing the replacements to be applied to strings.
- * - `get`: A function that retrieves the value for a given key from the dictionary, optionally applying the replacements.
- */
-export const DictionaryContext = React.createContext<IDictionaryContext>({
-	dictionary: null,
-	replacements: null,
-	get: (key: string/* , replace?:boolean*/) => {
-		return key; /*return constants.dict[key] ? constants.dict[key] : key*/
-	},
-});
-
-/**
- * Provides a `DictionaryContext.Provider` component that wraps child components and provides access to a dictionary of key-value pairs and a set of replacements to be applied to strings.
- *
- * The `DictionaryProvider` component accepts the following props:
- * - `dictionary`: An object containing the dictionary of key-value pairs.
- * - `replacements`: An object containing the replacements to be applied to strings.
- * - `children`: The React nodes to be wrapped by the `DictionaryContext.Provider`.
- *
- * The `DictionaryContext.Provider` exposes the following values:
- * - `dictionary`: The dictionary of key-value pairs.
- * - `replacements`: The replacements to be applied to strings.
- * - `get`: A function that retrieves the value for a given key from the dictionary, optionally applying the replacements.
- *
- * @returns The DictionaryProvider component
- */
-const DictionaryProvider: FC<{
-	dictionary: { [key: string]: any };
-	replacements: { [key: string]: any };
-	children: React.ReactNode;
-}> = ({ dictionary, replacements, children }) => {
-	
-	return (
-		<DictionaryContext.Provider
-			value={{
-				dictionary,
-				replacements,
-				get: (key: string, replace?:boolean) => {
-					let str = key;
-					if (replace && replacements) {
-						str = replaceDictValues(str, replacements);
-					}
-					return dictionary[str] ? dictionary[str] : str;
-				},
-			}}
-		>
-			{children}
-		</DictionaryContext.Provider>
-	);
-};
-
-export { DictionaryContext as default, DictionaryProvider };

package/src/declarations.d.ts

@@ -1,17 +0,0 @@
-declare module '*.png';
-declare module '*.jpg';
-declare module '*.jpeg';
-declare module '*.svg';
-declare module '*.gif';
-
-interface Window {
-    Pusher: any;
-    Echo: any;
-    io: any;
-    Laravel: any;
-}
-
-declare var Vue: any;
-declare var axios: any;
-declare var jQuery: any;
-declare var Turbo: any;

package/src/default-theme/DASHAppProviders.tsx

@@ -1,117 +0,0 @@
-import * as React from 'react';
-import { ToastContainer } from 'react-toastify';
-import { DialogServiceProvider } from 'dash-dialog';
-import DASHModal from 'dash-modal';
-import { LaravelEchoProvider } from '../contexts/com/LaravelEchoContext';
-import {DASHAppConstants} from 'dash-constants';
-import { CacheInvalidatorContextProvider } from '../utils/cache/CacheInvalidatorContext';
-// Direct imports to avoid circular barrel imports
-import CacheInvalidatorListenerComponent from '../utils/cache/CacheInvalidatorListenerComponent';
-import DASHGlobalErrorHandler from '../components/misc/DASHGlobalErrorHandler';
-import DashQueryClientContext from '../contexts/DashQueryClientContext';
-import { FCMProvider } from '../contexts/com/FCMContext';
-import Redirect from '../components/custom/Redirect';
-import WSMessagesManager from '../hooks/notifications/WSMessagesManager';
-import { Theme } from '@mui/material';
-import { LocalizationProvider, LocalizationProviderProps } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { AuthContextProvider } from '../contexts/auth';
-import { Provider } from 'react-redux';
-import { IDASHAppState } from 'dash-admin-state';
-import { Store } from 'redux';
-import { DashThemeProvider } from './DashThemeContext';
-import { ComponentRegistryProvider, IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
-import { QueryClient } from '@tanstack/react-query';
-import { Persister } from '@tanstack/react-query-persist-client';
-import { I18nBridgeProvider, useI18nBridge } from '../contexts/I18nBridgeContext';
-
-export interface IDomainAppProviders<U, A, R> extends React.PropsWithChildren {
-    wsMessagesManager?: typeof WSMessagesManager
-    theme?: Partial<Theme> | ((outerTheme: Partial<Theme>) => Partial<Theme>)
-    dateAdapter?: LocalizationProviderProps<any>["dateAdapter"]
-    store?: Store<IDASHAppState<U, A, R>>
-    extendedThemeOptions?: any
-    dashAutoAdminComponents?: Record<string, React.FC<IDashAutoAdminCustomFieldComponent>>
-    queryClient?: any
-    /** Optional persister for localStorage query caching */
-    queryPersister?: Persister
-    CustomEchoProvider?: React.ComponentType<any>
-}
-
-/**
- * BridgedDASHModal
- * 
- * A wrapper for DASHModal that uses the I18nBridgeContext to provide
- * translations when rendered outside of the React Admin context.
- */
-const BridgedDASHModal = (props: any) => {
-    const { i18nProvider, locale } = useI18nBridge();
-    
-    const translate = React.useCallback((key: string, options?: any) => {
-        if (!i18nProvider) return key;
-        try {
-            return i18nProvider.translate(key, options);
-        } catch (e) {
-            return key;
-        }
-    }, [i18nProvider, locale]);
-
-    const confirmText = props.confirmText === undefined ? translate('dash.action.continue') : props.confirmText;
-    const cancelText = props.cancelText === undefined ? translate('dash.action.cancel') : props.cancelText;
-    
-    return <DASHModal {...props} confirmText={confirmText} cancelText={cancelText} />;
-};
-
-const DomainAppProviders = <U, A, R>({
-    wsMessagesManager,
-    dateAdapter,
-    store,
-    children,
-    extendedThemeOptions,
-    dashAutoAdminComponents,
-    queryClient,
-
-    queryPersister,
-    CustomEchoProvider
-}: IDomainAppProviders<U, A, R>): React.JSX.Element => {
-
-    const content = (
-       <I18nBridgeProvider>
-       <DashThemeProvider extendedOptions={extendedThemeOptions}>
-        <LocalizationProvider dateAdapter={dateAdapter || AdapterDayjs}>
-            <AuthContextProvider>
-                <DashQueryClientContext queryClient={queryClient} persister={queryPersister}>
-                <ComponentRegistryProvider customComponents={dashAutoAdminComponents || {}}>
-                    <DialogServiceProvider
-                        component={BridgedDASHModal}
-                        componentProps={{ sound: DASHAppConstants.system.UI_SOUNDS }}
-
-                    ><FCMProvider>
-                        {/* Use CustomEchoProvider if provided, otherwise default to LaravelEchoProvider */}
-                        {(() => {
-                            const EchoProvider = CustomEchoProvider || LaravelEchoProvider;
-                            return (
-                                <EchoProvider manager={wsMessagesManager || WSMessagesManager}>
-                                    <CacheInvalidatorContextProvider>
-                                        <CacheInvalidatorListenerComponent />
-                                        <ToastContainer style={{ width: '520px' }} />
-                                        <DASHGlobalErrorHandler />
-                                        {children}
-                                    </CacheInvalidatorContextProvider>
-                                </EchoProvider>
-                            );
-                        })()}
-                    </FCMProvider>
-                    </DialogServiceProvider>
-                </ComponentRegistryProvider>
-                </DashQueryClientContext>
-            </AuthContextProvider>
-            </LocalizationProvider>
-         </DashThemeProvider>
-         </I18nBridgeProvider>
-    );
-
-    return store ? <Provider store={store}>{content}</Provider> : content;
-};
-
-export default DomainAppProviders;