From ad91bfe20190214b914aaeb945dc5925d5ceff92 Mon Sep 17 00:00:00 2001
From: AbdBarho <ka70911@gmail.com>
Date: Sun, 8 Jan 2023 18:57:18 +0100
Subject: [PATCH] Use hooks for "create" tasks

---
 .../tasks/create/useCreateInitialPrompt.ts    |  9 +++++
 .../src/hooks/tasks/create/useCreateReply.ts  | 24 +++++++++++
 website/src/hooks/tasks/useGenericTaskAPI.tsx |  6 +--
 website/src/pages/create/assistant_reply.tsx  | 31 ++------------
 website/src/pages/create/initial_prompt.tsx   | 31 ++------------
 website/src/pages/create/user_reply.tsx       | 40 +++----------------
 6 files changed, 50 insertions(+), 91 deletions(-)
 create mode 100644 website/src/hooks/tasks/create/useCreateInitialPrompt.ts
 create mode 100644 website/src/hooks/tasks/create/useCreateReply.ts

diff --git a/website/src/hooks/tasks/create/useCreateInitialPrompt.ts b/website/src/hooks/tasks/create/useCreateInitialPrompt.ts
new file mode 100644
index 00000000..cf0193e8
--- /dev/null
+++ b/website/src/hooks/tasks/create/useCreateInitialPrompt.ts
@@ -0,0 +1,9 @@
+import { useGenericTaskAPI } from "../useGenericTaskAPI";
+
+interface CreateInitialPromptTask {
+  id: string;
+  type: "initial_prompt";
+  hint: string;
+}
+
+export const useCreateInitialPrompt = () => useGenericTaskAPI<CreateInitialPromptTask>("initial_prompt");
diff --git a/website/src/hooks/tasks/create/useCreateReply.ts b/website/src/hooks/tasks/create/useCreateReply.ts
new file mode 100644
index 00000000..0bc78319
--- /dev/null
+++ b/website/src/hooks/tasks/create/useCreateReply.ts
@@ -0,0 +1,24 @@
+import { useGenericTaskAPI } from "../useGenericTaskAPI";
+
+interface BaseCreateReplyTask {
+  id: string;
+  conversation: {
+    messages: Array<{
+      text: string;
+      is_assistant: boolean;
+      message_id: string;
+    }>;
+  };
+}
+
+export interface CreateAssistantReplyTask extends BaseCreateReplyTask {
+  type: "assistant_reply";
+}
+
+export interface CreatePrompterReplyTask extends BaseCreateReplyTask {
+  type: "prompter_reply";
+}
+
+export const useCreateAssistantReply = () => useGenericTaskAPI<CreateAssistantReplyTask>("assistant_reply");
+
+export const useCreatePrompterReply = () => useGenericTaskAPI<CreatePrompterReplyTask>("prompter_reply");
diff --git a/website/src/hooks/tasks/useGenericTaskAPI.tsx b/website/src/hooks/tasks/useGenericTaskAPI.tsx
index 1a6c0be9..fab414d3 100644
--- a/website/src/hooks/tasks/useGenericTaskAPI.tsx
+++ b/website/src/hooks/tasks/useGenericTaskAPI.tsx
@@ -17,7 +17,7 @@ export const useGenericTaskAPI = <TaskType,>(taskApiEndpoint: string) => {
 
   const [tasks, setTasks] = useState<ConcreteTaskResponse[]>([]);
 
-  const { isLoading, mutate, error } = useSWRImmutable<ConcreteTaskResponse>(
+  const { data, isLoading, mutate, error } = useSWRImmutable<ConcreteTaskResponse>(
     "/api/new_task/" + taskApiEndpoint,
     fetcher,
     {
@@ -26,10 +26,10 @@ export const useGenericTaskAPI = <TaskType,>(taskApiEndpoint: string) => {
   );
 
   useEffect(() => {
-    if (tasks.length === 0 && !isLoading && !error) {
+    if (data === undefined && !isLoading && !error) {
       mutate();
     }
-  }, [tasks, isLoading, mutate, error]);
+  }, [data, isLoading, mutate, error]);
 
   const { trigger } = useSWRMutation("/api/update_task", poster, {
     onSuccess: async (response) => {
diff --git a/website/src/pages/create/assistant_reply.tsx b/website/src/pages/create/assistant_reply.tsx
index 6dad3931..e9aee226 100644
--- a/website/src/pages/create/assistant_reply.tsx
+++ b/website/src/pages/create/assistant_reply.tsx
@@ -1,35 +1,12 @@
 import { Container } from "@chakra-ui/react";
 import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
-import { useEffect, useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
-import fetcher from "src/lib/fetcher";
-import poster from "src/lib/poster";
-import useSWRImmutable from "swr/immutable";
-import useSWRMutation from "swr/mutation";
+import { useCreateAssistantReply } from "src/hooks/tasks/create/useCreateReply";
 
 const AssistantReply = () => {
-  const [tasks, setTasks] = useState([]);
-
-  const { isLoading, mutate } = useSWRImmutable("/api/new_task/assistant_reply ", fetcher, {
-    onSuccess: (data) => {
-      setTasks([data]);
-    },
-  });
-
-  useEffect(() => {
-    if (tasks.length == 0) {
-      mutate();
-    }
-  }, [tasks]);
-
-  const { trigger } = useSWRMutation("/api/update_task", poster, {
-    onSuccess: async (data) => {
-      const newTask = await data.json();
-      setTasks((oldTasks) => [...oldTasks, newTask]);
-    },
-  });
+  const { tasks, isLoading, reset, trigger } = useCreateAssistantReply();
 
   const { colorMode } = useColorMode();
   const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
@@ -38,7 +15,7 @@ const AssistantReply = () => {
     return <LoadingScreen text="Loading..." />;
   }
 
-  if (tasks.length == 0) {
+  if (tasks.length === 0) {
     return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
   }
 
@@ -48,7 +25,7 @@ const AssistantReply = () => {
         <title>Reply as Assistant</title>
         <meta name="description" content="Reply as Assistant." />
       </Head>
-      <Task tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />
+      <Task tasks={tasks} trigger={trigger} mutate={reset} mainBgClasses={mainBgClasses} />
     </>
   );
 };
diff --git a/website/src/pages/create/initial_prompt.tsx b/website/src/pages/create/initial_prompt.tsx
index fc9ba39b..efea6474 100644
--- a/website/src/pages/create/initial_prompt.tsx
+++ b/website/src/pages/create/initial_prompt.tsx
@@ -1,35 +1,12 @@
 import { Container } from "@chakra-ui/react";
 import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
-import { useEffect, useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
-import fetcher from "src/lib/fetcher";
-import poster from "src/lib/poster";
-import useSWRImmutable from "swr/immutable";
-import useSWRMutation from "swr/mutation";
+import { useCreateInitialPrompt } from "src/hooks/tasks/create/useCreateInitialPrompt";
 
 const InitialPrompt = () => {
-  const [tasks, setTasks] = useState([]);
-
-  const { isLoading, mutate } = useSWRImmutable("/api/new_task/initial_prompt ", fetcher, {
-    onSuccess: (data) => {
-      setTasks([data]);
-    },
-  });
-
-  const { trigger } = useSWRMutation("/api/update_task", poster, {
-    onSuccess: async (data) => {
-      const newTask = await data.json();
-      setTasks((oldTasks) => [...oldTasks, newTask]);
-    },
-  });
-
-  useEffect(() => {
-    if (tasks.length == 0) {
-      mutate();
-    }
-  }, [tasks]);
+  const { tasks, isLoading, reset, trigger } = useCreateInitialPrompt();
 
   const { colorMode } = useColorMode();
   const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
@@ -38,7 +15,7 @@ const InitialPrompt = () => {
     return <LoadingScreen text="Loading..." />;
   }
 
-  if (tasks.length == 0) {
+  if (tasks.length === 0) {
     return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
   }
 
@@ -48,7 +25,7 @@ const InitialPrompt = () => {
         <title>Reply as Assistant</title>
         <meta name="description" content="Reply as Assistant." />
       </Head>
-      <Task tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />
+      <Task tasks={tasks} trigger={trigger} mutate={reset} mainBgClasses={mainBgClasses} />
     </>
   );
 };
diff --git a/website/src/pages/create/user_reply.tsx b/website/src/pages/create/user_reply.tsx
index 70487805..2394bd63 100644
--- a/website/src/pages/create/user_reply.tsx
+++ b/website/src/pages/create/user_reply.tsx
@@ -1,34 +1,12 @@
 import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
-import { useEffect, useState } from "react";
+import { Container } from "src/components/Container";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
-import fetcher from "src/lib/fetcher";
-import poster from "src/lib/poster";
-import useSWRImmutable from "swr/immutable";
-import useSWRMutation from "swr/mutation";
+import { useCreatePrompterReply } from "src/hooks/tasks/create/useCreateReply";
 
 const UserReply = () => {
-  const [tasks, setTasks] = useState([]);
-
-  const { isLoading, mutate } = useSWRImmutable("/api/new_task/prompter_reply", fetcher, {
-    onSuccess: (data) => {
-      setTasks([data]);
-    },
-  });
-
-  useEffect(() => {
-    if (tasks.length == 0) {
-      mutate();
-    }
-  }, [tasks]);
-
-  const { trigger } = useSWRMutation("/api/update_task", poster, {
-    onSuccess: async (data) => {
-      const newTask = await data.json();
-      setTasks((oldTasks) => [...oldTasks, newTask]);
-    },
-  });
+  const { tasks, isLoading, reset, trigger } = useCreatePrompterReply();
 
   const { colorMode } = useColorMode();
   const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
@@ -37,14 +15,8 @@ const UserReply = () => {
     return <LoadingScreen text="Loading..." />;
   }
 
-  if (tasks.length == 0) {
-    return (
-      <div className={`p-12 ${mainBgClasses}`}>
-        <div className="flex h-full">
-          <div className="text-xl font-bold  mx-auto my-auto">No tasks found...</div>
-        </div>
-      </div>
-    );
+  if (tasks.length === 0) {
+    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
   }
 
   return (
@@ -53,7 +25,7 @@ const UserReply = () => {
         <title>Reply as Assistant</title>
         <meta name="description" content="Reply as Assistant." />
       </Head>
-      <Task tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />
+      <Task tasks={tasks} trigger={trigger} mutate={reset} mainBgClasses={mainBgClasses} />
     </>
   );
 };