Add Collab Page (#52)

* Wrap delete questions in single API call

* Add new POST `questions/delete` endpoint
* Update question service README
* Update frontend to use new endpoint

* Ensure question table is responsive

to fit smaller viewports

* Fix question README

* Fix comments

* Update return type of getQuestionByID

* Revert "Update return type of getQuestionByID"

This reverts commit cb11b5a.

* Update return type of getQuestionByID

* Set up layout for question box and editor

* Add codemirror

* Update layout styling

* Update chip colours to match difficulty

* Update question-box to fetch question through API call

* Update to set cursor position

* Fix styling issue

Previously, the content of the question-box gets
cut off when the panel is resized to a very small
size

* Add confirm dialog box for submit and forfeit buttons

* Added Collaboration Services Features

* Remove controller and add client1 and client2 to test websocket

* Able to update database

* Integrate collab service

* Containerize collaboration service and enhance structure

- Added a README.md to document the collaboration service.
- Added a Dockerfile and docker-compose configuration to containerize the collaboration service.
- Moved project files into appropriate directories for better structure and organization.
- Updated helper.ts with improvements and new helper methods.
- Refactored code to use the helper methods in helper.ts for consistency and reusability.
- Removed unused tests.html file (will develop a new testing approach for HTML files in the future).

* Added MongoDB URI configuration for Collaboration Service database

- Updated .env.sample to include MONGO_URI for MongoDB Atlas.
- Modified mongodbservice.ts to use MONGO_URI for database connection.
- Updated docker-compose.yml to pass MONGO_URI as an environment variable for the collaboration service.

* Updated README.md for improved clarity and documentation

- Clarified MongoDB URI usage and environment variable setup.
- Improved explanation of collaboration service setup and configuration.

* Fix formatting issues

* Fix button placement

* Add code formatter

* Add icons to buttons

* Randomise user's color in codemirror

* Fix formatting issues

* Update MongoDB Atlas URI, config.json, and file organization

- Updated MongoDB Atlas URI in .env to ensure proper connection.
- Modified config.json to compile JavaScript files in addition to TypeScript.
- Refactored naming and file locations of helper.ts and utility.js.

* Update configurations on MongoDB - changing URI

* Adding new files and changing file structure

* Add Read from Question to Create Room, Update Question Service URL and Axios call

- Updated `QUESTION_SERVICE_URL` in the `.env` file to use `question` as the service hostname (matching the Docker service name).
- Refactored `createRoomWithQuestion` in `roomController` to correctly append `/questions/search` to the base URL.
- Ensured the correct retrieval of question data using Axios, resolving the `ENOTFOUND` error in the Docker environment.

* Initialize ydocs and create room collections

- Updated MongoDB service to initialize ydocs.
- Modified MongoDB service to create room collections using room_id.
- Enhanced API to retrieve room details by user_id (have not tested yet)

* Update message production and add logging

- Updated producer to send messages to the collab-created queue.
- Added logging to track message production and consumption in the queue.

* Separate WebSocket and HTTP services into different ports and update room retrieval API

- Configured WebSocket service to run on port 8084 (collaboration) and HTTP API service on port 8087 (rooms).
- Updated API to retrieve a list of room IDs based on the user ID instead of full room details.
- Modified Docker Compose file to reflect the new service port structure for collaboration and room services.
- Added logging for room consumer initialisation to ensure proper service startup.

* Update ESLint configurations for collaboration and refactor code

* Enhance collaboration microservice with improved error handling and new APIs

- Updated methods to properly handle success and error messages
- Refined try-catch implementations
- Added room_status field for room creation (true for on, false for off)
- Updated API to retrieve only active room IDs (status: true)
- Created new API to close rooms (sets status to false and removes Yjs documents from DB)

* Update README.md

* Add collaboration-db to Docker Compose and update MongoDB URIs

- Added collaboration-db service to Docker Compose YAML
- Updated mongoURI in question service
- Updated mongoURI in collaboration service
- Modified environment sample files in root and collaboration service

* Add package.json and package-lock.json

* Update broker.ts, consumer.ts in both collab and matching

- broker.ts: Update the getChannel
- consumer.ts in collab: Add channel.nack(msg)
- consumer.ts in matching: Add debug message

* Fix collab package.json

* Fix collab service running the wrong file in development mode

* Fix env variables

* Choose environment DB URI instead of defaulting to cloud if available
* Add broker env variable for match

* Handle COLLAB_CREATED status

Ensure COLLAB_CREATED status triggers success UI. URL redirection has not been handled.

* Add API call

* Add URL redirection from matching to collab

* Update question retrieval

* Update yjs roomId to match the passed roomId

* Add guard for collab page

* Fix roomId retrieval issue

* Fix styling issue caused by nav bar

* Add 2s delay on match found

* Fix linting

* Tidy up codes

* Add API to update user isForfeit status

- Implement new API for updating the isForfeit status of users in a room.
- Modify existing APIs to align with the isForfeit status functionality.
- Update README.md for both root and collaboration services to reflect changes.

* Update room closing functionality and documentation

- Modified `compose.yml` and environment sample files.
- Updated `README.md` to include details on room closure.
- Enhanced room close functionality to return success if the room is already closed.

* Add functionality to submit button

* Update websocket initialisation
- Include param, which contains userId, when initialising

* Update collab guard

* Fix bug
- roomId initialisation was not done on init, which
caused the roomId to be undefined when initialising
websocket

* Add forfeit functionality

* Fix bug
- The user who accepted first would get stuck and not retrieve
COLLAB_CREATED status as the polling was unsubscribed prematurely

* Fix error
- Uninitialised question was causing error in console logs as
the question title is being retrieved before it's even initialised

* - Update README.md
- Change posiiton of initRoomId

* Enhance environment configuration and collaboration service

- Updated environment sample files for both root and collaboration services.
- Added collaboration guard in `websocketservice.ts` to improve security.
- Revised `README.md` to include new details and instructions.

* Added collaboration guard in `websocketservice.ts` to improve security.

* Fix eslint at websocketservice.ts

* Fix linting

* Add citation for utility.js in Collaboration Service

* Collab: Centralize env variables

* Fix linting

* Remove packages

The collaboration service has many unused packages. Let's remove them

* Adjust Dockerfile

* Minor Fix Based On Comments:
- .env.sample: Remove the port numbers
- compose.yml: Remove the ports to not exposed it, and remove the env as well
- README.md: Change the collaboration and room service to under Port 8084
- default.conf: Change the collaboration-api to be 8084
- config.ts: Change to one PORT instead of two PORTS
- index.ts: Change to one PORT instead of two PORTS
- README.md in Collaboration Service: Update the documentation to use one port only
- consumer.ts in Match Service: Remove the debug code

* Fix bugs

* Update submit logic
Submit now keep tracks the number of user connected to the session.
If the other user is not connected (log out or forfeit), only 1 user
is required for the submission to go through.

* Minor Fix Based On Comments:
- README.md: Update port from 8087 to 8084Z
- roomController.ts: Update the helper methods
- webSocketService.ts: Update the helper methods
- helper.ts: Seperate the helper methods for HTTPS and WebSocket

* Update forfeit warning message
Forfeit warning message now depends on the number of remaining
users that have access to the session.

* Minor Fix Based On Comments:
- broker.ts: Adapt the broker.ts from Match Service
- consumer.ts: Update consumer.ts with new broker.ts
- producer.ts: Update producer.ts with new broker.ts

* Minor Fixes Based On Comments:
- types.ts: Contains interface for User and Room
- mongodbService.ts: Update method for new types
- roomController.ts: Update method for new types and remove any

* Minor Fixes Based On Comments:
- types.ts: Contains interface for User and Room
- mongodbService.ts: Update method for new types
- roomController.ts: Update method for new types and remove any

* Update submit
Submit will now show a warning message if the user attempts
to submit while the other user is disconnected

* Minor Additional Details Based On Comments (Added a new queue to handle
error if the room is not created)
- queues.ts: A new queue called COLLAB_CREATE_FAILED (if room is not created successfully)
- consumer.ts: Update method to handle if room is not created successfully

* Add notification on forfeit
Previously, when user2 forfeits, user1 is not notified.
Now, user1 will be able to tell if user2 forfeits

* Major Fix Based On Comments (Using JWT Token)
- compose.yml: Added JWT Token to Collaboration Service
- .env.sample: Added JWT Token to Collaboration Service
- package.json: Added jsonwebtoken and mongoose
- README.md: Updated the API Calls to include JWT, and added details on handling room not created for Queue
- app.ts: Added verifyAccessToken
- config.ts: Added JWT Token to Collaboration Service
- roomController.ts: Change from retrieving user_id to use JWT Token to retrieve the user_id instead
- types.ts: Change room_id from string to Object_id
- express.d.ts: Declare Request User
- jwt.ts: Added JWT functionality
- request.ts: Added types for Request User
- roomRoutes.ts: Update routes
- mongodbService.ts: Update method based on types.ts

* Testing Fix

* Change path from /start to /collab

* Remove prettier-standalone library

* Fix Issues On The WebSocketService.ts

* Fix using ESLINT

* Remove params from editor.component.ts

* Fixed Based On Comments:
- compose.dev.yml: Add port 8084
- compose.yml: Remove port 8084
- api.config.ts: Change to api gateway
- editor.component.ts: Change the websocketurl
- default.conf: Add the proxy
- package.json: Add --files to solves issue on dev
- index.ts: Edit the file sequence

* Minor Fix On Collaboration Service:
- Use Linting to fix
- webSocketService.ts: Add new checks
- editor.component.ts: Parse userid in the params

* Fix linting

* Update api calls to match new endpoint

* Remove the duplicate createYJSDocument method

* Fix unexpected end of array error

This error seems to be due to YJS attempting to read strings sent by the collab service. Let's keep the websocket channel purely for YJS-related changes.

* Remove wscat

* Adjust Collab to use only 8084

* Simplify websocket path routing

* Match: Nuke update route

* Question: Consume MatchFoundEvent

and produce QuestionFoundEvent, MatchFailedEvent

* Collab: Consume QuestionFoundEvent instead

* Frontend: Obtain question from collab

* Match: Consume MatchFailedEvent

* Frontend: Delay first match request status poll

The finding match component could poll the status of the previous match request before the matchId updating to the new match request. Let's create a delay before the first poll to prevent this.`

* Ensure question awaits broker

* Use accessToken for websockets

* Fix minor logger typos

* Collab: Protect routes

Ensure that a user cannot query for rooms not belonging to them

* Ensure all services restart

---------

Co-authored-by: Samuel Lim <[email protected]>
Co-authored-by: KhoonSun47 <[email protected]>
Co-authored-by: Yek Khoon Sun <[email protected]>

Author: 3 people

.env.sample

@@ -1,6 +1,3 @@
-# This is a sample environment configuration file.
-# Copy this file to .env and replace the placeholder values with your own.
-
 # Question Service
 QUESTION_DB_CLOUD_URI=<FILL-THIS-IN>
 QUESTION_DB_LOCAL_URI=mongodb://question-db:27017/question
@@ -19,10 +16,22 @@ MATCH_DB_LOCAL_URI=mongodb://match-db:27017/match
 MATCH_DB_USERNAME=user
 MATCH_DB_PASSWORD=password
 
+# Room Service
+COLLAB_DB_CLOUD_URI=mongodb+srv://<username>:<password>@cluster0.h5ukw.mongodb.net/collaboration-service?retryWrites=true&w=majority&appName=Cluster0
+COLLAB_DB_LOCAL_URI=mongodb://collaboration-db:27017/collaboration-service
+
+# Collaboration Service (Yjs Documents)
+YJS_DB_CLOUD_URI=mongodb+srv://<username>:<password>@cluster0.h5ukw.mongodb.net/yjs-documents?retryWrites=true&w=majority&appName=Cluster0
+YJS_DB_LOCAL_URI=mongodb://collaboration-db:27017/yjs-documents
+
+# Will use cloud MongoDB Atlas database
+ENV=PROD
+
 # Broker
 BROKER_URL=amqp://broker:5672
 
 # Secret for creating JWT signature
 JWT_SECRET=you-can-replace-this-with-your-own-secret
 
-NODE_ENV=development
+# Node environment
+NODE_ENV=development

.github/workflows/tests.yml

@@ -23,7 +23,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        service: [frontend, services/question, services/user, services/match]
+        service: [frontend, services/question, services/user, services/match, services/collaboration]
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js

README.md

@@ -1,16 +1,23 @@
 [![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-22041afd0340ce965d47ae6ef1cefeee28c7c493a6346c4f15d667ab976d596c.svg)](https://classroom.github.com/a/bzPrOe11)
+
 # CS3219 Project (PeerPrep) - AY2425S1
+
 ## Group: G03
 
-### Note: 
-- You can choose to develop individual microservices within separate folders within this repository **OR** use individual repositories (all public) for each microservice. 
-- In the latter scenario, you should enable sub-modules on this GitHub classroom repository to manage the development/deployment **AND** add your mentor to the individual repositories as a collaborator. 
-- The teaching team should be given access to the repositories as we may require viewing the history of the repository in case of any disputes or disagreements.
+### Note:
+
+- You can choose to develop individual microservices within separate folders within this repository **OR** use
+  individual repositories (all public) for each microservice.
+- In the latter scenario, you should enable sub-modules on this GitHub classroom repository to manage the
+  development/deployment **AND** add your mentor to the individual repositories as a collaborator.
+- The teaching team should be given access to the repositories as we may require viewing the history of the repository
+  in case of any disputes or disagreements.
 
 ## Pre-requisites
 
 1. Install [Docker Desktop](https://www.docker.com/products/docker-desktop/)
 2. Clone the GitHub repository
+
 ```
 git clone https://github.com/CS3219-AY2425S1/cs3219-ay2425s1-project-g03.git
 ```
@@ -19,7 +26,7 @@ git clone https://github.com/CS3219-AY2425S1/cs3219-ay2425s1-project-g03.git
 
 **Step 1: Copy Environment Configuration File**
 
-To get started, copy the contents of `.env.sample` into a new `.env` file located at the root level of the project. 
+To get started, copy the contents of `.env.sample` into a new `.env` file located at the root level of the project.
 
 **Step 2: Build the Docker containers**
 
@@ -37,25 +44,26 @@ Once the build is complete, you can start the Docker containers.
 docker compose -f compose.yml up -d
 ```
 
-After spinning up the services, you may access the frontend client at `127.0.0.1:4200`. Specifically, you can navigate to the Question SPA at `127.0.0.1:4200/questions` and the login page at `127.0.0.1/account`.
+After spinning up the services, you may access the frontend client at `127.0.0.1:4200`. Specifically, you can navigate
+to the Question SPA at `127.0.0.1:4200/questions` and the login page at `127.0.0.1/account`.
 
-If you would like to spin up the services in development mode, you may use the following command. This enables hot reloading and exposes the ports for all microservices.
+If you would like to spin up the services in development mode, you may use the following command. This enables hot
+reloading and exposes the ports for all microservices.
 
 ```bash
 docker compose -f compose.yml -f compose.dev.yml up -d
 ```
 
-| Service               | Port |
-|-----------------------|------|
-| Frontend              | 4200 |
-| API Gateway           | 8080 |
-| Question Service      | 8081 |
-| User Service          | 8082 |
-| Match Service         | 8083 |
-| Collaboration Service | 8084 |
-| Chat Service          | 8085 |
-| History Service       | 8086 |
-
+| Service                      | Port |
+|------------------------------|------|
+| Frontend                     | 4200 |
+| API Gateway                  | 8080 |
+| Question Service             | 8081 |
+| User Service                 | 8082 |
+| Match Service                | 8083 |
+| Collaboration & Room Service | 8084 |
+| Chat Service                 | 8085 |
+| History Service              | 8086 |
 
 **Step 4: Stop the Docker containers**
 
@@ -65,4 +73,6 @@ Once you are done, stop and remove the containers using:
 docker compose down -v
 ```
 
-Note that this will clear any data stored in volumes associated with the containers. If you would like to keep your data, you can run the command without the `-v` flag, which will remove the containers but retain the data in the volumes for future use.
+Note that this will clear any data stored in volumes associated with the containers. If you would like to keep your
+data, you can run the command without the `-v` flag, which will remove the containers but retain the data in the volumes
+for future use.

compose.dev.yml

@@ -40,6 +40,14 @@ services:
     ports:
       - 27019:27017
 
+  collaboration:
+    command: npm run dev
+    ports:
+      - 8084:8084
+    volumes:
+      - /app/node_modules
+      - ./services/collaboration:/app
+  
   broker:
     ports:
       - 5672:5672
@@ -50,3 +58,4 @@ services:
       - /var/run/docker.sock:/var/run/docker.sock
     ports:
       - 8000:8080
+    restart: always

compose.yml

@@ -8,7 +8,7 @@ services:
     ports:
       - 4200:4200
     restart: always
-  
+
   gateway:
     container_name: gateway
     image: nginx:1.27
@@ -20,9 +20,11 @@ services:
       - question
       - user
       - match
+      - collaboration
     networks:
       - gateway-network
-  
+    restart: always
+
   question:
     container_name: question
     image: question
@@ -34,7 +36,11 @@ services:
       DB_LOCAL_URI: ${QUESTION_DB_LOCAL_URI}
       DB_USERNAME: ${QUESTION_DB_USERNAME}
       DB_PASSWORD: ${QUESTION_DB_PASSWORD}
+      BROKER_URL: ${BROKER_URL}
       JWT_SECRET: ${JWT_SECRET}
+    depends_on:
+      broker:
+        condition: service_healthy
     networks:
       - gateway-network
       - question-db-network
@@ -70,7 +76,7 @@ services:
       - gateway-network
       - user-db-network
     restart: always
-  
+
   user-db:
     container_name: user-db
     image: mongo:7.0.14
@@ -83,7 +89,7 @@ services:
       - user-db-network
     command: --quiet
     restart: always
-  
+
   match:
     container_name: match
     image: match
@@ -116,7 +122,7 @@ services:
     networks:
       - match-db-network
     restart: always
-  
+
   broker:
     container_name: broker
     hostname: broker
@@ -130,11 +136,43 @@ services:
       timeout: 30s
       retries: 10
       start_period: 30s
+    restart: always
+
+  collaboration:
+    container_name: collaboration
+    image: collaboration
+    build:
+      context: services/collaboration
+      dockerfile: Dockerfile
+    environment:
+      COLLAB_DB_CLOUD_URI: ${COLLAB_DB_CLOUD_URI}
+      COLLAB_DB_LOCAL_URI: ${COLLAB_DB_LOCAL_URI}
+      YJS_DB_CLOUD_URI: ${YJS_DB_CLOUD_URI}
+      YJS_DB_LOCAL_URI: ${YJS_DB_LOCAL_URI}
+      BROKER_URL: ${BROKER_URL}
+      JWT_SECRET: ${JWT_SECRET}
+    depends_on:
+      broker:
+        condition: service_healthy
+    networks:
+      - gateway-network
+      - collaboration-db-network
+    restart: always
+
+  collaboration-db:
+    container_name: collaboration-db
+    image: mongo:7.0.14
+    volumes:
+      - collaboration-db:/data/db
+    networks:
+      - collaboration-db-network
+    restart: always
 
 volumes:
   question-db:
   user-db:
   match-db:
+  collaboration-db:
 
 networks:
   gateway-network:
@@ -145,3 +183,5 @@ networks:
     driver: bridge
   match-db-network:
     driver: bridge
+  collaboration-db-network:
+    driver: bridge