Link frontend add question form to backend

Author: szelongq

QuestionService/javascript/question/question.service.js

@@ -21,8 +21,8 @@ function addQuestion(question) {
             let questionDoc = question;
             const docRef = (0, firestore_1.doc)(exports.db, "questions", question.title);
             yield (0, firestore_1.setDoc)(docRef, questionDoc);
-            for (let i = 1; i <= question.examples.length; i++) {
-                const add = (0, firestore_1.setDoc)((0, firestore_1.doc)(docRef, "examples", i.toString()), question.examples[i]);
+            for (let i = 0; i < question.examples.length; i++) {
+                const add = (0, firestore_1.setDoc)((0, firestore_1.doc)(docRef, "examples", (i + 1).toString()), question.examples[i]);
             }
             return Promise.resolve(question);
         }

QuestionService/src/question/question.service.ts

@@ -1,5 +1,5 @@
 import { initializeApp } from "firebase/app";
-import {addDoc, collection, doc, getFirestore, setDoc} from "firebase/firestore";
+import {doc, getFirestore, setDoc} from "firebase/firestore";
 import { firebaseConfig } from "../firebase/firebase.config"
 
 initializeApp(firebaseConfig);
@@ -25,8 +25,8 @@ export async function addQuestion(question: Question): Promise<Question> {
     let questionDoc: Omit<Question, "examples"> = question
     const docRef = doc(db, "questions", question.title);
     await setDoc(docRef, questionDoc);
-    for (let i = 1; i <= question.examples.length; i++) {
-      const add = setDoc(doc(docRef, "examples", i.toString()), question.examples[i]);
+    for (let i = 0; i < question.examples.length; i++) {
+      const add = setDoc(doc(docRef, "examples", (i+1).toString()), question.examples[i]);
     }
     return Promise.resolve(question);
   } catch (error) {

frontend/src/api/questions/dto.ts

@@ -3,8 +3,8 @@ import { Example } from "../../data/data.context";
 export interface QuestionDTO {
   title: string;
   tags: string[];
-  categories: string;
-  constraints: string;
+  categories: string[];
+  constraints: string[];
   difficulty: string;
   description: string;
   examples: Example[];

frontend/src/components/Questions/AddQuestionTab.tsx

@@ -3,6 +3,8 @@ import QuestionForm from "./QuestionForm";
 import {Box, Button} from "@mui/material";
 import Question from "./Question";
 import Typography from "@mui/material/Typography";
+import {addQuestion} from "../../api/questions/data";
+import {AxiosError} from "axios";
 
 
 const AddQuestionTab: React.FC = () => {
@@ -11,10 +13,21 @@ const AddQuestionTab: React.FC = () => {
     const handleAddQuestionClick = () => {
         setAddQuestions(true);
     }
-    const onSubmit = (question: Question) => {
-        // TODO: Add question to database
+    const onSubmit = async (question: Question) => {
         console.log(question);
-        setAddQuestions(false);
+        let questionToAdd = new Question(question);
+
+        try {
+            const questionAdded = await addQuestion(questionToAdd);
+            console.log(questionAdded);
+            setAddQuestions(false);
+        } catch (e) {
+            if (e instanceof AxiosError && e.response) {
+                console.log(e.response.data.code);
+            } else if (e instanceof Error) {
+                console.log(e.message);
+            }
+        }
     };
 
     const onCancel = () => {

frontend/src/components/Questions/Question.tsx

@@ -6,6 +6,7 @@ export default class Question {
     constraints: string[] = [];
     difficulty: string = '';
     description: string = '';
+    examples: Example[] = [];
 
     constructor(initializer?: any) {
         if (!initializer) return;
@@ -16,6 +17,11 @@ export default class Question {
         if (initializer.constraints) this.constraints = initializer.constraints;
         if (initializer.difficulty) this.difficulty = initializer.difficulty;
         if (initializer.description) this.description = initializer.description;
-
+        if (initializer.examples) this.examples = initializer.examples;
     }
+}
+
+interface Example {
+    text: string;
+    image: string;
 }

frontend/src/components/Questions/QuestionForm.tsx

@@ -27,7 +27,10 @@ const QuestionForm: React.FC<QuestionFormProps> = ({question:initialQuestion, on
     ];
 
     const handleTextInputChange = (e: { target: { id: any; value: any; }; }) => {
-        const {id, value} = e.target;
+        let {id, value} = e.target;
+        if (id === 'constraints') {
+            value = [value]
+        }
         setQuestion((q) => ({
             ...q,
             [id]: value,