Merge pull request #94 from CS3219-AY2425S1/ms4-shavonne/update-match-ui

Change checkbox to radio buttons

Author: rickkoh

frontend/src/app/dashboard/_components/FindMatch/ConfigurationPanel.tsx

@@ -22,6 +22,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { useState } from "react";
 import { cn } from "@/lib/utils";
 import { CaretDownIcon } from "@radix-ui/react-icons";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 
 interface MatchConfigurationPanelProps {
   difficulties: Difficulty[];
@@ -45,14 +46,6 @@ export default function ConfigurationPanel({
     handleFindMatch,
   } = useFindMatchContext();
 
-  const handleDifficultyCheckboxChange = (text: Difficulty) => {
-    if (difficulties.includes(text)) {
-      setDifficulty(difficulties.filter((item) => item !== text));
-    } else {
-      setDifficulty([...difficulties, text]);
-    }
-  };
-
   const handleTopicCheckboxChange = (text: Category) => {
     if (topics.includes(text)) {
       setTopics(topics.filter((item) => item !== text));
@@ -87,7 +80,7 @@ export default function ConfigurationPanel({
             variant={collapseDifficulties ? "soft" : "outline"}
           >
             <div className="flex flex-row justify-between w-full">
-              <span>Select difficulties</span>
+              <span>Select difficulty</span>
               <CaretDownIcon
                 className={cn(
                   "w-6 h-6",
@@ -100,7 +93,7 @@ export default function ConfigurationPanel({
           <div
             ref={difficultyRef}
             className={cn(
-              "grid grid-cols-2 gap-4 z-0 opacity-100 transition-all duration-500",
+              "z-0 opacity-100 transition-all duration-500",
               collapseDifficulties && `-z-10 opacity-0`
             )}
             style={{
@@ -109,40 +102,38 @@ export default function ConfigurationPanel({
               }px`,
             }}
           >
-            <div className="flex items-center col-span-2 space-x-2">
-              <Checkbox
-                id="All"
-                checked={difficulties.length === difficultyOptions.length}
-                onCheckedChange={() =>
-                  difficulties.length !== difficultyOptions.length
-                    ? setDifficulty([...difficultyOptions])
-                    : setDifficulty([])
-                }
-              />
-              <label
-                htmlFor="All"
-                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-              >
-                Select All
-              </label>
-            </div>
-            {difficultyOptions.map((difficulty, index) => (
-              <div key={index} className="flex items-center space-x-2">
-                <Checkbox
-                  id={difficulty}
-                  checked={difficulties.includes(difficulty)}
-                  onCheckedChange={() =>
-                    handleDifficultyCheckboxChange(difficulty)
-                  }
-                />
-                <label
-                  htmlFor={difficulty}
-                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                >
-                  {difficulty}
-                </label>
+            <RadioGroup
+              value={difficulties}
+              onValueChange={(selectedValue: Difficulty) =>
+                setDifficulty(selectedValue)
+              }
+              className="flex w-full"
+            >
+              <div className="flex flex-row justify-start w-full gap-12">
+                {difficultyOptions.map((difficultyOption) => (
+                  <div
+                    key={difficultyOption}
+                    className="flex flex-row items-center gap-2"
+                  >
+                    <RadioGroupItem
+                      value={difficultyOption}
+                      id={difficultyOption}
+                      className="flex items-center space-x-2"
+                    >
+                      <span className="text-sm font-medium leading-none">
+                        {difficultyOption}
+                      </span>
+                    </RadioGroupItem>
+                    <label
+                      htmlFor={difficultyOption}
+                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      {difficultyOption}
+                    </label>
+                  </div>
+                ))}
               </div>
-            ))}
+            </RadioGroup>
           </div>
           <Button
             onClick={() => setCollapseTopics(!collapseTopics)}

frontend/src/contexts/FindMatchContext.tsx

@@ -27,15 +27,15 @@ interface FindMatchContextProps {
   showConfigurationPanel: boolean;
   showContinueDialog: boolean;
   timer: number;
-  difficulties: Difficulty[];
+  difficulties: Difficulty;
   topics: Category[];
   handleFindMatch: () => void;
   handleCancelMatch: () => void;
   handleAcceptMatch: () => void;
   handleDeclineMatch: () => void;
   setShowConfigurationPanel: (show: boolean) => void;
   setShowContinueDialog: (show: boolean) => void;
-  setDifficulty: (difficulty: Difficulty[]) => void;
+  setDifficulty: (difficulty: Difficulty) => void;
   setTopics: (topics: Category[]) => void;
 }
 
@@ -54,10 +54,9 @@ export function FindMatchProvider({
   children,
 }: PropsWithChildren<FindMatchProviderProps>) {
   const { toast } = useToast();
+  
+  const [difficulty, setDifficulty] = useState<Difficulty>(DifficultyEnum.enum.Medium);
 
-  const [difficulty, setDifficulty] = useState<Difficulty[]>([
-    DifficultyEnum.enum.Medium,
-  ]);
   const [topics, setTopics] = useState<Category[]>(["Array"]);
 
   const [showConfigurationPanel, setShowConfigurationPanel] = useState(false);
@@ -84,7 +83,7 @@ export function FindMatchProvider({
   const matchRequest: MatchRequest = useMemo(() => {
     return {
       userId: userId,
-      selectedDifficulty: difficulty[0],
+      selectedDifficulty: difficulty,
       selectedTopic: topics,
     };
   }, [userId, difficulty, topics]);