From 1824603f2db70017ee157283627412d42120dbd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20Efe=20Ak=C3=A7a?= <efeakca@gmail.com>
Date: Fri, 6 Dec 2024 14:14:19 +0300
Subject: [PATCH] feat(frontend): add difficulty filter in question search page

---
 frontend/src/components/DifficultyFilter.tsx  |  2 ++
 .../src/components/SearchQuestionsList.tsx    | 21 +++++++++++++------
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/DifficultyFilter.tsx b/frontend/src/components/DifficultyFilter.tsx
index 6dcc8e1e..aabdba6c 100644
--- 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
index 464a1186..b5dc4046 100644
--- 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>
       )}