lint

src/components/Button/index.tsx

@@ -9,8 +9,7 @@ enum ButtonType {
   WARNING = "ORANGE",
 }
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {
   status?: keyof typeof ButtonType;
   block?: boolean;
 }

src/components/CustomNode/TextNode.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { BiHide } from "react-icons/bi";
-import { NodeData, EdgeData } from "reaflow";
+import { MdCompareArrows } from "react-icons/md";
+import { NodeData } from "reaflow/dist/types";
 import { ConditionalWrapper, CustomNodeProps } from "src/components/CustomNode";
 import useConfig from "src/hooks/store/useConfig";
 import useGraph from "src/hooks/store/useGraph";
@@ -35,17 +35,24 @@ const TextNode: React.FC<CustomNodeProps<string> & { node: NodeData }> = ({
   y,
 }) => {
   const performanceMode = useConfig((state) => state.performanceMode);
+  const expand = useConfig((state) => state.expand);
   const expandNodes = useGraph((state) => state.expandNodes);
   const collapseNodes = useGraph((state) => state.collapseNodes);
-  const [isExpanded, setIsExpanded] = React.useState(true);
+  const [isExpanded, setIsExpanded] = React.useState(!expand);
 
   const handleExpand = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     setIsExpanded(!isExpanded);
+  };
+
+  React.useEffect(() => {
+    setIsExpanded(!expand);
+  }, [expand]);
 
