Merge pull request #46 from CS3219-AY2425S1/feat/admin-fe

Admin Frontend

Author: Kurtyjlee

peerprep-fe/pnpm-lock.yaml

@@ -1,7 +1,7 @@
 'use client';
 import { useFilteredProblems } from '@/hooks/useFilteredProblems';
 import FilterBar from './filter/FilterBar';
-import ProblemTable from './problems/ProblemTable';
+import ProblemTable from '../../../components/problems/ProblemTable';
 
 export default function MainComponent() {
   const { problems, filters, updateFilter, removeFilter, isLoading } =

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

@@ -8,17 +8,7 @@ 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' },
-  { value: '2', label: 'Medium' },
-  { value: '3', label: 'Hard' },
-];
-
-const STATUS_OPTIONS = [
-  { value: 'todo', label: 'Todo' },
-  { value: 'solved', label: 'Solved' },
-];
+import { DIFFICULTY_OPTIONS, STATUS_OPTIONS } from '@/lib/constants';
 
 interface FilterBarProps {
   filters: FilterState;
@@ -27,12 +17,16 @@ interface FilterBarProps {
     value: string | string[] | null,
   ) => void;
   removeFilter: (key: keyof FilterState, value?: string) => void;
+  isAdmin?: boolean;
+  buttonCallback?: () => void;
 }
 
 export default function FilterBar({
   filters,
   updateFilter,
   removeFilter,
+  isAdmin = false,
+  buttonCallback,
 }: FilterBarProps) {
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearchTerm = useDebounce(searchTerm, 300); // 300ms delay
@@ -83,9 +77,18 @@ export default function FilterBar({
         >
           <Settings className="h-4 w-4" />
         </Button>
-        <Button className="bg-green-600 text-white hover:bg-green-700">
-          Match
-        </Button>
+        {!isAdmin ? (
+          <Button className="bg-green-600 text-white hover:bg-green-700">
+            Match
+          </Button>
+        ) : (
+          <Button
+            className="bg-blue-600 text-white hover:bg-blue-700"
+            onClick={buttonCallback}
+          >
+            Add
+          </Button>
+        )}
       </div>
       <div className="flex flex-wrap gap-2">
         {filters.difficulty && (

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

@@ -1,13 +1,6 @@
 'use client';
 import MainComponent from './components/Main';
-import { useAuth } from '@/hooks/useAuth';
-import LoadingSpinner from '@/components/loading/LoadingSpinner';
 
 export default function Home() {
-  const { isLoading } = useAuth();
-  if (isLoading) {
-    return <LoadingSpinner />;
-  }
-
   return <MainComponent />;
 }

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import Navbar from '@/components/navbar/Navbar';
+
+const MainLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <>
+      <Navbar />
+      <main>{children}</main>
+    </>
+  );
+};
+
+export default MainLayout;

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

@@ -0,0 +1,148 @@
+'use client';
+import React, { useState } from 'react';
+import { useFilteredProblems } from '@/hooks/useFilteredProblems';
+import FilterBar from '../(main)/components/filter/FilterBar';
+import ProblemTable from '../../components/problems/ProblemTable';
+import { axiosQuestionClient } from '@/network/axiosClient';
+import { Problem } from '@/types/types';
+import { isAxiosError } from 'axios';
+import ProblemInputDialog from '@/components/problems/ProblemInputDialog';
+import InformationDialog from '@/components/dialogs/InformationDialog';
+
+function AdminPage() {
+  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+  const [informationDialog, setInformationDialog] = useState('');
+  const {
+    problems,
+    filters,
+    updateFilter,
+    removeFilter,
+    isLoading,
+    refetchFilter,
+  } = useFilteredProblems();
+
+  const handleDelete = async (id: number) => {
+    const res = await axiosQuestionClient.delete(`/questions/${id}`);
+    if (res.status !== 200) {
+      throw new Error('Failed to delete problem');
+    }
+    refetchFilter();
+    return res;
+  };
+
+  const handleEdit = async (problem: Problem) => {
+    try {
+      const res = await axiosQuestionClient.put(`/questions/${problem._id}`, {
+        difficulty: problem.difficulty,
+        description: problem.description,
+        examples: problem.examples,
+        constraints: problem.constraints,
+        tags: problem.tags,
+        title_slug: problem.title_slug,
+        title: problem.title,
+      });
+
+      refetchFilter();
+      return res;
+    } catch (e: unknown) {
+      if (isAxiosError(e)) {
+        switch (e.status) {
+          case 400:
+            throw new Error('Invalid question data. Please check your input.');
+          case 409:
+            throw new Error('Question already exists');
+          case 404:
+            throw new Error('Question not found');
+          default:
+            throw new Error('Failed to update question');
+        }
+      }
+      if (e instanceof Error) {
+        throw new Error(e.message);
+      } else {
+        throw new Error('An unknown error occurred');
+      }
+    }
+  };
+
+  const handleAdd = async (problem: Problem) => {
+    // TODO: Add proper validation of fields
+    if (
+      problem.description === '' ||
+      problem.title === '' ||
+      problem.tags.length === 0
+    ) {
+      setInformationDialog('Please fill in all required fields');
+      return;
+    }
+    try {
+      const res = await axiosQuestionClient.post(`/questions`, {
+        difficulty: problem.difficulty,
+        description: problem.description,
+        examples: problem.examples,
+        constraints: problem.constraints,
+        tags: problem.tags,
+        title_slug: problem.title_slug,
+        title: problem.title,
+      });
+
+      refetchFilter();
+      setIsAddDialogOpen(false);
+      return res;
+    } catch (e: unknown) {
+      if (isAxiosError(e)) {
+        switch (e.status) {
+          case 400:
+            throw new Error('Invalid question data. Please check your input.');
+          case 409:
+            throw new Error('Question already exists');
+          case 404:
+            throw new Error('Question not found');
+          default:
+            throw new Error('Failed to update question');
+        }
+      }
+      if (e instanceof Error) {
+        throw new Error(e.message);
+      } else {
+        throw new Error('An unknown error occurred');
+      }
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-900 p-6 pt-24 text-gray-100">
+      <div className="mx-auto max-w-7xl">
+        <FilterBar
+          filters={filters}
+          updateFilter={updateFilter}
+          removeFilter={removeFilter}
+          isAdmin
+          buttonCallback={() => setIsAddDialogOpen(true)}
+        />
+        <ProblemTable
+          problems={problems}
+          isLoading={isLoading}
+          showActions={true}
+          handleDelete={handleDelete}
+          handleEdit={handleEdit}
+        />
+      </div>
+      <ProblemInputDialog
+        isOpen={isAddDialogOpen}
+        onClose={() => setIsAddDialogOpen(false)}
+        requestCallback={handleAdd}
+        requestTitle="Add"
+      />
+
+      <InformationDialog
+        isOpen={informationDialog !== ''}
+        onClose={() => setInformationDialog('')}
+        title="Status"
+        description={informationDialog}
+      />
+    </div>
+  );
+}
+
+export default AdminPage;