Merge pull request #21 from leepoeaik/develop

feat(collaboration-service): Implement UI and features (question panel and session timer)

Author: ChinZJ

.env.example

@@ -1,9 +1,47 @@
-# NODE VERSION
 NODE_ENV=development
 
-# SUPABASE CREDENTIALS
+# APP_ORIGIN=http://localhost:3000 # Docker
+APP_ORIGIN=http://localhost:5173 # Local testing
+
+# MongoDB and MongoExpress
+MONGO_INITDB_ROOT_USERNAME=
+MONGO_INITDB_ROOT_PASSWORD=
+MONGO_HOST=
+MONGO_PORT=
+MONGO_DATABASE=
+
+ME_CONFIG_MONGODB_URL=
+ME_CONFIG_BASICAUTH_ENABLED=
+ME_CONFIG_BASICAUTH_USERNAME=
+ME_CONFIG_BASICAUTH_PASSWORD=
+
+# User Service
+MONGO_URI=
+USER_SERVICE_PORT=
+JWT_SECRET=
+JWT_REFRESH_SECRET=
+EMAIL_SENDER=
+RESEND_API_KEY=
+
+ADMIN_USERNAME=
+ADMIN_EMAIL=
+ADMIN_PASSWORD=
+
+# Google OAuth
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+GOOGLE_AUTH_ORIGIN=http://localhost:3000 # Docker
+# GOOGLE_AUTH_ORIGIN=http://localhost:5173 
+GOOGLE_AUTH_REDIR_URI=
+
+# GITHUB_CLIENT_ID= # Docker
+GITHUB_CLIENT_ID=
+GITHUB_CLIENT_SECRET= 
+GITHUB_AUTH_ORIGIN=http://localhost:5173 
+GITHUB_AUTH_REDIR_URI=
+
 SUPABASE_URL=
 SUPABASE_KEY=
 
-PARTYKIT_HOST_URL='localhost:8082'
-VITE_NGROK_COLLAB_HOST=
+PARTYKIT_HOST_URL=localhost:8082
+VITE_NGROK_COLLAB_HOST=

collaboration-service/src/server.ts

