[TSK-358] Create research context

lib/components/dialog/CreateResearchContextCreating.tsx

@@ -0,0 +1,55 @@
+import { TCreateResearchContextViewModel } from "../models";
+
+export const CreateResearchContextCreating = (
+  props: TCreateResearchContextViewModel,
+) => {
+  const icon = () => {
+    if (props.status === "request") {
+      return "spinner";
+    }
+    if (props.status === "progress") {
+      return "spinner";
+    }
+    if (props.status === "error") {
+      return "error";
+    }
+    if (props.status === "success") {
+      return "check";
+    }
+  };
+  const title = () => {
+    if (props.status === "request") {
+      return "Creating research context...";
+    }
+    if (props.status === "progress") {
+      return "Creating research context...";
+    }
+    if (props.status === "error") {
+      return "Error";
+    }
+    if (props.status === "success") {
+      return "Success";
+    }
+  };
+  const message = () => {
+    if (props.status === "request") {
+      return "Creating research context...";
+    }
+    if (props.status === "progress") {
+      return props.message;
+    }
+    if (props.status === "error") {
+      return props.message;
+    }
+    if (props.status === "success") {
+      return `Research context created: ${props.researchContext.title}`;
+    }
+  };
+  return (
+    <div className="flex flex-col gap-2 p-4 items-center justify-between">
+      {icon()}
+      <h1>{title()}</h1>
+      <p>{message()}</p>
+    </div>
+  );
+};

lib/components/dialog/CreateResearchContextDialog.tsx

@@ -1,81 +1,69 @@
 "use client";
 import { Dialog as ShadcnDialog } from "@/ui/dialog";
 import { Button } from "@/components/button/index";
-import { Input as ShadcnInput } from "@/ui/input";
 import { cn } from "@/utils/utils";
 
-import {
-  Form as ShadcnForm,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-
 import {
   DialogTrigger,
   DialogContent,
-  DialogHeader,
   DialogClose,
-  DialogDescription,
-  DialogTitle,
 } from "@/components/ui/dialog";
 
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
+import { RemoteFile, TCreateResearchContextViewModel } from "../models";
+import { useState } from "react";
+import {
+  CreateResearchContextForm,
+  onSubmitInputValues,
+} from "./CreateResearchContextForm";
+import { CreateResearchContextSelectFilesView } from "./CreateResearchContextSelectFiles";
 import { PlusCircle } from "lucide-react";
+import { CreateResearchContextCreating } from "./CreateResearchContextCreating";
 
-/**
- * Interface representing the input values for the onSubmit function.
- */
-export interface onSubmitInputValues {
-  researchContextName: string;
-  researchContextDescription: string;
-}
-
-/**
- * Props for the CreateResearchContextDialog component.
- */
 export interface CreateResearchContextDialogProps {
   /**
    * Callback function that will be called when the form is submitted.
    */
-  onSubmit: (inputValues: onSubmitInputValues) => void;
+  onSubmit: (
+    researchContextName: string,
+    researchContextDescription: string,
+    files: RemoteFile[],
+  ) => void;
+  clientFiles: RemoteFile[];
+  viewModel: TCreateResearchContextViewModel;
 }
 
-/**
- * Zod schema for the form values.
- */
-const formSchema = z.object({
-  researchContextName: z.string().min(6, {
-    message: "Name must be at least 6 characters long.",
-  }),
-  researchContextDescription: z.string().min(10, {
-    message: "Description must be at least 10 characters long.",
-  }),
-});
-
 /**
  * Create a new research context dialog
  */
-export const CreateResearchContextDialog = ({
-  onSubmit,
-  ...props
-}: CreateResearchContextDialogProps) => {
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      researchContextName: "",
-      researchContextDescription: "",
-    },
-  });
+export const CreateResearchContextDialog = (
+  props: CreateResearchContextDialogProps,
+) => {
+  const [currentView, setCurrentView] = useState<"form" | "files" | "progress">(
+    "form",
+  );
+  const [researchContextName, setResearchContextName] = useState<string>("");
+  const [researchContextDescription, setResearchContextDescription] =
+    useState<string>("");
+  const [selectedFiles, setSelectedFiles] = useState<RemoteFile[]>([]);
 
-  const onSubmitWrapper = (values: z.infer<typeof formSchema>) => {
-    onSubmit(values);
+  const selectFile = (file: RemoteFile) => {
+    if (selectedFiles.includes(file)) {
+      setSelectedFiles(
+        selectedFiles.filter((selectedFile) => selectedFile.id !== file.id),
+      );
+    } else {
+      setSelectedFiles([...selectedFiles, file]);
+    }
   };
 
+  const handleSubmit = () => {
+    setCurrentView("progress");
+    props.onSubmit(
+      researchContextName,
+      researchContextDescription,
+      selectedFiles,
+    );
+  };
   return (
     <ShadcnDialog {...props}>
       <DialogTrigger asChild>
@@ -93,81 +81,30 @@ export const CreateResearchContextDialog = ({
         )}
       >
         <DialogClose asChild />
-
-        <DialogHeader>
-          <DialogTitle>New conversation</DialogTitle>
-          <DialogDescription>
-            Create a new conversation to organize your research
-          </DialogDescription>
-        </DialogHeader>
-
-        <ShadcnForm {...form}>
-          <form onSubmit={form.handleSubmit(onSubmitWrapper)}>
-            <div className="flex flex-col items-center gap-medium">
-              <FormField
-                control={form.control}
-                name="researchContextName"
-                render={({ field }) => (
-                  <FormItem className={cn("xl:ml-9")}>
-                    <FormLabel>Name *</FormLabel>
-                    <FormControl>
-                      <ShadcnInput
-                        className={cn(
-                          "text-neutral-900",
-                          "lg:w-80",
-                          "md:w-80",
-                          "sm:items-center",
-
-                          form.formState.errors.researchContextName
-                            ? "border-error-500"
-                            : "border-neutral-300",
-                        )}
-                        placeholder="Enter a name for the research context"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage className={cn("text-error-500")} />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="researchContextDescription"
-                render={({ field }) => (
-                  <FormItem className={cn("xl:ml-9")}>
-                    <FormLabel>Description *</FormLabel>
-                    <FormControl>
-                      <ShadcnInput
-                        className={cn(
-                          "text-neutral-900 ",
-                          "lg:w-80",
-                          "md:w-80",
-
-                          form.formState.errors.researchContextDescription
-                            ? "border-error-500"
-                            : "border-neutral-300",
-                        )}
-                        placeholder="Enter a description for the research context"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage className={cn("text-error-500 ")} />
-                  </FormItem>
-                )}
-              />
-              <div className={cn("text-center")}>
-                <Button
-                  className=""
-                  variant="default"
-                  size="default"
-                  label="Create new research context"
-                  type="submit"
-                />
-              </div>
-            </div>
-          </form>
-        </ShadcnForm>
+        {currentView === "form" && (
+          <CreateResearchContextForm
+            onSubmit={(inputValues: onSubmitInputValues) => {
+              setResearchContextName(inputValues.researchContextName);
+              setResearchContextDescription(
+                inputValues.researchContextDescription,
+              );
+              setCurrentView("files");
+            }}
+          />
+        )}
+        {currentView === "files" && (
+          <CreateResearchContextSelectFilesView
+            files={props.clientFiles}
+            selectFile={selectFile}
+            onNext={handleSubmit}
+            onPrevious={() => {
+              setCurrentView("form");
+            }}
+          />
+        )}
+        {currentView === "progress" && (
+          <CreateResearchContextCreating {...props.viewModel} />
+        )}
       </DialogContent>
     </ShadcnDialog>
   );