refactor sum stuff

.eslintrc.cjs

@@ -40,7 +40,9 @@ const config = {
     "@typescript-eslint/no-floating-promises": "off",
     "@typescript-eslint/no-inferrable-types": "off",
     "@typescript-eslint/no-redundant-type-constituents": "off",
-    "@typescript-eslint/no-unsafe-argument": "off"
+    "@typescript-eslint/no-unsafe-argument": "off",
+    "@typescript-eslint/consistent-indexed-object-style": "off",
+    "@typescript-eslint/prefer-nullish-coalescing": "off"
   },
 };
 

src/app/utils/saveWorkflow.ts

@@ -1,25 +1,41 @@
 import { toast } from "sonner";
+import reactFlowToWorkflow from "./reactFlowToWorkflow";
+import useStore from "~/app/states/store";
+export async function saveWorkflow() {
+  const nodes = useStore.getState().nodes;
+  const edges = useStore.getState().edges;
+  const { workflowResponse: workflow, errors } = await reactFlowToWorkflow({
+    nodes,
+    edges,
+  });
 
-export async function saveWorkflow(workflow: WorkflowResponse) {
-  const promise = fetch("/api/workflow", {
+  const responsePromise = fetch("/api/workflow", {
     method: "POST",
     body: JSON.stringify(workflow),
-  })
-    .then((res) => {
-      return res.json();
-    })
-    .then((data) => {
-      if (data.errors) {
-        throw new Error("Error saving workflow");
-      }
-      return data;
-    });
-  toast.promise(promise, {
+  });
+
+  toast.promise(responsePromise, {
     loading: "Saving workflow...",
-    success: (_data) => {
-      return `${workflow.name} saved successfully`;
-    },
+    success: (_data) => `${workflow.name} saved successfully`,
     error: "Error saving workflow",
   });
-  return promise;
-}
+
+  const response = await responsePromise;
+  const data = await response.json();
+
+  if (data.errors) {
+    throw new Error("Error saving workflow");
+  }
+
+  useStore.setState((state) => ({
+    ...state,
+    flowState: {
+      ...state.flowState,
+      description: data.description,
+      name: data.name,
+      id: data.id,
+    },
+  }));
+
+  return data;
+}

src/app/workflow/Builder.tsx

@@ -2,10 +2,10 @@
 
 import { type Edge, type Node } from "@xyflow/react";
 
-import Flow from "@/components/Flow";
+import Flow from "./Flow";
 // import styles from "./page.module.css";
 import { useSession } from "next-auth/react";
-import { useEffect } from "react";
+import { memo, useCallback, useEffect } from "react";
 
 import useStore from "@/app/states/store";
 import Sidebar from "./Sidebar";
@@ -64,7 +64,7 @@ function Builder({
   } = useWorkflowData(flowId);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-  useEffect(() => {
+  const handleWorkflowData = useCallback(() => {
     if (workflowData === undefined && workflowError !== undefined) {
       toast.error(workflowError.info);
       router.push("/workflow");
@@ -135,7 +135,10 @@ function Builder({
     setNodes,
   ]);
 
-  useEffect(() => {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(handleWorkflowData, [handleWorkflowData]);
+
+  const handleUserPlaylists = useCallback(() => {
     if (!session?.user?.providerAccountId) {
       return;
     }
@@ -150,6 +153,9 @@ function Builder({
       });
   }, [session?.user?.providerAccountId, setUserPlaylists]);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(handleUserPlaylists, [handleUserPlaylists]);
+
   return (
     <div className="flex h-screen flex-col">
       <main className="grid h-screen">
@@ -160,10 +166,7 @@ function Builder({
           <ResizableHandle withHandle />
           <ResizablePanel defaultSize={80}>
             {workflowIsLoading || sessionStore === null ? (
-              <div className="flex h-full items-center justify-center">
-                <LoadingSVG />
-                <div className="ml-2">Loading...</div>
-              </div>
+              <Loading />
             ) : (
               <Flow />
             )}
@@ -174,6 +177,13 @@ function Builder({
   );
 }
 
+const Loading = memo(() => (
+  <div className="flex h-full items-center justify-center">
+    <LoadingSVG />
+    <div className="ml-2">Loading...</div>
+  </div>
+));
+
 const LoadingSVG = () => (
   <svg
     aria-hidden="true"