create clear json modal

src/components/Sidebar/index.tsx

@@ -19,6 +19,7 @@ import { ConfigActionType } from "src/reducer/reducer";
 import { useConfig } from "src/hocs/config";
 import { useRouter } from "next/router";
 import { ImportModal } from "src/containers/ImportModal";
+import { ClearModal } from "src/containers/ClearModal";
 
 const StyledSidebar = styled.div`
   display: flex;
@@ -103,18 +104,8 @@ function rotateLayout(layout: CanvasDirection) {
 export const Sidebar: React.FC = () => {
   const { json, settings, dispatch } = useConfig();
   const router = useRouter();
-  const [jsonFile, setJsonFile] = React.useState<File | null>(null);
-  const [modalVisible, setModalVisible] = React.useState(false);
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files) setJsonFile(e.target.files?.item(0));
-  };
-
-  const handleClear = () => {
-    dispatch({ type: ConfigActionType.SET_JSON, payload: "{}" });
-    localStorage.removeItem("json");
-    toast.success(`Cleared JSON and removed from memory.`);
-  };
+  const [uploadVisible, setUploadVisible] = React.useState(false);
+  const [clearVisible, setClearVisible] = React.useState(false);
 
   const handleSave = () => {
     localStorage.setItem("json", json);
@@ -126,24 +117,9 @@ export const Sidebar: React.FC = () => {
     toast(`${settings.expand ? "Collapsed" : "Expanded"} nodes.`);
   };
 
-  React.useEffect(() => {
-    if (jsonFile) {
-      const reader = new FileReader();
-
-      reader.readAsText(jsonFile, "UTF-8");
-      reader.onload = function (data) {
-        dispatch({
-          type: ConfigActionType.SET_JSON,
-          payload: data.target?.result as string,
-        });
-      };
-    }
-  }, [jsonFile, dispatch]);
-
   return (
     <StyledSidebar>
       <StyledTopWrapper>
-        <ImportModal visible={modalVisible} setVisible={setModalVisible} />
         <Link passHref href="/">
           <StyledElement onClick={() => router.push("/")}>
             <StyledLogo>
@@ -153,7 +129,7 @@ export const Sidebar: React.FC = () => {
           </StyledElement>
         </Link>
         <Tooltip title="Import File">
-          <StyledElement onClick={() => setModalVisible(true)}>
+          <StyledElement onClick={() => setUploadVisible(true)}>
             <AiOutlineFileAdd />
           </StyledElement>
         </Tooltip>
@@ -173,7 +149,7 @@ export const Sidebar: React.FC = () => {
           </StyledElement>
         </Tooltip>
         <Tooltip title="Clear JSON">
-          <StyledElement onClick={handleClear}>
+          <StyledElement onClick={() => setClearVisible(true)}>
             <AiOutlineDelete />
           </StyledElement>
         </Tooltip>
@@ -206,6 +182,8 @@ export const Sidebar: React.FC = () => {
           </Link>
         </StyledElement>
       </StyledBottomWrapper>
+      <ImportModal visible={uploadVisible} setVisible={setUploadVisible} />
+      <ClearModal visible={clearVisible} setVisible={setClearVisible} />
     </StyledSidebar>
   );
 };

src/containers/ClearModal/index.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import toast from "react-hot-toast";
+import { Button } from "src/components/Button";
+import { Modal, ModalProps } from "src/components/Modal";
+import { useConfig } from "src/hocs/config";
+import { ConfigActionType } from "src/reducer/reducer";
+
+export const ClearModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
+  const { dispatch } = useConfig();
+
+  const handleClear = () => {
+    dispatch({ type: ConfigActionType.SET_JSON, payload: "{}" });
+    localStorage.removeItem("json");
+    toast.success(`Cleared JSON and removed from memory.`);
+    setVisible(false);
+  };
+
+  return (
+    <Modal visible={visible} setVisible={setVisible}>
+      <Modal.Header>Clear JSON</Modal.Header>
+      <Modal.Content>Are you sure you want to clear JSON?</Modal.Content>
+      <Modal.Controls setVisible={setVisible}>
+        <Button status="DANGER" onClick={handleClear}>
+          Confirm
+        </Button>
+      </Modal.Controls>
+    </Modal>
+  );
+};