Merge pull request #252 from AykutSarac/code-refactor

chore: code refactor

src/components/CustomNode/ObjectNode.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 // import { useInViewport } from "react-in-viewport";
 import { CustomNodeProps } from "src/components/CustomNode";
-import useConfig from "src/hooks/store/useConfig";
+import useConfig from "src/store/useConfig";
 import * as Styled from "./styles";
 
 const inViewport = true;

src/components/CustomNode/TextNode.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import { MdLink, MdLinkOff } from "react-icons/md";
 // import { useInViewport } from "react-in-viewport";
 import { CustomNodeProps } from "src/components/CustomNode";
-import useConfig from "src/hooks/store/useConfig";
-import useGraph from "src/hooks/store/useGraph";
-import useStored from "src/hooks/store/useStored";
+import useConfig from "src/store/useConfig";
+import useGraph from "src/store/useGraph";
+import useStored from "src/store/useStored";
 import styled from "styled-components";
 import * as Styled from "./styles";
 

src/components/Graph/ErrorView.tsx

@@ -35,8 +35,8 @@ export const ErrorView = () => (
     <StyledTitle>JSON Crack is unable to handle this file!</StyledTitle>
     <StyledInfo>
       We apologize for the problem you encountered. We are doing our best as an Open
-      Source community to improve our service. Unfortunately, JSON Crack is currently unable to
-      handle such a large file.
+      Source community to improve our service. Unfortunately, JSON Crack is currently
+      unable to handle such a large file.
     </StyledInfo>
   </StyledErrorView>
 );

src/components/Graph/index.tsx

@@ -6,13 +6,13 @@ import {
 } from "react-zoom-pan-pinch";
 import { Canvas, Edge, ElkRoot } from "reaflow";
 import { CustomNode } from "src/components/CustomNode";
-import useConfig from "src/hooks/store/useConfig";
-import useGraph from "src/hooks/store/useGraph";
+import useConfig from "src/store/useConfig";
+import useGraph from "src/store/useGraph";
 import styled from "styled-components";
 import { Loading } from "../Loading";
 import { ErrorView } from "./ErrorView";
 
