From a2f68c72599e63cf6c98b5e995465aeb3aecaab6 Mon Sep 17 00:00:00 2001
From: Keith Stevens <fozziethebeat@gmail.com>
Date: Mon, 16 Jan 2023 18:51:01 +0900
Subject: [PATCH] Require labels to be set on labeling task and setting up
 basic storybook stories for tasks

---
 website/src/components/FlaggableElement.tsx               | 6 +++++-
 website/src/components/Survey/LabelSliderGroup.tsx        | 2 +-
 .../src/components/Tasks/{ => LabelTask}/LabelTask.tsx    | 5 ++++-
 website/src/components/Tasks/{ => Task}/Task.tsx          | 0
 website/src/lib/oasst_api_client.ts                       | 8 +++++++-
 website/src/pages/api/new_task/[task_type].ts             | 1 +
 6 files changed, 18 insertions(+), 4 deletions(-)
 rename website/src/components/Tasks/{ => LabelTask}/LabelTask.tsx (95%)
 rename website/src/components/Tasks/{ => Task}/Task.tsx (100%)

diff --git a/website/src/components/FlaggableElement.tsx b/website/src/components/FlaggableElement.tsx
index b9e41a32..9ba227ee 100644
--- a/website/src/components/FlaggableElement.tsx
+++ b/website/src/components/FlaggableElement.tsx
@@ -26,7 +26,7 @@ import { useEffect, useReducer } from "react";
 import { FiAlertCircle } from "react-icons/fi";
 import { get, post } from "src/lib/api";
 import { Message } from "src/types/Conversation";
-import { colors } from "styles/Theme/colors";
+import { colors } from "src/styles/Theme/colors";
 import useSWR from "swr";
 import useSWRMutation from "swr/mutation";
 
@@ -105,6 +105,10 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
     if (isLoading) {
       return;
     }
+    if (!data) {
+      updateReport({ type: "load_labels", labels: [] });
+      return;
+    }
     const { valid_labels } = data;
     updateReport({ type: "load_labels", labels: valid_labels });
   }, [data, isLoading]);
diff --git a/website/src/components/Survey/LabelSliderGroup.tsx b/website/src/components/Survey/LabelSliderGroup.tsx
index f65cfb80..af75281d 100644
--- a/website/src/components/Survey/LabelSliderGroup.tsx
+++ b/website/src/components/Survey/LabelSliderGroup.tsx
@@ -1,6 +1,6 @@
 import { Grid, Slider, SliderFilledTrack, SliderThumb, SliderTrack, useColorMode } from "@chakra-ui/react";
 import { useId, useState } from "react";
-import { colors } from "styles/Theme/colors";
+import { colors } from "src/styles/Theme/colors";
 
 // TODO: consolidate with FlaggableElement
 interface LabelSliderGroupProps {
diff --git a/website/src/components/Tasks/LabelTask.tsx b/website/src/components/Tasks/LabelTask/LabelTask.tsx
similarity index 95%
rename from website/src/components/Tasks/LabelTask.tsx
rename to website/src/components/Tasks/LabelTask/LabelTask.tsx
index 758ee127..9dc36397 100644
--- a/website/src/components/Tasks/LabelTask.tsx
+++ b/website/src/components/Tasks/LabelTask/LabelTask.tsx
@@ -19,7 +19,10 @@ export const LabelTask = ({
   const [sliderValues, setSliderValues] = useState<number[]>(new Array(valid_labels.length).fill(0));
 
   useEffect(() => {
-    onReplyChanged({ content: { labels: {}, text: task.reply, message_id: task.message_id }, state: "DEFAULT" });
+    onReplyChanged({
+      content: { labels: {}, text: task.reply, message_id: task.message_id },
+      state: "NOT_SUBMITTABLE",
+    });
   }, [task, onReplyChanged]);
 
   const onSliderChange = (values: number[]) => {
diff --git a/website/src/components/Tasks/Task.tsx b/website/src/components/Tasks/Task/Task.tsx
similarity index 100%
rename from website/src/components/Tasks/Task.tsx
rename to website/src/components/Tasks/Task/Task.tsx
diff --git a/website/src/lib/oasst_api_client.ts b/website/src/lib/oasst_api_client.ts
index f94d8b10..0268b6d2 100644
--- a/website/src/lib/oasst_api_client.ts
+++ b/website/src/lib/oasst_api_client.ts
@@ -16,7 +16,13 @@ export class OasstError {
 }
 
 export class OasstApiClient {
-  constructor(private readonly oasstApiUrl: string, private readonly oasstApiKey: string) {}
+  oasstApiUrl: string;
+  oasstApiKey: string;
+
+  constructor(oasstApiUrl: string, oasstApiKey: string) {
+    this.oasstApiUrl = oasstApiUrl;
+    this.oasstApiKey = oasstApiKey;
+  }
 
   private async post(path: string, body: any): Promise<any> {
     const resp = await fetch(`${this.oasstApiUrl}${path}`, {
diff --git a/website/src/pages/api/new_task/[task_type].ts b/website/src/pages/api/new_task/[task_type].ts
index 8fd2b26b..e77c5eb2 100644
--- a/website/src/pages/api/new_task/[task_type].ts
+++ b/website/src/pages/api/new_task/[task_type].ts
@@ -20,6 +20,7 @@ const handler = withoutRole("banned", async (req, res, token) => {
   } catch (err) {
     console.error(err);
     res.status(500).json(err);
+    return;
   }
 
   // Store the task and link it to the user..