+  React.useEffect(() => {
     if (isExpanded) collapseNodes(node.id);
     else expandNodes(node.id);
-  };
+  }, [collapseNodes, expand, expandNodes, isExpanded, node.id]);
 
   return (
     <Styled.StyledForeignObject
@@ -71,7 +78,7 @@ const TextNode: React.FC<CustomNodeProps<string> & { node: NodeData }> = ({
       </ConditionalWrapper>
       {isParent && (
         <StyledExpand onClick={handleExpand}>
-          <BiHide size={18} />
+          <MdCompareArrows size={18} />
         </StyledExpand>
       )}
     </Styled.StyledForeignObject>

src/containers/Editor/NodeTools.ts

@@ -1,85 +0,0 @@
-import { NodeData, EdgeData, removeAndUpsertNodes } from "reaflow";
-import { findNodeChildren } from "src/utils/findNodeChildren";
-import toast from "react-hot-toast";
-import { NodeTools } from "src/hooks/store/useNodeTools";
-import { findEdgeChildren } from "src/utils/findEdgeChildren";
-
-export const collapseNodes = (
-  selectedNode: string,
-  nodes: NodeData[],
-  edges: EdgeData[],
-  collapsedNodes: { [key: string]: NodeData[] },
-  collapsedEdges: { [key: string]: EdgeData[] },
-  setNodeTools: (key: keyof NodeTools, value: unknown) => void
-) => {
-  if (selectedNode) {
-    const childrenOfNode = findNodeChildren(selectedNode, nodes, edges);
-    const childrenOfEdge = findEdgeChildren(
-      selectedNode,
-      childrenOfNode,
-      edges
-    );
-
-    const newCollapsedEdges = {};
-    newCollapsedEdges[selectedNode] = childrenOfEdge;
-    setNodeTools("collapsedEdges", {
-      ...collapsedEdges,
-      ...newCollapsedEdges,
-    });
-
-    const newCollapsedNodes = {};
-    newCollapsedNodes[selectedNode] = childrenOfNode;
-    setNodeTools("collapsedNodes", {
-      ...collapsedNodes,
-      ...newCollapsedNodes,
-    });
-
-    const resultOfRemovedNodes = removeAndUpsertNodes(
-      nodes,
-      edges,
-      childrenOfNode
-    );
-
-    const edgesResult = resultOfRemovedNodes.edges.filter((e) =>
-      e.id.startsWith("e")
-    );
-    setNodeTools("newNodes", resultOfRemovedNodes.nodes);
-    setNodeTools("newEdges", edgesResult);
-    setTimeout(() => toast.dismiss("restartToast"), 230);
-  } else {
-    toast("Please select a node to collapse!");
-  }
-};
-
-export const expandNodes = (
-  selectedNode: string,
-  nodes: NodeData[],
-  edges: EdgeData[],
-  collapsedNodes: { [key: string]: NodeData[] },
-  collapsedEdges: { [key: string]: EdgeData[] },
-  setNodeTools: (nodeTools: keyof NodeTools, value: unknown) => void
-) => {
-  if (selectedNode) {
-    const concatEdges = edges.concat(collapsedEdges[selectedNode]);
-    const concatNodes = nodes.concat(collapsedNodes[selectedNode]);
-
-    setNodeTools("newNodes", concatNodes);
-    setNodeTools("newEdges", concatEdges);
-  } else {
-    toast("Please select a node to expand!");
-  }
-};
-
-export const restartNodes = (
-  initialNodes: NodeData[],
-  initialEdges: EdgeData[],
-  nodes: NodeData[],
-  setNodeTools: (nodeTools: keyof NodeTools, value: unknown) => void
-) => {
-  if (nodes !== initialNodes) {
-    setNodeTools("newNodes", initialNodes);
-    setNodeTools("newEdges", initialEdges);
-  } else {
-    toast("Collapse at last once the node to restart!", { id: "restartToast" });
-  }
-};

src/containers/Editor/Tools.tsx

@@ -43,8 +43,6 @@ const StyledToolElement = styled.button`
 
 export const Tools: React.FC = () => {
   const [isDownloadVisible, setDownloadVisible] = React.useState(false);
-  const [expand, setExpand] = React.useState(true);
-  const [isLastNode, setIsLastNode] = React.useState(false);
   const lightmode = useStored((state) => state.lightmode);
   const setLightTheme = useStored((state) => state.setLightTheme);
 
@@ -60,7 +58,6 @@ export const Tools: React.FC = () => {
   const centerView = useConfig((state) => state.centerView);
   const toggleEditor = () => setConfig("hideEditor", !hideEditor);
   const toggleTheme = () => setLightTheme(!lightmode);
-  const selectedNodeColor = "#00D69D";
 
   return (
     <StyledTools>

src/containers/Modals/NodeModal/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import toast from "react-hot-toast";
 import { FiCopy } from "react-icons/fi";
-import { NodeData } from "reaflow";
 import { Button } from "src/components/Button";
 import { Modal } from "src/components/Modal";
 import styled from "styled-components";

src/hooks/store/useGraph.tsx

@@ -1,5 +1,5 @@
 import create from "zustand";
-import { EdgeData, NodeData } from "reaflow";
+import { EdgeData, NodeData } from "reaflow/dist/types";
 import { Graph } from "src/components/Graph";
 import { findEdgeChildren } from "src/utils/findEdgeChildren";
 import { findNodeChildren } from "src/utils/findNodeChildren";
@@ -29,6 +29,8 @@ const useGraph = create<Graph & GraphActions>((set) => ({
   setGraphValue: (key, value) =>
     set((state) => ({
       ...state,
+      collapsedNodes: [],
+      collapsedEdges: [],
       [key]: value,
     })),
   expandNodes: (nodeId) =>

src/typings/styled.d.ts

@@ -1,12 +1,5 @@
 import "styled-components";
 
-interface ThemeTones {
-  readonly LOWLIGHT?: string;
-  readonly BASE: string;
-  readonly HIGHLIGHT?: string;
-  readonly TINT?: string;
-}
-
 declare module "styled-components" {
   export interface DefaultTheme {
     BLURPLE: string;

src/utils/findNodeChildren.ts

@@ -1,34 +1,35 @@
 import { NodeData, EdgeData } from "reaflow/dist/types";
 
-
-export const findNodeChildren = (selectedNode: string, nodes: NodeData[], edges: EdgeData[]) => {
-
-const toByFrom = {};
-for (const edge of edges) {
-  if(edge.from){
-  toByFrom[edge.from] ??= [];
-  toByFrom[edge.from].push(edge.to);
+export const findNodeChildren = (
+  selectedNode: string,
+  nodes: NodeData[],
+  edges: EdgeData[]
+) => {
+  const toByFrom = {};
+  for (const edge of edges) {
+    if (edge.from) {
+      toByFrom[edge.from] ??= [];
+      toByFrom[edge.from].push(edge.to);
+    }
   }
-}
 
-const getNodes = (parent, allNodesIds:string[] = []) => {
-  const tos = toByFrom[parent];
-  if (tos) {
-    allNodesIds.push(...tos);
-    for (const to of tos) {
-      getNodes(to, allNodesIds);
+  const getNodes = (parent, allNodesIds: string[] = []) => {
+    const tos = toByFrom[parent];
+    if (tos) {
+      allNodesIds.push(...tos);
+      for (const to of tos) {
+        getNodes(to, allNodesIds);
+      }
     }
-  }
-  return allNodesIds;
-};
+    return allNodesIds;
+  };
 
-  
- const myNodes = getNodes(selectedNode);
+  const myNodes = getNodes(selectedNode);
 
-    const findNodes = myNodes.map((id) => {
-      const node = nodes.find((n) => n.id === id);
-      return node as NodeData<any>;
-    });
+  const findNodes = myNodes.map((id) => {
+    const node = nodes.find((n) => n.id === id);
+    return node as NodeData<any>;
+  });
 
-    return findNodes;
-  };
+  return findNodes;
+};

src/utils/json-editor-parser.ts

@@ -3,7 +3,7 @@
  */
 import toast from "react-hot-toast";
 
-const filterChild = ([k, v]) => {
+const filterChild = ([_, v]) => {
   const isNull = v === null;
   const isArray = Array.isArray(v) && v.length;
   const isObject = v instanceof Object;