add delete question operation

Author: Kurtyjlee

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

@@ -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/problems/ProblemRow.tsx

@@ -1,11 +1,47 @@
+'use client';
 import React 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';
+
+function AdminPage() {
+  const {
+    problems,
+    filters,
+    updateFilter,
+    removeFilter,
+    isLoading,
+    refetchFilter,
+  } = useFilteredProblems();
+
+  const handleDelete = async (id: number) => {
+    const res = await axiosQuestionClient.delete(`/questions/${id}`);
+    if (res.status !== 200) {
+      // Add error handling for a failed delete
+      throw new Error('Failed to delete problem');
+    }
+    refetchFilter();
+    return res;
+  };
 
-function page() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-900">
-      page
+    <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}
+        />
+        <ProblemTable
+          problems={problems}
+          isLoading={isLoading}
+          showActions={true}
+          handleDelete={handleDelete}
+        />
+      </div>
     </div>
   );
 }
 
-export default page;
+export default AdminPage;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog';
+import { Button } from '../ui/button';
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  subtitle?: string;
+  description: string;
+  callback?: () => void;
+  callbackTitle?: string;
+};
+
+const ActionDialog = ({
+  isOpen,
+  onClose,
+  title,
+  subtitle,
+  description,
+  callback,
+  callbackTitle,
+}: Props) => {
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="bg-black">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{subtitle}</DialogDescription>
+        </DialogHeader>
+        <div className="mt-4">
+          <h3 className="mb-2 text-lg font-semibold">Description:</h3>
+          <p>{description}</p>
+        </div>
+        <div className="mt-6 flex justify-end">
+          <Button variant="secondary" onClick={callback}>
+            {callbackTitle}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ActionDialog;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog';
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  description: string;
+};
+
+const InformationDialog = ({ isOpen, onClose, title, description }: Props) => {
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="bg-black">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription />
+        </DialogHeader>
+        <div className="mt-4">
+          <p>{description}</p>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default InformationDialog;

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

@@ -1,47 +1,53 @@
+import React from 'react';
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogDescription,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
+} from '../ui/dialog';
+import { Button } from '../ui/button';
+import { getDifficultyString } from '@/lib/utils';
 import { ProblemDialogData } from '@/types/types';
 
-export default function ProblemDialog({
-  isOpen,
-  onClose,
-  problem,
-}: {
+type Props = {
   isOpen: boolean;
   onClose: () => void;
   problem: ProblemDialogData | null;
-}) {
-  if (!problem) return null;
+  requestCallback: () => void;
+  requestTitle: string;
+};
 
-  const difficultyText =
-    problem.difficulty === 1
-      ? 'Easy'
-      : problem.difficulty === 2
-        ? 'Medium'
-        : 'Hard';
+function ProblemInputDialog({
+  isOpen,
+  onClose,
+  problem,
+  requestCallback,
+  requestTitle,
+}: Props) {
+  if (!problem) return null;
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="bg-black">
         <DialogHeader>
           <DialogTitle>{problem.title}</DialogTitle>
-          <DialogDescription>Difficulty: {difficultyText}</DialogDescription>
+          <DialogDescription>
+            Difficulty: {getDifficultyString(problem.difficulty)}
+          </DialogDescription>
         </DialogHeader>
         <div className="mt-4">
           <h3 className="mb-2 text-lg font-semibold">Description:</h3>
           <p>{problem.description}</p>
         </div>
         <div className="mt-6 flex justify-end">
-          {/* TODO: link to match route/page */}
-          <Button variant="secondary">Match</Button>
+          <Button variant="secondary" onClick={requestCallback}>
+            {requestTitle}
+          </Button>
         </div>
       </DialogContent>
     </Dialog>
   );
 }
+
+export default ProblemInputDialog;