Fix topic population issue for EditQuestionDialog

Author: tingkai-mai

frontend/src/app/(auth)/leetcode-dashboard/EditQuestionDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { topicsList } from "@/app/(auth)/match/page";
+import { capitalizeWords, topicsList } from "@/app/(auth)/match/page";
 import { Button } from "@/components/ui/button";
 import {
   Form,
@@ -69,10 +69,11 @@ const EditQuestionDialog = ({
       const questionData = {
         questionTitle: resp.title,
         questionDifficulty: resp.complexity,
-        questionTopics: resp.category.map((x: string) => x.toLowerCase()),
+        questionTopics: resp.category.map((x: string) => capitalizeWords(x)),
         questionDescription: resp.description,
       };
-      console.log(questionData);
+      console.log(questionData.questionTopics);
+      console.log(typeof questionData.questionTopics);
       setLeetcodeData(questionData);
       reset(questionData);
     });
@@ -175,22 +176,27 @@ const EditQuestionDialog = ({
           <FormField
             control={form.control}
             name="questionTopics"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel className="text-primary-500">Topics</FormLabel>
-                <FormControl>
-                  <MultiSelect
-                    options={topicsList}
-                    onValueChange={field.onChange}
-                    value={field.value}
-                    placeholder="Select topics"
-                    variant="inverted"
-                    className="bg-primary-800"
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
+            render={({ field }) => {
+              console.log(field);
+              return (
+                <FormItem>
+                  <FormLabel className="text-primary-500">Topics</FormLabel>
+                  <FormControl>
+                    <MultiSelect
+                      key={field.value.join(",")}
+                      options={topicsList}
+                      defaultValue={field.value}
+                      onValueChange={field.onChange}
+                      value={field.value}
+                      placeholder="Select topics"
+                      variant="inverted"
+                      className="bg-primary-800"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              );
+            }}
           />
 
           <FormField

frontend/src/app/(auth)/match/page.tsx

@@ -23,23 +23,25 @@ interface FindMatchFormOutput {
   preferredLanguages: string;
 }
 
-function capitalizeWord(word: string) {
-  if (!word) return word;
-  return word[0].toUpperCase() + word.substr(1).toLowerCase();
+export function capitalizeWords(input: string): string {
+  return input
+    .split(" ") // Split the string by spaces to get each word
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) // Capitalize the first letter and lowercase the rest
+    .join(" "); // Join the words back into a single string
 }
 
 export const preferredLanguagesList = Object.values(QuestionLanguages).map(
   (ql) => {
     return {
-      label: capitalizeWord(ql),
+      label: ql,
       value: ql,
     };
   }
 );
 
 export const topicsList = Object.values(QuestionTopics).map((qt) => {
   return {
-    label: capitalizeWord(qt),
+    label: qt,
     value: qt,
   };
 });
@@ -70,15 +72,15 @@ const FindPeer = () => {
 
   const preferredLanguagesList = Object.values(QuestionLanguages).map((ql) => {
     return {
-      label: capitalizeWord(ql),
+      label: capitalizeWords(ql),
       value: ql,
     };
   });
 
   const topicsList = Object.values(QuestionTopics)
     .map((qt) => {
       return {
-        label: capitalizeWord(qt),
+        label: capitalizeWords(qt),
         value: qt,
       };
     })

frontend/src/types/find-match.tsx

@@ -75,6 +75,7 @@ export enum QuestionTopics {
   DYNAMIC_PROGRAMMING = "Dynamic Programming",
   BINARY_SEARCH_TREE = "Binary Search Tree",
   BINARY_TREE = "Binary Tree",
+  HASH_SUM = "Hash Sum",
 }
 
 export interface QuestionMinified {