Add filter functionalities to collaboration page

Author: tyouwei

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

@@ -1,6 +1,6 @@
 'use client';
 import { useFilteredProblems } from '@/hooks/useFilteredProblems';
-import FilterBar from './filter/FilterBar';
+import FilterBar from '../../../components/filter/FilterBar';
 import ProblemTable from '../../../components/problems/ProblemTable';
 import RejoinSession from './RejoinSession';
 

peerprep-fe/src/app/admin/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React, { useState } from 'react';
 import { useFilteredProblems } from '@/hooks/useFilteredProblems';
-import FilterBar from '../(main)/components/filter/FilterBar';
+import FilterBar from '../../components/filter/FilterBar';
 import ProblemTable from '../../components/problems/ProblemTable';
 import { axiosClient } from '@/network/axiosClient';
 import { Problem } from '@/types/types';

peerprep-fe/src/app/collaboration/page.tsx

@@ -16,6 +16,7 @@ import LoadingSpinner from '@/components/loading/LoadingSpinner';
 import { useCollaborationStore } from '@/state/useCollaborationStore';
 import dynamic from 'next/dynamic';
 import EditorSkeleton from './components/EditorSkeleton';
+import FilterBar from '@/components/filter/FilterBar';
 
 const CollaborationEditor = dynamic(
   () => import('./components/CollaborationEditor'),
@@ -31,7 +32,15 @@ function CollaborationPageContent() {
   );
   const searchParams = useSearchParams();
   const matchId = searchParams.get('matchId');
-  const { problems, isLoading, hasMore, loadMore } = useFilteredProblems();
+  const {
+    problems,
+    isLoading,
+    hasMore,
+    loadMore,
+    filters,
+    updateFilter,
+    removeFilter,
+  } = useFilteredProblems();
   const { setLastMatchId } = useCollaborationStore();
 
   useEffect(() => {
@@ -96,6 +105,11 @@ function CollaborationPageContent() {
         ) : (
           <>
             <h2 className="mb-4 text-2xl font-bold">Choose a question</h2>
+            <FilterBar
+              filters={filters}
+              updateFilter={updateFilter}
+              removeFilter={removeFilter}
+            />
             <ProblemTable
               problems={problems}
               isLoading={isLoading}

peerprep-fe/src/components/dialogs/PreMatch.tsx

@@ -10,8 +10,8 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { FilterSelect } from '@/app/(main)/components/filter/FilterSelect';
-import { TopicsPopover } from '@/app/(main)/components/filter/TopicsPopover';
+import { FilterSelect } from '@/components/filter/FilterSelect';
+import { TopicsPopover } from '@/components/filter/TopicsPopover';
 import { axiosClient } from '@/network/axiosClient';
 import { DIFFICULTY_OPTIONS } from '@/lib/constants';
 import { UserMatchingRequest } from '@/types/types';

peerprep-fe/src/app/(main)/components/filter/FilterBadge.tsx renamed to peerprep-fe/src/components/filter/FilterBadge.tsx

@@ -10,8 +10,8 @@ import { Button } from '../ui/button';
 import { Problem } from '@/types/types';
 import { Textarea } from '../ui/textarea';
 import { Input } from '../ui/input';
-import { FilterSelect } from '@/app/(main)/components/filter/FilterSelect';
-import { TopicsPopover } from '@/app/(main)/components/filter/TopicsPopover';
+import { FilterSelect } from '@/components/filter/FilterSelect';
+import { TopicsPopover } from '@/components/filter/TopicsPopover';
 import { DIFFICULTY_OPTIONS, INITIAL_PROBLEM_DATA } from '@/lib/constants';
 
 type Props = {