From 2ebddf57db2ba6f0e31fcca20e9ad6503102437a Mon Sep 17 00:00:00 2001
From: You Wei <thamyouwei@gmail.com>
Date: Thu, 14 Nov 2024 05:22:39 +0800
Subject: [PATCH] Add filter functionalities to collaboration page

---
 peerprep-fe/src/app/(main)/components/Main.tsx   |  2 +-
 peerprep-fe/src/app/admin/page.tsx               |  2 +-
 peerprep-fe/src/app/collaboration/page.tsx       | 16 +++++++++++++++-
 peerprep-fe/src/components/dialogs/PreMatch.tsx  |  4 ++--
 .../components/filter/FilterBadge.tsx            |  0
 .../(main) => }/components/filter/FilterBar.tsx  |  0
 .../components/filter/FilterSelect.tsx           |  0
 .../components/filter/TopicsPopover.tsx          |  0
 .../components/problems/ProblemInputDialog.tsx   |  4 ++--
 9 files changed, 21 insertions(+), 7 deletions(-)
 rename peerprep-fe/src/{app/(main) => }/components/filter/FilterBadge.tsx (100%)
 rename peerprep-fe/src/{app/(main) => }/components/filter/FilterBar.tsx (100%)
 rename peerprep-fe/src/{app/(main) => }/components/filter/FilterSelect.tsx (100%)
 rename peerprep-fe/src/{app/(main) => }/components/filter/TopicsPopover.tsx (100%)

diff --git a/peerprep-fe/src/app/(main)/components/Main.tsx b/peerprep-fe/src/app/(main)/components/Main.tsx
index c2926f7d36..3c58bc7ff3 100644
--- a/peerprep-fe/src/app/(main)/components/Main.tsx
+++ b/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';
 
diff --git a/peerprep-fe/src/app/admin/page.tsx b/peerprep-fe/src/app/admin/page.tsx
index 85153b8cf4..99de8a80ee 100644
--- a/peerprep-fe/src/app/admin/page.tsx
+++ b/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';
diff --git a/peerprep-fe/src/app/collaboration/page.tsx b/peerprep-fe/src/app/collaboration/page.tsx
index e48f594d7d..baa07ce44a 100644
--- a/peerprep-fe/src/app/collaboration/page.tsx
+++ b/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}
diff --git a/peerprep-fe/src/components/dialogs/PreMatch.tsx b/peerprep-fe/src/components/dialogs/PreMatch.tsx
index fde2da4e63..16f236c4bd 100644
--- a/peerprep-fe/src/components/dialogs/PreMatch.tsx
+++ b/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';
diff --git a/peerprep-fe/src/app/(main)/components/filter/FilterBadge.tsx b/peerprep-fe/src/components/filter/FilterBadge.tsx
similarity index 100%
rename from peerprep-fe/src/app/(main)/components/filter/FilterBadge.tsx
rename to peerprep-fe/src/components/filter/FilterBadge.tsx
diff --git a/peerprep-fe/src/app/(main)/components/filter/FilterBar.tsx b/peerprep-fe/src/components/filter/FilterBar.tsx
similarity index 100%
rename from peerprep-fe/src/app/(main)/components/filter/FilterBar.tsx
rename to peerprep-fe/src/components/filter/FilterBar.tsx
diff --git a/peerprep-fe/src/app/(main)/components/filter/FilterSelect.tsx b/peerprep-fe/src/components/filter/FilterSelect.tsx
similarity index 100%
rename from peerprep-fe/src/app/(main)/components/filter/FilterSelect.tsx
rename to peerprep-fe/src/components/filter/FilterSelect.tsx
diff --git a/peerprep-fe/src/app/(main)/components/filter/TopicsPopover.tsx b/peerprep-fe/src/components/filter/TopicsPopover.tsx
similarity index 100%
rename from peerprep-fe/src/app/(main)/components/filter/TopicsPopover.tsx
rename to peerprep-fe/src/components/filter/TopicsPopover.tsx
diff --git a/peerprep-fe/src/components/problems/ProblemInputDialog.tsx b/peerprep-fe/src/components/problems/ProblemInputDialog.tsx
index 70b3b14500..179a227d18 100644
--- a/peerprep-fe/src/components/problems/ProblemInputDialog.tsx
+++ b/peerprep-fe/src/components/problems/ProblemInputDialog.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 = {