Merge pull request #21 from jolynloh/FE/homepage

Implement Homepage

Author: nicolelim02

backend/question-service/README.md

@@ -22,29 +22,31 @@
 
 5. In the `question-service` directory, create a copy of the `.env.sample` file and name it `.env`.
 
-6. Update the `MONGO_URI` of the `.env` file, and paste the string we copied earlier in step 4. 
+6. Update the `MONGO_URI` of the `.env` file, and paste the string we copied earlier in step 4.
 
 ## Setting-up Firebase
 
 1. Go to https://console.firebase.google.com/u/0/.
 
 2. Create a project and choose a project name. Navigate to `Storage` and click on it to activate it.
 
-3. Select `Start in production mode` and your preferred cloud storage region. 
+3. Select `Start in production mode` and your preferred cloud storage region.
 
 4. After Storage is created, go to `Rules` section and set rule to:
-    ```
-    rules_version = '2';
-    service firebase.storage {
-      match /b/{bucket}/o {
-        match /{allPaths=**} {
-          allow read: if true;
-          allow write: if request.auth != null;
-        }
-      }
-    }
-    ```
-    This rule ensures that only verified users can upload images while ensuring that URLs of images are public. Remember to click `Publish` to save changes.
+
+   ```
+   rules_version = '2';
+   service firebase.storage {
+     match /b/{bucket}/o {
+       match /{allPaths=**} {
+         allow read: if true;
+         allow write: if request.auth != null;
+       }
+     }
+   }
+   ```
+
+   This rule ensures that only verified users can upload images while ensuring that URLs of images are public. Remember to click `Publish` to save changes.
 
 5. Go to `Settings`, `Project settings`, `Service accounts` and click `Generate new private key`. This will download a `.json` file, which will contain your credentials.
 
@@ -54,7 +56,6 @@
    - `FIREBASE_CLIENT_EMAIL` with `client_email` found in the downloaded json file.
    - `FIREBASE_STORAGE_BUCKET` with the folder path of the Storage. It should look something like `gs://<appname>.appspot.com`.
 
-
 ## Running Question Service
 
 1. Open Command Line/Terminal and navigate into the `question-service` directory.
@@ -63,6 +64,6 @@
 
 3. Run the command `npm start` to start the Question Service in production mode, or use `npm run dev` for development mode, which includes features like automatic server restart when you make code changes.
 
-4. To view Question Service documentation, go to http://localhost:3001/docs.
+4. To view Question Service documentation, go to http://localhost:3000/docs.
 
 5. Using applications like Postman, you can interact with the Question Service on port 3000. If you wish to change this, please update the `.env` file.

backend/question-service/package-lock.json

