Merge branch 'develop' into feature/user-service

Author: ChinZJ

frontend/package.json

@@ -12,6 +12,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@codemirror/lang-cpp": "^6.0.3",
+    "@codemirror/lang-java": "^6.0.2",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-python": "^6.2.1",
     "@tanstack/react-query": "^5.90.2",
     "@tanstack/react-query-devtools": "^5.90.2",
     "axios": "^1.12.2",

frontend/src/collaboration/components/CodeMirror.tsx

@@ -1,6 +1,6 @@
 // src/codemirror.tsx
 import React, {useEffect, useRef} from 'react';
-import {EditorState} from '@codemirror/state';
+import {EditorState, Compartment, type Extension} from '@codemirror/state';
 import {
   EditorView,
   keymap,
@@ -21,7 +21,13 @@ import {
   foldGutter,
   foldKeymap,
 } from '@codemirror/language';
-import {defaultKeymap, history, historyKeymap} from '@codemirror/commands';
+
+import {javascript} from '@codemirror/lang-javascript';
+import {python} from '@codemirror/lang-python';
+import {cpp} from '@codemirror/lang-cpp';
+import {java} from '@codemirror/lang-java';
+
+import {defaultKeymap, history, historyKeymap, indentMore, indentLess} from '@codemirror/commands';
 import {searchKeymap, highlightSelectionMatches} from '@codemirror/search';
 import {
   autocompletion,
@@ -34,18 +40,32 @@ import {yCollab} from 'y-codemirror.next';
 import * as Y from 'yjs';
 import {Awareness} from 'y-protocols/awareness';
 
+const languageCompartment = new Compartment();
+
+const languageMap: { [key: string]: () => Extension } = {
+  javascript: () => javascript(),
+  python: () => python(),
+  cpp: () => cpp(),
+  java: () => java(),
+  default: () => [], // plain text mode
+};
+
 interface CodeMirrorProps {
   ytext: Y.Text;
   awareness: Awareness;
+  languageConfig: string;
 }
 
-export default function CodeMirror({ytext, awareness}: CodeMirrorProps) {
+export default function CodeMirror({ytext, awareness, languageConfig}: CodeMirrorProps) {
   const editorRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<EditorView | null>(null);
 
   useEffect(() => {
     if (!editorRef.current || !ytext || !awareness) return;
 
+    const lazyInitialLang = languageMap[languageConfig.toLowerCase()] || languageMap.default;
+    const initialLanguageExtension = lazyInitialLang();
+
     // Create the editor view with yCollab extension
     const view = new EditorView({
       doc: ytext.toString(),
@@ -68,7 +88,9 @@ export default function CodeMirror({ytext, awareness}: CodeMirrorProps) {
         // Re-indent lines when typing specific input
         indentOnInput(),
         // Highlight syntax with a default style
-        syntaxHighlighting(defaultHighlightStyle),
+        syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+        // Dyanmic configuration for language mode
+        languageCompartment.of(initialLanguageExtension),
         // Highlight matching brackets near cursor
         bracketMatching(),
         // Automatically close brackets
@@ -88,6 +110,17 @@ export default function CodeMirror({ytext, awareness}: CodeMirrorProps) {
         // Yjs collaboration extension for CodeMirror 6
         yCollab(ytext, awareness),
         keymap.of([
+          {
+            key: "Tab",
+            preventDefault: true,
+            run: indentMore,
+          },
+          {
+            key: "Shift-Tab",
+            preventDefault: true,
+            run: indentLess,
+          },
+
           // Closed-brackets aware backspace
           ...closeBracketsKeymap,
           // A large set of basic bindings
@@ -117,6 +150,20 @@ export default function CodeMirror({ytext, awareness}: CodeMirrorProps) {
     };
   }, [ytext, awareness]);
 
+  // Effect to handle language changes
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+
+    const newLazyLangFn = languageMap[languageConfig.toLowerCase()] || languageMap.default;
+    const newExtension = newLazyLangFn();
+
+    // Reconfigures compartment with the new language extension
+    view.dispatch({
+      effects: languageCompartment.reconfigure(newExtension),
+    });
+  }, [languageConfig]);
+
   return (
     <div
       ref={editorRef}

frontend/src/collaboration/components/CollabEditor.tsx

@@ -1,16 +1,45 @@
 import useCollabEditor from '../hooks/useCollabEditor';
 import CodeMirror from './CodeMirror';
+import React from 'react';
+
+const LANGUAGE_OPTIONS = [
+  { value: 'python', label: 'Python' },
+  { value: 'javascript', label: 'JavaScript' },
+  { value: 'cpp', label: 'C++' },
+  { value: 'java', label: 'Java' },
+  { value: 'default', label: 'Plain Text' },
+];
 
 export default function CollabEditor({roomId}: {roomId: string}) {
-  const {ytext, awareness, isReady} = useCollabEditor({roomId});
+  const {ytext, awareness, isReady, languageConfig, setSharedLanguage} = useCollabEditor({roomId});
   if (!isReady || !ytext) {
     return <div>Loading...</div>;
   }
 
+  const handleLanguageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSharedLanguage(event.target.value);
+  };
+
   return (
     <div style={{padding: '20px'}}>
-      <h2>Happy Coding :D</h2>
-      <CodeMirror ytext={ytext} awareness={awareness} />
+      <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px'}}>
+        <h2>Happy Coding :D</h2>
+        <label>
+          Language: 
+          <select 
+            value={languageConfig} 
+            onChange={handleLanguageChange}
+            style={{marginLeft: '10px', padding: '5px', borderRadius: '4px', border: '1px solid #ccc'}}
+          >
+            {LANGUAGE_OPTIONS.map(option => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+      <CodeMirror ytext={ytext} awareness={awareness} languageConfig={languageConfig} />
     </div>
   );
 }

frontend/src/collaboration/hooks/useCollabEditor.ts

@@ -1,5 +1,5 @@
 // src/codemirroreditor.tsx
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState, useCallback} from 'react';
 import YPartyKitProvider from 'y-partykit/provider';
 import * as Y from 'yjs';
 import toast from 'react-hot-toast';
@@ -92,15 +92,32 @@ const handleUsersRemoved = (
   });
 };
 
+interface CollabEditorHook {
+  provider: YPartyKitProvider | null;
+  ytext: Y.Text | null;
+  awareness: any;
+  isReady: boolean;
+  languageConfig: string; // current selected language
+  setSharedLanguage: (newLang: string) => void;
+}
 
-export default function useCollabEditor({roomId}: {roomId: string}) {
+export default function useCollabEditor({roomId}: {roomId: string}): CollabEditorHook {
   const [isReady, setIsReady] = useState<boolean>(false);
+  const [languageConfig, setLanguageConfig] = useState<string>('python'); // Default to Python
+  const configMapRef = useRef<Y.Map<string> | null>(null);
   const ytextRef = useRef<Y.Text | null>(null);
   const providerRef = useRef<YPartyKitProvider | null>(null);
   const awarenessRef = useRef<any>(null);
   const isFirstChangeRef = useRef<boolean>(true);
   const userNamesRef = useRef<Map<number, string>>(new Map());
   const recentlyRemovedRef = useRef<Set<number>>(new Set());
+  
+  const setSharedLanguage = useCallback((newLang: string) => {
+    if (configMapRef.current) {
+      configMapRef.current.set('language', newLang);
+    }
+  }, []);
+
   const timeoutRefs = useRef(new Map<number, NodeJS.Timeout>());
 
   useEffect(() => {
@@ -124,6 +141,23 @@ export default function useCollabEditor({roomId}: {roomId: string}) {
     const ytext = provider.doc.getText('codemirror');
     ytextRef.current = ytext;
 
+    const configMap = provider.doc.getMap<string>('config');
+    configMapRef.current = configMap;
+
+    if (!configMap.get('language')) {
+      console.log('Setting default language: python');
+      configMap.set('language', 'python');
+    }
+    setLanguageConfig(configMap.get('language') || 'python');
+
+    const configMapHandler = () => {
+      const newLang = configMap.get('language') || 'python';
+      setLanguageConfig(newLang);
+      console.log('Shared language updated to:', newLang);
+    };
+
+    configMap.observe(configMapHandler);
+
     // Sets up user awareness
     const currUserId = provider.awareness.clientID;
     const username = getRandomName();
@@ -180,6 +214,7 @@ export default function useCollabEditor({roomId}: {roomId: string}) {
     return () => {
       console.log('Cleanup! destroying provider for room:', roomId);
 
+      configMap.unobserve(configMapHandler);
       provider.awareness.off('change', awarenessChangeHandler);
       userNamesRef.current.clear();
       recentlyRemovedRef.current.clear();
@@ -197,13 +232,16 @@ export default function useCollabEditor({roomId}: {roomId: string}) {
       providerRef.current = null;
       ytextRef.current = null;
       awarenessRef.current = null;
+      configMapRef.current = null;
     };
-  }, [roomId]);
+  }, [roomId, setSharedLanguage]);
 
   return {
     provider: providerRef.current,
     ytext: ytextRef.current,
     awareness: awarenessRef.current,
     isReady,
+    languageConfig,
+    setSharedLanguage,
   };
 }

matching-service/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "type": "module",
   "scripts": {
-    "dev": "node ./src/index.js",
+    "dev": "tsx watch ./src/index.ts",
     "lint": "cd .. && npm run lint:service matching-service --ext .ts",
     "lint:fix": "cd .. && npm run lint:service matching-service --ext .ts --fix",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
@@ -15,10 +15,15 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "express": "^5.1.0"
+    "cors": "^2.8.5",
+    "dotenv": "^17.2.2",
+    "express": "^5.1.0",
+    "tsx": "^4.20.6",
+    "ws": "^8.18.3"
   },
   "devDependencies": {
     "@types/express": "^5.0.3",
-    "@types/node": "^24.3.1"
+    "@types/node": "^24.3.1",
+    "@types/ws": "^8.18.1"
   }
 }

matching-service/src/constants/env.ts

@@ -0,0 +1,32 @@
+import dotenv from 'dotenv';
+import path from 'path';
+import {fileURLToPath} from 'url';
+
+// Solution adapted from:
+// https://stackoverflow.com/questions/64383909/dirname-is-not-defined-error-in-node-js-14-version
+const filename = fileURLToPath(import.meta.url);
+const dirname = path.dirname(filename);
+
+dotenv.config({path: path.resolve(dirname, '../../.env')});
+
+/**
+ * Processes all environment variables.
+ *
+ * @param {string} key - The name of the environment variable to retrieve.
+ * @param {string} [defaultValue] - Optional fallback value if no environment variable is provided.
+ * @returns {string} Environment variable value.
+ * @throws {Error} If the environment variable is missing and no default value is provided.
+ */
+const getEnv = (key: string, defaultValue?: string): string => {
+  const value = process.env[key] || defaultValue;
+
+  if (value === undefined) {
+    throw new Error(`${key} environment variable is missing!`);
+  }
+
+  return value;
+};
+
+export const NODE_ENV = getEnv('NODE_ENV', 'development');
+export const MATCHING_SERVICE_PORT = getEnv('MATCHING_SERVICE_PORT', '8081');
+export const APP_ORIGIN = getEnv('APP_ORIGIN');

matching-service/src/constants/httpStatus.ts

@@ -0,0 +1,10 @@
+/**
+ * Constants for all HTTP response status codes
+ * Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status
+ */
+
+export const HTTP_OK = 200;
+export const HTTP_CREATED = 201;
+export const HTTP_ACCEPTED = 202;
+export const HTTP_BAD_REQUEST = 400;
+export const HTTP_INTERNAL_SERVER_ERROR = 500;

matching-service/src/controllers/matchController.ts

@@ -0,0 +1,27 @@
+import type { Request, Response } from 'express';
+import { findOrQueueUser } from '../services/matchingService';
+import type { MatchRequest } from '../models/matchModel';
+import { HTTP_OK, HTTP_ACCEPTED, HTTP_BAD_REQUEST} from '../constants/httpStatus';
+
+export const handleMatchRequest = (req: Request, res: Response) => {
+  const matchRequestData: MatchRequest = req.body;
+
+  const atLeastOneDifficulty: boolean = matchRequestData.criteria.difficulties && matchRequestData.criteria.difficulties.length > 0;
+  const atLeastOneTopic: boolean = matchRequestData.criteria.topics && matchRequestData.criteria.topics.length > 0;
+
+  // validate input
+  if (!atLeastOneDifficulty && !atLeastOneTopic) {
+    return res.status(HTTP_BAD_REQUEST).json({ message: "Difficulty and at least one topic are required." });
+  }
+
+  // call the service to perform the matching logic
+  const result = findOrQueueUser(matchRequestData.userId, matchRequestData.criteria);
+
+  // send the appropriate HTTP response based on the service's result
+  if (result.status === 'matched') {
+    return res.status(HTTP_OK).json(result);
+  } else {
+    return res.status(HTTP_ACCEPTED).json(result); // in the queue waiting for a match
+  }
+};
+