fix first and last nodes

radityaharya · Aug 6, 2024 · 65d865d · 65d865d
1 parent 1119247
commit 65d865d
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 49 deletions.
diff --git a/src/components/nodes/Library/Playlist.tsx b/src/components/nodes/Library/Playlist.tsx
@@ -33,14 +33,12 @@ import {
 import { ScrollArea } from "@/components/ui/scroll-area";
 
 import Image from "next/image";
-import useStore from "~/app/states/store";
 import { Separator } from "~/components/ui/separator";
 
 import { CardWithHeader } from "../Primitives/Card";
 import InputPrimitive from "../Primitives/Input";
 
 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 PlaylistCommand from "../Primitives/PlaylistCommand";

diff --git a/src/components/nodes/Library/SaveAsAppend.tsx b/src/components/nodes/Library/SaveAsAppend.tsx
@@ -24,8 +24,6 @@ import {
 import { ScrollArea } from "@/components/ui/scroll-area";
 
 import Image from "next/image";
-
-import * as z from "zod";
 import { CardWithHeader } from "../Primitives/Card";
 
 import { Form, FormField, FormItem, FormLabel } from "@/components/ui/form";
@@ -38,12 +36,6 @@ type PlaylistProps = {
   data: Workflow.Playlist;
 };
 
-const formSchema = z.object({
-  playlistId: z.string().min(1, {
-    message: "Playlist is required.",
-  }),
-});
-
 function SaveAsAppendComponent({ id, data }: PlaylistProps) {
   const {
     open,
@@ -52,18 +44,11 @@ function SaveAsAppendComponent({ id, data }: PlaylistProps) {
     setSelectedPlaylist,
     search,
     setSearch,
-    state,
-    isValid,
     targetConnections,
     sourceConnections,
     form,
     formState,
-    register,
-    getNodeData,
-    updateNodeData,
-    session,
     userPlaylists,
-    setUserPlaylistsStore,
     handleSelect,
   } = usePlaylistState(id, data);
 

diff --git a/src/components/nodes/Library/SaveAsNew.tsx b/src/components/nodes/Library/SaveAsNew.tsx
@@ -16,6 +16,7 @@ import * as z from "zod";
 import { Form } from "@/components/ui/form";
 import useBasicNodeState from "~/hooks/useBasicNodeState";
 import Debug from "../Primitives/Debug";
+
 type PlaylistProps = {
   id: string;
   data: any;
@@ -32,15 +33,12 @@ const formSchema = z.object({
 
 const saveAsNewComponent: React.FC<PlaylistProps> = ({ id, data }) => {
   const {
-    state,
     isValid,
     targetConnections,
     sourceConnections,
     form,
-    nodeData,
     formState,
     register,
-    getNodeData,
     updateNodeData,
   } = useBasicNodeState(id, formSchema);
 

diff --git a/src/components/nodes/Primitives/Input.tsx b/src/components/nodes/Primitives/Input.tsx
@@ -33,6 +33,7 @@ type InputPrimitiveProps = {
   name: string;
   placeholder: string;
   description: string;
+  defaultValue?: any;
   register: UseFormRegister<any>;
   selectOptions?: {
     label: string;

diff --git a/src/components/nodes/Primitives/SourceList.tsx b/src/components/nodes/Primitives/SourceList.tsx
@@ -1,15 +1,23 @@
 import { PlaylistItem as PlaylistItemPrimitive } from "../Primitives/PlaylistItem";
 import { AlertComponent } from "./Alert";
 
-export function SourceList({
-  state,
-  isValid,
-  operationType,
-}: {
+interface SourceListProps {
   state: any;
   isValid: boolean;
   operationType: string;
-}) {
+}
+
+export function SourceList({ state, isValid, operationType }: SourceListProps) {
+  if (!(state?.playlistIds && state.playlists)) {
+    return (
+      <AlertComponent
+        variant="destructive"
+        title="Error"
+        description="No track source set as input"
+      />
+    );
+  }
+
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-col text-sm font-medium">
@@ -37,11 +45,11 @@ export function SourceList({
         )}
       </div>
       <div className="flex flex-col gap-2">
-        {state.playlists
-          ? state.playlists?.map((playlist) =>
+        {state.playlists.length > 0
+          ? state.playlists.map((playlist) =>
               playlist && isValid ? (
                 <PlaylistItemPrimitive
-                  key={playlist.id || playlist.name || 1}
+                  key={playlist.id || playlist.name}
                   playlist={playlist}
                 />
               ) : null,

diff --git a/src/components/nodes/Selectors/First.tsx b/src/components/nodes/Selectors/First.tsx
@@ -1,32 +1,64 @@
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 "use client";
 
+import { Form } from "@/components/ui/form";
 import { Position } from "@xyflow/react";
-import NodeHandle from "../Primitives/NodeHandle";
-
 import React from "react";
+import * as z from "zod";
+import { Separator } from "~/components/ui/separator";
 import useBasicNodeState from "~/hooks/useBasicNodeState";
 import { CardWithHeader } from "../Primitives/Card";
 import Debug from "../Primitives/Debug";
+import InputPrimitive from "../Primitives/Input";
+import NodeHandle from "../Primitives/NodeHandle";
 import { SourceList } from "../Primitives/SourceList";
 
 type PlaylistProps = {
   id: string;
-  data: any;
+  data: { count: number };
 };
 
-const First: React.FC<PlaylistProps> = ({ id, data }) => {
-  const { state, isValid, targetConnections, sourceConnections } =
-    useBasicNodeState(id);
+const formSchema = z.object({
+  count: z.number().int().default(1),
+});
+
+const LastComponent: React.FC<PlaylistProps> = ({ id, data }) => {
+  const {
+    state,
+    isValid,
+    targetConnections,
+    sourceConnections,
+    form,
+    formState,
+    register,
+    updateNodeData,
+  } = useBasicNodeState(id, formSchema);
+
+  const watch = form!.watch();
+  const prevWatchRef = React.useRef(watch);
+
+  React.useEffect(() => {
+    if (data && form) {
+      form.setValue("count", data.count);
+      form.trigger();
+    }
+  }, [data, form]);
+
+  React.useEffect(() => {
+    if (JSON.stringify(prevWatchRef.current) !== JSON.stringify(watch)) {
+      updateNodeData(id, {
+        count: watch.count,
+      });
+    }
+    prevWatchRef.current = watch;
+  }, [id, watch, updateNodeData]);
 
   return (
     <CardWithHeader
       title={`First`}
       id={id}
       type="Selector"
       status={isValid === null ? "loading" : isValid ? "success" : "error"}
-      info="Interleaves the tracks from multiple playlists"
+      info="Selects the first N element(s) from a stream"
     >
       <NodeHandle
         type="source"
@@ -38,8 +70,28 @@ const First: React.FC<PlaylistProps> = ({ id, data }) => {
         position={Position.Left}
         style={{ background: "#555" }}
       />
+      <Form {...form!}>
+        <form onSubmit={form!.handleSubmit((data) => console.info(data))}>
+          <div className="flex flex-col gap-2">
+            <InputPrimitive
+              control={form!.control}
+              name="count"
+              inputType={"textfield"}
+              label={"Count"}
+              placeholder="1"
+              register={register!}
+              description={`Last N elements to pick
+                
+
+                default: 1
+                `}
+            />
+          </div>
+        </form>
+      </Form>
+      <Separator className="my-4" />
+      <SourceList state={state} isValid={isValid} operationType="Selecting" />
       <div className="flex flex-col gap-4">
-        <SourceList state={state} isValid={isValid} operationType="Selecting" />
         <Debug
           id={id}
           isValid={isValid}
@@ -51,4 +103,4 @@ const First: React.FC<PlaylistProps> = ({ id, data }) => {
   );
 };
 
-export default First;
+export default LastComponent;
diff --git a/src/components/nodes/Selectors/Last.tsx b/src/components/nodes/Selectors/Last.tsx
@@ -1,32 +1,64 @@
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 "use client";
 
+import { Form } from "@/components/ui/form";
 import { Position } from "@xyflow/react";
-import NodeHandle from "../Primitives/NodeHandle";
-
 import React from "react";
+import * as z from "zod";
+import { Separator } from "~/components/ui/separator";
 import useBasicNodeState from "~/hooks/useBasicNodeState";
 import { CardWithHeader } from "../Primitives/Card";
 import Debug from "../Primitives/Debug";
+import InputPrimitive from "../Primitives/Input";
+import NodeHandle from "../Primitives/NodeHandle";
 import { SourceList } from "../Primitives/SourceList";
 
 type PlaylistProps = {
   id: string;
-  data: any;
+  data: { count: number };
 };
 
+const formSchema = z.object({
+  count: z.number().int().default(1),
+});
+
 const LastComponent: React.FC<PlaylistProps> = ({ id, data }) => {
-  const { state, isValid, targetConnections, sourceConnections } =
-    useBasicNodeState(id);
+  const {
+    state,
+    isValid,
+    targetConnections,
+    sourceConnections,
+    form,
+    formState,
+    register,
+    updateNodeData,
+  } = useBasicNodeState(id, formSchema);
+
+  const watch = form!.watch();
+  const prevWatchRef = React.useRef(watch);
+
+  React.useEffect(() => {
+    if (data && form) {
+      form.setValue("count", data.count);
+      form.trigger();
+    }
+  }, [data, form]);
+
+  React.useEffect(() => {
+    if (JSON.stringify(prevWatchRef.current) !== JSON.stringify(watch)) {
+      updateNodeData(id, {
+        count: watch.count,
+      });
+    }
+    prevWatchRef.current = watch;
+  }, [id, watch, updateNodeData]);
 
   return (
     <CardWithHeader
       title={`Last`}
       id={id}
       type="Selector"
       status={isValid === null ? "loading" : isValid ? "success" : "error"}
-      info="Selects the last element of an array"
+      info="Selects the last N element(s) from a stream"
     >
       <NodeHandle
         type="source"
@@ -38,8 +70,28 @@ const LastComponent: React.FC<PlaylistProps> = ({ id, data }) => {
         position={Position.Left}
         style={{ background: "#555" }}
       />
+      <Form {...form!}>
+        <form onSubmit={form!.handleSubmit((data) => console.info(data))}>
+          <div className="flex flex-col gap-2">
+            <InputPrimitive
+              control={form!.control}
+              name="count"
+              inputType={"textfield"}
+              label={"Count"}
+              placeholder="1"
+              register={register!}
+              description={`Last N elements to pick
+                
+
+                default: 1
+                `}
+            />
+          </div>
+        </form>
+      </Form>
+      <Separator className="my-4" />
+      <SourceList state={state} isValid={isValid} operationType="Selecting" />
       <div className="flex flex-col gap-4">
-        <SourceList state={state} isValid={isValid} operationType="Selecting" />
         <Debug
           id={id}
           isValid={isValid}