Merge pull request #3 from Vignesh-30/temp

wjacobw · web-flow · commit 78116f81e0bf · 2024-09-30T11:59:55.000+08:00
Enable cors, intergrate frontend and backend, change dto structure, change question service structure
diff --git a/backend/question-service/src/dto/CreateQuestion.dto.ts b/backend/question-service/src/dto/CreateQuestion.dto.ts
@@ -26,6 +26,10 @@ enum Difficulty {
 }
 
 export class CreateQuestionDto {
+  @IsNotEmpty()
+  @IsString()
+  id: string;
+
   @IsNotEmpty()
   @IsString()
   title: string;
@@ -39,7 +43,10 @@ export class CreateQuestionDto {
     message:
       'Category must be Algorithm, DynamicProgramming, Array, SQL, Heap, Recursion, Graph, Sorting',
   })
-  categories: Category[];
+
+  categories: Category;
+  // categories: Category[];
+
 
   @IsNotEmpty()
   @IsEnum(Difficulty, {
diff --git a/backend/question-service/src/main.ts b/backend/question-service/src/main.ts
@@ -3,6 +3,11 @@ import { AppModule } from './app.module';
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
+  app.enableCors({
+    origin: '*',
+  });
+  app.enableShutdownHooks();
   await app.listen(3002);
+  // console.log(app.getHttpAdapter().getInstance()._router.stack);
 }
 bootstrap();
diff --git a/backend/question-service/src/questions/questions.controller.ts b/backend/question-service/src/questions/questions.controller.ts
@@ -41,8 +41,10 @@ export class QuestionsController {
     @Param('id') id: string,
     @Body() UpdateQuestionDto: UpdateQuestionDto,
   ) {
-    const isValid = mongoose.Types.ObjectId.isValid(id);
-    if (!isValid) throw new HttpException('Invalid ID', 400);
+    // NEED TO CHANGE THIS, PREVIOUSLY ID IS THE AUTOMATICALLY GENERATED ID BY MONGODB, NOW IT IS SPECIFIED BY USER
+    //
+    // const isValid = mongoose.Types.ObjectId.isValid(id);
+    // if (!isValid) throw new HttpException('Invalid ID', 400);
     const updateQuestion = await this.questionsService.updateQuestion(
       id,
       UpdateQuestionDto,
@@ -53,8 +55,11 @@ export class QuestionsController {
 
   @Delete(':id')
   async deleteQuestion(@Param('id') id: string) {
-    const isValid = mongoose.Types.ObjectId.isValid(id);
-    if (!isValid) throw new HttpException('Invalid ID', 400);
+    // NEED TO CHANGE THIS, PREVIOUSLY ID IS THE AUTOMATICALLY GENERATED ID BY MONGODB, NOW IT IS SPECIFIED BY USER
+    //
+    // const isValid = mongoose.Types.ObjectId.isValid(id);
+    // if (!isValid) throw new HttpException('Invalid ID', 400);
+
     const deletedUser = await this.questionsService.deleteQuestion(id);
     if (!deletedUser) throw new HttpException('Question not Found', 404);
     return;
diff --git a/backend/question-service/src/questions/questions.service.ts b/backend/question-service/src/questions/questions.service.ts
@@ -24,13 +24,15 @@ export class QuestionsService {
     return this.questionModel.findById(id);
   }
 
-  updateQuestion(id: string, updateUserDto: UpdateQuestionDto) {
-    return this.questionModel.findByIdAndUpdate(id, updateUserDto, {
-      new: true,
-    });
+  updateQuestion(id: string, updateQuestionDto: UpdateQuestionDto) {
+    return this.questionModel
+      .findOneAndUpdate({ id: id }, updateQuestionDto, {
+        new: true,
+      })
+      .exec();
   }
 
   deleteQuestion(id: string) {
-    return this.questionModel.findByIdAndDelete(id);
+    return this.questionModel.deleteOne({ id: id }).exec();
   }
 }
diff --git a/backend/question-service/src/schemas/Question.schema.ts b/backend/question-service/src/schemas/Question.schema.ts
@@ -3,8 +3,8 @@ import mongoose from 'mongoose';
 
 @Schema()
 export class Question {
-  @Prop({ unique: true })
-  id: string;
+  @Prop({ unique: true, required: true })
+  id: number;
 
   @Prop({ unique: true, required: true })
   title: string;
@@ -13,10 +13,13 @@ export class Question {
   description: string;
 
   @Prop({ required: true })
-  category: string;
+  categories: string;
+
+  @Prop({ required: true })
+  complexity: string;
 
   @Prop({ required: true })
-  difficulty: string;
+  link: string;
 }
 
-export const QuestionSchema = SchemaFactory.createForClass(Question)
+export const QuestionSchema = SchemaFactory.createForClass(Question);
diff --git a/backend/user-service/src/main.ts b/backend/user-service/src/main.ts
@@ -4,8 +4,8 @@ import { AppModule } from './app.module';
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
   app.enableCors({
-    origin: 'http://localhost:3000',
+    origin: '*',
   });
   await app.listen(3001);
 }
-bootstrap();
+bootstrap();
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -19,6 +19,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",
     "react-scripts": "^5.0.1",
+    "react-services": "^0.1.2",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
diff --git a/frontend/src/components/questiontable.tsx b/frontend/src/components/questiontable.tsx
@@ -1,105 +1,153 @@
-import React, { useState } from 'react';
-import EditQuestionForm from './editquestionform';
+import axios from "axios";
+import React, { useState } from "react";
+import EditQuestionForm from "./editquestionform";
 
 export interface Question {
-    id: number;
-    title: string;
-    description: string;
-    categories: string;
-    complexity: string;
-    link: string;
+  id: string;
+  title: string;
+  description: string;
+  categories: string;
+  complexity: string;
+  link: string;
 }
 
 interface QuestionTableProps {
-    searchTerm: string;
-    category: string;
-    complexity: string;
-    questions: Question[];
-    setQuestions: React.Dispatch<React.SetStateAction<Question[]>>;
+  searchTerm: string;
+  category: string;
+  complexity: string;
+  questions: Question[];
+  setQuestions: React.Dispatch<React.SetStateAction<Question[]>>;
 }
 
-const QuestionTable: React.FC<QuestionTableProps> = ({ searchTerm, category, complexity, questions, setQuestions }) => {
+const QuestionTable: React.FC<QuestionTableProps> = ({
+  searchTerm,
+  category,
+  complexity,
+  questions,
+  setQuestions,
+}) => {
+  const [editingQuestion, setEditingQuestion] = useState<Question | null>(null);
 
-    const [editingQuestion, setEditingQuestion] = useState<Question | null>(null);
-  
-    const filteredQuestions = questions.filter((question) => {
-        const matchesSearchTerm = question.title.toLowerCase().includes(searchTerm.toLowerCase());
-        const matchesCategory = category ? question.categories.includes(category) : true;
-        const matchesComplexity = complexity ? question.complexity === complexity : true;
-        return matchesSearchTerm && matchesCategory && matchesComplexity;
-    });
+  const filteredQuestions = questions.filter((question) => {
+    const matchesSearchTerm = question.title
+      .toLowerCase()
+      .includes(searchTerm.toLowerCase());
+    const matchesCategory = category
+      ? question.categories.includes(category)
+      : true;
+    const matchesComplexity = complexity
+      ? question.complexity === complexity
+      : true;
+    return matchesSearchTerm && matchesCategory && matchesComplexity;
+  });
 
-    const handleDelete = (id: number) => {
-        setQuestions((prevQuestions) => prevQuestions.filter(question => question.id !== id));
-    };
+  const handleDelete = async (id: string) => {
+    try {
+      console.log("id is ", id);
+      await axios.delete(`http://localhost:3002/questions/${id}`);
+      setQuestions((prevQuestions) =>
+        prevQuestions.filter((question) => question.id !== id)
+      );
+    } catch (error) {
+      alert("Error deleting question: " + error);
+    }
+    setQuestions((prevQuestions) =>
+      prevQuestions.filter((question) => question.id !== id)
+    );
+  };
 
-    const handleUpdate = (updatedQuestion: Question) => {
-        setQuestions((prevQuestions) =>
-            prevQuestions.map(question => (question.id === updatedQuestion.id ? updatedQuestion : question))
-        );
-    };
+  const handleUpdate = async (updatedQuestion: Question) => {
+    try {
+        console.log("updated question is ", updatedQuestion)
+      const response = await axios.patch(
+        `http://localhost:3002/questions/${updatedQuestion.id}`,
+        updatedQuestion
+      );
+      setQuestions((prevQuestions) =>
+        prevQuestions.map((question) =>
+          question.id === updatedQuestion.id ? response.data : question
+        )
+      );
+    } catch (error) {
+      alert("Error updating question: " + error);
+    }
+  };
 
-    const closeEditForm = () => {
-        setEditingQuestion(null);
-    };
+  const closeEditForm = () => {
+    setEditingQuestion(null);
+  };
 
-    return (
-        <div>
-        <table className="min-w-full table-auto">
-            <thead>
-                <tr>
-                    <th className="border px-4 py-2">ID</th>
-                    <th className="border px-4 py-2">Title</th>
-                    <th className="border px-4 py-2">Description</th>
-                    <th className="border px-4 py-2">Categories</th>
-                    <th className="border px-4 py-2">Complexity</th>
-                    <th className="border px-4 py-2">Link</th>
-                    <th className="border px-4 py-2">Actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                {filteredQuestions.map((question) => (
-                    <tr key={question.id}>
-                        <td className="border px-4 py-2">{question.id}</td>
-                        <td className="border px-4 py-2">{question.title}</td>
-                        <td className="border px-4 py-2">{question.description}</td>
-                        <td className="border px-4 py-2">{question.categories}</td>
-                        <td className="border px-4 py-2">{question.complexity}</td>
-                        <td className="border px-4 py-2">
-                            <a href={question.link} target="_blank" rel="noopener noreferrer" className="text-blue-500">
-                                View
-                            </a>
-                        </td>
-                        <td className="border px-4 py-2">
-                        <div className="flex space-x-2">
-                            <button onClick={() => handleDelete(question.id)} className="bg-red-500 text-white rounded px-2 py-1">
-                                Delete
-                            </button>
-                            <button onClick={() => setEditingQuestion(question)} className="bg-red-500 text-white rounded px-2 py-1">
-                                    Edit
-                            </button>
-                        </div>
-                        </td>
-                    </tr>
-                ))}
-                {filteredQuestions.length === 0 && (
-                    <tr>
-                        <td colSpan={7} className="border border-gray-300 px-4 py-2 text-center">
-                            No questions found.
-                        </td>
-                    </tr>
-                )}
-            </tbody>
-        </table>
-        {editingQuestion && (
-            <EditQuestionForm 
-                question={editingQuestion} 
-                onUpdate={handleUpdate} 
-                onClose={closeEditForm} 
-            />
-        )}
+  return (
+    <div className="bg-gray-800 text-white">
+      <table className="min-w-full table-auto">
+        <thead className="bg-gray-700">
+          <tr>
+            <th className="border px-4 py-2">ID</th>
+            <th className="border px-4 py-2">Title</th>
+            <th className="border px-4 py-2">Description</th>
+            <th className="border px-4 py-2">Categories</th>
+            <th className="border px-4 py-2">Complexity</th>
+            <th className="border px-4 py-2">Link</th>
+            <th className="border px-4 py-2">Actions</th>
+          </tr>
+        </thead>
+        <tbody className="bg-gray-800">
+          {filteredQuestions.map((question) => (
+            <tr key={question.id}>
+              <td className="border px-4 py-2">{question.id}</td>
+              <td className="border px-4 py-2">{question.title}</td>
+              <td className="border px-4 py-2">{question.description}</td>
+              <td className="border px-4 py-2">{question.categories}</td>
+              <td className="border px-4 py-2">{question.complexity}</td>
+              <td className="border px-4 py-2">
+                <a
+                  href={question.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-500"
+                >
+                  View
+                </a>
+              </td>
+              <td className="border px-4 py-2">
+                <div className="flex space-x-2">
+                  <button
+                    onClick={() => handleDelete(question.id)}
+                    className="bg-red-500 text-white rounded px-2 py-1"
+                  >
+                    Delete
+                  </button>
+                  <button
+                    onClick={() => setEditingQuestion(question)}
+                    className="bg-red-500 text-white rounded px-2 py-1"
+                  >
+                    Edit
+                  </button>
+                </div>
+              </td>
+            </tr>
+          ))}
+          {filteredQuestions.length === 0 && (
+            <tr>
+              <td
+                colSpan={7}
+                className="border border-gray-300 px-4 py-2 text-center"
+              >
+                No questions found.
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+      {editingQuestion && (
+        <EditQuestionForm
+          question={editingQuestion}
+          onUpdate={handleUpdate}
+          onClose={closeEditForm}
+        />
+      )}
     </div>
-    );
+  );
 };
 
 export default QuestionTable;
diff --git a/frontend/src/components/uploadquestion.tsx b/frontend/src/components/uploadquestion.tsx
diff --git a/frontend/src/pages/questionservicepage.tsx b/frontend/src/pages/questionservicepage.tsx

Original file line number	Diff line number	Diff line change
`@@ -24,13 +24,15 @@ export class QuestionsService {`
`24`	`24`	`return this.questionModel.findById(id);`
`25`	`25`	`}`
`26`	`26`
`27`		`- updateQuestion(id: string, updateUserDto: UpdateQuestionDto) {`
`28`		`- return this.questionModel.findByIdAndUpdate(id, updateUserDto, {`
`29`		`- new: true,`
`30`		`- });`
	`27`	`+ updateQuestion(id: string, updateQuestionDto: UpdateQuestionDto) {`
	`28`	`+ return this.questionModel`
	`29`	`+ .findOneAndUpdate({ id: id }, updateQuestionDto, {`
	`30`	`+ new: true,`
	`31`	`+ })`
	`32`	`+ .exec();`
`31`	`33`	`}`
`32`	`34`
`33`	`35`	`deleteQuestion(id: string) {`
`34`		`- return this.questionModel.findByIdAndDelete(id);`
	`36`	`+ return this.questionModel.deleteOne({ id: id }).exec();`
`35`	`37`	`}`
`36`	`38`	`}`