Setup linkage with yjs codemirror and webrtc signalling server

Author: bensohh

apps/frontend/.env.example

@@ -1,4 +1,5 @@
 # URL endpoints of the services
 NEXT_PUBLIC_QUESTION_SERVICE_URL="http://localhost:8080/"
 NEXT_PUBLIC_USER_SERVICE_URL="http://localhost:3001/"
-NEXT_PUBLIC_MATCHING_SERVICE_URL="ws://localhost:8081/match"
+NEXT_PUBLIC_MATCHING_SERVICE_URL="ws://localhost:8081/match"
+NEXT_PUBLIC_SIGNALLING_SERVICE_URL="ws://localhost:4444/"

apps/frontend/package.json

@@ -11,6 +11,8 @@
   "dependencies": {
     "@ant-design/icons": "^5.5.1",
     "@ant-design/nextjs-registry": "^1.0.1",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/state": "^6.4.1",
     "antd": "^5.20.6",
     "codemirror": "^6.0.1",
     "next": "14.2.13",
@@ -20,7 +22,9 @@
     "react-use-websocket": "^4.9.0",
     "sass": "^1.79.2",
     "typeface-montserrat": "^1.1.13",
-    "y-codemirror.next": "^0.3.5"
+    "y-codemirror.next": "^0.3.5",
+    "y-webrtc": "^10.3.0",
+    "yjs": "^13.6.20"
   },
   "devDependencies": {
     "@types/node": "^20",

apps/frontend/pnpm-lock.yaml

@@ -26,6 +26,7 @@ import {
   SendOutlined,
 } from "@ant-design/icons";
 import { ProgrammingLanguageOptions } from "@/utils/SelectOptions";
+import CollaborativeEditor from "@/components/CollaborativeEditor/CollaborativeEditor";
 
 interface CollaborationProps {}
 
@@ -45,6 +46,7 @@ export default function CollaborationPage(props: CollaborationProps) {
   const [collaborationId, setCollaborationId] = useState<string | undefined>(
     undefined
   );
+  const [currentUser, setCurrentUser] = useState<string | undefined>(undefined);
   const [matchedUser, setMatchedUser] = useState<string | undefined>(undefined);
 
   // Chat states
@@ -70,10 +72,12 @@ export default function CollaborationPage(props: CollaborationProps) {
     const docRefId: string = localStorage.getItem("docRefId") ?? "";
     const collabId: string = localStorage.getItem("collabId") ?? "";
     const matchedUser: string = localStorage.getItem("matchedUser") ?? "";
+    const currentUser: string = localStorage.getItem("user") ?? "";
 
     // Set states from localstorage
     setCollaborationId(collabId);
     setMatchedUser(matchedUser);
+    setCurrentUser(currentUser);
 
     GetSingleQuestion(docRefId).then((data: Question) => {
       setQuestionTitle(`${data.id}. ${data.title}`);
@@ -185,6 +189,12 @@ export default function CollaborationPage(props: CollaborationProps) {
                     onSelect={(val) => setSelectedLanguage(val)}
                   />
                 </div>
+                {collaborationId && currentUser && (
+                  <CollaborativeEditor
+                    user={currentUser}
+                    collaborationId={collaborationId}
+                  />
+                )}
               </div>
             </Row>
           </Col>

apps/frontend/src/app/collaboration/[id]/page.tsx

@@ -103,7 +103,7 @@
 
 .chat-message-box {
   margin-top: 1rem;
-  height: 70%;
+  height: 365px;
   border: 1px solid #d9d9d9;
   border-radius: 6px;
   overflow-y: scroll;