Run prettier

website/src/components/FlaggableElement.tsx

@@ -19,18 +19,18 @@ import {
 } from "@chakra-ui/react";
 import useSWRMutation from "swr/mutation";
 import { QuestionMarkCircleIcon, FlagIcon } from "@heroicons/react/20/solid";
-import {useState } from "react";
-import { SubmitButton } from "./Buttons/Submit";
+import { useState } from "react";
 
 export type TextFlagProps = {
-  text: string;label_map
-  post_id:string;
+  text: string;
+  label_map;
+  post_id: string;
 };
-type FlagRefs={
+type FlagRefs = {
   label: string;
-  value:number;
+  value: number;
   setValue;
-  isChecked:boolean;
+  isChecked: boolean;
   setChecked;
 };
 
@@ -42,34 +42,45 @@ export const FlaggableElement = (props) => {
       setIsEditing.off;
     },
   });
-  
+
   const submitResponse = (label_data) => {
     trigger(label_data);
   };
-  const label_refs:FlagRefs[]  = TEXT_LABEL_FLAGS.map((flag) =>{
+  const label_refs: FlagRefs[] = TEXT_LABEL_FLAGS.map((flag) => {
     const [isChecked, setChecked] = useState(false);
     const [value, setValue] = useState(1);
-    return({label:flag.attributeName, value:value, setValue:setValue, isChecked:isChecked, setChecked:setChecked});
-
+    return {
+      label: flag.attributeName,
+      value: value,
+      setValue: setValue,
+      isChecked: isChecked,
+      setChecked: setChecked,
+    };
   });
-  const fetchData = () =>{
-    let label_map:Map<string, number> =new Map();
-    label_refs.filter((flagRef) => (flagRef.isChecked)).map((refs) =>{
-      label_map.set(refs.label, refs.value)
-    });
+  const fetchData = () => {
+    let label_map: Map<string, number> = new Map();
+    label_refs
+      .filter((flagRef) => flagRef.isChecked)
+      .map((refs) => {
+        label_map.set(refs.label, refs.value);
+      });
     console.log(label_map);
-    return {post_id:props.post_id, label_map:Object.fromEntries(label_map), text:props.text}
-
-  }
+    return { post_id: props.post_id, label_map: Object.fromEntries(label_map), text: props.text };
+  };
 
   return (
-    <Popover isOpen={isEditing} onOpen={setIsEditing.on} onClose={setIsEditing.off} closeOnBlur={false} isLazy lazyBehavior="keepMounted">
-    <div className="inline-block float-left">
-    <PopoverAnchor>
-      {props.children}
-    </PopoverAnchor>
+    <Popover
+      isOpen={isEditing}
+      onOpen={setIsEditing.on}
+      onClose={setIsEditing.off}
+      closeOnBlur={false}
+      isLazy
+      lazyBehavior="keepMounted"
+    >
+      <div className="inline-block float-left">
+        <PopoverAnchor>{props.children}</PopoverAnchor>
         <PopoverTrigger>
-          <Button h="20px" >
+          <Button h="20px">
             <FlagIcon className="h-5 w-5 ml-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />
           </Button>
         </PopoverTrigger>
@@ -79,35 +90,35 @@ export const FlaggableElement = (props) => {
         <PopoverArrow />
         <PopoverCloseButton />
         <div className="flex mt-3 ">
-        <PopoverBody>
-          <ul>
+          <PopoverBody>
+            <ul>
               {TEXT_LABEL_FLAGS.map((option, i) => {
-                return (
-                  <FlagCheckboxLi
-                    option={option}
-                    key={i}
-                    state={label_refs[i]}
-                  ></FlagCheckboxLi>
-                );
-              })}           
-          </ul>
-          <div className="flex justify-center ml-auto">
-            <Button onClick={() => submitResponse(fetchData())} className="bg-indigo-600 text-black hover:bg-indigo-700">
-              Report
-            </Button>
-          </div>
-        </PopoverBody>
+                return <FlagCheckboxLi option={option} key={i} state={label_refs[i]}></FlagCheckboxLi>;
+              })}
+            </ul>
+            <div className="flex justify-center ml-auto">
+              <Button
+                onClick={() => submitResponse(fetchData())}
+                className="bg-indigo-600 text-black hover:bg-indigo-700"
+              >
+                Report
+              </Button>
+            </div>
+          </PopoverBody>
         </div>
       </PopoverContent>
     </Popover>
   );
 };
-function FlagCheckboxLi(props: { option: textFlagLabels, state:FlagRefs}): JSX.Element {
+function FlagCheckboxLi(props: { option: textFlagLabels; state: FlagRefs }): JSX.Element {
   let AdditionalExplanation = null;
   if (props.option.additionalExplanation) {
     AdditionalExplanation = (
       <a href="#" className="group flex items-center space-x-2.5 text-sm ">
-        <QuestionMarkCircleIcon className="flex h-5 w-5 ml-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />
+        <QuestionMarkCircleIcon
+          className="flex h-5 w-5 ml-3 text-gray-400 group-hover:text-gray-500"
+          aria-hidden="true"
+        />
       </a>
     );
   }
@@ -116,15 +127,27 @@ function FlagCheckboxLi(props: { option: textFlagLabels, state:FlagRefs}): JSX.E
     <>
       <li>
         <Flex>
-          <Checkbox onChange={(e) => {props.state.setChecked(e.target.checked);}}/>
-          <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>
+          <Checkbox
+            onChange={(e) => {
+              props.state.setChecked(e.target.checked);
+            }}
+          />
+          <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.state.isChecked} defaultValue={100} onChangeEnd={(val) => {props.state.setValue(val/100);}}>
+          <Slider
+            width="100px"
+            isDisabled={!props.state.isChecked}
+            defaultValue={100}
+            onChangeEnd={(val) => {
+              props.state.setValue(val / 100);
+            }}
+          >
             <SliderTrack>
               <SliderFilledTrack />
               <SliderThumb />

website/src/components/Messages.tsx

@@ -7,13 +7,16 @@ export interface Message {
 
 const getColor = (isAssistant: boolean) => (isAssistant ? "bg-slate-800" : "bg-sky-900");
 
-export const Messages = ({ messages , post_id}: { messages: Message[] , post_id:string}) => {
+export const Messages = ({ messages, post_id }: { messages: Message[]; post_id: string }) => {
   const items = messages.map(({ text, is_assistant }: Message, i: number) => {
     return (
       <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>
+        <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>
     );
   });

website/src/pages/create/user_reply.tsx

@@ -61,7 +61,7 @@ const UserReply = () => {
         <>
           <h5 className="text-lg font-semibold">Reply as a user</h5>
           <p className="text-lg py-1">Given the following conversation, provide an adequate reply</p>
-          <Messages messages={task.conversation.messages} post_id={task.id}/>
+          <Messages messages={task.conversation.messages} post_id={task.id} />
           {task.hint && <p className="text-lg py-1">Hint: {task.hint}</p>}
         </>
         <Textarea name="reply" placeholder="Reply..." ref={inputRef} />