From 9902e013b2c3ec702154424182ffd6dfd7b121d8 Mon Sep 17 00:00:00 2001
From: AbdBarho <ka70911@gmail.com>
Date: Mon, 2 Jan 2023 08:26:33 +0100
Subject: [PATCH 1/4] Use Chakra UI for Messages

---
 website/src/components/FlaggableElement.tsx | 129 +++++++++-----------
 website/src/components/Messages.tsx         |  18 ++-
 2 files changed, 66 insertions(+), 81 deletions(-)

diff --git a/website/src/components/FlaggableElement.tsx b/website/src/components/FlaggableElement.tsx
index cae24484..c8fc17ce 100644
--- a/website/src/components/FlaggableElement.tsx
+++ b/website/src/components/FlaggableElement.tsx
@@ -2,6 +2,7 @@ import {
   Button,
   Checkbox,
   Flex,
+  Grid,
   Popover,
   PopoverAnchor,
   PopoverArrow,
@@ -15,6 +16,7 @@ import {
   SliderTrack,
   Spacer,
   useBoolean,
+  useId,
 } from "@chakra-ui/react";
 import { FlagIcon, QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import { useState } from "react";
@@ -65,58 +67,47 @@ export const FlaggableElement = (props) => {
       isLazy
       lazyBehavior="keepMounted"
     >
-      <div className="inline-block float-left">
+      <Grid templateColumns="1fr min-content" gap={2}>
         <PopoverAnchor>{props.children}</PopoverAnchor>
         <PopoverTrigger>
-          <Button color="transparent">
-            <FlagIcon
-              className="h-5 w-5 ml-3 align-center text-gray-400 group-hover:text-gray-500"
-              aria-hidden="true"
-            />
+          <Button h="full">
+            <FlagIcon className="w-4 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />
           </Button>
         </PopoverTrigger>
-      </div>
+      </Grid>
 
       <PopoverContent width="fit-content">
         <PopoverArrow />
-        <PopoverCloseButton />
-        <div className="flex mt-3 ">
-          <PopoverBody>
-            <ul>
-              {TEXT_LABEL_FLAGS.map((option, i) => {
-                return (
-                  <FlagCheckboxLi
-                    option={option}
-                    key={i}
-                    idx={i}
-                    checkboxValues={checkboxValues}
-                    sliderValues={sliderValues}
-                    checkboxHandler={handleCheckboxState}
-                    sliderHandler={handleSliderState}
-                  ></FlagCheckboxLi>
-                );
-              })}
-            </ul>
-            <div className="flex justify-center ml-auto">
-              <Button
-                isDisabled={
-                  !checkboxValues.reduce((all, current) => {
-                    return all | current;
-                  }, false)
-                }
-                onClick={() => submitResponse()}
-                className="bg-indigo-600 text-black hover:bg-indigo-700"
-              >
-                Report
-              </Button>
-            </div>
-          </PopoverBody>
+        <div className="relative h-4">
+          <PopoverCloseButton />
         </div>
+        <PopoverBody>
+          {TEXT_LABEL_FLAGS.map((option, i) => (
+            <FlagCheckbox
+              option={option}
+              key={i}
+              idx={i}
+              checkboxValues={checkboxValues}
+              sliderValues={sliderValues}
+              checkboxHandler={handleCheckboxState}
+              sliderHandler={handleSliderState}
+            />
+          ))}
+          <Flex justify="center">
+            <Button
+              isDisabled={!checkboxValues.some(Boolean)}
+              onClick={submitResponse}
+              className="bg-indigo-600 text-black hover:bg-indigo-700"
+            >
+              Report
+            </Button>
+          </Flex>
+        </PopoverBody>
       </PopoverContent>
     </Popover>
   );
 };
-function FlagCheckboxLi(props: {
+function FlagCheckbox(props: {
   option: textFlagLabels;
   idx: number;
   checkboxValues: boolean[];
@@ -136,37 +127,35 @@ function FlagCheckboxLi(props: {
     );
   }
 
+  const id = useId();
+
   return (
-    <li>
-      <Flex>
-        <Checkbox
-          onChange={(e) => {
-            props.checkboxHandler(e.target.checked, props.idx);
-          }}
-        />
-        <label
-          className=" ml-1 mr-1 text-sm form-check-label  hover:cursor-pointer"
-          htmlFor={props.option.attributeName}
-        >
-          <span className="text-gray-800 hover:text-blue-700 float-left">{props.option.labelText}</span>
-          {AdditionalExplanation}
-        </label>
-        <Spacer />
-        <Slider
-          width="100px"
-          isDisabled={!props.checkboxValues[props.idx]}
-          defaultValue={100}
-          onChangeEnd={(val) => {
-            props.sliderHandler(val / 100, props.idx);
-          }}
-        >
-          <SliderTrack>
-            <SliderFilledTrack />
-            <SliderThumb />
-          </SliderTrack>
-        </Slider>
-      </Flex>
-    </li>
+    <Flex gap={1}>
+      <Checkbox
+        id={id}
+        onChange={(e) => {
+          props.checkboxHandler(e.target.checked, props.idx);
+        }}
+      />
+      <label className="text-sm form-check-label" htmlFor={id}>
+        <span className="text-gray-800 hover:text-blue-700 float-left">{props.option.labelText}</span>
+        {AdditionalExplanation}
+      </label>
+      <Spacer />
+      <Slider
+        width="100px"
+        isDisabled={!props.checkboxValues[props.idx]}
+        defaultValue={100}
+        onChangeEnd={(val) => {
+          props.sliderHandler(val / 100, props.idx);
+        }}
+      >
+        <SliderTrack>
+          <SliderFilledTrack />
+          <SliderThumb />
+        </SliderTrack>
+      </Slider>
+    </Flex>
   );
 }
 interface textFlagLabels {
diff --git a/website/src/components/Messages.tsx b/website/src/components/Messages.tsx
index cc94fcc0..5b77cd26 100644
--- a/website/src/components/Messages.tsx
+++ b/website/src/components/Messages.tsx
@@ -1,3 +1,4 @@
+import { Grid } from "@chakra-ui/react";
 import { FlaggableElement } from "./FlaggableElement";
 
 export interface Message {
@@ -10,18 +11,13 @@ const getColor = (isAssistant: boolean) => (isAssistant ? "bg-slate-800" : "bg-s
 export const Messages = ({ messages, post_id }: { messages: Message[]; post_id: string }) => {
   const items = messages.map(({ text, is_assistant }: Message, i: number) => {
     return (
-      <div className="flex" key={i + text}>
-        <FlaggableElement text={text} post_id={post_id}>
-          <div
-            key={i + text}
-            className={`${getColor(is_assistant)} p-4 my-1 rounded-xl text-white whitespace-pre-wrap float-left mr-3`}
-          >
-            {text}
-          </div>
-        </FlaggableElement>
-      </div>
+      <FlaggableElement text={text} post_id={post_id} key={i + text}>
+        <div key={i + text} className={`${getColor(is_assistant)} p-4 rounded-md text-white whitespace-pre-wrap`}>
+          {text}
+        </div>
+      </FlaggableElement>
     );
   });
   // Maybe also show a legend of the colors?
-  return <>{items}</>;
+  return <Grid gap={2}>{items}</Grid>;
 };

From 65e38009970ef349da9f375f031d65ba99eb69b4 Mon Sep 17 00:00:00 2001
From: Klotske <ilya@mokhov.vg>
Date: Tue, 3 Jan 2023 00:13:05 +0300
Subject: [PATCH 2/4] Use session for username, removed update handler

---
 website/src/pages/account/index.tsx | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/website/src/pages/account/index.tsx b/website/src/pages/account/index.tsx
index 51f7ed38..c05c2f67 100644
--- a/website/src/pages/account/index.tsx
+++ b/website/src/pages/account/index.tsx
@@ -6,20 +6,6 @@ import React, { useState } from "react";
 
 export default function Account() {
   const { data: session } = useSession();
-  const [username, setUsername] = useState("null");
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const handleUpdate = async () => {
-    const response = await fetch("../api/update", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({ username }),
-    });
-    const { name } = await response.json();
-    setUsername(name);
-  };
 
   if (!session) {
     return;
@@ -34,7 +20,7 @@ export default function Account() {
         />
       </Head>
       <main className="h-3/4 z-0 bg-white flex flex-col items-center justify-center">
-        <p>{username}</p>
+        <p>{session.user.name || "No username"}</p>
         <Button>
           <Link href="/account/edit">Edit Username</Link>
         </Button>

From 15c06348ce977ddb0e1ef212a0600f23da1442b8 Mon Sep 17 00:00:00 2001
From: Klotske <ilya@mokhov.vg>
Date: Tue, 3 Jan 2023 00:17:32 +0300
Subject: [PATCH 3/4] Removed unused import

---
 website/src/pages/account/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/pages/account/index.tsx b/website/src/pages/account/index.tsx
index c05c2f67..9f8dc4a3 100644
--- a/website/src/pages/account/index.tsx
+++ b/website/src/pages/account/index.tsx
@@ -2,7 +2,7 @@ import { Button } from "@chakra-ui/react";
 import Head from "next/head";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
-import React, { useState } from "react";
+import React from "react";
 
 export default function Account() {
   const { data: session } = useSession();

From 47ffd40d383ccde30dbcbbf24106e3218e688e73 Mon Sep 17 00:00:00 2001
From: croumegous <cyril.roumegous@gmail.com>
Date: Tue, 3 Jan 2023 00:44:07 +0100
Subject: [PATCH 4/4] fix(frontend): fix invalid json error when HTTP response
 is 204

---
 website/src/pages/api/new_task/[task_type].ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/website/src/pages/api/new_task/[task_type].ts b/website/src/pages/api/new_task/[task_type].ts
index 69548b5f..2a2a0215 100644
--- a/website/src/pages/api/new_task/[task_type].ts
+++ b/website/src/pages/api/new_task/[task_type].ts
@@ -63,7 +63,6 @@ const handler = async (req, res) => {
       message_id: registeredTask.id,
     }),
   });
-  await ackRes.json();
 
   // Send the results to the client.
   res.status(200).json(registeredTask);