Merge pull request #99 from CS3219-AY2324S1/assignment1

Assignment-1 Submission

Author: Jai2501

Frontend/src/Components/QuestionList/QDifficultyDropdown.css

@@ -0,0 +1,16 @@
+.dropdown-menu select {
+    min-width: 50px;
+    width: fit-content;
+    height: 35px;
+    text-align: center;
+    font-size: 15px; 
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+    background: #e0dfdf;
+    outline: none;
+  border: none;
+  border-bottom: 1px solid;
+  background: #e0dfdf;
+  }
+  

Frontend/src/Components/QuestionList/QDifficultyDropdown.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "./QDropdown.css";
+import "./QDifficultyDropdown.css";
 
 export const QDifficultyDropdown = ({chosenDifficulty, setDifficulty}) => {
   return (
@@ -11,4 +11,4 @@ export const QDifficultyDropdown = ({chosenDifficulty, setDifficulty}) => {
       </select>
     </div>
   );
-};
+};

Frontend/src/Components/QuestionList/Question.css

@@ -136,6 +136,7 @@
 .q-content-contract {
     display: flex;
     flex-direction: column;
+    margin-top: 0;
     gap: 20px;
     margin-top: -100%;
     transition: all 2s;

Frontend/src/Components/QuestionList/QuestionEdit.jsx

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import './QuestionEdit.css';
-import { QDifficultyDropdown } from './QDifficultyDropdown';
-import { QLanguageDropdown } from './QLanguageDropdown'; 
-import { QTopicDropdown } from './QTopicDropdown'; 
+import { QDifficultyDropdown } from './QDifficultyDropdown.jsx';
 
 import delete_icon from '../Assets/bin.png';
 
@@ -11,59 +9,10 @@ export const QuestionEdit = ({ q, index, updateQ, setEdit }) => {
     const [difficulty, setDifficulty] = useState(q.complexity);
     const [topic, setTopic] = useState(q.category);
     const [description, setDescription] = useState(q.description);
-    const [language, setLanguage] = useState(q.language);
 
-    const [isDuplicateTitle, setIsDuplicateTitle] = useState(true);
-    const [isDuplicateDesc, setIsDuplicateDesc] = useState(false);
-    const [isMissingField, setIsMissingField] = useState(false);
-
-    const [titleError, setTitleError] = useState("");
-    const [descError, setDescError] = useState("");
-    const [missingFieldError, setMissingFieldError] = useState("Please fill all fields!")
-
-
-    const isEmpty = (str) => {
-        return str === ""
-    };
-
-    const setErrorVar = (errors) => {
-        if('duplicateDescription' in errors) {
-        setIsDuplicateDesc(true);
-        setDescError(errors.duplicateDescription)
-        } else {
-        setIsDuplicateDesc(false);
-        }
-        
-        if('duplicateTitle' in errors) {
-        setIsDuplicateTitle(true);
-        setTitleError(errors.duplicateTitle);
-        } else {
-        setIsDuplicateTitle(false);
-        }
-    };
-
-    const handleSubmit = async (toggleEdit, editQ) => {
-        // e.preventDefault();
-        if(isEmpty(title) || isEmpty(difficulty) || isEmpty(topic) || isEmpty(description)) {
-            setIsMissingField(true);
-        } else {
-        
-            setIsMissingField(false);
-
-            const response = await editQ(q._id, title, description, difficulty, topic, language);
-            
-            if(response.status === 200) {
-                toggleEdit(false);
-            } else {
-                let res = await response.json();
-                setErrorVar(res.errors)
-            }
-        }
-    }
-
-    function handleChosenDifficulty(e) {
-        return setDifficulty(e.target.value);
-    }
+  function handleChosenDifficulty(e) {
+      return setDifficulty(e.target.value);
+  }
 
   return (
     <div className= "form-container">
@@ -76,39 +25,33 @@ export const QuestionEdit = ({ q, index, updateQ, setEdit }) => {
                 </div>
                 <span> - </span>
             </div>
-
-            {isDuplicateTitle? <div className="error-text">{titleError}</div> : <div></div>}
 
             <div className="q-form-content">
                 <div className="q-form-tags-container">
                     <div className= "q-form-tags">
                         <QDifficultyDropdown chosenDifficulty = {difficulty} setDifficulty = {handleChosenDifficulty}/>
-                        <QTopicDropdown chosenTopic={topic} setTopic={(e) => setTopic(e.target.value)} />
-                        <QLanguageDropdown chosenLanguage={language} setLanguage={(e) => setLanguage(e.target.value)}/>
+                        <input type="text" className="q-form-tag q-form-input" defaultValue = {q.category}
+                        onChange = {(e) => {setTopic(e.target.value)}}/>
+                     
+                    </div>
                 </div>
-            </div>
 
-            <textarea type="text" className="q-form-description q-form-input" defaultValue={q.description}
-            onChange={(e) => {setDescription(e.target.value);}}/>
+                <textarea type="text" className="q-form-description q-form-input" defaultValue={q.description}
+                    onChange={(e) => {setDescription(e.target.value);}}/>
 
-           {isDuplicateDesc? <div className="error-text">{descError}</div> : <div></div>}
-           {isMissingField? <div className = "error-text">{missingFieldError}</div>: <div></div>}
-
-            <div className="btn-container">
+                <div className="btn-container">
                     <button type = "cancel" className="cancel-btn" onClick = {(e)=> {setEdit(false)}}>Cancel</button>
                     <button className="submit-btn" onClick = {(e) => {
-                        e.preventDefault();
-                        handleSubmit(setEdit, updateQ);
-                    }}>Submit
+                        setEdit(false);
+                        updateQ(q.id, title, description, difficulty, topic)
+                        }}>Submit
                     </button> 
                 </div> 
             </div>
-
-
         </div>
         <div className="delete-btn">
                 <img src= {delete_icon} alt="" />
         </div>
     </div>
   )
-}
+}

