refactor modalcontroller

Author: AykutSarac

src/features/editor/ModalController.tsx

@@ -33,7 +33,7 @@ export const FileMenu = () => {
         </StyledToolElement>
       </Menu.Target>
       <Menu.Dropdown>
-        <Menu.Item fz={12} onClick={() => setVisible("import")(true)}>
+        <Menu.Item fz={12} onClick={() => setVisible("ImportModal", true)}>
           Import
         </Menu.Item>
         <Menu.Item fz={12} onClick={handleSave}>

src/features/editor/Toolbar/FileMenu.tsx

@@ -91,7 +91,7 @@ export const OptionsMenu = () => {
         <Menu.Item
           closeMenuOnClick
           leftSection={<VscLock />}
-          onClick={() => setVisible("upgrade")(true)}
+          onClick={() => setVisible("UpgradeModal", true)}
         >
           <Text size="xs">Customize Graph Colors</Text>
         </Menu.Item>

src/features/editor/Toolbar/OptionsMenu.tsx

@@ -60,7 +60,7 @@ export const ToolsMenu = () => {
           fz={12}
           leftSection={<VscSearchFuzzy />}
           onClick={() => {
-            setVisible("jq")(true);
+            setVisible("JQModal", true);
             gaEvent("open_jq_modal");
           }}
         >
@@ -70,7 +70,7 @@ export const ToolsMenu = () => {
           fz={12}
           leftSection={<VscJson />}
           onClick={() => {
-            setVisible("schema")(true);
+            setVisible("SchemaModal", true);
             gaEvent("open_schema_modal");
           }}
         >
@@ -80,7 +80,7 @@ export const ToolsMenu = () => {
           fz={12}
           leftSection={<MdFilterListAlt />}
           onClick={() => {
-            setVisible("jpath")(true);
+            setVisible("JPathModal", true);
             gaEvent("open_json_path_modal");
           }}
         >
@@ -91,7 +91,7 @@ export const ToolsMenu = () => {
           fz={12}
           leftSection={<SiJsonwebtokens />}
           onClick={() => {
-            setVisible("jwt")(true);
+            setVisible("JWTModal", true);
             gaEvent("open_jwt_modal");
           }}
         >
@@ -101,7 +101,7 @@ export const ToolsMenu = () => {
           fz={12}
           leftSection={<VscGroupByRefType />}
           onClick={() => {
-            setVisible("type")(true);
+            setVisible("TypeModal", true);
             gaEvent("open_type_modal");
           }}
         >
@@ -115,7 +115,7 @@ export const ToolsMenu = () => {
           leftSection={<LuGlobe />}
           rightSection={<VscLock />}
           onClick={() => {
-            setVisible("upgrade")(true);
+            setVisible("UpgradeModal", true);
             gaEvent("rest_client_modal");
           }}
         >
@@ -126,7 +126,7 @@ export const ToolsMenu = () => {
           leftSection={<FaWandMagicSparkles />}
           rightSection={<VscLock />}
           onClick={() => {
-            setVisible("upgrade")(true);
+            setVisible("UpgradeModal", true);
             gaEvent("open_ai_filter_modal");
           }}
         >
@@ -137,7 +137,7 @@ export const ToolsMenu = () => {
           leftSection={<MdCompare />}
           rightSection={<VscLock />}
           onClick={() => {
-            setVisible("upgrade")(true);
+            setVisible("UpgradeModal", true);
             gaEvent("open_compare_data_modal");
           }}
         >

src/features/editor/Toolbar/ToolsMenu.tsx

@@ -90,7 +90,7 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
             size="compact-sm"
             fz="12"
             fw="600"
-            onClick={() => setVisible("upgrade")(true)}
+            onClick={() => setVisible("UpgradeModal", true)}
             leftSection={<LuCrown />}
             mr="6"
           >
@@ -100,7 +100,10 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
         <SearchInput />
         {!isWidget && (
           <>
-            <StyledToolElement title="Save as Image" onClick={() => setVisible("download")(true)}>
+            <StyledToolElement
+              title="Save as Image"
+              onClick={() => setVisible("DownloadModal", true)}
+            >
               <FiDownload size="18" />
             </StyledToolElement>
             <ZoomMenu />

src/features/editor/Toolbar/index.tsx

@@ -27,7 +27,7 @@ const CustomNodeWrapper = (nodeProps: NodeProps<NodeData["data"]>) => {
   const handleNodeClick = React.useCallback(
     (_: React.MouseEvent<SVGGElement, MouseEvent>, data: NodeData) => {
       if (setSelectedNode) setSelectedNode(data);
-      setVisible("node")(true);
+      setVisible("NodeModal", true);
     },
     [setSelectedNode, setVisible]
   );

src/features/editor/views/GraphView/CustomNode/index.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import type { ModalProps } from "@mantine/core";
+import * as ModalComponents from "src/features/modals";
+import useModal from "src/store/useModal";
+
+const modalNames = Object.keys(ModalComponents);
+const modals = Object.freeze(modalNames) as Extract<keyof typeof ModalComponents, string>[];
+
+export type Modal = (typeof modals)[number];
+type ModalComponent = {
+  key: Modal;
+  component: React.FC<ModalProps & any>;
+};
+
+export const modalComponents: ModalComponent[] = modals.map(modal => ({
+  key: modal,
+  component: ModalComponents[modal],
+}));
+
+const ModalController = () => {
+  const setVisible = useModal(state => state.setVisible);
+  const modalStates = useModal(state => modalComponents.map(modal => state[modal.key]));
+
+  return (
+    <>
+      {modalComponents.map(({ key, component }, index) => {
+        const ModalComponent = component;
+        const opened = modalStates[index];
+
+        return <ModalComponent key={key} opened={opened} onClose={() => setVisible(key, false)} />;
+      })}
+    </>
+  );
+};
+
+export default ModalController;

src/features/modals/ModalController.tsx

@@ -35,7 +35,7 @@ export const NodeModal = ({ opened, onClose }: ModalProps) => {
         </Stack>
         <Button
           onClick={() => {
-            setVisible("upgrade")(true);
+            setVisible("UpgradeModal", true);
             gaEvent("click_node_edit");
           }}
           rightSection={<VscLock strokeWidth={0.5} />}

src/features/modals/NodeModal/index.tsx

@@ -7,16 +7,3 @@ export { SchemaModal } from "./SchemaModal";
 export { JQModal } from "./JQModal";
 export { TypeModal } from "./TypeModal";
 export { JPathModal } from "./JPathModal";
-
-type Modal =
-  | "download"
-  | "import"
-  | "node"
-  | "upgrade"
-  | "jwt"
-  | "schema"
-  | "jq"
-  | "type"
-  | "jpath";
-
-export type { Modal };

src/features/modals/index.ts

@@ -17,7 +17,7 @@ import useGraph from "src/features/editor/views/GraphView/stores/useGraph";
 import useConfig from "src/store/useConfig";
 import useFile from "src/store/useFile";
 
-const ModalController = dynamic(() => import("src/features/editor/ModalController"));
+const ModalController = dynamic(() => import("src/features/modals/ModalController"));
 const ExternalMode = dynamic(() => import("src/features/editor/ExternalMode"));
 
 const queryClient = new QueryClient({