Consolidate API calls to TaskContext

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

@@ -5,13 +5,12 @@ import { TaskControls } from "src/components/Survey/TaskControls";
 import { CreateTask } from "src/components/Tasks/CreateTask";
 import { EvaluateTask } from "src/components/Tasks/EvaluateTask";
 import { LabelTask } from "src/components/Tasks/LabelTask";
-import { TaskCategory, TaskInfo, TaskInfos } from "src/components/Tasks/TaskTypes";
 import { UnchangedWarning } from "src/components/Tasks/UnchangedWarning";
-import { post } from "src/lib/api";
+import { useTaskContext } from "src/context/TaskContext";
 import { getTypeSafei18nKey } from "src/lib/i18n";
+import { TaskCategory, TaskInfo } from "src/types/Task";
 import { BaseTask, TaskContent, TaskReplyValidity } from "src/types/Task";
-import { CreateTaskType, KnownTaskType, LabelTaskType, RankTaskType } from "src/types/Tasks";
-import useSWRMutation from "swr/mutation";
+import { CreateTaskType, LabelTaskType, RankTaskType } from "src/types/Tasks";
 
 interface EditMode {
   mode: "EDIT";
@@ -63,16 +62,11 @@ export interface TaskSurveyProps<TaskType extends BaseTask, T> {
   onValidityChanged: (validity: TaskReplyValidity) => void;
 }
 
-interface TaskProps {
-  frontendId: string;
-  task: KnownTaskType;
-  isLoading: boolean;
-  completeTask: (TaskContent) => void;
-  skipTask: () => void;
-}
-
-export const Task = ({ frontendId, task, isLoading, completeTask, skipTask }: TaskProps) => {
+export const Task = () => {
   const { t } = useTranslation("tasks");
+  const rootEl = useRef<HTMLDivElement>(null);
+  const replyContent = useRef<TaskContent>(null);
+  const { rejectTask, completeTask, response, isLoading } = useTaskContext();
   const [taskStatus, taskEvent] = useReducer(
     (
       status: TaskStatus,
@@ -114,7 +108,11 @@ export const Task = ({ frontendId, task, isLoading, completeTask, skipTask }: Ta
     { mode: "EDIT", replyValidity: "INVALID" }
   );
 
-  const replyContent = useRef<TaskContent>(null);
+  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]
@@ -122,26 +120,7 @@ export const Task = ({ frontendId, task, isLoading, completeTask, skipTask }: Ta
 
   useEffect(() => {
     taskEvent({ action: "NEW_TASK" });
-  }, [task.id, updateValidity]);
-
-  const rootEl = useRef<HTMLDivElement>(null);
-
-  const taskType = useMemo(() => {
-    return TaskInfos.find((taskType) => taskType.type === task.type);
-  }, [task.type]);
-
-  const { trigger: sendRejection } = useSWRMutation("/api/reject_task", post, {
-    onSuccess: async () => {
-      skipTask();
-    },
-  });
-
-  const rejectTask = (reason: string) => {
-    sendRejection({
-      id: frontendId,
-      reason,
-    });
-  };
+  }, [task.id]);
 
   const onReplyChanged = useCallback(
     (content: TaskContent) => {
@@ -150,25 +129,21 @@ export const Task = ({ frontendId, task, isLoading, completeTask, skipTask }: Ta
     [replyContent]
   );
 
-  const submitResponse = () => {
+  const submitResponse = useCallback(() => {
     if (taskStatus.mode === "REVIEW") {
-      completeTask({
-        id: frontendId,
-        update_type: taskType.update_type,
-        content: replyContent.current,
-      });
+      completeTask(replyContent.current);
       taskEvent({ action: "SET_SUBMITTED" });
       scrollToTop(rootEl.current);
     }
-  };
+  }, [taskStatus.mode, completeTask]);
 
   const taskTypeComponent = useMemo(() => {
-    switch (taskType.category) {
+    switch (taskInfo.category) {
       case TaskCategory.Create:
         return (
           <CreateTask
             task={task as CreateTaskType}
-            taskType={taskType}
+            taskType={taskInfo}
             isEditable={taskStatus.mode === "EDIT"}
             isDisabled={taskStatus.mode === "SUBMITTED"}
             onReplyChanged={onReplyChanged}
@@ -179,7 +154,7 @@ export const Task = ({ frontendId, task, isLoading, completeTask, skipTask }: Ta
         return (
           <EvaluateTask
             task={task as RankTaskType}
-            taskType={taskType}
+            taskType={taskInfo}
             isEditable={taskStatus.mode === "EDIT"}
             isDisabled={taskStatus.mode === "SUBMITTED"}
             onReplyChanged={onReplyChanged}
@@ -190,7 +165,7 @@ export const Task = ({ frontendId, task, isLoading, completeTask, skipTask }: Ta
         return (
           <LabelTask
             task={task as LabelTaskType}
-            taskType={taskType}
+            taskType={taskInfo}
             isEditable={taskStatus.mode === "EDIT"}
             isDisabled={taskStatus.mode === "SUBMITTED"}
             onReplyChanged={onReplyChanged}
@@ -198,7 +173,7 @@ export const Task = ({ frontendId, task, isLoading, completeTask, skipTask }: Ta
           />
         );
     }
-  }, [task, taskType, taskStatus.mode, onReplyChanged, updateValidity]);
+  }, [taskInfo, task, taskStatus.mode, onReplyChanged, updateValidity]);
 
   return (
     <div ref={rootEl}>
@@ -214,8 +189,8 @@ export const Task = ({ frontendId, task, isLoading, completeTask, skipTask }: Ta
       />
       <UnchangedWarning
         show={taskStatus.mode === "DEFAULT_WARN"}
-        title={t(getTypeSafei18nKey(`${taskType.id}.unchanged_title`)) || t("default.unchanged_title")}
-        message={t(getTypeSafei18nKey(`${taskType.id}.unchanged_message`)) || t("default.unchanged_message")}
+        title={t(getTypeSafei18nKey(`${taskInfo.id}.unchanged_title`)) || t("default.unchanged_title")}
+        message={t(getTypeSafei18nKey(`${taskInfo.id}.unchanged_message`)) || t("default.unchanged_message")}
         continueButtonText={"Continue anyway"}
         onClose={() => taskEvent({ action: "RETURN_EDIT" })}
         onContinueAnyway={() => {

website/src/components/Tasks/TaskTypes.tsx

@@ -1,28 +1,4 @@
-import { TaskType } from "src/types/Task";
-
-export enum TaskCategory {
-  Create = "Create",
-  Evaluate = "Evaluate",
-  Label = "Label",
-  Random = "Random",
-}
-
-export enum TaskUpdateType {
-  MessageRanking = "message_ranking",
-  Random = "random",
-  TextLabels = "text_labels",
-  TextReplyToMessage = "text_reply_to_message",
-}
-
-export interface TaskInfo {
-  category: TaskCategory;
-  help_link: string;
-  id: string;
-  mode?: string;
-  pathname: string;
-  type: string;
-  update_type: string;
-}
+import { TaskCategory, TaskInfo, TaskType, TaskUpdateType } from "src/types/Task";
 
 export const TaskCategoryLabels: { [key in TaskCategory]: string } = {
   [TaskCategory.Random]: "grab_a_task",