@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/hooks/useFormPersistance.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useCallback, useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useParams } from 'react-router-dom';
+import { dashStorage } from 'dash-utils';
+interface FormPersistenceOptions {
+    persistState?: boolean;
+    storageKey?: string;
+    debounceMs?: number;
+    excludeFields?: string[];
+}
+
+export const useFormPersistence = (options: FormPersistenceOptions = {}) => {
+    const {
+        persistState = false,
+        storageKey,
+        debounceMs = 1000,
+        excludeFields = []
+    } = options;
+
+    const { watch, setValue, getValues } = useFormContext();
+    const { id: tabId } = useParams();
+    const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
+    
+    // Generate storage key
+    const finalStorageKey = storageKey || `tab-form-${tabId}`;
+
+    // Save form data to localStorage
+    const saveFormData = useCallback((data: any) => {
+        if (!persistState) return;
+        
+        try {
+            // Filter out excluded fields
+            const filteredData = { ...data };
+            excludeFields.forEach(field => {
+                delete filteredData[field];
+            });
+
+            const persistData = {
+                formData: filteredData,
+                timestamp: Date.now(),
+                tabId
+            };
+
+            dashStorage.setItem(finalStorageKey, JSON.stringify(persistData));
+            console.log('📦 Form data persisted:', finalStorageKey);
+        } catch (error) {
+            console.error('Failed to persist form data:', error);
+        }
+    }, [persistState, finalStorageKey, excludeFields, tabId]);
+
+    // Load form data from localStorage
+    const loadFormData = useCallback(() => {
+        if (!persistState) return null;
+
+        try {
+            const stored = dashStorage.getItem(finalStorageKey);
+            if (!stored) return null;
+
+            const persistData = JSON.parse(stored);
+            
+            // Check if data is not too old (optional: 24 hours)
+            const maxAge = 24 * 60 * 60 * 1000; // 24 hours
+            if (Date.now() - persistData.timestamp > maxAge) {
+                dashStorage.removeItem(finalStorageKey);
+                return null;
+            }
+
+            console.log('📦 Form data loaded from storage:', finalStorageKey);
+            return persistData.formData;
+        } catch (error) {
+            console.error('Failed to load form data:', error);
+            return null;
+        }
+    }, [persistState, finalStorageKey]);
+
+    // Restore form data
+    const restoreFormData = useCallback(() => {
+        const savedData = loadFormData();
+        if (!savedData) return false;
+
+        try {
+            // Restore each field
+            Object.keys(savedData).forEach(fieldName => {
+                setValue(fieldName, savedData[fieldName], {
+                    shouldDirty: true,
+                    shouldTouch: true,
+                    shouldValidate: false
+                });
+            });
+
+            console.log('✅ Form data restored successfully');
+            return true;
+        } catch (error) {
+            console.error('Failed to restore form data:', error);
+            return false;
+        }
+    }, [loadFormData, setValue]);
+
+    // Clear persisted data
+    const clearPersistedData = useCallback(() => {
+        try {
+            dashStorage.removeItem(finalStorageKey);
+            console.log('🗑️ Persisted form data cleared:', finalStorageKey);
+        } catch (error) {
+            console.error('Failed to clear persisted data:', error);
+        }
+    }, [finalStorageKey]);
+
+    // Watch for form changes and save with debouncing
+    useEffect(() => {
+        if (!persistState) return;
+
+        const subscription = watch((data) => {
+            // Clear existing timeout
+            if (debounceRef.current) {
+                clearTimeout(debounceRef.current);
+            }
+
+            // Set new timeout
+            debounceRef.current = setTimeout(() => {
+                saveFormData(data);
+            }, debounceMs);
+        });
+
+        return () => {
+            subscription.unsubscribe();
+            if (debounceRef.current) {
+                clearTimeout(debounceRef.current);
+            }
+        };
+    }, [watch, persistState, saveFormData, debounceMs]);
+
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (debounceRef.current) {
+                clearTimeout(debounceRef.current);
+            }
+        };
+    }, []);
+
+    return {
+        restoreFormData,
+        clearPersistedData,
+        loadFormData,
+        saveFormData: () => saveFormData(getValues())
+    };
+};
+
+export default useFormPersistence;

package/src/hooks/useGlobalErrorMediator.tsx

