Revert filter hooks, add matching button dropdown

Author: WZWren

peerprep/components/questionpage/Matchmaking.tsx

@@ -15,6 +15,7 @@ import {
   findMatch,
 } from "@/app/api/internal/matching/helper";
 import ResettingStopwatch from "../shared/ResettingStopwatch";
+import PeerprepDropdown from "../shared/PeerprepDropdown";
 
 const QUERY_INTERVAL_MILLISECONDS = 5000;
 const TIMEOUT_MILLISECONDS = 30000;
@@ -54,7 +55,9 @@ const usePeriodicCallback = (
 const Matchmaking = () => {
   const router = useRouter();
   const [isMatching, setIsMatching] = useState<boolean>(false);
-  const { difficulty, topics } = useQuestionFilter();
+  const [difficultyFilter, setDifficultyFilter] = useState<string>(Difficulty.Easy);
+  const [topicFilter, setTopicFilter] = useState<string[]>(["all"]);
+  const { difficulties, topicList } = useQuestionFilter();
   const { userid } = useUserInfo();
   const timeout = useRef<NodeJS.Timeout>();
 
@@ -69,9 +72,8 @@ const Matchmaking = () => {
   const getMatchMakingRequest = (): MatchRequest => {
     const matchRequest: MatchRequest = {
       userId: userid,
-      // welp, just bandaid default easy
-      difficulty: difficulty === Difficulty.All ? Difficulty.Easy : difficulty,
-      topicTags: topics,
+      difficulty: difficultyFilter,
+      topicTags: topicFilter,
       requestTime: getMatchRequestTime(),
     };
 
@@ -139,6 +141,19 @@ const Matchmaking = () => {
         <PeerprepButton onClick={handleMatch}>
           {isMatching ? "Cancel Match" : "Find Match"}
         </PeerprepButton>
+        {!isMatching && 
+          <PeerprepDropdown label="Difficulty"
+            value={difficultyFilter}
+            onChange={e => setDifficultyFilter(e.target.value)}
+            // truthfully we don't need this difficulties list, but we are temporarily including it
+            options={difficulties} />
+        }
+        {!isMatching && 
+          <PeerprepDropdown label="Topics"
+            value={topicFilter[0]}
+            onChange={e => setTopicFilter(e.target.value === "all" ? topicList : [e.target.value])}
+            options={topicList} />
+        }
         {isMatching && <ResettingStopwatch isActive={isMatching} />}
       </div>
     </div>

peerprep/components/questionpage/QuestionList.tsx

@@ -1,7 +1,7 @@
 "use client";
 import React, { useEffect, useState } from "react";
 import QuestionCard from "./QuestionCard";
-import { Question, StatusBody, Difficulty, isError } from "@/api/structs";
+import { Question, Difficulty, isError } from "@/api/structs";
 import PeerprepDropdown from "../shared/PeerprepDropdown";
 import PeerprepSearchBar from "../shared/PeerprepSearchBar";
 import { useQuestionFilter } from "@/contexts/QuestionFilterContext";
@@ -10,9 +10,12 @@ const QuestionList: React.FC = () => {
   const [questions, setQuestions] = useState<Question[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchFilter, setSearchFilter] = useState<string>("");
-  const [topicsList, setTopicsList] = useState<string[]>(["all"]);
+  const [difficultyFilter, setDifficultyFilter] = useState<string>(
+    Difficulty.All
+  );
+  const [topicFilter, setTopicFilter] = useState<string>("all");
 
-  const { difficulty, setDifficulty, topics, setTopics } = useQuestionFilter();
+  const { topicList, setTopicList } = useQuestionFilter();
 
   useEffect(() => {
     const fetchQuestions = async () => {
@@ -33,19 +36,18 @@ const QuestionList: React.FC = () => {
       const uniqueTopics = Array.from(
         new Set(data.flatMap((question) => question.topicTags))
       ).sort();
-      setTopicsList(["all", ...uniqueTopics]);
-      setTopics(["all", ...uniqueTopics]);
+      setTopicList(["all", ...uniqueTopics]);
     };
 
     fetchQuestions();
   }, []);
 
   const filteredQuestions = questions.filter((question) => {
     const matchesDifficulty =
-      difficulty === Difficulty.All ||
-      Difficulty[question.difficulty] === difficulty;
+      difficultyFilter === Difficulty.All ||
+      Difficulty[question.difficulty] === difficultyFilter;
     const matchesTopic =
-      topics[0] === "all" || (question.topicTags ?? []).includes(topics[0]);
+      topicFilter === "all" || (question.topicTags ?? []).includes(topicFilter);
     const matchesSearch =
       searchFilter === "" ||
       (question.title ?? "").toLowerCase().includes(searchFilter.toLowerCase());
@@ -57,16 +59,12 @@ const QuestionList: React.FC = () => {
 
   const handleSetDifficulty = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const diff = e.target.value;
-    setDifficulty(diff);
+    setDifficultyFilter(diff);
   };
 
   const handleSetTopics = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const topic = e.target.value;
-    if (topic === "all") {
-      setTopics(topicsList);
-    } else {
-      setTopics([topic]);
-    }
+    setTopicFilter(topic);
   };
 
   return (
@@ -79,16 +77,15 @@ const QuestionList: React.FC = () => {
         />
         <PeerprepDropdown
           label="Difficulty"
-          value={difficulty}
+          value={difficultyFilter}
           onChange={handleSetDifficulty}
           options={Object.keys(Difficulty).filter((key) => isNaN(Number(key)))}
         />
         <PeerprepDropdown
           label="Topics"
-          // coincidentally "all" is at the top of the list so the display works out...dumb luck!
-          value={topics[0]}
+          value={topicFilter}
           onChange={handleSetTopics}
-          options={topicsList}
+          options={topicList}
         />
       </div>
 

peerprep/contexts/QuestionFilterContext.tsx

@@ -3,10 +3,9 @@ import { Difficulty } from "@/api/structs";
 import React, { createContext, useContext, useState, ReactNode } from "react";
 
 interface QuestionFilterContextType {
-  difficulty: string;
-  setDifficulty: (difficulty: string) => void;
-  topics: string[];
-  setTopics: (topics: string[]) => void;
+  difficulties: string[];
+  topicList: string[];
+  setTopicList: (topics: string[]) => void;
 }
 
 const QuestionFilterContext = createContext<
@@ -16,13 +15,16 @@ const QuestionFilterContext = createContext<
 export const QuestionFilterProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
-  const [difficulty, setDifficulty] = useState<string>(Difficulty.All); // default to all
-  const [topics, setTopics] = useState<string[]>(["all"]); // I guess default set this too the whole list of topics from questionlist
-  //can also consider moving all the uniqu topics here?
+  const difficulties = [Difficulty.Easy, Difficulty.Medium, Difficulty.Hard];
+  const [topicList, setTopicList] = useState<string[]>([]);
+  // I guess default set this too the whole list of topics from questionlist
+  // can also consider moving all the uniqu topics here? -- yes, we are doing that now
+  // TODO: since QuestionFilterProvider now exists to wrap the QuestionList, 
+  //       we can move the question fetching 1 layer higher, theoretically, so look into this
 
   return (
     <QuestionFilterContext.Provider
-      value={{ difficulty, setDifficulty, topics, setTopics }}
+      value={{ difficulties, topicList, setTopicList }}
     >
       {children}
     </QuestionFilterContext.Provider>