clean code

src/components/Footer/index.tsx

@@ -1,7 +1,8 @@
-import Link from "next/link";
 import React from "react";
-import { AiFillGithub, AiOutlineTwitter } from "react-icons/ai";
+import Link from "next/link";
 import styled from "styled-components";
+import { AiFillGithub, AiOutlineTwitter } from "react-icons/ai";
+
 import pkg from "../../../package.json";
 
 const StyledFooter = styled.footer`

src/components/Navbar/index.tsx

@@ -1,5 +1,5 @@
-import Link from "next/link";
 import React from "react";
+import Link from "next/link";
 import styled from "styled-components";
 
 interface NavbarProps {

src/components/Sidebar/index.tsx

@@ -1,6 +1,9 @@
-import Link from "next/link";
 import React from "react";
+import Link from "next/link";
 import styled from "styled-components";
+import { useLocalStorage } from "usehooks-ts";
+import { FaFileImport, FaMap } from "react-icons/fa";
+import { MdAutoGraph } from "react-icons/md";
 import {
   AiFillHome,
   AiOutlineClear,
@@ -8,9 +11,7 @@ import {
   AiOutlineTwitter,
   AiFillControl,
 } from "react-icons/ai";
-import { FaFileImport, FaMap } from "react-icons/fa";
-import { MdAutoGraph } from "react-icons/md";
-import { useLocalStorage } from "usehooks-ts";
+
 import { defaultValue } from "src/containers/JsonEditor";
 import { getNextLayout } from "src/containers/LiveEditor/helpers";
 import { StorageConfig } from "src/typings/global";
@@ -91,7 +92,7 @@ export const Sidebar = () => {
   const [jsonFile, setJsonFile] = React.useState<File | null>(null);
   const [json, setJson] = useLocalStorage("json", JSON.stringify(defaultValue));
   const [config, setConfig] = useLocalStorage<StorageConfig>("config", {
-    layout: "RL",
+    layout: "LEFT",
     minimap: true,
     controls: true,
   });

src/containers/LiveEditor/FlowWrapper.tsx

@@ -1,77 +0,0 @@
-import React from "react";
-import ReactFlow, {
-  ControlButton,
-  Controls,
-  Elements,
-  MiniMap,
-  NodeExtent,
-  OnLoadParams,
-} from "react-flow-renderer";
-import { StorageConfig } from "src/typings/global";
-import { useLocalStorage } from "usehooks-ts";
-import { defaultValue } from "../JsonEditor";
-import { getLayout, getLayoutPosition } from "./helpers";
-import { CustomNodeComponent } from "./Node";
-
-const nodeExtent: NodeExtent = [
-  [0, 0],
-  [1000, 1000],
-];
-
-const nodeTypes = {
-  special: CustomNodeComponent,
-};
-
-export const FlowWrapper: React.FC = () => {
-  const [json] = useLocalStorage("json", JSON.stringify(defaultValue));
-  const [config] = useLocalStorage<StorageConfig>("config", {
-    layout: "RL",
-    minimap: true,
-    controls: true,
-  });
-
-  const [elements, setElements] = React.useState<Elements>([]);
-  const [rfInstance, setRfInstance] = React.useState<OnLoadParams | null>(null);
-  const [valid, setValid] = React.useState(true);
-
-  const handleClick = () => {
-    setElements(getLayoutPosition(config.layout, elements));
-  };
-
-  React.useEffect(() => {
-    if (rfInstance) rfInstance.fitView();
-  }, [rfInstance]);
-
-  React.useEffect(() => {
-    try {
-      const layoutedElements = getLayout(config.layout, json);
-      setElements(layoutedElements);
-      setValid(true);
-    } catch (error) {
-      setValid(false);
-    }
-  }, [rfInstance, json, config]);
-
-  if (!valid) return null;
-
-  return (
-    <ReactFlow
-      nodeExtent={nodeExtent}
-      elements={elements}
-      nodeTypes={nodeTypes}
-      onLoad={setRfInstance}
-    >
-      {config.minimap && <MiniMap />}
-      {config.controls && (
-        <Controls>
-          <ControlButton
-            onClick={handleClick}
-            style={{ gridColumn: "1 / 3", width: "auto" }}
-          >
-            Format
-          </ControlButton>
-        </Controls>
-      )}
-    </ReactFlow>
-  );
-};

src/containers/LiveEditor/helpers.ts

@@ -1,5 +1,4 @@
-import dagre from "dagre";
-import { Elements, isNode, Position } from "react-flow-renderer";
+import { isNode } from "react-flow-renderer";
 import { CanvasDirection } from "reaflow";
 import { parser } from "src/utils/json-editor-parser";
 
@@ -50,47 +49,6 @@ export function getEdgeNodes(graph: any): any {
   };
 }
 
-const dagreGraph = new dagre.graphlib.Graph();
-dagreGraph.setDefaultEdgeLabel(() => ({}));
-
-export const getLayoutPosition = (
-  direction: string,
-  elements: Elements,
-  dynamic = false
-) => {
-  const isHorizontal = direction === "LR";
-  dagreGraph.setGraph({ rankdir: direction });
-
-  elements.forEach((el) => {
-    if (isNode(el)) {
-      dagreGraph.setNode(el.id, {
-        width: dynamic ? el.__rf.width : 400,
-        height: dynamic ? el.__rf.height : 100,
-      });
-    } else {
-      dagreGraph.setEdge(el.source, el.target);
-    }
-  });
-
-  dagre.layout(dagreGraph);
-
-  const layoutedElements = elements.map((el) => {
-    if (isNode(el)) {
-      const nodeWithPosition = dagreGraph.node(el.id);
-      el.targetPosition = isHorizontal ? Position.Left : Position.Top;
-      el.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
-      el.position = {
-        x: nodeWithPosition.x + Math.random() / 1000,
-        y: nodeWithPosition.y,
-      };
-    }
-
-    return el;
-  });
-
-  return layoutedElements;
-};
-
 export function getNextLayout(layout: CanvasDirection) {
   switch (layout) {
     case "LEFT":
@@ -106,10 +64,3 @@ export function getNextLayout(layout: CanvasDirection) {
       return "LEFT";
   }
 }
-
-export function getLayout(layout: CanvasDirection, json: string, dynamic = false) {
-  const jsonToGraph = parser(json);
-  const layoutedElements = getLayoutPosition(layout, jsonToGraph, dynamic);
-
-  return layoutedElements;
-}

src/containers/LiveEditor/index.tsx

@@ -1,11 +1,12 @@
-import React, { ComponentType } from "react";
+import React from "react";
 import styled from "styled-components";
-import { Canvas, CanvasRef } from "reaflow/dist/index";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import { useLocalStorage } from "usehooks-ts";
+import { Canvas, CanvasRef } from "reaflow/dist/index";
+
+import { StorageConfig } from "src/typings/global";
 import { defaultValue } from "../JsonEditor";
 import { getEdgeNodes } from "./helpers";
-import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
-import { StorageConfig } from "src/typings/global";
 
 const StyledLiveEditor = styled.div`
   position: relative;

