GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-27 15:22:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor modalcontroller

Browse Source
This commit is contained in:
AykutSarac 2024-12-08 01:02:26 +03:00
parent ca36a4ba44
commit a838896eaa
No known key found for this signature in database
11 changed files with 63 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/features/editor/ModalController.tsx
View File

@ -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;

2
src/features/editor/Toolbar/FileMenu.tsx
View File

@ -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}>

2
src/features/editor/Toolbar/OptionsMenu.tsx
View File

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

16
src/features/editor/Toolbar/ToolsMenu.tsx
View File

@ -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");
}}
>

7
src/features/editor/Toolbar/index.tsx
View File

@ -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 />

2
src/features/editor/views/GraphView/CustomNode/index.tsx
View File

@ -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]
);

36
src/features/modals/ModalController.tsx Normal file
View File

@ -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;

2
src/features/modals/NodeModal/index.tsx
View File

@ -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} />}

13
src/features/modals/index.ts
View File

@ -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 };

2
src/pages/editor.tsx
View File

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

27
src/store/useModal.ts
View File

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