refactor modalcontroller

src/features/editor/ModalController.tsx

@@ -1,37 +0,0 @@
-import React from "react";
-import type { ModalProps } from "@mantine/core";
-import * as Modals from "src/features/modals";
-import type { Modal } from "src/features/modals";
-import useModal from "src/store/useModal";
-
-type ModalComponent = { key: Modal; component: React.FC<ModalProps> };
-
-const modalComponents: ModalComponent[] = [
-  { key: "import", component: Modals.ImportModal },
-  { key: "download", component: Modals.DownloadModal },
-  { key: "upgrade", component: Modals.UpgradeModal },
-  { key: "jwt", component: Modals.JWTModal },
-  { key: "node", component: Modals.NodeModal },
-  { key: "schema", component: Modals.SchemaModal },
-  { key: "jq", component: Modals.JQModal },
-  { key: "type", component: Modals.TypeModal },
-  { key: "jpath", component: Modals.JPathModal },
-];
-
-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/editor/Toolbar/FileMenu.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/OptionsMenu.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/ToolsMenu.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/index.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/views/GraphView/CustomNode/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/modals/ModalController.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/NodeModal/index.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/index.ts

@@ -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/pages/editor.tsx

@@ -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({

src/store/useModal.ts

@@ -1,29 +1,20 @@
 import { create } from "zustand";
-import type { Modal } from "src/features/modals";
+import { type Modal, modalComponents } from "src/features/modals/ModalController";
-
-type ModalState = {
-  [key in Modal]: boolean;
-};
 
 interface ModalActions {
-  setVisible: (modal: Modal) => (visible: boolean) => void;
+  setVisible: (name: Modal, open: boolean) => void;
 }
 
-const initialStates: ModalState = {
+type ModalState = Record<Modal, boolean>;
-  download: false,
+
-  import: false,
+const initialStates: ModalState = modalComponents.reduce(
-  node: false,
+  (acc, { key }) => ({ ...acc, [key]: false }),
-  upgrade: false,
+  {} as ModalState
-  jwt: false,
+);
-  schema: false,
-  jq: false,
-  type: false,
-  jpath: false,
-};
 
 const useModal = create<ModalState & ModalActions>()(set => ({
   ...initialStates,
-  setVisible: modal => visible => set({ [modal]: visible }),
+  setVisible: (name, open) => set({ [name]: open }),
 }));
 
 export default useModal;