File size: 1,682 Bytes
f909d7c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import React from "react";
import { ModalProps } from "@mantine/core";
import * as Modals from "src/containers/Modals";
import { Modal } from "src/containers/Modals";
import useModal from "src/store/useModal";
import { EditorWrapper } from "../EditorWrapper";

type ModalComponent = { key: Modal; component: React.FC<ModalProps> };

const modalComponents: ModalComponent[] = [
  { key: "import", component: Modals.ImportModal },
  { key: "clear", component: Modals.ClearModal },
  { key: "download", component: Modals.DownloadModal },
  { key: "cloud", component: Modals.CloudModal },
  { key: "account", component: Modals.AccountModal },
  { key: "premium", component: Modals.PremiumModal },
  { key: "login", component: Modals.LoginModal },
  { key: "share", component: Modals.ShareModal },
  { key: "jwt", component: Modals.JWTModal },
  { key: "node", component: Modals.NodeModal },
  { key: "schema", component: Modals.SchemaModal },
  { key: "cancelPremium", component: Modals.CancelPremiumModal },
  { key: "review", component: Modals.ReviewModal },
  { key: "jq", component: Modals.JQModal },
  { key: "type", component: Modals.TypeModal },
];

const ModalController = () => {
  const setVisible = useModal(state => state.setVisible);
  const modalStates = useModal(state => modalComponents.map(modal => state[modal.key]));

  return (
    <EditorWrapper>
      {modalComponents.map(({ key, component }, index) => {
        const ModalComponent = component;
        const opened = modalStates[index];

        return <ModalComponent key={key} opened={opened} onClose={() => setVisible(key)(false)} />;
      })}
    </EditorWrapper>
  );
};

export default ModalController;