Merge branch 'settings-modal' into toggle-expand

src/components/Sidebar/index.tsx

@@ -23,7 +23,6 @@ import { useRouter } from "next/router";
 import { ImportModal } from "src/containers/Modals/ImportModal";
 import { ClearModal } from "src/containers/Modals/ClearModal";
 import { ShareModal } from "src/containers/Modals/ShareModal";
-import { IoAlertCircleSharp } from "react-icons/io5";
 import useConfig from "src/hooks/store/useConfig";
 import { getNextLayout } from "src/containers/Editor/LiveEditor/helpers";
 import { HiHeart } from "react-icons/hi";

src/components/Toggle/index.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import styled from "styled-components";
+import { IoIosCheckmarkCircle, IoMdCloseCircle } from "react-icons/io";
+
+interface ToggleProps {
+  checked?: boolean;
+  children?: React.ReactNode;
+  onChange?: () => void;
+}
+
+const StyledToggleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  user-select: none;
+  width: 100%;
+  gap: 6px;
+`;
+
+const StyledLabel = styled.label`
+  color: ${({ theme }) => theme.INTERACTIVE_ACTIVE};
+  font-weight: 500;
+  cursor: pointer;
+`;
+
+const StyledToggle = styled.div<{ active: boolean }>`
+  position: relative;
+  display: flex;
+  justify-content: ${({ active }) => (active ? "right" : "left")};
+  align-items: center;
+  width: 40px;
+  height: 24px;
+  padding: 2px;
+  border-radius: 14px;
+  background: ${({ active }) => (active ? "#3AA55D" : "#72767c")};
+  transition: 0.1s;
+  cursor: pointer;
+
+  input {
+    display: none;
+  }
+`;
+
+const Toggle: React.FC<ToggleProps> = ({
+  children,
+  checked = false,
+  onChange,
+}) => {
+  const [isChecked, setIsChecked] = React.useState(checked);
+
+  const handleClick = () => {
+    setIsChecked(!isChecked);
+    if (onChange) onChange();
+  };
+
+  return (
+    <StyledToggleWrapper>
+      <StyledToggle active={isChecked} onClick={handleClick}>
+        {isChecked ? (
+          <IoIosCheckmarkCircle size={22} color="white" />
+        ) : (
+          <IoMdCloseCircle size={22} color="white" />
+        )}
+        <input type="checkbox" checked={isChecked} onChange={handleClick} />
+      </StyledToggle>
+      <StyledLabel onClick={handleClick}>{children}</StyledLabel>
+    </StyledToggleWrapper>
+  );
+};
+
+export default Toggle;

src/containers/Editor/Settings.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import toast from "react-hot-toast";
+import { IoAlertCircleSharp } from "react-icons/io5";
+import { Modal } from "src/components/Modal";
+import Toggle from "src/components/Toggle";
+import { useConfig } from "src/hocs/config";
+import { ConfigActionType } from "src/reducer/reducer";
+import styled from "styled-components";
+
+const StyledToggle = styled(Toggle)`
+  flex-flow: row-reverse;
+  background: black;
+`;
+
+const StyledAlertIcon = styled(IoAlertCircleSharp)`
+  color: ${({ theme }) => theme.ORANGE};
+`;
+
+export const Settings: React.FC<{
+  visible: boolean;
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}> = ({ visible, setVisible }) => {
+  const { settings, dispatch } = useConfig();
+
+  const togglePerformance = () => {
+    const toastMsg = settings.performance
+      ? "Disabled Performance Mode\nSearch Node & Save Image enabled."
+      : "Enabled Performance Mode\nSearch Node & Save Image disabled.";
+
+    toast(toastMsg, {
+      icon: <StyledAlertIcon size={36} />,
+      duration: 3000,
+    });
+
+    dispatch({ type: ConfigActionType.TOGGLE_PERFORMANCE });
+  };
+
+  return (
+    <Modal visible={visible} setVisible={setVisible}>
+      <Modal.Header>Settings</Modal.Header>
+      <Modal.Content>
+        <StyledToggle
+          onChange={togglePerformance}
+          checked={settings.performance}
+        >
+          Performance Mode (Experimental)
+        </StyledToggle>
+      </Modal.Content>
+      <Modal.Controls setVisible={setVisible} />
+    </Modal>
+  );
+};

src/containers/Editor/Tools.tsx

@@ -13,6 +13,8 @@ import useConfig from "src/hooks/store/useConfig";
 import shallow from "zustand/shallow";
 import { DownloadModal } from "../Modals/DownloadModal";
 import useStored from "src/hooks/store/useStored";
+import { TbSettings } from "react-icons/tb";
+import { Settings } from "./Settings";
 
 export const StyledTools = styled.div`
   display: flex;
@@ -42,6 +44,7 @@ const StyledToolElement = styled.button`
 `;
 
 export const Tools: React.FC = () => {
+  const [settingsVisible, setSettingsVisible] = React.useState(false);
   const [isDownloadVisible, setDownloadVisible] = React.useState(false);
   const lightmode = useStored((state) => state.lightmode);
   const setLightTheme = useStored((state) => state.setLightTheme);
@@ -64,6 +67,12 @@ export const Tools: React.FC = () => {
       <StyledToolElement aria-label="fullscreen" onClick={toggleEditor}>
         <AiOutlineFullscreen />
       </StyledToolElement>
+      <StyledToolElement
+        aria-label="settings"
+        onClick={() => setSettingsVisible(true)}
+      >
+        <TbSettings />
+      </StyledToolElement>
       <StyledToolElement aria-label="switch theme" onClick={toggleTheme}>
         {lightmode ? <HiOutlineMoon /> : <HiOutlineSun />}
       </StyledToolElement>
@@ -90,6 +99,7 @@ export const Tools: React.FC = () => {
         visible={isDownloadVisible}
         setVisible={setDownloadVisible}
       />
+      <Settings visible={settingsVisible} setVisible={setSettingsVisible} />
     </StyledTools>
   );
 };

src/containers/Modals/ImportModal/index.tsx

@@ -77,13 +77,6 @@ export const ImportModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
     }
   };
 
-  React.useEffect(() => {
-    return () => {
-      setJsonFile(null);
-      setURL("");
-    };
-  }, [visible]);
-
   return (
     <Modal visible={visible} setVisible={setVisible}>
       <Modal.Header>Import JSON</Modal.Header>