add filter for question tags + loading skeleton state

Author: simbayippy

peerprep-fe/package.json

@@ -16,6 +16,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "axios": "^1.7.7",

peerprep-fe/pnpm-lock.yaml

@@ -1,32 +1,21 @@
 'use client';
-import { useEffect, useState, useCallback } from 'react';
-import axiosQuestionClient from '@/network/axiosClient';
+import { useFilteredProblems } from '@/hooks/useFilteredProblems';
 import FilterBar from './filter/FilterBar';
 import ProblemTable from './problems/ProblemTable';
-import { Problem } from '@/types/types';
 
 export default function LoggedIn() {
-  const [problems, setProblems] = useState<Problem[]>([]);
-
-  const fetchProblems = useCallback(async (params?: URLSearchParams) => {
-    try {
-      const url = params ? `/questions?${params.toString()}` : '/questions';
-      const response = await axiosQuestionClient.get(url);
-      setProblems(response.data);
-    } catch (error) {
-      console.error('Error fetching problems:', error);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchProblems();
-  }, [fetchProblems]);
+  const { problems, filters, updateFilter, removeFilter, isLoading } =
+    useFilteredProblems();
 
   return (
     <div className="min-h-screen bg-gray-900 p-6 pt-24 text-gray-100">
       <div className="mx-auto max-w-7xl">
-        <FilterBar fetchProblems={fetchProblems} />
-        <ProblemTable problems={problems} />
+        <FilterBar
+          filters={filters}
+          updateFilter={updateFilter}
+          removeFilter={removeFilter}
+        />
+        <ProblemTable problems={problems} isLoading={isLoading} />
       </div>
     </div>
   );

peerprep-fe/src/app/(main)/components/LoggedIn.tsx

@@ -2,11 +2,12 @@
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Settings } from 'lucide-react';
-import { useCallback, useEffect } from 'react';
-import { useSearchStore } from '@/state/useSearchStore';
 import { FilterSelect } from './FilterSelect';
 import { FilterBadge } from './FilterBadge';
-import { useQueryState, parseAsArrayOf, parseAsString } from 'nuqs';
+import { TopicsPopover } from './TopicsPopover';
+import { FilterState } from '@/hooks/useFilteredProblems';
+import { useState, useEffect } from 'react';
+import { useDebounce } from '@/hooks/useDebounce';
 
 const DIFFICULTY_OPTIONS = [
   { value: '1', label: 'Easy' },
@@ -19,86 +20,53 @@ const STATUS_OPTIONS = [
   { value: 'solved', label: 'Solved' },
 ];
 
-// TODO: replace with backend fetched list
-const TOPIC_OPTIONS = [
-  { value: 'array', label: 'Array' },
-  { value: 'string', label: 'String' },
-  { value: 'dp', label: 'Dynamic Programming' },
-];
-
 interface FilterBarProps {
-  fetchProblems: (params: URLSearchParams) => Promise<void>;
+  filters: FilterState;
+  updateFilter: (
+    key: keyof FilterState,
+    value: string | string[] | null,
+  ) => void;
+  removeFilter: (key: keyof FilterState, value?: string) => void;
 }
 
-export default function FilterBar({ fetchProblems }: FilterBarProps) {
-  const [difficulty, setDifficulty] = useQueryState('difficulty');
-  const [status, setStatus] = useQueryState('status');
-  const [topics, setTopics] = useQueryState(
-    'topics',
-    parseAsArrayOf(parseAsString),
-  );
-  const { searchTerm, setSearchTerm } = useSearchStore();
-
-  const handleFilterChange = useCallback(
-    (key: string, value: string | string[]) => {
-      if (key === 'difficulty') {
-        setDifficulty(value === 'all' ? null : (value as string));
-      } else if (key === 'status') {
-        setStatus(value === 'all' ? null : (value as string));
-      } else if (key === 'topics') {
-        setTopics(value.length ? (value as string[]) : null);
-      }
-    },
-    [setDifficulty, setStatus, setTopics],
-  );
+export default function FilterBar({
+  filters,
+  updateFilter,
+  removeFilter,
+}: FilterBarProps) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm, 300); // 300ms delay
 
-  const removeFilter = useCallback(
-    (key: string, value?: string) => {
-      if (key === 'difficulty') {
-        setDifficulty(null);
-      } else if (key === 'status') {
-        setStatus(null);
-      } else if (key === 'topics') {
-        setTopics((prev) => prev?.filter((t) => t !== value) ?? null);
-      }
-    },
-    [setDifficulty, setStatus, setTopics],
-  );
+  /**
+   * Debounce so that search filters does not call backend for
+   * every single character input, but only after 300ms of no input
+   */
+  useEffect(() => {
+    updateFilter('search', debouncedSearchTerm);
+  }, [debouncedSearchTerm, updateFilter]);
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchTerm(e.target.value);
   };
 
-  useEffect(() => {
-    const params = new URLSearchParams();
-    if (difficulty) params.append('difficulty', difficulty);
-    if (status) params.append('status', status);
-    if (topics) topics.forEach((topic) => params.append('topics', topic));
-    if (searchTerm) params.append('search', searchTerm);
-    fetchProblems(params);
-  }, [difficulty, status, topics, searchTerm, fetchProblems]);
-
   return (
     <div className="mb-6">
       <div className="mb-4 flex flex-wrap gap-4">
         <FilterSelect
           placeholder="Difficulty"
           options={DIFFICULTY_OPTIONS}
-          onChange={(value) => handleFilterChange('difficulty', value)}
-          value={difficulty || ''}
+          onChange={(value) => updateFilter('difficulty', value)}
+          value={filters.difficulty || ''}
         />
         <FilterSelect
           placeholder="Status"
           options={STATUS_OPTIONS}
-          onChange={(value) => handleFilterChange('status', value)}
-          value={status || ''}
+          onChange={(value) => updateFilter('status', value)}
+          value={filters.status || ''}
         />
-        <FilterSelect
-          placeholder="Topics"
-          options={TOPIC_OPTIONS}
-          onChange={(value) => handleFilterChange('topics', value)}
-          value={topics || []}
-          isMulti
+        <TopicsPopover
+          selectedTopics={filters.topics || []}
+          onChange={(value) => updateFilter('topics', value)}
         />
         <div className="flex-grow">
           <Input
@@ -120,33 +88,32 @@ export default function FilterBar({ fetchProblems }: FilterBarProps) {
         </Button>
       </div>
       <div className="flex flex-wrap gap-2">
-        {difficulty && (
+        {filters.difficulty && (
           <FilterBadge
             filterType="difficulty"
             value={
-              DIFFICULTY_OPTIONS.find((opt) => opt.value === difficulty)
+              DIFFICULTY_OPTIONS.find((opt) => opt.value === filters.difficulty)
                 ?.label || ''
             }
             onRemove={() => removeFilter('difficulty')}
           />
         )}
-        {status && (
+        {filters.status && (
           <FilterBadge
             filterType="status"
             value={
-              STATUS_OPTIONS.find((opt) => opt.value === status)?.label || ''
+              STATUS_OPTIONS.find((opt) => opt.value === filters.status)
+                ?.label || ''
             }
             onRemove={() => removeFilter('status')}
           />
         )}
-        {topics &&
-          topics.map((topic) => (
+        {filters.topics &&
+          filters.topics.map((topic) => (
             <FilterBadge
               key={`topics-${topic}`}
               filterType="topics"
-              value={
-                TOPIC_OPTIONS.find((opt) => opt.value === topic)?.label || topic
-              }
+              value={topic}
               onRemove={() => removeFilter('topics', topic)}
             />
           ))}

peerprep-fe/src/app/(main)/components/filter/FilterBar.tsx

@@ -0,0 +1,103 @@
+'use client';
+import { useState, useEffect } from 'react';
+import { axiosQuestionClient } from '@/network/axiosClient';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+interface TopicsPopoverProps {
+  selectedTopics: string[];
+  onChange: (value: string[]) => void;
+}
+
+export function TopicsPopover({
+  selectedTopics,
+  onChange,
+}: TopicsPopoverProps) {
+  const [open, setOpen] = useState(false);
+  const [topics, setTopics] = useState<string[]>([]);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  useEffect(() => {
+    const fetchTopics = async () => {
+      try {
+        const response = await axiosQuestionClient.get('/questions/tags');
+        setTopics(response.data);
+      } catch (error) {
+        console.error('Error fetching topics:', error);
+      }
+    };
+
+    fetchTopics();
+  }, []);
+
+  const filteredTopics = topics.filter((topic) =>
+    topic.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between border-gray-700 bg-gray-800"
+        >
+          {selectedTopics.length > 0
+            ? `${selectedTopics.length} topics selected`
+            : 'Select topics'}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <div className="p-2">
+          <Input
+            placeholder="Search topics..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="mb-2"
+          />
+        </div>
+        <ScrollArea className="h-[300px]">
+          {filteredTopics.length === 0 ? (
+            <p className="p-2 text-sm text-muted-foreground">No topic found.</p>
+          ) : (
+            <div className="grid gap-1 p-2">
+              {filteredTopics.map((topic) => (
+                <Button
+                  key={topic}
+                  variant="ghost"
+                  className="justify-start"
+                  onClick={() => {
+                    const newSelectedTopics = selectedTopics.includes(topic)
+                      ? selectedTopics.filter((t) => t !== topic)
+                      : [...selectedTopics, topic];
+                    onChange(newSelectedTopics);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      selectedTopics.includes(topic)
+                        ? 'opacity-100'
+                        : 'opacity-0',
+                    )}
+                  />
+                  {topic}
+                </Button>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+      </PopoverContent>
+    </Popover>
+  );
+}