chore: refactor 'save as' nodes and playlist node to share the same h…

…ooks

next.config.mjs

@@ -1,9 +1,6 @@
 await import("./src/env.js");
 
 const config = {
-  experimental: {
-    instrumentationHook: true
-  },
   output: process.env.STANDALONE_OUTPUT ? "standalone" : undefined,
   images: {
     remotePatterns: [

src/components/nodes/Library/Playlist.tsx

@@ -39,49 +39,26 @@ import { Separator } from "~/components/ui/separator";
 import { CardWithHeader } from "../Primitives/Card";
 import InputPrimitive from "../Primitives/Input";
 
-import * as z from "zod";
-
 import { Form, FormField, FormItem, FormLabel } from "@/components/ui/form";
 import useBasicNodeState from "~/hooks/useBasicNodeState";
+import { usePlaylistState } from "~/hooks/usePlaylistState";
 import Debug from "../Primitives/Debug";
-import { PlaylistItem as PlaylistItemPrimitive } from "../Primitives/PlaylistItem";
+import PlaylistCommand from "../Primitives/PlaylistCommand";
+
 type PlaylistProps = {
   id: string;
   // TODO type on playlist
   data: Workflow.Playlist;
 };
 
-const formSchema = z.object({
-  playlistId: z.string().min(1, {
-    message: "Playlist is required.",
-  }),
-  limit: z.number().optional(),
-  offset: z.number().optional(),
-});
-
-const PlaylistItem = ({
-  playlist,
-  onSelect,
-}: {
-  playlist: Workflow.Playlist;
-  onSelect: () => void;
-}) => (
-  <CommandItem
-    key={playlist.playlistId}
-    value={`${playlist.name} - ${playlist.playlistId}`}
-    onSelect={onSelect}
-  >
-    <PlaylistItemPrimitive playlist={playlist} />
-  </CommandItem>
-);
-
 const PlaylistComponent: React.FC<PlaylistProps> = ({ id, data }) => {
-  const [open, setOpen] = React.useState(false);
-  const [selectedPlaylist, setSelectedPlaylist] =
-    React.useState<Workflow.Playlist>(data);
-  const [search, setSearch] = React.useState("");
-
   const {
+    open,
+    setOpen,
+    selectedPlaylist,
+    setSelectedPlaylist,
+    search,
+    setSearch,
     state,
     isValid,
     targetConnections,
@@ -91,109 +68,11 @@ const PlaylistComponent: React.FC<PlaylistProps> = ({ id, data }) => {
     register,
     getNodeData,
     updateNodeData,
-  } = useBasicNodeState(id, formSchema);
-
-  const { session, userPlaylists, setUserPlaylistsStore } = useStore(
-    (state) => ({
-      session: state.session,
-      userPlaylists: state.userPlaylists,
-      setUserPlaylistsStore: state.setUserPlaylists,
-    }),
-  );
-
-  React.useEffect(() => {
-    if (data) {
-      form?.setValue("playlistId", data.playlistId);
-      updateNodeData(id, data);
-      form?.trigger("playlistId");
-    }
-  }, [data, form, id, updateNodeData]);
-
-  const watch = form!.watch();
-  const prevWatchRef = React.useRef(watch);
-  const prevSelectedPlaylistRef = React.useRef(selectedPlaylist);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-  React.useEffect(() => {
-    if (
-      JSON.stringify(prevWatchRef.current) !== JSON.stringify(watch) ||
-      JSON.stringify(prevSelectedPlaylistRef.current) !==
-        JSON.stringify(selectedPlaylist)
-    ) {
-      updateNodeData(id, {
-        ...watch,
-        ...selectedPlaylist,
-      });
-    }
-    prevWatchRef.current = watch;
-    prevSelectedPlaylistRef.current = selectedPlaylist;
-  }, [watch, selectedPlaylist, data, id, updateNodeData]);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-  React.useEffect(() => {
-    const searchPlaylist = async () => {
-      if (search.length > 0) {
-        try {
-          const response = await fetch(
-            `/api/user/${session.user.providerAccountId}/playlists?q=${search}`,
-          );
-          const data = await response.json();
-          const newPlaylists = userPlaylists.concat(data);
-          const dedupedPlaylists = newPlaylists.reduce((acc, current) => {
-            const x = acc.find(
-              (item) => item.playlistId === current.playlistId,
-            );
-            if (!x) {
-              return acc.concat([current]);
-            } else {
-              return acc;
-            }
-          }, []);
-
-          setUserPlaylistsStore(dedupedPlaylists);
-        } catch (err) {
-          console.error(err);
-        }
-      }
-    };
-
-    const userPlaylistsFetch = async () => {
-      try {
-        const response = await fetch(
-          `/api/user/${session.user.providerAccountId}/playlists`,
-        );
-        const data = await response.json();
-        setUserPlaylistsStore(data as any[]);
-      } catch (err) {
-        console.error(err);
-      }
-    };
-
-    function setUserPlaylists() {
-      if (search.length > 0) {
-        searchPlaylist().catch((err) => {
-          console.error(err);
-        });
-      } else {
-        userPlaylistsFetch().catch((err) => {
-          console.error(err);
-        });
-      }
-    }
-
-    // debounce({delay: 500}, setUserPlaylists)();
-    setUserPlaylists();
-  }, [search, session?.user?.providerAccountId, setUserPlaylistsStore]);
-
-  const handleSelect = (playlist) => {
-    console.info("handle select", playlist);
-    form?.setValue("playlistId", playlist.playlistId, {
-      shouldValidate: true,
-    });
-    console.info("data after update", getNodeData(id));
-    setSelectedPlaylist(playlist as Workflow.Playlist);
-    setOpen(false);
-  };
+    session,
+    userPlaylists,
+    setUserPlaylistsStore,
+    handleSelect,
+  } = usePlaylistState(id, data);
 
   return (
     <CardWithHeader
@@ -265,7 +144,7 @@ const PlaylistComponent: React.FC<PlaylistProps> = ({ id, data }) => {
                             <ScrollArea className="h-[200px] w-full rounded-md">
                               {userPlaylists.length > 0
                                 ? userPlaylists.map((playlist) => (
-                                    <PlaylistItem
+                                    <PlaylistCommand
                                       key={playlist.playlistId}
                                       playlist={playlist}
                                       onSelect={() => handleSelect(playlist)}