Merge pull request #33 from CS3219-AY2324S1/assignment5

Provide matching service to PeerPrep.
Provide backend support for matching service in Assignment 5.

Author: laihuiqi

peer-prep/src/frontend/Components/Matching/MatchButton.css

@@ -0,0 +1,15 @@
+.find-match-button {
+    display: flex;
+    margin: auto;
+    justify-content: center;
+    align-items: center;
+    width: 200px;
+    height: 50px;
+    color: #fff;
+    background: #52CC65;
+    border: none;
+    border-radius: 5px;
+    font-size: 19px; 
+    white-space: nowrap; 
+    cursor: pointer;
+  }

peer-prep/src/frontend/Components/Matching/MatchButton.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import MatchPopup from './MatchPopup'; 
+import './MatchButton.css';
+
+export const MatchButton = ({}) => {
+    const [chosenDifficulty, setChosenDifficulty] = useState('easy'); 
+    const [viewPopup, setViewPopup] = useState(false);
+
+    function hidePopup() {
+        return setViewPopup(false);
+    }
+
+    function openPopup() {
+        return setViewPopup(true)
+    }
+
+    function handleChosenDifficulty(event) {
+        return setChosenDifficulty(event.target.value)
+    }
+    return(
+    <div className="match-button-container">
+        <button onClick = {openPopup} className="find-match-button">
+            Find your Match
+        </button>
+
+        <MatchPopup 
+        isOpen={viewPopup}
+        isClose={hidePopup}
+        chosenDifficulty={chosenDifficulty}
+        onChosenDifficulty={handleChosenDifficulty}
+        ></MatchPopup>
+    </div>
+    );
+}

peer-prep/src/frontend/Components/Matching/MatchPopup.css

@@ -0,0 +1,59 @@
+.match-popup {
+    text-align: center; 
+    background-color: #fff;
+    border-radius: 7px;
+    position: relative;
+    padding: 18px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+    z-index: 1001; 
+    font-size: 19px; 
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+}
+
+.match-overlay {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 1000; 
+  }
+
+.dropdown-menu select {
+  text-align: center;
+  font-size: 19px; 
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  sans-serif;
+}
+
+.hide-popup {
+    position: absolute;
+    right: 20px;
+    top: 10px;
+    cursor: pointer;
+}
+
+.submit-match {
+    display: flex;
+    margin: auto;
+    justify-content: center;
+    align-items: center;
+    width: 180px;
+    height: 45px;
+    color: #fff;
+    background: #52CC65;
+    border: none;
+    border-radius: 5px;
+    font-size: 19px; 
+    white-space: nowrap; 
+    margin-top: 20px;
+    cursor: pointer;
+  }
+  

peer-prep/src/frontend/Components/Matching/MatchPopup.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import './MatchPopup.css'; 
+import { useEffect, useState } from 'react';
+
+const MatchPopup = ({ isOpen, isClose, chosenDifficulty, onChosenDifficulty, onSubmission}) => {
+    if (isOpen) {
+        return (
+            <div className="match-overlay">
+                <div className="match-popup">
+                <span className="hide-popup" onClick={isClose}>&times;</span>
+
+                <h3>Finding Your Match</h3>
+                <div className="dropdown-menu">
+                    <label>Difficulty Level of Questions: </label>
+                    <select value={chosenDifficulty} onChange={onChosenDifficulty}>
+                    <option value="easy">Easy</option>
+                    <option value="medium">Medium</option>
+                    <option value="hard">Hard</option>
+                    </select>
+                </div>
+
+                <div >
+                    <button onClick={onSubmission} className="submit-match">Match</button>
+                </div>
+                </div>
+            </div>
+        );
+    } 
+}
+
+export default MatchPopup;

peer-prep/src/matching-service/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+npm_debug.log

peer-prep/src/matching-service/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:18
+
+WORKDIR /usr/src/app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+EXPOSE 8080
+
+CMD [ "node", "server.js" ]

peer-prep/src/matching-service/README.md

@@ -0,0 +1,49 @@
+# Matchmaking Microservice for PeerPrep
+
+### To run this microservice, plaese ensure that you have locally installed:
+- Node.js ^18.0.0
+- RabbitMQ Server ^3.12.5
+- MongoDB ^7.0.0
+
+### Run RabbitMQ Server by:
+1. Navigating to the Program Files directory 
+2. ```
+   cd "..\RabbitMQ Server\rabbitmq_server-3.12.5\sbin"
+   rabbitmq-service start
+   rabbitmq-plugins enable rabbitmq_management
+   ```
+3. A UI management site will be hosted on `http://localhost:15672/`.
+
+Start the microservice by (In peerprep directory):
+```
+cd peer-prep\src\backend\matching-service
+npm install
+npm start
+```
+
+### For backend testing:
+1. Finding a match:
+   
+   Send **POST** request to:
+   
+    `http://localhost:3000/home/:UserId` and specify post fields.
+   
+   Example:
+   
+    `http://localhost:3000/home/1`
+   
+    { id: 1,
+    language: "Java",
+    proficiency: "Advanced",
+    difficulty: "Easy",
+    topic: "Strings" }
+   
+2. Canceling a match:
+   
+   Send **DELETE** request to:
+   
+   `http://localhost:3000/home/:UserId/matching`
+   
+   Example:
+   
+   `http://localhost:3000/home/1/matching`

