add edit operations for admins

Kurtyjlee · Kurtyjlee · commit 0b29aff513fd · 2024-10-11T15:14:33.000+08:00
diff --git a/peerprep-fe/src/app/admin/page.tsx b/peerprep-fe/src/app/admin/page.tsx
@@ -4,6 +4,8 @@ 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';
 
 function AdminPage() {
   const {
@@ -18,13 +20,47 @@ function AdminPage() {
   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;
   };
 
+  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');
+      }
+    }
+  };
+
   return (
     <div className="min-h-screen bg-gray-900 p-6 pt-24 text-gray-100">
       <div className="mx-auto max-w-7xl">
@@ -38,6 +74,7 @@ function AdminPage() {
           isLoading={isLoading}
           showActions={true}
           handleDelete={handleDelete}
+          handleEdit={handleEdit}
         />
       </div>
     </div>
diff --git a/peerprep-fe/src/components/problems/ProblemInputDialog.tsx b/peerprep-fe/src/components/problems/ProblemInputDialog.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -7,14 +7,17 @@ import {
   DialogTitle,
 } from '../ui/dialog';
 import { Button } from '../ui/button';
-import { getDifficultyString } from '@/lib/utils';
-import { ProblemDialogData } from '@/types/types';
+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';
 
 type Props = {
   isOpen: boolean;
   onClose: () => void;
-  problem: ProblemDialogData | null;
-  requestCallback: () => void;
+  problem: Problem;
+  requestCallback: (problem: Problem) => void;
   requestTitle: string;
 };
 
@@ -25,25 +28,76 @@ function ProblemInputDialog({
   requestCallback,
   requestTitle,
 }: Props) {
+  const [problemData, setProblemData] = useState<Problem>(problem);
+
+  const handleSubmit = async () => {
+    requestCallback(problemData);
+  };
+
   if (!problem) return null;
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="bg-black">
         <DialogHeader>
-          <DialogTitle>{problem.title}</DialogTitle>
-          <DialogDescription>
-            Difficulty: {getDifficultyString(problem.difficulty)}
-          </DialogDescription>
+          <DialogTitle>Edit Question</DialogTitle>
+          <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">
-          <Button variant="secondary" onClick={requestCallback}>
-            {requestTitle}
-          </Button>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <p>Description</p>
+            <Input
+              name="title"
+              placeholder="Question Title"
+              defaultValue={problemData.title}
+              onChange={(e) => {
+                setProblemData({ ...problemData, title: e.target.value });
+              }}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <p>Difficulty</p>
+            <FilterSelect
+              placeholder="difficulty"
+              options={[
+                { value: '1', label: 'Easy' },
+                { value: '2', label: 'Medium' },
+                { value: '3', label: 'Hard' },
+              ]}
+              onChange={(value) => {
+                setProblemData({ ...problemData, difficulty: Number(value) });
+              }}
+              value={String(problemData.difficulty)}
+            />
+          </div>
+          <div className="space-y-2">
+            <p>Description</p>
+            <Textarea
+              name="description"
+              placeholder="Question Description"
+              defaultValue={problemData.description}
+              onChange={(e) => {
+                setProblemData({ ...problemData, description: e.target.value });
+              }}
+              className="min-h-[100px]"
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <p>Topics</p>
+            <TopicsPopover
+              selectedTopics={problemData.tags}
+              onChange={(value) => {
+                setProblemData({ ...problemData, tags: value });
+              }}
+            />
+          </div>
+          <div className="mt-2 flex justify-end">
+            <Button variant="secondary" onClick={handleSubmit}>
+              {requestTitle}
+            </Button>
+          </div>
         </div>
       </DialogContent>
     </Dialog>
diff --git a/peerprep-fe/src/components/problems/ProblemRow.tsx b/peerprep-fe/src/components/problems/ProblemRow.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { useState } from 'react';
 import { CheckCircle2, Pencil, Trash2 } from 'lucide-react';
-import { Problem, ProblemDialogData } from '@/types/types';
+import { Problem } from '@/types/types';
 import { Button } from '../ui/button';
 import { getDifficultyString } from '@/lib/utils';
 import ProblemInputDialog from './ProblemInputDialog';
@@ -24,32 +24,42 @@ interface Props {
   handleDelete:
     | ((id: number) => Promise<AxiosResponse<unknown, unknown>>)
     | undefined;
+  handleEdit:
+    | ((problem: Problem) => Promise<AxiosResponse<unknown, unknown>>)
+    | undefined;
 }
 
 export default function ProblemRow({
   problem,
   showActions,
   handleDelete,
+  handleEdit,
 }: Props) {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [informationDialog, setInformationDialog] = useState('');
 
-  const problemDetails: ProblemDialogData = {
-    _id: problem._id,
-    title: problem.title,
-    difficulty: problem.difficulty,
-    description: problem.description,
-  };
-
   const handleDeleteClick = async () => {
     if (!handleDelete) return;
     handleDelete(problem._id).catch(() => {
       setInformationDialog('Failed to delete problem');
     });
   };
 
+  const handleEditClick = async (problemData: Problem) => {
+    if (!handleEdit) return;
+    if (problemData === problem) {
+      setInformationDialog('No changes made');
+      return;
+    }
+
+    handleEdit(problemData).catch((e: Error) => {
+      console.log(e);
+      setInformationDialog(e.message);
+    });
+  };
+
   return (
     <>
       <tr className="border-b border-gray-800">
@@ -135,10 +145,8 @@ export default function ProblemRow({
       <ProblemInputDialog
         isOpen={isEditDialogOpen}
         onClose={() => setIsEditDialogOpen(false)}
-        problem={problemDetails}
-        requestCallback={() => {
-          console.log('Hello');
-        }}
+        problem={problem}
+        requestCallback={handleEditClick}
         requestTitle="Update"
       />
 
diff --git a/peerprep-fe/src/components/problems/ProblemTable.tsx b/peerprep-fe/src/components/problems/ProblemTable.tsx
@@ -11,13 +11,17 @@ interface ProblemTableProps {
   handleDelete?:
     | ((id: number) => Promise<AxiosResponse<unknown, unknown>>)
     | undefined;
+  handleEdit?:
+    | ((problem: Problem) => Promise<AxiosResponse<unknown, unknown>>)
+    | undefined;
 }
 
 export default function ProblemTable({
   problems,
   isLoading,
   showActions = false,
   handleDelete,
+  handleEdit,
 }: ProblemTableProps) {
   return (
     <div className="overflow-x-auto">
@@ -59,6 +63,7 @@ export default function ProblemTable({
                   problem={problem}
                   showActions={showActions}
                   handleDelete={handleDelete}
+                  handleEdit={handleEdit}
                 />
               ))}
         </tbody>
diff --git a/peerprep-fe/src/components/ui/textarea.tsx b/peerprep-fe/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+// Prevent interface extending without adding any new properties
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
diff --git a/peerprep-fe/src/types/types.ts b/peerprep-fe/src/types/types.ts
@@ -17,6 +17,15 @@ interface ProblemDialogData {
   description: string;
 }
 
+interface ProblemRequestData {
+  title: string;
+  difficulty: number;
+  description: string;
+  examples: string[];
+  constraints: string;
+  tags: string[];
+}
+
 interface FilterBadgeProps {
   filterType: 'Difficulty' | 'Status' | 'Topics';
   value: string;
@@ -42,6 +51,7 @@ interface User {
 export type {
   Problem,
   ProblemDialogData,
+  ProblemRequestData,
   FilterBadgeProps,
   FilterSelectProps,
   User,
diff --git a/question-service/src/routes/questionsController.ts b/question-service/src/routes/questionsController.ts
@@ -66,7 +66,8 @@ router.put('/:id', async (req: Request, res: Response) => {
       title: parsedResult.data.title,
     });
 
-    if (existingQuestion) {
+    // Check if the question already exists with separate id
+    if (existingQuestion && existingQuestion._id.toString() !== id) {
       return res.status(409).json({
         error: 'This question title already exist',
       });
