Merge pull request #621 from bounswe/frontend/feature/difficulty-filt…

…er-in-q-search
bounswe · Dec 6, 2024 · 06bf7b1 · 06bf7b1
2 parents 37fce75 + 0567ae3
commit 06bf7b1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/frontend/src/components/DifficultyFilter.tsx b/frontend/src/components/DifficultyFilter.tsx
@@ -2,6 +2,7 @@ import {
   Select,
   SelectContent,
   SelectItem,
+  SelectSeparator,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
@@ -25,6 +26,7 @@ export function DifficultyFilter({ value, onChange }: DifficultyFilterProps) {
       </SelectTrigger>
       <SelectContent>
         <SelectItem value="all">Filter by difficulty</SelectItem>
+        <SelectSeparator />
         <SelectItem value="EASY">Easy</SelectItem>
         <SelectItem value="MEDIUM">Medium</SelectItem>
         <SelectItem value="HARD">Hard</SelectItem>

diff --git a/frontend/src/components/SearchQuestionsList.tsx b/frontend/src/components/SearchQuestionsList.tsx
@@ -1,5 +1,9 @@
+import { DifficultyFilter } from "@/components/DifficultyFilter";
 import { useSearchQuestions } from "@/services/api/programmingForumComponents";
-import { QuestionSummary } from "@/services/api/programmingForumSchemas";
+import {
+  DifficultyLevel,
+  QuestionSummary,
+} from "@/services/api/programmingForumSchemas";
 import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
@@ -10,6 +14,7 @@ import { QuestionCard } from "./QuestionCard";
 export const SearchQuestionsList = () => {
   const [params] = useSearchParams();
   const [pageSize, setPageSize] = useState(20);
+  const [difficulty, setDifficulty] = useState<DifficultyLevel>();
   const [previousData, setPreviousData] = useState<{
     items: QuestionSummary[];
     totalItems: number;
@@ -26,6 +31,7 @@ export const SearchQuestionsList = () => {
     queryParams: {
       q: params.get("q") ?? "",
       pageSize,
+      ...(difficulty && { difficulty }),
     },
   });
 
@@ -49,11 +55,14 @@ export const SearchQuestionsList = () => {
 
   return (
     <div className="container flex flex-col gap-2 py-8">
-      <h1 className="text-2xl font-bold ">
-        {questions.length
-          ? `Found ${searchResultData.totalItems} results`
-          : "No questions found"}
-      </h1>
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold ">
+          {questions.length
+            ? `Found ${searchResultData.totalItems} results`
+            : "No questions found"}
+        </h1>
+        <DifficultyFilter value={difficulty} onChange={setDifficulty} />
+      </div>
       {!questions.length && (
         <p>Try searching for specific topics or keywords.</p>
       )}