remove ref

Significant-Gravitas · Sep 9, 2024 · 2ae7c1c · 2ae7c1c
1 parent 3b84a20
commit 2ae7c1c
Show file tree

Hide file tree

Showing 11 changed files with 360 additions and 385 deletions.
diff --git a/rnd/autogpt_builder/src/app/error.tsx b/rnd/autogpt_builder/src/app/error.tsx
@@ -26,8 +26,8 @@ export default function Error({
           Oops, something went wrong!
         </h1>
         <p className="mt-4 text-muted-foreground">
-          We&apos;re sorry, but an unexpected error has occurred. Please try
-          again later or contact support if the issue persists.
+          We're sorry, but an unexpected error has occurred. Please try again
+          later or contact support if the issue persists.
         </p>
         <div className="mt-6 flex flex-row justify-center gap-4">
           <Button onClick={reset} variant="outline">

diff --git a/rnd/autogpt_builder/src/app/page.tsx b/rnd/autogpt_builder/src/app/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import AutoGPTServerAPI, {
   GraphMeta,
@@ -22,57 +22,54 @@ const Monitor = () => {
   const [selectedFlow, setSelectedFlow] = useState<GraphMeta | null>(null);
   const [selectedRun, setSelectedRun] = useState<FlowRun | null>(null);
 
-  const api = useMemo(() => new AutoGPTServerAPI(), []);
+  const api = new AutoGPTServerAPI();
 
-  const refreshFlowRuns = useCallback(
-    (flowID: string) => {
-      // Fetch flow run IDs
-      api.listGraphRunIDs(flowID).then((runIDs) =>
-        runIDs.map((runID) => {
-          let run;
-          if (
-            (run = flowRuns.find((fr) => fr.id == runID)) &&
-            !["waiting", "running"].includes(run.status)
-          ) {
-            return;
-          }
-
-          // Fetch flow run
-          api.getGraphExecutionInfo(flowID, runID).then((execInfo) =>
-            setFlowRuns((flowRuns) => {
-              if (execInfo.length == 0) return flowRuns;
-
-              const flowRunIndex = flowRuns.findIndex((fr) => fr.id == runID);
-              const flowRun = flowRunFromNodeExecutionResults(execInfo);
-              if (flowRunIndex > -1) {
-                flowRuns.splice(flowRunIndex, 1, flowRun);
-              } else {
-                flowRuns.push(flowRun);
-              }
-              return [...flowRuns];
-            }),
-          );
-        }),
-      );
-    },
-    [api, flowRuns],
-  );
+  useEffect(() => fetchFlowsAndRuns(), []);
+  useEffect(() => {
+    const intervalId = setInterval(
+      () => flows.map((f) => refreshFlowRuns(f.id)),
+      5000,
+    );
+    return () => clearInterval(intervalId);
+  }, []);
 
-  const fetchFlowsAndRuns = useCallback(() => {
+  function fetchFlowsAndRuns() {
     api.listGraphs().then((flows) => {
       setFlows(flows);
       flows.map((flow) => refreshFlowRuns(flow.id));
     });
-  }, [api, refreshFlowRuns]);
+  }
 
-  useEffect(() => fetchFlowsAndRuns(), [fetchFlowsAndRuns]);
-  useEffect(() => {
-    const intervalId = setInterval(
-      () => flows.map((f) => refreshFlowRuns(f.id)),
-      5000,
+  function refreshFlowRuns(flowID: string) {
+    // Fetch flow run IDs
+    api.listGraphRunIDs(flowID).then((runIDs) =>
+      runIDs.map((runID) => {
+        let run;
+        if (
+          (run = flowRuns.find((fr) => fr.id == runID)) &&
+          !["waiting", "running"].includes(run.status)
+        ) {
+          return;
+        }
+
+        // Fetch flow run
+        api.getGraphExecutionInfo(flowID, runID).then((execInfo) =>
+          setFlowRuns((flowRuns) => {
+            if (execInfo.length == 0) return flowRuns;
+
+            const flowRunIndex = flowRuns.findIndex((fr) => fr.id == runID);
+            const flowRun = flowRunFromNodeExecutionResults(execInfo);
+            if (flowRunIndex > -1) {
+              flowRuns.splice(flowRunIndex, 1, flowRun);
+            } else {
+              flowRuns.push(flowRun);
+            }
+            return [...flowRuns];
+          }),
+        );
+      }),
     );
-    return () => clearInterval(intervalId);
-  }, [flows, refreshFlowRuns]);
+  }
 
   const column1 = "md:col-span-2 xl:col-span-3 xxl:col-span-2";
   const column2 = "md:col-span-3 lg:col-span-2 xl:col-span-3 space-y-4";

diff --git a/rnd/autogpt_builder/src/components/CustomEdge.tsx b/rnd/autogpt_builder/src/components/CustomEdge.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import {
   BaseEdge,
   EdgeLabelRenderer,
@@ -65,27 +65,24 @@ export function CustomEdge({
   const beadDiameter = 12;
   const deltaTime = 16;
 
-  const setTargetPositions = useCallback(
-    (beads: Bead[]) => {
-      const distanceBetween = Math.min(
-        (length - beadDiameter) / (beads.length + 1),
-        beadDiameter,
-      );
-
-      return beads.map((bead, index) => {
-        const distanceFromEnd = beadDiameter * 1.35;
-        const targetPosition = distanceBetween * index + distanceFromEnd;
-        const t = getTForDistance(-targetPosition);
-
-        return {
-          ...bead,
-          t: visualizeBeads === "animate" ? bead.t : t,
-          targetT: t,
-        } as Bead;
-      });
-    },
-    [getTForDistance, length, visualizeBeads],
-  );
+  function setTargetPositions(beads: Bead[]) {
+    const distanceBetween = Math.min(
+      (length - beadDiameter) / (beads.length + 1),
+      beadDiameter,
+    );
+
+    return beads.map((bead, index) => {
+      const distanceFromEnd = beadDiameter * 1.35;
+      const targetPosition = distanceBetween * index + distanceFromEnd;
+      const t = getTForDistance(-targetPosition);
+
+      return {
+        ...bead,
+        t: visualizeBeads === "animate" ? bead.t : t,
+        targetT: t,
+      } as Bead;
+    });
+  }
 
   useEffect(() => {
     if (data?.beadUp === 0 && data?.beadDown === 0) {
@@ -173,7 +170,7 @@ export function CustomEdge({
     }, deltaTime);
 
     return () => clearInterval(interval);
-  }, [data, setTargetPositions, visualizeBeads]);
+  }, [data]);
 
   const middle = getPointForT(0.5);
 

diff --git a/rnd/autogpt_builder/src/components/CustomNode.tsx b/rnd/autogpt_builder/src/components/CustomNode.tsx
@@ -96,7 +96,7 @@ export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
 
   useEffect(() => {
     setIsAnyModalOpen?.(isModalOpen || isOutputModalOpen);
-  }, [isModalOpen, isOutputModalOpen, data, setIsAnyModalOpen]);
+  }, [isModalOpen, isOutputModalOpen, data]);
 
   useEffect(() => {
     isInitialSetup.current = false;

diff --git a/rnd/autogpt_builder/src/components/Flow.tsx b/rnd/autogpt_builder/src/components/Flow.tsx
@@ -121,7 +121,7 @@ const FlowEditor: React.FC<{
         localStorage.setItem("shepherd-tour", "yes");
       }
     }
-  }, [availableNodes, tutorialStarted, router, pathname]);
+  }, [availableNodes, tutorialStarted]);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -256,7 +256,7 @@ const FlowEditor: React.FC<{
       }
 
       const edgeColor = getTypeColor(
-        getOutputType(nodes, connection.source!, connection.sourceHandle!),
+        getOutputType(connection.source!, connection.sourceHandle!),
       );
       const sourceNode = getNode(connection.source!);
       const newEdge: CustomEdge = {
@@ -295,7 +295,6 @@ const FlowEditor: React.FC<{
       addEdges,
       deleteElements,
       clearNodesStatusAndOutput,
-      nodes,
       edges,
       formatEdgeID,
       getOutputType,
@@ -378,7 +377,7 @@ const FlowEditor: React.FC<{
         clearNodesStatusAndOutput();
       }
     },
-    [setNodes, clearNodesStatusAndOutput, setEdges],
+    [setNodes, clearNodesStatusAndOutput],
   );
 
   const getNextNodeId = useCallback(() => {
@@ -435,6 +434,7 @@ const FlowEditor: React.FC<{
       nodeId,
       availableNodes,
       addNodes,
+      setNodes,
       deleteElements,
       clearNodesStatusAndOutput,
       x,

diff --git a/rnd/autogpt_builder/src/components/monitor/AgentFlowList.tsx b/rnd/autogpt_builder/src/components/monitor/AgentFlowList.tsx
@@ -1,5 +1,5 @@
 import AutoGPTServerAPI, { GraphMeta } from "@/lib/autogpt-server-api";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
@@ -45,10 +45,10 @@ export const AgentFlowList = ({
   className?: string;
 }) => {
   const [templates, setTemplates] = useState<GraphMeta[]>([]);
-  const api = useMemo(() => new AutoGPTServerAPI(), []);
+  const api = new AutoGPTServerAPI();
   useEffect(() => {
     api.listTemplates().then((templates) => setTemplates(templates));
-  }, [api]);
+  }, []);
 
   return (
     <Card className={className}>

diff --git a/rnd/autogpt_builder/src/components/monitor/FlowInfo.tsx b/rnd/autogpt_builder/src/components/monitor/FlowInfo.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import AutoGPTServerAPI, {
   Graph,
   GraphMeta,
@@ -28,7 +28,7 @@ export const FlowInfo: React.FC<
     flowVersion?: number | "all";
   }
 > = ({ flow, flowRuns, flowVersion, ...props }) => {
-  const api = useMemo(() => new AutoGPTServerAPI(), []);
+  const api = new AutoGPTServerAPI();
 
   const [flowVersions, setFlowVersions] = useState<Graph[] | null>(null);
   const [selectedVersion, setSelectedFlowVersion] = useState(
@@ -41,7 +41,7 @@ export const FlowInfo: React.FC<
 
   useEffect(() => {
     api.getGraphAllVersions(flow.id).then((result) => setFlowVersions(result));
-  }, [flow.id, api]);
+  }, [flow.id]);
 
   return (
     <Card {...props}>

diff --git a/rnd/autogpt_builder/src/components/node-input-components.tsx b/rnd/autogpt_builder/src/components/node-input-components.tsx
@@ -10,7 +10,7 @@ import {
   BlockIONumberSubSchema,
   BlockIOBooleanSubSchema,
 } from "@/lib/autogpt-server-api/types";
-import { FC, useCallback, useEffect, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import { Button } from "./ui/button";
 import { Switch } from "./ui/switch";
 import {
@@ -296,7 +296,7 @@ const NodeKeyValueInput: FC<{
   className,
   displayName,
 }) => {
-  const getPairValues = useCallback(() => {
+  const getPairValues = () => {
     let defaultEntries = new Map<string, any>();
 
     connections
@@ -311,15 +311,15 @@ const NodeKeyValueInput: FC<{
     });
 
     return Array.from(defaultEntries, ([key, value]) => ({ key, value }));
-  }, [connections, entries, schema.default, selfKey]);
+  };
 
   const [keyValuePairs, setKeyValuePairs] = useState<
     { key: string; value: string | number | null }[]
   >([]);
 
   useEffect(
     () => setKeyValuePairs(getPairValues()),
-    [connections, entries, schema.default, getPairValues],
+    [connections, entries, schema.default],
   );
 
   function updateKeyValuePairs(newPairs: typeof keyValuePairs) {

diff --git a/rnd/autogpt_builder/src/components/ui/input.tsx b/rnd/autogpt_builder/src/components/ui/input.tsx
@@ -19,7 +19,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       ) {
         ref.current.value = value;
       }
-    }, [value, type, ref]);
+    }, [value, type]);
     return (
       <input
         type={type}