@@ -0,0 +1,43 @@
+import { random } from 'lodash';
+import React, { useState } from 'react';
+import { dashStorage } from 'dash-utils';
+const useGlobalErrorMediator = () => {
+	const [error, setError] = React.useState<any>(null);
+	const errorChangeHandler = React.useCallback((e) => {
+		if (dashStorage.getItem('lastGlobalError') === JSON.stringify(e.data)) {
+			return;
+		}
+
+		setError(e.data);
+		dashStorage.setItem('lastGlobalError', JSON.stringify(e.data));
+
+		setTimeout(() => {
+			dashStorage.setItem('lastGlobalError', JSON.stringify({}));
+		}, 1000);
+	}, []);
+
+	React.useEffect(() => {
+		dashStorage.setItem('lastGlobalError', JSON.stringify({}));
+        
+		window.addEventListener('GlobalError', errorChangeHandler);
+		return () => {
+			dashStorage.setItem('lastGlobalError', JSON.stringify({}));
+			window.removeEventListener('GlobalError', errorChangeHandler);
+		};
+	}, []);
+
+	const _update = React.useCallback(
+		(newError) => {
+			window.dispatchEvent(new MessageEvent('GlobalError', { data: {error:newError} }));
+		},
+		[error],
+	);
+
+	const sendError = (error: any) => {
+		_update(error);
+	};
+
+	return { error, sendError };
+};
+
+export default useGlobalErrorMediator;

package/src/hooks/useGlobalLoaderMgr.tsx

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+const useGlobalLoaderMgr = () => {
+	const useLoader = useState<boolean>(false);
+	React.useEffect(() => {
+ 
+		window.addEventListener('dash-global-loader', (e: any) => {
+            
+			return useLoader[1](e.data)
+        });
+		return () => {
+			window.removeEventListener('dash-global-loader', (e: any) =>
+				useLoader[1](e.data),
+			);
+		};
+	}, []);
+	return useLoader;
+};
+
+export default useGlobalLoaderMgr;

package/src/hooks/useHash.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const useHash = () => {
+	const [hash, setHash] = React.useState(() => window.location.hash);
+
+	const hashChangeHandler = React.useCallback(() => {
+		setHash(window.location.hash);
+	}, []);
+
+	React.useEffect(() => {
+		window.addEventListener('hashchange', hashChangeHandler);
+		return () => {
+			window.removeEventListener('hashchange', hashChangeHandler);
+		};
+	}, []);
+
+	const updateHash = React.useCallback(
+		(newHash) => {
+			/*if (newHash !== hash)*/ window.location.hash = newHash;
+		},
+		[hash],
+	);
+
+	return [hash, updateHash];
+};
+
+export default useHash;

package/src/hooks/useLocalStorage.tsx