src/pages/404/index.tsx

@@ -1,7 +1,8 @@
 import React from "react";
+import { useRouter } from "next/router";
 import styled from "styled-components";
+
 import { Button } from "src/components/Button";
-import { useRouter } from "next/router";
 import { Image } from "src/components/Image";
 
 const StyledNotFound = styled.div`

src/pages/_app.tsx

@@ -1,11 +1,12 @@
 import React from "react";
-import GlobalStyle from "src/constants/globalStyle";
-import { darkTheme } from "src/constants/theme";
+import Head from "next/head";
+import { useRouter } from "next/router";
 import type { AppProps } from "next/app";
 import { ThemeProvider } from "styled-components";
-import { useRouter } from "next/router";
+
+import GlobalStyle from "src/constants/globalStyle";
+import { darkTheme } from "src/constants/theme";
 import { Loading } from "src/components/Loading";
-import Head from "next/head";
 
 function AykutSarac({ Component, pageProps }: AppProps) {
   const router = useRouter();

src/pages/editor/index.tsx

@@ -1,13 +1,14 @@
-import { useRouter } from "next/router";
 import React from "react";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import styled from "styled-components";
+import SplitPane from "react-split-pane";
+
 import { Button } from "src/components/Button";
 import { Sidebar } from "src/components/Sidebar";
-import styled from "styled-components";
 import { JsonEditor } from "src/containers/JsonEditor";
 import { LiveEditor } from "src/containers/LiveEditor";
-import SplitPane from "react-split-pane";
 
-import Head from "next/head";
 
 const StyledPageWrapper = styled.div`
   display: flex;