@@ -24,6 +24,61 @@ const supabase = createClient(SUPABASE_URL, SUPABASE_KEY, {
 
 export default class YjsServer implements Party.Server {
   constructor(public room: Party.Room) {}
+  
+  async onRequest(request: Party.Request) {
+    // CORS headers for frontend access
+    const corsHeaders = {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type',
+      'Content-Type': 'application/json',
+    };
+
+    // Handle preflight OPTIONS request
+    if (request.method === 'OPTIONS') {
+      return new Response(null, {status: 204, headers: corsHeaders});
+    }
+
+    if (request.method === 'GET') {
+      try {
+        const {data, error} = await supabase
+          .from('documents')
+          .select('created_at')
+          .eq('name', this.room.id)
+          .single();
+
+        if (error && error.code !== 'PGRST116') {
+          // PGRST116 is "not found" error, which is okay
+          console.error(`[${this.room.id}] Failed to fetch timestamp:`, error);
+          return new Response(
+            JSON.stringify({
+              error: 'Failed to fetch room timestamp',
+            }),
+            {status: 500, headers: corsHeaders}
+          );
+        }
+
+        return new Response(
+          JSON.stringify({
+            roomId: this.room.id,
+            createdAt: data?.created_at || new Date().toISOString(),
+          }),
+          {status: 200, headers: corsHeaders}
+        );
+      } catch (err) {
+        console.error(`[${this.room.id}] Request error:`, err);
+        return new Response(
+          JSON.stringify({
+            error: 'Internal server error',
+          }),
+          {status: 500, headers: corsHeaders}
+        );
+      }
+    }
+
+    return new Response('Method not allowed', {status: 405, headers: corsHeaders});
+  }
+
   async onConnect(connection: Party.Connection) {
     const room = this.room;
     await y_onConnect(connection, this.room, {

docker-compose.yml

@@ -10,12 +10,12 @@ services:
       - ./user-service/db:/data/db
     networks:
       - app-network
-  
+
   # For development purposes
   user-db-mongo-express:
     image: mongo-express
     container_name: user-db-mongo-express
-    restart: unless-stopped  
+    restart: unless-stopped
     ports:
       - 8084:8081
     env_file:
@@ -24,15 +24,14 @@ services:
       - app-network
     depends_on:
       - user-db-mongodb
-    
 
   question-db-pg:
     image: postgres:14-alpine
     container_name: question-db-pg
     ports:
-      - '5433:5432' 
+      - '5433:5432'
     volumes:
-      - question-data:/var/lib/postgresql/data 
+      - question-data:/var/lib/postgresql/data
       - ./question-service/db:/docker-entrypoint-initdb.d
     environment:
       POSTGRES_USER: postgres
@@ -41,12 +40,11 @@ services:
     networks:
       - app-network
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      test: ['CMD-SHELL', 'pg_isready -U postgres']
       interval: 5s
       timeout: 5s
       retries: 5
 
-
   # --- FRONTEND ---
   frontend:
     build:
@@ -102,7 +100,7 @@ services:
       - PORT=8083
     env_file:
       - ./.env
-    depends_on: 
+    depends_on:
       - question-db-pg
     volumes:
       - ./question-service:/app
@@ -114,7 +112,7 @@ services:
     build:
       context: ./question-service
       dockerfile: Dockerfile
-    command: ["npm", "test"]
+    command: ['npm', 'test']
     env_file:
       - ./question-service/.env
     depends_on:
@@ -123,8 +121,6 @@ services:
     networks:
       - app-network
 
-
-  
   # Matching service
   matching-service:
     # ... (No changes needed)
@@ -171,4 +167,4 @@ networks:
     driver: bridge
 
 volumes:
-  question-data:
+  question-data:

frontend/package.json

@@ -12,6 +12,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.14",
     "@codemirror/lang-cpp": "^6.0.3",
     "@codemirror/lang-java": "^6.0.2",
     "@codemirror/lang-javascript": "^6.2.4",
@@ -23,7 +24,8 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-hot-toast": "^2.6.0",
-    "react-router-dom": "^7.9.2"
+    "react-router-dom": "^7.9.2",
+    "tailwindcss": "^4.1.14"
   },
   "devDependencies": {
     "@eslint/compat": "^1.3.2",

frontend/src/collaboration/components/QuestionPanel.tsx

@@ -0,0 +1,108 @@
+import {useQuestion} from '../hooks/useQuestion';
+
+const getDifficultyColor = (difficulty: string) => {
+  switch (difficulty.toLowerCase()) {
+    case 'easy':
+      return 'bg-green-100 text-green-700';
+    case 'medium':
+      return 'bg-yellow-100 text-yellow-700';
+    case 'hard':
+      return 'bg-red-100 text-red-700';
+    default:
+      return 'bg-gray-100 text-gray-700';
+  }
+};
+
+const parseTextWithCode = (text: string) => {
+  const parts = text.split(/(`[^`]+`)/g);
+  return parts.map((part, index) => {
+    if (part.startsWith('`') && part.endsWith('`')) {
+      const code = part.slice(1, -1);
+      return (
+        <code key={index} className="bg-gray-100 px-1 rounded">
+          {code}
+        </code>
+      );
+    }
+    return <span key={index}>{part}</span>;
+  });
+};
+
+export default function QuestionPanel({questionId}: {questionId: string}) {
+  const {question, isLoading, error} = useQuestion(questionId);
+  if (isLoading) {
+    return (
+      <div className="w-96 bg-white border-r border-gray-200 overflow-y-auto p-6 flex items-center justify-center">
+        <div className="text-gray-500">Loading question...</div>
+      </div>
+    );
+  }
+
+  if (error || !question) {
+    return (
+      <div className="w-96 bg-white border-r border-gray-200 overflow-y-auto p-6">
+        <div className="text-red-500">{error || 'Question not found'}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-96 bg-white border-r border-gray-200 overflow-y-auto p-6">
+      <h1 className="text-2xl font-bold mb-4">{question.title}</h1>
+
+      {/* Tags */}
+      <div className="flex gap-2 mb-6">
+        <span
+          className={`px-3 py-1 rounded-full text-sm font-medium ${getDifficultyColor(question.difficulty)}`}
+        >
+          {question.difficulty}
+        </span>
+      </div>
+
+      {/* Problem Description */}
+      <div className="mb-6">
+        <h2 className="font-semibold text-gray-900 mb-2">Problem Description</h2>
+        <p className="text-gray-700 text-sm leading-relaxed">
+          {parseTextWithCode(question.description)}
+        </p>
+      </div>
+
+      {/* Examples */}
+      {question.examples.map((example, index) => {
+        const lines = example.split('\n').filter(line => line.trim());
+        return (
+          <div key={index} className="mb-6">
+            <h3 className="font-semibold text-gray-900 mb-2">
+              {lines[0].includes('Example') ? lines[0] : `Example ${index + 1}:`}
+            </h3>
+            <div className="bg-gray-50 p-3 rounded text-sm font-mono space-y-1">
+              {lines.slice(1).map((line, lineIndex) => {
+                const trimmedLine = line.trim();
+                return (
+                  <div
+                    key={lineIndex}
+                    className={trimmedLine.startsWith('Explanation') ? 'text-gray-600' : ''}
+                  >
+                    {trimmedLine}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+
+      {/* Constraints */}
+      {question.constraints && question.constraints.length > 0 && (
+        <div>
+          <h3 className="font-semibold text-gray-900 mb-2">Constraints:</h3>
+          <ul className="text-sm text-gray-700 space-y-1 list-disc list-inside">
+            {question.constraints.map((constraint, index) => (
+              <li key={index}>{parseTextWithCode(constraint)}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/collaboration/components/SessionHeader.tsx

@@ -0,0 +1,71 @@
+import {useEffect, useState} from 'react';
+import PeerPrepIcon from '../../assets/peerprep-icon.svg';
+
+const SECOND = 1000;
+const MINUTE = SECOND * 60;
+const HOUR = MINUTE * 60;
+const DAY = HOUR * 24;
+const INITIAL_PENALTY_TIME = MINUTE * 10;
+
+export default function SessionHeader({
+  sessionStartTime,
+  handlePenaltyOver,
+}: {
+  sessionStartTime: number | null;
+  handlePenaltyOver: () => void;
+}) {
+  const [time, setTime] = useState(0);
+  const [penaltyTime, setPenaltyTime] = useState(INITIAL_PENALTY_TIME);
+
+  useEffect(() => {
+    if (!sessionStartTime) return;
+
+    const interval = setInterval(() => {
+      setTime(Date.now() - sessionStartTime);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [sessionStartTime]);
+
+  useEffect(() => {
+    if (!sessionStartTime) return;
+
+    const interval = setInterval(() => {
+      const newPenaltyTime = INITIAL_PENALTY_TIME - (Date.now() - sessionStartTime);
+      if (newPenaltyTime <= 0) {
+        setPenaltyTime(0);
+        handlePenaltyOver();
+        clearInterval(interval);
+      } else {
+        setPenaltyTime(newPenaltyTime);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [sessionStartTime]);
+
+  return (
+    <header className="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between">
+      <div className="flex items-center space-x-2">
+        <div className="text-blue-500 font-bold text-xl">
+          <img src={PeerPrepIcon} alt="PeerPrep" className="header-logo" />
+        </div>
+      </div>
+      <div className="text-right">
+        <div className="text-sm font-semibold text-gray-700">
+          Session{` `}
+          {/* {`${Math.floor((time / DAY) % 24)}`.padStart(2, '0')}:
+          {`${Math.floor((time / HOUR) % 60)}`.padStart(2, '0')}: */}
+          {`${Math.floor((time / MINUTE) % 60)}`.padStart(2, '0')}:
+          {`${Math.floor((time / SECOND) % 60)}`.padStart(2, '0')}
+        </div>
+        {penaltyTime > 0 && (
+          <div className="text-sm text-red-400">
+            Penaly Timer{` `}
+            {`${Math.floor((penaltyTime / MINUTE) % 60)}`.padStart(2, '0')}:
+            {`${Math.floor((penaltyTime / SECOND) % 60)}`.padStart(2, '0')}
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}