@@ -0,0 +1,196 @@
+import { useCallback, useEffect, useState, useMemo } from 'react';
+import { dashStorage } from 'dash-utils';
+const isBrowser = typeof window !== 'undefined';
+
+const isLocalStorageAvailable = () => {
+  if (!isBrowser) {
+    return false;
+  }
+  const test = `test-${Date.now()}`;
+  try {
+    dashStorage.setItem(test, test);
+    dashStorage.removeItem(test);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+const useLocalStorage = (key, initialValue = '') => {
+  const available = isLocalStorageAvailable();
+  const getValueFromLocalStorage = useCallback(() => {
+    try {
+      if (!available) {
+        return initialValue;
+      }
+      const item = dashStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      return initialValue;
+    }
+  }, [available, initialValue, key]);
+
+  const _initialValue = getValueFromLocalStorage();
+
+  const [storedValue, setStoredValue] = useState(_initialValue);
+
+  useEffect(() => {
+    if (available) {
+      const value = getValueFromLocalStorage();
+      // This should not be necessary, though wwhen local storage available, get the value from localstorage and set to state. 
+      setStoredValue(value);
+    }
+  }, [available]);
+
+  // Listen to localStorage change to apply it
+  const changeHandler = useCallback(
+    (e) => {
+
+      const { key: changeKey, newValue } = e;
+      if (key === changeKey) {
+
+        setStoredValue(JSON.parse(newValue));
+      }
+    },
+    [key],
+  );
+
+  // Listen changes
+  useEffect(() => {
+    if (available) {
+      window.addEventListener('storage', changeHandler);
+      return () => {
+        window.removeEventListener('storage', changeHandler);
+      };
+    }
+  }, [available]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const setValue = (value) => {
+    if (!available) {
+      return false;
+    }
+
+    const valueToStore =
+      value instanceof Function ? value(storedValue) : value;
+    //if (valueToStore !== storedValue) {
+
+    dashStorage.setItem(key, JSON.stringify(valueToStore));
+
+    setStoredValue(valueToStore);
+    //}
+  };
+  // Build the output
+  /*return useMemo(() => {
+    const _storedValue = getValueFromLocalStorage();
+    return [storedValue, setValue];
+  }, [storedValue, key]);*/
+  return [storedValue, setValue];
+};
+
+export default useLocalStorage;
+
+
+
+/*
+import { useCallback, useEffect, useState } from 'react';
+
+function useLocalStorage<T = any>(
+  key: string,
+  initialValue?: T
+): [T, (value: T | ((val: T) => T)) => void, () => void] {
+  // Check if we're running in a browser environment
+  const isBrowser = typeof window !== 'undefined';
+
+  // Function to safely parse JSON from localStorage
+  const getStoredValue = useCallback((): T => {
+    if (!isBrowser) {
+      return initialValue as T;
+    }
+
+    try {
+      const item = dashStorage.getItem(key);
+
+      // Return parsed JSON or initialValue if no item exists
+      if (!item) {
+        return initialValue as T;
+      }
+
+      try {
+        return JSON.parse(item);
+      } catch (parseError) {
+        console.error(`Error parsing localStorage key "${key}":`, parseError);
+        return initialValue as T;
+      }
+    } catch (error) {
+      console.error(`Error reading localStorage key "${key}":`, error);
+      return initialValue as T;
+    }
+  }, [key, initialValue, isBrowser]);
+
+  // State to store our value
+  const [storedValue, setStoredValue] = useState<T>(getStoredValue());
+
+  // Function to update localStorage and state
+  const setValue = useCallback((value: T | ((val: T) => T)) => {
+    if (!isBrowser) {
+      console.warn(`Cannot set localStorage key "${key}" - not in browser environment`);
+      return;
+    }
+
+    try {
+      // Allow value to be a function for setState-like updates
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+
+      // Save to state
+      setStoredValue(valueToStore);
+
+      // Save to localStorage
+      dashStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.error(`Error setting localStorage key "${key}":`, error);
+    }
+  }, [key, storedValue, isBrowser]);
+
+  // Function to remove the item from localStorage
+  const removeValue = useCallback(() => {
+    if (!isBrowser) {
+      return;
+    }
+
+    try {
+      dashStorage.removeItem(key);
+      setStoredValue(initialValue as T);
+    } catch (error) {
+      console.error(`Error removing localStorage key "${key}":`, error);
+    }
+  }, [key, initialValue, isBrowser]);
+
+  // Listen for changes to this localStorage key in other tabs/windows
+  useEffect(() => {
+    if (!isBrowser) {
+      return;
+    }
+
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.key === key && event.newValue !== JSON.stringify(storedValue)) {
+        try {
+          const newValue = event.newValue ? JSON.parse(event.newValue) : initialValue;
+          setStoredValue(newValue as T);
+        } catch (error) {
+          console.error(`Error parsing storage event value for key "${key}":`, error);
+        }
+      }
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, [key, initialValue, storedValue, isBrowser]);
+
+  return [storedValue, setValue, removeValue];
+}
+
+export default useLocalStorage;
+*/

package/src/hooks/usePolyglotTranslation.tsx

@@ -0,0 +1,62 @@
+import { useSelector, useDispatch } from 'react-redux';
+import { useMemo, useCallback } from 'react';
+import Polyglot from 'node-polyglot';
+import { DASH_REDUX_ACTIONS, IDASHAppState } from 'dash-admin-state';
+
+
+/**
+ * Hook to get available locales from Redux settings
+ */
+export const useLocales = ({ locales }: { locales?: { locale: string; name: string }[] } = {}) => {
+    const availableLocales = useSelector((state: IDASHAppState<any,any,any>) => state.settings?.availableLocales);
+    
+    return useMemo(() => {
+        if (locales && locales.length > 0) {
+            return locales;
+        }
+        return availableLocales || [
+            { locale: 'es', name: 'Español', languageId: 'spanish', icon: 'es' },
+            { locale: 'en', name: 'English', languageId: 'english', icon: 'en' },
+        ];
+    }, [locales, availableLocales]);
+};
+
+/**
+ * Hook to get and set current locale using Redux
+ * Returns [currentLocale, setLocaleFunction]
+ */
+export const useLocaleState = (): [string, (locale: string) => void] => {
+    const dispatch = useDispatch();
+    const currentLocale = useSelector((state: IDASHAppState<any,any,any>) => state.settings?.locale || 'es');
+
+    const setLocale = useCallback((newLocale: string) => {
+        // Update Redux state (switchLanguage returns a thunk, so we need to cast dispatch)
+        (dispatch as any)(DASH_REDUX_ACTIONS.switchLanguage(newLocale));
+        
+        // Persist to localStorage
+        localStorage.setItem('dash-user-locale', newLocale);
+    }, [dispatch]);
+
+    return [currentLocale, setLocale];
+};
+
+/**
+ * Hook to get a translation function (similar to useTranslate from react-admin)
+ */
+export const useTranslate = () => {
+    const locale = useSelector((state: IDASHAppState<any,any,any>) => state.settings?.locale || 'es');
+    const translations = useSelector((state: IDASHAppState<any,any,any>) => state.settings?.translations || {});
+
+    return useMemo(() => {
+        const messages = translations[locale] || translations['es'];
+        const polyglot = new Polyglot({
+            phrases: messages,
+            locale,
+            allowMissing: true,
+        });
+
+        return (key: string, options?: any) => {
+            return polyglot.t(key, options);
+        };
+    }, [locale, translations]);
+};

package/src/hooks/usePrevious.tsx

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from 'react';
+const usePrevious = (value) => {
+	const ref = useRef(undefined);
+	useEffect(() => {
+		ref.current = value;
+	});
+	return ref.current;
+};
+export default usePrevious;

package/src/hooks/usePrintSelected.tsx

@@ -0,0 +1,37 @@
+
+import React, { useState } from 'react';
+
+const usePrintSelected = () => {
+	const printSelectedUseState = useState<{
+		selectedIds: number[];
+		filterValues: any;
+	}>(null);
+
+	const sendPrintSelectedEvent = (selectedIds: number[], filterValues: any) => {
+		window.dispatchEvent(
+			new MessageEvent('printSelected', {
+				data: {
+					value: { selectedIds: selectedIds, filterValues: filterValues },
+				},
+			}),
+		);
+	};
+
+	const eventHook = (e: any) => {
+		printSelectedUseState[1](e.data.value);
+	};
+
+	React.useEffect(() => {
+		window.addEventListener('printSelected', eventHook);
+		return () => {
+			window.removeEventListener('printSelected', eventHook);
+		};
+	}, []);
+
+	return {
+		printSelectedUseState: printSelectedUseState,
+		sendPrintSelectedEvent: sendPrintSelectedEvent,
+	};
+};
+
+export default usePrintSelected;

package/src/hooks/useVirtualHash.tsx

@@ -0,0 +1,33 @@
+import { random } from 'lodash';
+import React from 'react';
+
+const useVirtualHash = () => {
+	const [hash, setHash] = React.useState<string>(() => window.location.hash);
+
+	const hashChangeHandler = React.useCallback((e) => {
+		setHash(e.data);
+	}, []);
+
+	React.useEffect(() => {
+		window.addEventListener('virtualhash', hashChangeHandler);
+		return () => {
+			window.removeEventListener('virtualhash', hashChangeHandler);
+		};
+	}, []);
+
+	const _update = React.useCallback(
+		(newHash) => {
+			history.replaceState(null, null, `#${newHash}`);
+			window.dispatchEvent(new MessageEvent('virtualhash', { data: `#${newHash}` }));
+		},
+		[hash],
+	);
+
+	const setVirtualHash = (hash: string) => {
+		_update(hash);
+	};
+
+	return { hash, setVirtualHash };
+};
+
+export default useVirtualHash;

package/src/hooks/window/useWindowSize.tsx

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+
+interface IWindowSize {
+	width: number | undefined;
+	height: number | undefined;
+}
+
+const useWindowSize = (): IWindowSize => {
+	// Initialize state with undefined width/height so server and client renders match
+	// Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+	const [windowSize, setWindowSize] = useState<IWindowSize>({
+		width: undefined,
+		height: undefined,
+	});
+
+	useEffect(() => {
+		// Handler to call on window resize
+		function handleResize() {
+			// Set window width/height to state
+			setWindowSize({
+				width: window.innerWidth,
+				height: window.innerHeight,
+			});
+		}
+		// Add event listener
+		window.addEventListener('resize', handleResize);
+		// Call handler right away so state gets updated with initial window size
+		handleResize();
+		// Remove event listener on cleanup
+		return () => window.removeEventListener('resize', handleResize);
+	}, []); // Empty array ensures that effect is only run on mount
+
+	return windowSize;
+};
+
+export default useWindowSize;