From f20b25f7c2f865b895c490b87c39407378d2a8c1 Mon Sep 17 00:00:00 2001
From: jehousoh <e0694467@u.nus.edu>
Date: Thu, 14 Nov 2024 03:53:36 +0800
Subject: [PATCH] Fix add and edit question Fix username cookie update Add turn
 server

---
 frontend/src/app/(user)/user/me/page.tsx      |   4 +-
 .../admin/components/AddQuestionDialog.tsx    |   2 +-
 .../admin/components/EditQuestionDialog.tsx   | 379 +++++++++---------
 .../app/collaboration/components/video.tsx    |  20 +
 4 files changed, 218 insertions(+), 187 deletions(-)

diff --git a/frontend/src/app/(user)/user/me/page.tsx b/frontend/src/app/(user)/user/me/page.tsx
index 2b60142bbc..223612e191 100644
--- a/frontend/src/app/(user)/user/me/page.tsx
+++ b/frontend/src/app/(user)/user/me/page.tsx
@@ -18,14 +18,13 @@ import {
   getUserId,
   updateUser,
   getFileUrl,
-  ToastComponent,
   resetPasswordFromProfile,
+  setUsername,
 } from "@/api/user";
 import { useEffect, useRef, useState } from "react";
 import { User } from "@/types/user";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
 import { CgProfile } from "react-icons/cg";
 import MoonLoader from "react-spinners/MoonLoader";
 import { IoCloseCircle } from "react-icons/io5";