@@ -2,8 +2,8 @@ import { Request, Response } from "express";
 import Question, { IQuestion } from "../models/Question.ts";
 import { checkIsExistingQuestion } from "../utils/utils.ts";
 import {
-  DUPLICATE_QUESTION_RESPONSE_MESSAGE,
-  QN_DESC_EXCEED_CHAR_LIMIT_RESPONSE_MESSAGE,
+  DUPLICATE_QUESTION_MESSAGE,
+  QN_DESC_EXCEED_CHAR_LIMIT_MESSAGE,
   QN_DESC_CHAR_LIMIT,
   QN_CREATED_MESSAGE,
   QN_NOT_FOUND_MESSAGE,
@@ -13,6 +13,8 @@ import {
   PAGE_LIMIT_REQUIRED_MESSAGE,
   PAGE_LIMIT_INCORRECT_FORMAT_MESSAGE,
   CATEGORIES_RETRIEVED_MESSAGE,
+  MONGO_OBJ_ID_FORMAT,
+  MONGO_OBJ_ID_MALFORMED_MESSAGE,
 } from "../utils/constants.ts";
 
 import { upload } from "../../config/multer";
@@ -28,14 +30,14 @@ export const createQuestion = async (
     const existingQuestion = await checkIsExistingQuestion(title);
     if (existingQuestion) {
       res.status(400).json({
-        message: DUPLICATE_QUESTION_RESPONSE_MESSAGE,
+        message: DUPLICATE_QUESTION_MESSAGE,
       });
       return;
     }
 
     if (description.length > QN_DESC_CHAR_LIMIT) {
       res.status(400).json({
-        message: QN_DESC_EXCEED_CHAR_LIMIT_RESPONSE_MESSAGE,
+        message: QN_DESC_EXCEED_CHAR_LIMIT_MESSAGE,
       });
       return;
     }
@@ -78,6 +80,7 @@ export const createImageLink = async (
 
       const uploadPromises = files.map((file) => uploadFileToFirebase(file));
       const imageUrls = await Promise.all(uploadPromises);
+      console.log(imageUrls);
       res
         .status(200)
         .json({ message: "Images uploaded successfully", imageUrls });
@@ -95,7 +98,13 @@ export const updateQuestion = async (
     const { id } = req.params;
     const { title, description } = req.body;
 
+    if (!id.match(MONGO_OBJ_ID_FORMAT)) {
+      res.status(400).json({ message: MONGO_OBJ_ID_MALFORMED_MESSAGE });
+      return;
+    }
+
     const currentQuestion = await Question.findById(id);
+
     if (!currentQuestion) {
       res.status(404).json({ message: QN_NOT_FOUND_MESSAGE });
       return;
@@ -104,14 +113,14 @@ export const updateQuestion = async (
     const existingQuestion = await checkIsExistingQuestion(title, id);
     if (existingQuestion) {
       res.status(400).json({
-        message: DUPLICATE_QUESTION_RESPONSE_MESSAGE,
+        message: DUPLICATE_QUESTION_MESSAGE,
       });
       return;
     }
 
     if (description && description.length > QN_DESC_CHAR_LIMIT) {
       res.status(400).json({
-        message: QN_DESC_EXCEED_CHAR_LIMIT_RESPONSE_MESSAGE,
+        message: QN_DESC_EXCEED_CHAR_LIMIT_MESSAGE,
       });
       return;
     }

backend/question-service/src/controllers/questionController.ts

@@ -1,9 +1,8 @@
 export const QN_DESC_CHAR_LIMIT = 6000;
 
-export const QN_DESC_EXCEED_CHAR_LIMIT_RESPONSE_MESSAGE =
-  "Question description must be at most 6000 characters";
+export const QN_DESC_EXCEED_CHAR_LIMIT_MESSAGE = `Question description must be at most ${QN_DESC_CHAR_LIMIT} characters`;
 
-export const DUPLICATE_QUESTION_RESPONSE_MESSAGE =
+export const DUPLICATE_QUESTION_MESSAGE =
   "Duplicate question: A question with the same title already exists.";
 
 export const QN_CREATED_MESSAGE = "Question created successfully.";
@@ -24,3 +23,7 @@ export const PAGE_LIMIT_INCORRECT_FORMAT_MESSAGE =
 
 export const CATEGORIES_RETRIEVED_MESSAGE =
   "Categories retrieved successfully.";
+
+export const MONGO_OBJ_ID_FORMAT = /^[0-9a-fA-F]{24}$/;
+
+export const MONGO_OBJ_ID_MALFORMED_MESSAGE = "The question ID is not valid";

backend/question-service/src/utils/constants.ts

@@ -7,6 +7,7 @@ import PageNotFound from "./pages/PageNotFound";
 import ProfilePage from "./pages/Profile";
 import AuthProvider from "./contexts/AuthContext";
 import QuestionList from "./pages/QuestionList";
+import Home from "./pages/Home";
 import SignUp from "./pages/SignUp";
 import LogIn from "./pages/LogIn";
 import ProtectedRoutes from "./components/ProtectedRoutes";
@@ -16,6 +17,7 @@ function App() {
     <AuthProvider>
       <Routes>
         <Route path="/" element={<Layout />}>
+          <Route index element={<Home />} />
           <Route path="questions">
             <Route index element={<QuestionList />} />
             <Route path=":questionId" element={<QuestionDetail />} />

frontend/public/homepage_image.svg

@@ -0,0 +1,30 @@
+import React from "react";
+import { Chip } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+
+const CustomChip: React.FC<{
+  label: string;
+  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+  onDelete: (event: any) => void;
+}> = ({ label, onDelete }) => {
+  return (
+    <Chip
+      size="medium"
+      label={label}
+      deleteIcon={
+        <CloseIcon onMouseDown={(event) => event.stopPropagation()} />
+      }
+      onDelete={onDelete}
+      sx={(theme) => ({
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+        marginRight: theme.spacing(1),
+        "& .MuiChip-deleteIcon": {
+          color: theme.palette.primary.contrastText,
+        },
+      })}
+    />
+  );
+};
+
+export default CustomChip;

frontend/src/App.tsx

@@ -0,0 +1,15 @@
+.fullheight {
+  flex: 1;
+}
+
+.center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.margins {
+  margin-top: 25px;
+  margin-bottom: 25px;
+}