Merge pull request #102 from CS3219-AY2425S1/feat/82-reconnection-ui

Feat/82 reconnection UI

Author: simbayippy

docker-compose.prod.yml

@@ -14,6 +14,8 @@ services:
       context: ./peerprep-fe
       dockerfile: Dockerfile
       target: production
+    volumes:
+      - /app/node_modules
     ports:
       - "3000:3000"
     networks:
@@ -28,6 +30,8 @@ services:
       context: ./question-service
       dockerfile: Dockerfile
       target: production
+    volumes:
+      - /app/node_modules
     ports:
       - "4001:4001"
     networks:
@@ -42,6 +46,8 @@ services:
       context: ./user-service
       dockerfile: Dockerfile
       target: production
+    volumes:
+      - /usr/src/app/node_modules
     ports:
       - "3001:3001"
     networks:
@@ -56,8 +62,7 @@ services:
       dockerfile: Dockerfile
       target: production
     volumes:
-      - ./matching-service:/app
-      - ./matching-service/node_modules:/app/node_modules
+      - /app/node_modules
     ports:
       - "5001:5001"
     networks:
@@ -81,6 +86,21 @@ services:
     env_file:
       - ./api-gateway/.env.production
 
+  session-service:
+    image: asia-southeast1-docker.pkg.dev/cs3219-g11-peerprep/cs3219-g11-repo/session-svc:latest
+    build:
+      context: ./session-service
+      dockerfile: Dockerfile
+      target: production
+    volumes:
+      - /app/node_modules
+    ports:
+      - "4444:4444"
+    networks:
+      - peerprep-network
+    env_file:
+      - ./session-service/.env.dev
+
 networks:
   peerprep-network:
     driver: bridge

docker-compose.yml

@@ -15,7 +15,7 @@ services:
       target: development
     volumes:
       - ./peerprep-fe:/app
-      - ./peerprep-fe/node_modules:/app/node_modules
+      - /app/node_modules
     ports:
       - "3000:3000"
     networks:
@@ -79,7 +79,7 @@ services:
       target: development
     volumes:
       - ./session-service:/app
-      - ./session-service/node_modules:/app/node_modules
+      - /app/node_modules
     ports:
       - "4444:4444"
     networks:

peerprep-fe/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.6.0",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
@@ -21,6 +22,7 @@
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.2",
     "@stomp/stompjs": "^7.0.0",
     "@types/js-cookie": "^3.0.6",
     "amqplib": "^0.10.4",

peerprep-fe/pnpm-lock.yaml

@@ -2,6 +2,7 @@
 import { useFilteredProblems } from '@/hooks/useFilteredProblems';
 import FilterBar from './filter/FilterBar';
 import ProblemTable from '../../../components/problems/ProblemTable';
+import RejoinSession from './RejoinSession';
 
 export default function MainComponent() {
   const { problems, filters, updateFilter, removeFilter, isLoading } =
@@ -10,6 +11,7 @@ export default function MainComponent() {
   return (
     <div className="min-h-screen bg-gray-900 p-6 pt-24 text-gray-100">
       <div className="mx-auto max-w-7xl">
+        <RejoinSession />
         <FilterBar
           filters={filters}
           updateFilter={updateFilter}

peerprep-fe/src/app/(main)/components/Main.tsx

@@ -0,0 +1,47 @@
+'use client';
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import { ArrowRight } from 'lucide-react';
+import { useCollaborationStore } from '@/state/useCollaborationStore';
+
+const RejoinSession = () => {
+  const { lastMatchId, clearLastMatchId } = useCollaborationStore();
+  const router = useRouter();
+
+  const handleRejoinSession = () => {
+    if (lastMatchId) {
+      router.push(`/collaboration?matchId=${lastMatchId}`);
+    }
+  };
+
+  if (!lastMatchId) return null;
+
+  return (
+    <div className="mb-6 flex items-center justify-between rounded-lg border border-amber-500/20 bg-amber-500/10 p-4">
+      <div className="flex items-center gap-3">
+        <div className="text-amber-300">
+          You have an active collaboration session
+        </div>
+      </div>
+      <div className="flex gap-2">
+        <Button
+          variant="outline"
+          className="border-amber-500/50 text-amber-300 hover:bg-amber-500/20"
+          onClick={handleRejoinSession}
+        >
+          Rejoin Session
+          <ArrowRight className="ml-2 h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          className="text-amber-300 hover:bg-amber-500/20"
+          onClick={clearLastMatchId}
+        >
+          Leave
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default RejoinSession;

peerprep-fe/src/app/(main)/components/RejoinSession.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import Editor from '@monaco-editor/react';
+import Editor, { OnMount } from '@monaco-editor/react';
 
-interface ProblemCodeEditorProps {
-  onMount: (editor: any, monaco: any) => void;
+interface CodeEditorProps {
+  onMount: OnMount;
+  language: string;
 }
 
-const ProblemCodeEditor: React.FC<ProblemCodeEditorProps> = ({ onMount }) => {
+const CodeEditor: React.FC<CodeEditorProps> = ({ onMount, language }) => {
   return (
     <div
       style={{
@@ -18,7 +19,7 @@ const ProblemCodeEditor: React.FC<ProblemCodeEditorProps> = ({ onMount }) => {
       <Editor
         height="100%"
         width="100%"
-        language="python"
+        language={language}
         theme="vs-dark"
         onMount={onMount}
         options={{
@@ -32,4 +33,4 @@ const ProblemCodeEditor: React.FC<ProblemCodeEditorProps> = ({ onMount }) => {
   );
 };
 
-export default ProblemCodeEditor;
+export default CodeEditor;