@@ -122,6 +121,7 @@ const ProfilePage = () => {
   ) => {
     await updateUser(data);
     setUser(data);
+    if (data.username) setUsername(data.username);
   };
 
   const onResetPasswordSubmit = async (
diff --git a/frontend/src/app/admin/components/AddQuestionDialog.tsx b/frontend/src/app/admin/components/AddQuestionDialog.tsx
index d364a6c501..d6b9671c2b 100644
--- a/frontend/src/app/admin/components/AddQuestionDialog.tsx
+++ b/frontend/src/app/admin/components/AddQuestionDialog.tsx
@@ -215,7 +215,7 @@ const AddQuestionDialog = ({
             {fields.map((example, index) => (
               <div
                 key={example.id}
-                className="space-y-2 bg-primary-800 p-4 rounded-md"
+                className="space-y-2 bg-primary-800 p-4 rounded-md  border-[1px] border-white"
               >
                 <FormField
                   control={form.control}
diff --git a/frontend/src/app/admin/components/EditQuestionDialog.tsx b/frontend/src/app/admin/components/EditQuestionDialog.tsx
index f9aa36e58d..df1024c866 100644
--- a/frontend/src/app/admin/components/EditQuestionDialog.tsx
+++ b/frontend/src/app/admin/components/EditQuestionDialog.tsx
@@ -73,6 +73,7 @@ const EditQuestionDialog = ({
     examples: [],
     solution: "",
   });
+  const [isLoading, setIsLoading] = useState<boolean>(true);
 
   const form = useForm<EditQuestionValues>({
     resolver: zodResolver(formSchema),
@@ -105,6 +106,7 @@ const EditQuestionDialog = ({
       };
       setQuestionData(questionData);
       reset(questionData);
+      setIsLoading(false);
     });
   }, [questionId, reset]);
 
@@ -152,196 +154,205 @@ const EditQuestionDialog = ({
       <div className="text-[32px] font-semibold text-yellow-500">
         Edit Question
       </div>
-      <Form {...form}>
-        <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
-          <FormField
-            control={form.control}
-            name="questionTitle"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel className="text-primary-500">
-                  Question Title
-                </FormLabel>
-                <FormControl>
-                  <Input
-                    className="text-white bg-primary-800"
-                    placeholder="Enter question title..."
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+      {isLoading ? (
+        <MoonLoader color="#FFFFFF" size="30" />
+      ) : (
+        <Form {...form}>
+          <form
+            onSubmit={handleSubmit(onSubmit)}
+            className="flex flex-col gap-4"
+          >
+            <FormField
+              control={form.control}
+              name="questionTitle"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-primary-500">
+                    Question Title
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      className="text-white bg-primary-800"
+                      placeholder="Enter question title..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
 
-          <FormField
-            control={form.control}
-            name="questionDifficulty"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel className="text-primary-500">Difficulty</FormLabel>
-                <FormControl>
-                  <select
-                    className="w-full bg-primary-800 text-white p-2 rounded-md border border-white capitalize"
-                    {...field}
-                  >
-                    <option>Select difficulty</option>
-                    {Object.values(QuestionDifficulty).map((qd) => (
-                      <option value={qd} key={qd}>
-                        {qd}
-                      </option>
-                    ))}
-                  </select>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+            <FormField
+              control={form.control}
+              name="questionDifficulty"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-primary-500">Difficulty</FormLabel>
+                  <FormControl>
+                    <select
+                      className="w-full bg-primary-800 text-white p-2 rounded-md border border-white capitalize"
+                      {...field}
+                    >
+                      <option>Select difficulty</option>
+                      {Object.values(QuestionDifficulty).map((qd) => (
+                        <option value={qd} key={qd}>
+                          {qd}
+                        </option>
+                      ))}
+                    </select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
 
-          <FormField
-            control={form.control}
-            name="questionTopics"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel className="text-primary-500">Topics</FormLabel>
-                <FormControl>
-                  <MultiSelect
-                    options={topicsList}
-                    defaultValue={field.value}
-                    onValueChange={field.onChange}
-                    value={field.value}
-                    placeholder="Select topics"
-                    variant="inverted"
-                    className="bg-primary-800"
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+            <FormField
+              control={form.control}
+              name="questionTopics"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-primary-500">Topics</FormLabel>
+                  <FormControl>
+                    <MultiSelect
+                      options={topicsList}
+                      defaultValue={questionData.questionTopics}
+                      onValueChange={field.onChange}
+                      value={field.value}
+                      placeholder="Select topics"
+                      variant="inverted"
+                      className="bg-primary-800"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
 
-          <FormField
-            control={form.control}
-            name="questionDescription"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel className="text-primary-500">Description</FormLabel>
-                <FormControl>
-                  <Textarea
-                    placeholder="Type your description here."
-                    className="text-white bg-primary-800"
-                    rows={6}
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+            <FormField
+              control={form.control}
+              name="questionDescription"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-primary-500">
+                    Description
+                  </FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Type your description here."
+                      className="text-white bg-primary-800"
+                      rows={6}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
 
-          <div className="text-primary-500 font-semibold">Examples</div>
-          {fields.map((example, index) => (
-            <div key={example.id} className="flex flex-col gap-2 mb-4">
-              <FormField
-                control={form.control}
-                name={`examples.${index}.expected_input`}
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className="text-primary-500">Input</FormLabel>
-                    <FormControl>
-                      <Input
-                        className="text-white bg-primary-800"
-                        placeholder="Enter example input..."
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name={`examples.${index}.expected_output`}
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className="text-primary-500">Output</FormLabel>
-                    <FormControl>
-                      <Input
-                        className="text-white bg-primary-800"
-                        placeholder="Enter example output..."
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name={`examples.${index}.explanation`}
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className="text-primary-500">
-                      Explanation (optional)
-                    </FormLabel>
-                    <FormControl>
-                      <Textarea
-                        className="text-white bg-primary-800"
-                        placeholder="Optional explanation"
-                        {...field}
-                      />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-              <Button
-                type="button"
-                variant="destructive"
-                onClick={() => remove(index)}
-                className="mt-2"
-              >
-                Remove Example
-              </Button>
-            </div>
-          ))}
-          <Button
-            type="button"
-            onClick={() =>
-              append({
-                expected_input: "",
-                expected_output: "",
-                explanation: "",
-              })
-            }
-          >
-            Add Example
-          </Button>
+            <div className="text-primary-500 font-semibold">Examples</div>
+            {fields.map((example, index) => (
+              <div key={example.id} className="flex flex-col gap-2 mb-4">
+                <FormField
+                  control={form.control}
+                  name={`examples.${index}.expected_input`}
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="text-primary-500">Input</FormLabel>
+                      <FormControl>
+                        <Input
+                          className="text-white bg-primary-800"
+                          placeholder="Enter example input..."
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name={`examples.${index}.expected_output`}
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="text-primary-500">Output</FormLabel>
+                      <FormControl>
+                        <Input
+                          className="text-white bg-primary-800"
+                          placeholder="Enter example output..."
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name={`examples.${index}.explanation`}
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="text-primary-500">
+                        Explanation (optional)
+                      </FormLabel>
+                      <FormControl>
+                        <Textarea
+                          className="text-white bg-primary-800"
+                          placeholder="Optional explanation"
+                          {...field}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+                <Button
+                  type="button"
+                  variant="destructive"
+                  onClick={() => remove(index)}
+                  className="mt-2"
+                >
+                  Remove Example
+                </Button>
+              </div>
+            ))}
+            <Button
+              type="button"
+              onClick={() =>
+                append({
+                  expected_input: "",
+                  expected_output: "",
+                  explanation: "",
+                })
+              }
+            >
+              Add Example
+            </Button>
 
-          <FormField
-            control={form.control}
-            name="solution"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel className="text-primary-500">
-                  JavaScript Code
-                </FormLabel>
-                <FormControl>
-                  <Textarea
-                    placeholder="Type your JavaScript code here."
-                    className="text-white bg-primary-800"
-                    rows={6}
-                    {...field}
-                  />
-                </FormControl>
-              </FormItem>
-            )}
-          />
+            <FormField
+              control={form.control}
+              name="solution"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-primary-500">
+                    JavaScript Code
+                  </FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Type your JavaScript code here."
+                      className="text-white bg-primary-800"
+                      rows={6}
+                      {...field}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
 
-          <Button type="submit" className="mt-8">
-            {isSubmitting ? <MoonLoader size="20" /> : "Submit"}
-          </Button>
-        </form>
-      </Form>
+            <Button type="submit" className="mt-8">
+              {isSubmitting ? <MoonLoader size="20" /> : "Submit"}
+            </Button>
+          </form>
+        </Form>
+      )}
     </div>
   );
 };
diff --git a/frontend/src/app/collaboration/components/video.tsx b/frontend/src/app/collaboration/components/video.tsx
index 53d0e8a3aa..4572e46b55 100644
--- a/frontend/src/app/collaboration/components/video.tsx
+++ b/frontend/src/app/collaboration/components/video.tsx
@@ -45,6 +45,16 @@ const VideoCall = ({ provider }: VideoCallProps) => {
           username: "2b012e1176eda910d0c8a755",
           credential: "6KjvgYahJZ21gdAp",
         },
+        {
+          urls: "turn:global.relay.metered.ca:80",
+          username: "959683d8bdf3e842258fc733",
+          credential: "u6gTAF1k3CDN+CtP",
+        },
+        {
+          urls: "turn:global.relay.metered.ca:80?transport=tcp",
+          username: "959683d8bdf3e842258fc733",
+          credential: "u6gTAF1k3CDN+CtP",
+        },
       ],
     });
 
@@ -93,6 +103,16 @@ const VideoCall = ({ provider }: VideoCallProps) => {
           username: "2b012e1176eda910d0c8a755",
           credential: "6KjvgYahJZ21gdAp",
         },
+        {
+          urls: "turn:global.relay.metered.ca:80",
+          username: "959683d8bdf3e842258fc733",
+          credential: "u6gTAF1k3CDN+CtP",
+        },
+        {
+          urls: "turn:global.relay.metered.ca:80?transport=tcp",
+          username: "959683d8bdf3e842258fc733",
+          credential: "u6gTAF1k3CDN+CtP",
+        },
       ],
     });