-interface LayoutProps {
+interface GraphProps {
   isWidget?: boolean;
   openModal: () => void;
   setSelectedNode: (node: [string, string][]) => void;
@@ -45,12 +45,13 @@ const GraphComponent = ({
   isWidget = false,
   openModal,
   setSelectedNode,
-}: LayoutProps) => {
+}: GraphProps) => {
   const setLoading = useGraph(state => state.setLoading);
   const setConfig = useConfig(state => state.setConfig);
   const centerView = useConfig(state => state.centerView);
+
   const loading = useGraph(state => state.loading);
-  const layout = useConfig(state => state.layout);
+  const direction = useGraph(state => state.direction);
   const nodes = useGraph(state => state.nodes);
   const edges = useGraph(state => state.edges);
 
@@ -158,16 +159,16 @@ const GraphComponent = ({
             edges={edges}
             maxWidth={size.width}
             maxHeight={size.height}
-            direction={layout}
+            direction={direction}
             onLayoutChange={onLayoutChange}
             onCanvasClick={onCanvasClick}
-            key={layout}
             zoomable={false}
             animated={false}
             readonly={true}
             dragEdge={null}
             dragNode={null}
             fit={true}
+            key={direction}
             node={props => <CustomNode {...props} onClick={handleNodeClick} />}
             edge={props => (
               <Edge {...props} containerClassName={`edge-${props.id}`} />

src/components/MonacoEditor/index.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import Editor, { loader, Monaco } from "@monaco-editor/react";
 import { parse } from "jsonc-parser";
 import { Loading } from "src/components/Loading";
-import useConfig from "src/hooks/store/useConfig";
-import useGraph from "src/hooks/store/useGraph";
-import useStored from "src/hooks/store/useStored";
+import useConfig from "src/store/useConfig";
+import useGraph from "src/store/useGraph";
+import useStored from "src/store/useStored";
 import { parser } from "src/utils/jsonParser";
 import styled from "styled-components";
 
@@ -40,12 +40,13 @@ export const MonacoEditor = ({
 }: {
   setHasError: (value: boolean) => void;
 }) => {
-  const json = useConfig(state => state.json);
-  const foldNodes = useConfig(state => state.foldNodes);
+  const [value, setValue] = React.useState<string | undefined>("");
   const setJson = useConfig(state => state.setJson);
   const setGraphValue = useGraph(state => state.setGraphValue);
+
+  const json = useConfig(state => state.json);
+  const foldNodes = useConfig(state => state.foldNodes);
   const lightmode = useStored(state => (state.lightmode ? "light" : "vs-dark"));
-  const [value, setValue] = React.useState<string | undefined>("");
 
   React.useEffect(() => {
     const { nodes, edges } = parser(json, foldNodes);

src/components/Sidebar/index.tsx

@@ -21,9 +21,9 @@ import { ClearModal } from "src/containers/Modals/ClearModal";
 import { DownloadModal } from "src/containers/Modals/DownloadModal";
 import { ImportModal } from "src/containers/Modals/ImportModal";
 import { ShareModal } from "src/containers/Modals/ShareModal";
-import useConfig from "src/hooks/store/useConfig";
-import useGraph from "src/hooks/store/useGraph";
-import { getNextLayout } from "src/utils/getNextLayout";
+import useConfig from "src/store/useConfig";
+import useGraph from "src/store/useGraph";
+import { getNextDirection } from "src/utils/getNextDirection";
 import styled from "styled-components";
 import shallow from "zustand/shallow";
 
@@ -133,29 +133,33 @@ const StyledLogo = styled.a`
   }
 `;
 
-function rotateLayout(layout: "LEFT" | "RIGHT" | "DOWN" | "UP") {
-  if (layout === "LEFT") return 90;
-  if (layout === "UP") return 180;
-  if (layout === "RIGHT") return 270;
+function rotateLayout(direction: "LEFT" | "RIGHT" | "DOWN" | "UP") {
+  if (direction === "LEFT") return 90;
+  if (direction === "UP") return 180;
+  if (direction === "RIGHT") return 270;
   return 360;
 }
 
 export const Sidebar: React.FC = () => {
+  const [uploadVisible, setUploadVisible] = React.useState(false);
+  const [clearVisible, setClearVisible] = React.useState(false);
+  const [shareVisible, setShareVisible] = React.useState(false);
+  const [isDownloadVisible, setDownloadVisible] = React.useState(false);
+
   const getJson = useConfig(state => state.getJson);
+  const setDirection = useGraph(state => state.setDirection);
   const setConfig = useConfig(state => state.setConfig);
   const centerView = useConfig(state => state.centerView);
-
   const collapseGraph = useGraph(state => state.collapseGraph);
   const expandGraph = useGraph(state => state.expandGraph);
-  const graphCollapsed = useGraph(state => state.graphCollapsed);
 
-  const [uploadVisible, setUploadVisible] = React.useState(false);
-  const [clearVisible, setClearVisible] = React.useState(false);
-  const [shareVisible, setShareVisible] = React.useState(false);
-  const [isDownloadVisible, setDownloadVisible] = React.useState(false);
+  const [graphCollapsed, direction] = useGraph(state => [
+    state.graphCollapsed,
+    state.direction,
+  ]);
 
-  const [foldNodes, layout, hideEditor] = useConfig(
-    state => [state.foldNodes, state.layout, state.hideEditor],
+  const [foldNodes, hideEditor] = useConfig(
+    state => [state.foldNodes, state.hideEditor],
     shallow
   );
 
@@ -173,9 +177,9 @@ export const Sidebar: React.FC = () => {
     toast(`${foldNodes ? "Unfolded" : "Folded"} nodes`);
   };
 
-  const toggleLayout = () => {
-    const nextLayout = getNextLayout(layout);
-    setConfig("layout", nextLayout);
+  const toggleDirection = () => {
+    const nextDirection = getNextDirection(direction);
+    setDirection(nextDirection);
   };
 
   const toggleExpandCollapseGraph = () => {
@@ -205,8 +209,8 @@ export const Sidebar: React.FC = () => {
           </StyledElement>
         </Tooltip>
         <Tooltip title="Rotate Layout">
-          <StyledElement onClick={toggleLayout}>
-            <StyledFlowIcon rotate={rotateLayout(layout)} />
+          <StyledElement onClick={toggleDirection}>
+            <StyledFlowIcon rotate={rotateLayout(direction)} />
           </StyledElement>
         </Tooltip>
         <Tooltip className="mobile" title="Center View">

src/components/Sponsors/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import useStored from "src/hooks/store/useStored";
+import useStored from "src/store/useStored";
 import styled from "styled-components";
 
 async function getSponsors() {

src/containers/Editor/LiveEditor/GraphCanvas.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Graph } from "src/components/Graph";
 import { NodeModal } from "src/containers/Modals/NodeModal";
-import useGraph from "src/hooks/store/useGraph";
+import useGraph from "src/store/useGraph";
 
 export const GraphCanvas = ({ isWidget = false }: { isWidget?: boolean }) => {
   const [isModalVisible, setModalVisible] = React.useState(false);

src/containers/Editor/Panes.tsx

@@ -3,7 +3,7 @@ import dynamic from "next/dynamic";
 import { Allotment } from "allotment";
 import "allotment/dist/style.css";
 import { JsonEditor } from "src/containers/Editor/JsonEditor";
-import useConfig from "src/hooks/store/useConfig";
+import useConfig from "src/store/useConfig";
 import styled from "styled-components";
 
 export const StyledEditor = styled(Allotment)`

src/containers/Editor/Tools.tsx

@@ -5,7 +5,7 @@ import { MdCenterFocusWeak } from "react-icons/md";
 import { TbSettings } from "react-icons/tb";
 import { SearchInput } from "src/components/SearchInput";
 import { SettingsModal } from "src/containers/Modals/SettingsModal";
-import useConfig from "src/hooks/store/useConfig";
+import useConfig from "src/store/useConfig";
 import styled from "styled-components";
 import { DownloadModal } from "../Modals/DownloadModal";
 

src/containers/Home/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Head from "next/head";
 import Link from "next/link";
+import Script from "next/script";
 import { FaGithub, FaHeart, FaLinkedin, FaTwitter } from "react-icons/fa";
 import {
   HiCursorClick,
@@ -16,7 +17,6 @@ import { defaultJson } from "src/constants/data";
 import { GoalsModal } from "src/containers/Modals/GoalsModal";
 import pkg from "../../../package.json";
 import * as Styles from "./styles";
-import Script from "next/script";
 
 const Navbar = () => (
   <Styles.StyledNavbar>

src/containers/Modals/ClearModal/index.tsx

@@ -2,7 +2,7 @@ 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/hooks/store/useConfig";
+import useConfig from "src/store/useConfig";
 
 export const ClearModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
   const setJson = useConfig(state => state.setJson);

src/containers/Modals/DownloadModal/index.tsx

@@ -7,7 +7,7 @@ import { FiCopy, FiDownload } from "react-icons/fi";
 import { Button } from "src/components/Button";
 import { Input } from "src/components/Input";
 import { Modal, ModalProps } from "src/components/Modal";
-import useConfig from "src/hooks/store/useConfig";
+import useConfig from "src/store/useConfig";
 import styled from "styled-components";
 
 const ColorPickerStyles: Partial<TwitterPickerStylesProps> = {

src/containers/Modals/ImportModal/index.tsx

@@ -4,7 +4,7 @@ import { AiOutlineUpload } from "react-icons/ai";
 import { Button } from "src/components/Button";
 import { Input } from "src/components/Input";
 import { Modal, ModalProps } from "src/components/Modal";
-import useConfig from "src/hooks/store/useConfig";
+import useConfig from "src/store/useConfig";
 import styled from "styled-components";
 
 const StyledModalContent = styled(Modal.Content)`

src/containers/Modals/SettingsModal/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Modal } from "src/components/Modal";
 import Toggle from "src/components/Toggle";
-import useStored from "src/hooks/store/useStored";
+import useStored from "src/store/useStored";
 import styled from "styled-components";
 import shallow from "zustand/shallow";
 

src/containers/Modals/ShareModal/index.tsx

@@ -7,7 +7,7 @@ import { Button } from "src/components/Button";
 import { Input } from "src/components/Input";
 import { Modal, ModalProps } from "src/components/Modal";
 import { baseURL } from "src/constants/data";
-import useConfig from "src/hooks/store/useConfig";
+import useConfig from "src/store/useConfig";
 import styled from "styled-components";
 
 const StyledWarning = styled.p``;

src/hooks/useFocusNode.tsx

@@ -4,7 +4,7 @@ import {
   cleanupHighlight,
   highlightMatchedNodes,
 } from "src/utils/search";
-import useConfig from "./store/useConfig";
+import useConfig from "../store/useConfig";
 
 export const useFocusNode = () => {
   const setConfig = useConfig(state => state.setConfig);

src/pages/Embed/index.tsx

@@ -1,5 +1,5 @@
-import Head from "next/head";
 import React from "react";
+import Head from "next/head";
 import styled from "styled-components";
 
 const StyledPageWrapper = styled.iframe`

src/pages/Widget/index.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import toast from "react-hot-toast";
 import { baseURL } from "src/constants/data";
 import { NodeModal } from "src/containers/Modals/NodeModal";
-import useGraph from "src/hooks/store/useGraph";
+import useGraph from "src/store/useGraph";
 import { parser } from "src/utils/jsonParser";
 import styled from "styled-components";
 

src/pages/_app.tsx

@@ -8,8 +8,8 @@ import { GoogleAnalytics } from "src/components/GoogleAnalytics";
 import { SupportButton } from "src/components/SupportButton";
 import GlobalStyle from "src/constants/globalStyle";
 import { darkTheme, lightTheme } from "src/constants/theme";
-import useConfig from "src/hooks/store/useConfig";
-import useStored from "src/hooks/store/useStored";
+import useConfig from "src/store/useConfig";
+import useStored from "src/store/useStored";
 import { isValidJson } from "src/utils/isValidJson";
 import { ThemeProvider } from "styled-components";
 

src/hooks/store/useConfig.tsx → src/store/useConfig.tsx

@@ -1,5 +1,4 @@
 import { ReactZoomPanPinchRef } from "react-zoom-pan-pinch";
-import { CanvasDirection } from "reaflow";
 import { defaultJson } from "src/constants/data";
 import create from "zustand";
 
@@ -15,7 +14,6 @@ interface ConfigActions {
 const initialStates = {
   json: defaultJson,
   cursorMode: "move" as "move" | "navigation",
-  layout: "RIGHT" as CanvasDirection,
   foldNodes: false,
   hideEditor: false,
   performanceMode: true,

src/hooks/store/useGraph.tsx → src/store/useGraph.tsx

@@ -1,3 +1,4 @@
+import { CanvasDirection } from "reaflow";
 import { Graph } from "src/components/Graph";
 import { getChildrenEdges } from "src/utils/getChildrenEdges";
 import { getOutgoers } from "src/utils/getOutgoers";
@@ -5,6 +6,7 @@ import create from "zustand";
 
 const initialStates = {
   loading: false,
+  direction: "RIGHT" as CanvasDirection,
   graphCollapsed: false,
   nodes: [] as NodeData[],
   edges: [] as EdgeData[],
@@ -18,6 +20,7 @@ export type Graph = typeof initialStates;
 interface GraphActions {
   setGraphValue: (key: keyof Graph, value: any) => void;
   setLoading: (loading: boolean) => void;
+  setDirection: (direction: CanvasDirection) => void;
   expandNodes: (nodeId: string) => void;
   collapseNodes: (nodeId: string) => void;
   collapseGraph: () => void;
@@ -26,6 +29,7 @@ interface GraphActions {
 
 const useGraph = create<Graph & GraphActions>((set, get) => ({
   ...initialStates,
+  setDirection: direction => set({ direction }),
   setGraphValue: (key, value) =>
     set({
       collapsedParents: [],

src/utils/getNextLayout.ts → src/utils/getNextDirection.ts

@@ -1,5 +1,5 @@
-export function getNextLayout(layout: "LEFT" | "RIGHT" | "DOWN" | "UP") {
-  switch (layout) {
+export function getNextDirection(direction: "LEFT" | "RIGHT" | "DOWN" | "UP") {
+  switch (direction) {
     case "RIGHT":
       return "DOWN";