Add ability to edit question in frontend

frontend/components/questions/question-form.tsx

@@ -20,6 +20,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { AutosizeTextarea } from "../ui/autosize-textarea";
+import { useToast } from "@/components/hooks/use-toast";
 
 interface QuestionFormProps {
   initialData?: Question;
@@ -29,6 +30,8 @@ interface QuestionFormProps {
 }
 
 const QuestionForm: React.FC<QuestionFormProps> = ({ ...props }) => {
+  const { toast } = useToast();
+
   const [question, setQuestion] = useState<Question>(
     props.initialData || {
       id: "",
@@ -47,6 +50,20 @@ const QuestionForm: React.FC<QuestionFormProps> = ({ ...props }) => {
 
   const onSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+
+    // If no changes, prompt user and prevent API call
+    if (
+      props.initialData &&
+      question.toString() == props.initialData.toString()
+    ) {
+      toast({
+        title: "No changes",
+        description: "Form can only be submitted when changes are made",
+        variant: "destructive",
+      });
+      return;
+    }
+
     props.handleSubmit(question);
   };
 

frontend/components/questions/question-view-edit.tsx

@@ -5,6 +5,8 @@ import useSWR from "swr";
 import QuestionForm from "@/components/questions/question-form";
 import { useAuth } from "@/app/auth/auth-context";
 import { useEffect, useState } from "react";
+import { updateQuestion } from "@/lib/update-question";
+import { useToast } from "@/components/hooks/use-toast";
 import LoadingScreen from "@/components/common/loading-screen";
 
 const fetcher = async (url: string): Promise<Question> => {
@@ -35,8 +37,9 @@ export default function QuestionViewEdit({
   questionId: string;
 }) {
   const auth = useAuth();
+  const { toast } = useToast();
 
-  const { data, isLoading } = useSWR(
+  const { data, isLoading, mutate } = useSWR(
     `http://localhost:8000/questions/${questionId}`,
     fetcher
   );
@@ -47,9 +50,40 @@ export default function QuestionViewEdit({
     setQuestion(data);
   }, [data]);
 
-  const handleEdit = (question: Question) => {
-    // Todo: Implement
-    question;
+  const handleEdit = async (question: Question) => {
+    const response = await updateQuestion(question);
+    if (!response.ok) {
+      toast({
+        title: "Unknown Error",
+        description: "An unexpected error has occurred",
+        variant: "destructive",
+      });
+    }
+    switch (response.status) {
+      case 200:
+        toast({
+          title: "Success",
+          description: "Question updated successfully!",
+          variant: "success",
+        });
+        break;
+      case 404:
+        toast({
+          title: "Question not found",
+          description: "Question with specified ID not found",
+          variant: "destructive",
+        });
+        return;
+      case 409:
+        toast({
+          title: "Duplicated title",
+          description: "The title you entered is already in use",
+          variant: "destructive",
+        });
+        return;
+    }
+
+    mutate();
   };
 
   if (isLoading) {

frontend/lib/update-question.ts

@@ -0,0 +1,15 @@
+import { Question } from "./schemas/question-schema";
+
+export const updateQuestion = async (question: Question) => {
+  const response = await fetch(
+    `http://localhost:8000/questions/${question.id}`,
+    {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(question),
+    }
+  );
+  return response;
+};