README.md

@@ -1,83 +1,33 @@
-# Getting Started
+# PeerPrep App
 
-## Prerequisites
+## Prerequisites 
+1. Have [Node and NPM installed](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
 
-Install [Docker](https://www.docker.com/)
+## To Run the App
 
-## Cloning the Repository
-
-1. Open Terminal and navigate to the directory of your choice
+1. Open Terminal or Powershell.
 
+2. Navigate to directory of your choice
 ```
-cd path/to/directory
+cd <directory of your choice>
 ```
 
-2. Clone the repository into that directory
-
+3. Clone this repository into your system
 ```
 git clone https://github.com/CS3219-AY2324S1/ay2324s1-course-assessment-g16.git
 ```
 
-## Build and Run on Local Docker Environment
-
-Ensure that Docker and Docker Engine is up and running in your system.
-
-1. Run the following command to build the containers.
-
-```
-docker-compose build
-```
-
-2. Run the following command to start the various services and frontend
-
+4. Navigate into the Repository directory
 ```
-docker-compose up
+cd ay2324s1-course-assessment-g16
 ```
 
-3. Now you can access the frontend of the application at `http://localhost:3001/`
-
-4. For subsequent starts, you may skip the building step and run the `docker-compose up` command
-
-5. To shut down the application, open a new Terminal and run the following command to graciously shut down these containers.
-
+5. In this Repository directory, navigate into `peer-prep` directory
 ```
-docker-compose down
+cd peer-prep
 ```
-
-# Service Status
-
-## Overall Build
-
-![Overall Build](https://github.com/CS3219-AY2324S1/ay2324s1-course-assessment-g16/actions/workflows/build_master_docker_services.yaml/badge.svg)
-
-## Collaboration Service Build and Test
-
-![Collaboration Service Build and Test](https://github.com/CS3219-AY2324S1/ay2324s1-course-assessment-g16/actions/workflows/build_and_test_master_collaboration_service.yaml/badge.svg)
-
-## Matching Service Build and Test
-
-![Matching Service Build and Test](https://github.com/CS3219-AY2324S1/ay2324s1-course-assessment-g16/actions/workflows/build_and_test_master_matching_service.yaml/badge.svg)
-
-## Question Service Build and Test
-
-![Question Service Build and Test](https://github.com/CS3219-AY2324S1/ay2324s1-course-assessment-g16/actions/workflows/build_and_test_master_question_service.yaml/badge.svg)
-
-## User Service Build and Test
-
-![User Service Build and Test](https://github.com/CS3219-AY2324S1/ay2324s1-course-assessment-g16/actions/workflows/build_and_test_master_user_service.yaml/badge.svg)
-
-## Communication Service Build and Test
-
-![Communication Service Build and Test](https://github.com/CS3219-AY2324S1/ay2324s1-course-assessment-g16/actions/workflows/build_and_test_master_communication_service.yaml/badge.svg)
-
-## GPT Service Build and Test
-
-![Communication Service Build and Test](https://github.com/CS3219-AY2324S1/ay2324s1-course-assessment-g16/actions/workflows/build_and_test_master_gpt_service.yaml/badge.svg)
-
-## History Service Build and Test
-
-![Communication Service Build and Test](https://github.com/CS3219-AY2324S1/ay2324s1-course-assessment-g16/actions/workflows/build_and_test_master_history_service.yaml/badge.svg)
-
-## Frontend Client Build and Test
-
-![Communication Service Build and Test](https://github.com/CS3219-AY2324S1/ay2324s1-course-assessment-g16/actions/workflows/build_and_test_master_frontend_client.yaml/badge.svg)
+6. Run the command `npm i` to install dependencies.
+    
+7. Run the command `npm start` to start the app.
+    
+8. Open browser of your choice and access `http://localhost:3000/`, and you can use the app.