peer-prep/src/matching-service/config/config.js

@@ -0,0 +1,4 @@
+module.exports = {
+    mongodbUri: 'mongodb://127.0.0.1:27017/peer-prep',
+    rabbitmqUrl: 'amqp://127.0.0.1:5672'
+};

peer-prep/src/matching-service/controllers/matchingController.js

@@ -0,0 +1,34 @@
+const matchingService = require('../services/matchingService');
+
+async function findMatch(req, res, next) {
+    try {
+        const { id, language, proficiency, difficulty, topic } = req.body;
+        console.log(req.body);
+        console.log(`${id}, ${language}, ${proficiency}, ${difficulty}, ${topic}`);
+
+        const matchResult = await matchingService.findMatch({ id, language, proficiency, difficulty, topic });
+
+        res.status(200).json(matchResult);
+
+    } catch (error) {
+        next(error);
+    }
+}
+
+async function cancelMatch(req, res, next) {
+    try {
+        const isCancelled = await matchingService.cancelMatch(req.params.userId);
+        if (isCancelled) {
+            res.status(200).json({ message: 'Match cancelled successfully' });
+        } else {
+            throw new Error('Failed to cancel match');
+        }
+    } catch (error) {
+        next(error);
+    }
+}
+
+module.exports = {
+    findMatch,
+    cancelMatch
+};

peer-prep/src/matching-service/database/matchedPairDb.js

@@ -0,0 +1,82 @@
+const MatchedPair = require('../models/matchedPairModel');
+
+// Some database utility function for the MatchedPair Schema
+async function getMatchedPairBySessionId(sessionId) {
+    try {
+        const matchedPair = await MatchedPair.findOne({ sessionId: sessionId });
+        console.log(`Get matched pair with session id ${sessionId}:`, matchedPair);
+        return matchedPair;
+
+    } catch (error) {
+        console.error(`Error getting matched pair with session id ${sessionId}:`, error);
+    }
+}
+
+async function getCurrentMatchedPair(id) {
+    try {
+        const matchedPair = await MatchedPair.findOne({ $and: [{ isEnded: false }, { $or: [{ id1: id }, { id2: id }] }] });
+        console.log(`Get live matched pair for ${id}:`, matchedPair);
+        return matchedPair;
+
+    } catch (error) {
+        console.error(`Error getting live matched pair for ${id}:`, error);
+        return null;
+    }
+}
+
+async function addMatchedPair(matchedPair) {
+    try {
+        await matchedPair.save();
+        console.log(`Successfully added:`, matchedPair);
+
+    } catch (error) {
+        console.error(`Failed to add matched pair ${matchedPair}:`, error);
+    }
+}
+
+async function endSession(sessionId) {
+    try {
+        const filter = { sessionId: sessionId };
+        const update = { $set: { isEnded: true } };
+        await MatchedPair.updateOne(filter, update);
+        console.log(`Successfully update session state for session ${sessionId}`);
+
+    } catch (error) {
+        console.error(`Failed to update session state for session ${sessionId}:`, error);
+    }
+}
+
+async function modifyMatchedPair(sessionId, key, value) {
+    try {
+        const filter = { sessionId: sessionId };
+        const update = {
+            $set: {
+                [key]: value
+            }
+        };
+        await MatchedPair.updateOne(filter, update);
+        console.log(`Successfully update ${key} state for session ${sessionId}: ${value}`);
+
+    } catch (error) {
+        console.error(`Failed to update ${key} state for session ${sessionId}:`, error);
+    }
+}
+
+async function deleteMatchedPair(sessionId) {
+    try {
+        await MatchedPair.deleteOne({ sessionId: sessionId });
+        console.log(`Successfully delete session ${sessionId} from database.`);
+
+    } catch (error) {
+        console.error(`Failed to delete session ${sessionId}:`, error);
+    }
+}
+
+module.exports = {
+    getMatchedPairBySessionId,
+    getCurrentMatchedPair,
+    addMatchedPair,
+    endSession,
+    modifyMatchedPair,
+    deleteMatchedPair
+};