Link frontend delete question to backend

Author: szelongq

QuestionService/javascript/question/question.controller.js

@@ -63,8 +63,9 @@ function handleDeleteQuestion(req, res) {
     return __awaiter(this, void 0, void 0, function* () {
         const questionId = req.params.questionId;
         try {
-            const docRef = (0, firestore_1.doc)(question_service_1.db, "questions", questionId);
-            const result = yield (0, firestore_1.deleteDoc)(docRef);
+            console.log(`deleting question with id ${questionId}`);
+            yield (0, question_service_1.deleteQuestion)(questionId);
+            res.status(200).send(`question with id "${questionId}" deleted`);
         }
         catch (err) {
             console.log(`error when deleting question with id ${questionId}` + err);

QuestionService/javascript/question/question.service.js

@@ -9,12 +9,25 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addQuestion = exports.db = void 0;
+exports.addQuestion = exports.deleteQuestion = exports.db = void 0;
 const app_1 = require("firebase/app");
 const firestore_1 = require("firebase/firestore");
 const firebase_config_1 = require("../firebase/firebase.config");
 (0, app_1.initializeApp)(firebase_config_1.firebaseConfig);
 exports.db = (0, firestore_1.getFirestore)();
+function deleteQuestion(questionId) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const docRef = (0, firestore_1.doc)(exports.db, "questions", questionId);
+            yield (0, firestore_1.deleteDoc)(docRef);
+            return Promise.resolve();
+        }
+        catch (error) {
+            return Promise.reject(error);
+        }
+    });
+}
+exports.deleteQuestion = deleteQuestion;
 function addQuestion(question) {
     return __awaiter(this, void 0, void 0, function* () {
         try {

QuestionService/src/question/question.controller.ts

@@ -1,5 +1,5 @@
 import { Request, Response } from "express";
-import {addQuestion, db} from "./question.service";
+import {addQuestion, db, deleteQuestion} from "./question.service";
 import {
   getDocs,
   collection,
@@ -78,8 +78,9 @@ const getExamples = async (id: string) => {
 export async function handleDeleteQuestion(req: Request, res: Response) {
   const questionId = req.params.questionId;
   try {
-    const docRef = doc(db, "questions", questionId);
-    const result = await deleteDoc(docRef);
+    console.log(`deleting question with id ${questionId}`);
+    await deleteQuestion(questionId);
+    res.status(200).send(`question with id "${questionId}" deleted`);
   } catch (err) {
     console.log(`error when deleting question with id ${questionId}` + err);
     res.status(500).send(err);

QuestionService/src/question/question.service.ts

@@ -1,5 +1,5 @@
 import { initializeApp } from "firebase/app";
-import {doc, getFirestore, setDoc} from "firebase/firestore";
+import {deleteDoc, doc, getFirestore, setDoc} from "firebase/firestore";
 import { firebaseConfig } from "../firebase/firebase.config"
 
 initializeApp(firebaseConfig);
@@ -20,6 +20,16 @@ interface Example {
   image: string;
 }
 
+export async function deleteQuestion(questionId: string) {
+  try {
+    const docRef = doc(db, "questions", questionId);
+    await deleteDoc(docRef);
+    return Promise.resolve();
+  } catch (error) {
+    return Promise.reject(error);
+  }
+}
+
 export async function addQuestion(question: Question): Promise<Question> {
   try {
     let questionDoc: Omit<Question, "examples"> = question

frontend/src/api/questions/data.ts

@@ -16,5 +16,5 @@ export const getAllQuestions = () => questionhttpClient.get("/questions");
 export const addQuestion = (params: QuestionDTO) =>
   questionhttpClient.post("/questions", params);
 
-export const deleteQuestion = () =>
-  questionhttpClient.delete("/questions/:questionId");
+export const deleteQuestion = (questionId: string) =>
+  questionhttpClient.delete(`/questions/${questionId}`);

frontend/src/components/Questions/EditQuestionsTab.tsx

@@ -3,6 +3,9 @@ import EditQuestionsTable from "./EditQuestionsTable";
 import {Box, Button} from "@mui/material";
 import Grid from "@mui/material/Grid";
 import Question from "./Question";
+import {Delete} from "@mui/icons-material";
+import {addQuestion, deleteQuestion} from "../../api/questions/data";
+import {AxiosError} from "axios";
 
 
 const EditQuestionsTab: React.FC = () => {
@@ -21,10 +24,20 @@ const EditQuestionsTab: React.FC = () => {
         //TODO: Update question in database
     }
 
-    const onDelete = (questionToDelete: Question) => {
+    const onDelete = async (questionToDelete: Question) => {
         console.log("Question to Delete: ", questionToDelete);
 
-        //TODO: Delete question from database
+        try {
+            await deleteQuestion(questionToDelete.title);
+            console.log("Question deleted: ",questionToDelete.title);
+            setEditQuestions(false);
+        } catch (e) {
+            if (e instanceof AxiosError && e.response) {
+                console.log(e.response.data.code);
+            } else if (e instanceof Error) {
+                console.log(e.message);
+            }
+        }
     }