front/dev

FRONT/DEV/src/store/modalContext.tsx

@@ -0,0 +1,63 @@
+import { createContext, useContext, useState, ReactNode, useCallback } from 'react';
+import { useEffect } from 'react';
+
+interface ModalContextType {
+  isOpen: boolean;
+  modalType: string;
+  modalData: any;
+  openModal: (modalType: string, modalData?: any) => void;
+  closeModal: () => void;
+  closeLoader: () => void;
+}
+
+const ModalContext = createContext<ModalContextType>({
+  isOpen: false,
+  modalType: '',
+  modalData: null,
+  openModal: () => {},
+  closeModal: () => {},
+  closeLoader: () => {},
+});
+
+export const useModalContext = () => useContext(ModalContext);
+
+export function ModalProvider({ children }: { children: ReactNode }) {
+  const [isOpen, setOpen] = useState(false);
+  const [modalType, setType] = useState('');
+  const [modalData, setData] = useState(null);
+
+  const openModal = (type: string, data?: any) => {
+    setOpen(true);
+    setType(type);
+    setData(data);
+  };
+
+  const closeModal = useCallback(() => {
+    setOpen(false);
+    setType('');
+    setData(null);
+
+    window.location.reload()
+  }, []);
+
+  const closeLoader = useCallback(() => {
+    setOpen(false);
+    setType('');
+    setData(null);
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    }
+    else {
+      document.body.style.overflow = 'auto';
+    }
+  }, [isOpen])
+
+  return (
+    <ModalContext.Provider value={{ isOpen, modalType, modalData, openModal, closeModal, closeLoader }}>
+      {children}
+    </ModalContext.Provider>
+  );
+}