Add filter context

Author: alvinlim277

.gitignore

@@ -1,2 +1,3 @@
 **/.env
-.idea
+.idea
+*.log

matching-service-api/log/matching_service_api.log

@@ -1,13 +1,14 @@
 import React from "react";
 import QuestionList from "@/components/questionpage/QuestionList";
 import Matchmaking from "@/components/questionpage/Matchmaking";
+import { QuestionFilterProvider } from "@/contexts/QuestionFilterContext";
 
 const QuestionsPage = () => {
   return (
-    <div>
+    <QuestionFilterProvider>
       <Matchmaking></Matchmaking>
       <QuestionList></QuestionList>
-    </div>
+    </QuestionFilterProvider>
   );
 };
 

matching-service/log/matching_service.log

@@ -2,14 +2,27 @@
 import React from "react";
 import { useRouter } from "next/navigation";
 import PeerprepButton from "../shared/PeerprepButton";
+import { useQuestionFilter } from "@/contexts/QuestionFilterContext";
 
 const Matchmaking = () => {
   const router = useRouter();
+  const { difficulty, topics } = useQuestionFilter();
+
+  const handleMatch = () => {
+    console.log("Match attempted");
+    console.log("Selected Difficulty:", difficulty);
+    console.log("Selected Topics:", topics);
+    // username as userid?
+    // should probably just use the questionlist selections as params
+  };
+
   return (
-    <div className="p-4">
+    // TODO: move this to some admin panel or something
+    <div className="p-4 space-x-4">
       <PeerprepButton onClick={() => router.push(`questions/new`)}>
         Add Question
       </PeerprepButton>
+      <PeerprepButton onClick={handleMatch}>Find Match</PeerprepButton>
     </div>
   );
 };

peerprep/app/questions/page.tsx

@@ -4,16 +4,15 @@ import QuestionCard from "./QuestionCard";
 import { Question, StatusBody, Difficulty, isError } from "@/api/structs";
 import PeerprepDropdown from "../shared/PeerprepDropdown";
 import PeerprepSearchBar from "../shared/PeerprepSearchBar";
-
+import { useQuestionFilter } from "@/contexts/QuestionFilterContext";
+// TODO make multiple select for topics at least
 const QuestionList: React.FC = () => {
   const [questions, setQuestions] = useState<Question[]>([]);
   const [loading, setLoading] = useState(true);
-  const [difficultyFilter, setDifficultyFilter] = useState<string>(
-    Difficulty.All
-  );
-  const [topicFilter, setTopicFilter] = useState<string>("all");
   const [searchFilter, setSearchFilter] = useState<string>("");
-  const [topics, setTopics] = useState<string[]>(["all"]);
+  const [topicsList, setTopicsList] = useState<string[]>(["all"]);
+
+  const { difficulty, setDifficulty, topics, setTopics } = useQuestionFilter();
 
   useEffect(() => {
     const fetchQuestions = async () => {
@@ -34,19 +33,18 @@ const QuestionList: React.FC = () => {
       const uniqueTopics = Array.from(
         new Set(data.flatMap((question) => question.topicTags))
       );
-      setTopics(["all", ...uniqueTopics]);
+      setTopicsList(["all", ...uniqueTopics]);
     };
 
     fetchQuestions();
   }, []);
 
   const filteredQuestions = questions.filter((question) => {
     const matchesDifficulty =
-      difficultyFilter === Difficulty.All ||
-      Difficulty[question.difficulty] === difficultyFilter;
+      difficulty === Difficulty.All ||
+      Difficulty[question.difficulty] === difficulty;
     const matchesTopic =
-      topicFilter === topics[0] ||
-      (question.topicTags ?? []).includes(topicFilter);
+      topics[0] === "all" || (question.topicTags ?? []).includes(topics[0]);
     const matchesSearch =
       searchFilter === "" ||
       (question.title ?? "").toLowerCase().includes(searchFilter.toLowerCase());
@@ -66,15 +64,15 @@ const QuestionList: React.FC = () => {
         />
         <PeerprepDropdown
           label="Difficulty"
-          value={difficultyFilter}
-          onChange={(e) => setDifficultyFilter(e.target.value)}
+          value={difficulty}
+          onChange={(e) => setDifficulty(e.target.value)}
           options={Object.keys(Difficulty).filter((key) => isNaN(Number(key)))}
         />
         <PeerprepDropdown
           label="Topics"
-          value={topicFilter}
-          onChange={(e) => setTopicFilter(e.target.value)}
-          options={topics}
+          value={topics[0]}
+          onChange={(e) => setTopics([e.target.value])}
+          options={topicsList}
         />
       </div>
 

peerprep/components/questionpage/Matchmaking.tsx

@@ -0,0 +1,39 @@
+"use client";
+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;
+}
+
+const QuestionFilterContext = createContext<
+  QuestionFilterContextType | undefined
+>(undefined);
+
+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
+
+  return (
+    <QuestionFilterContext.Provider
+      value={{ difficulty, setDifficulty, topics, setTopics }}
+    >
+      {children}
+    </QuestionFilterContext.Provider>
+  );
+};
+
+export const useQuestionFilter = (): QuestionFilterContextType => {
+  const context = useContext(QuestionFilterContext);
+  if (!context) {
+    throw new Error(
+      "useQuestionFilter must be used within a QuestionFilterProvider"
+    );
+  }
+  return context;
+};

peerprep/components/questionpage/QuestionList.tsx

@@ -0,0 +1 @@
+// maybe store  SAFE user info and wrap the whole damn app in it

peerprep/contexts/QuestionFilterContext.tsx

@@ -1,20 +1,24 @@
-import { cookies } from 'next/headers'
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
 
 function isNoSession(request: NextRequest): boolean {
-  return request.nextUrl.pathname.startsWith('/auth') && cookies().has("session");
+  return (
+    request.nextUrl.pathname.startsWith("/auth") && cookies().has("session")
+  );
 }
 
 function isSession(request: NextRequest): boolean {
-  return !request.nextUrl.pathname.startsWith('/auth') && !cookies().has("session");
+  return (
+    !request.nextUrl.pathname.startsWith("/auth") && !cookies().has("session")
+  );
 }
 
 export function middleware(request: NextRequest) {
   if (isNoSession(request)) {
     return NextResponse.redirect(new URL("/questions", request.url));
   }
- 
+
   if (isSession(request)) {
     return NextResponse.redirect(new URL("/auth/login", request.url));
   }
@@ -30,6 +34,6 @@ export const config = {
      * - _next/image (image optimization files)
      * - favicon.ico, sitemap.xml, robots.txt (metadata files)
      */
-    '/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
+    "/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
   ],
-}
+};