TaskContext as subset of ApiHookState

website/src/components/Tasks/Task/Task.stories.tsx

@@ -1,20 +1,22 @@
 import React from "react";
-
-import { Task } from "./Task";
+import { Task } from "src/components/Tasks/Task";
+import { TaskInfos } from "src/components/Tasks/TaskTypes";
+import { TaskContext } from "src/context/TaskContext";
 
 export default {
   title: "tasks/Task",
   component: Task,
 };
 
-const Template = ({ frontendId, task, isLoading, completeTask, skipTask }) => {
+const Template = ({ providerValue }) => {
   return (
-    <Task frontendId={frontendId} task={task} isLoading={isLoading} completeTask={completeTask} skipTask={skipTask} />
+    <TaskContext.Provider value={providerValue}>
+      <Task />
+    </TaskContext.Provider>
   );
 };
 
-export const Default = Template.bind({});
-Default.args = {
+const exampleProviderValue = {
   frontendId: "1234",
   task: {
     conversation: [],
@@ -25,11 +27,18 @@ Default.args = {
     type: "label_prompter_reply",
     valid_labels: ["spam", "fails_task"],
   },
+  taskInfo: TaskInfos.find((t) => t.type === "label_prompter_reply"),
   isLoading: false,
-  completeTask: (id, update_type, content) => {
+  completeTask: (content) => {
     console.log(content);
   },
   skipTask: () => {
     console.log("skip");
   },
+  rejectTask: () => {
+    console.log("reject");
+  },
 };
+
+export const Default = Template.bind({});
+Default.args = { providerValue: exampleProviderValue };

website/src/components/Tasks/Task/Task.tsx

@@ -66,7 +66,7 @@ export const Task = () => {
   const { t } = useTranslation("tasks");
   const rootEl = useRef<HTMLDivElement>(null);
   const replyContent = useRef<TaskContent>(null);
-  const { rejectTask, completeTask, response, isLoading } = useTaskContext();
+  const { rejectTask, completeTask, isLoading, task, taskInfo } = useTaskContext();
   const [taskStatus, taskEvent] = useReducer(
     (
       status: TaskStatus,
@@ -108,11 +108,6 @@ export const Task = () => {
     { mode: "EDIT", replyValidity: "INVALID" }
   );
 
-  if (response.taskAvailability !== "AVAILABLE") {
-    throw new Error("Cannot render task when it is unavailable yet");
-  }
-  const { task, taskInfo } = response;
-
   const updateValidity = useCallback(
     (replyValidity: TaskReplyValidity) => taskEvent({ action: "UPDATE_VALIDITY", replyValidity }),
     [taskEvent]
@@ -129,10 +124,10 @@ export const Task = () => {
     [replyContent]
   );
 
-  const submitResponse = useCallback(() => {
+  const submitResponse = useCallback(async () => {
     if (taskStatus.mode === "REVIEW") {
-      completeTask(replyContent.current);
       taskEvent({ action: "SET_SUBMITTED" });
+      await completeTask(replyContent.current);
       scrollToTop(rootEl.current);
     }
   }, [taskStatus.mode, completeTask]);

website/src/components/Tasks/TaskHeader/TaskHeader.tsx

@@ -1,8 +1,8 @@
 import { HStack, IconButton, Link, Stack, Text, useColorModeValue } from "@chakra-ui/react";
 import { HelpCircle } from "lucide-react";
 import { useTranslation } from "next-i18next";
-import type { TaskInfo } from "src/components/Tasks/TaskTypes";
 import { getTypeSafei18nKey } from "src/lib/i18n";
+import { TaskInfo } from "src/types/Task";
 
 interface TaskHeaderProps {
   /**