Add question history detail page

Author: feliciagan

.github/workflows/ci.yml

@@ -40,6 +40,7 @@ jobs:
             matching-service,
             collab-service,
             code-execution-service,
+            qn-history-service,
           ]
     steps:
       - name: Checkout code

README.md

@@ -31,4 +31,5 @@ docker-compose down
 - Matching Service: http://localhost:3002
 - Collab Service: http://localhost:3003
 - Code Execution Service: http://localhost:3004
+- Question History Service: http://localhost:3005
 - Frontend: http://localhost:5173

backend/matching-service/src/handlers/websocketHandler.ts

@@ -130,7 +130,7 @@ export const handleWebsocketMatchEvents = (socket: Socket) => {
           return;
         }
 
-        const { complexity, category } = match;
+        const { complexity, category, language } = match;
         questionService
           .get("/random", { params: { complexity, category } })
           .then((res) => {
@@ -143,6 +143,7 @@ export const handleWebsocketMatchEvents = (socket: Socket) => {
                 submissionStatus: "Attempted",
                 dateAttempted: new Date(),
                 timeTaken: 0,
+                language: language,
               })
               .then((res) => {
                 io.to(matchId).emit(

backend/qn-history-service/.env.sample

@@ -6,6 +6,8 @@ ORIGINS=http://localhost:5173,http://127.0.0.1:5173
 # if using cloud MongoDB, replace with actual URI (run service separately)
 MONGO_CLOUD_URI=<MONGO_CLOUD_URI>
 
+MONGO_URI_TEST=mongodb://mongo:mongo@test-mongo:27017/
+
 # if using local MongoDB (run service with docker-compose)
 ## MongoDB credentials
 MONGO_INITDB_ROOT_USERNAME=root

backend/qn-history-service/src/controllers/questionHistoryController.ts

@@ -24,15 +24,8 @@ export const createQnHistory = async (
       submissionStatus,
       dateAttempted,
       timeTaken,
+      language,
     } = req.body;
-    console.log(
-      userIds,
-      questionId,
-      title,
-      submissionStatus,
-      dateAttempted,
-      timeTaken
-    );
 
     const newQnHistory = new QnHistory({
       userIds,
@@ -41,6 +34,7 @@ export const createQnHistory = async (
       submissionStatus,
       dateAttempted,
       timeTaken,
+      language,
     });
 
     await newQnHistory.save();
@@ -191,5 +185,6 @@ const formatQnHistoryResponse = (qnHistory: IQnHistory) => {
     dateAttempted: qnHistory.dateAttempted,
     timeTaken: qnHistory.timeTaken,
     code: qnHistory.code,
+    language: qnHistory.language,
   };
 };

backend/qn-history-service/src/models/QnHistory.ts

@@ -8,6 +8,7 @@ export interface IQnHistory extends Document {
   dateAttempted: Date;
   timeTaken: Number;
   code: string;
+  language: string;
   createdAt: Date;
   updatedAt: Date;
 }
@@ -25,6 +26,11 @@ const qnHistorySchema: Schema<IQnHistory> = new mongoose.Schema(
     dateAttempted: { type: Date, required: true },
     timeTaken: { type: Number, required: true },
     code: { type: String, required: false, default: "" },
+    language: {
+      type: String,
+      enum: ["Python", "Java", "C"],
+      required: true,
+    },
   },
   { timestamps: true }
 );

backend/qn-history-service/swagger.yml

@@ -32,6 +32,9 @@ components:
         code:
           type: string
           description: Code submitted
+        language:
+          type: string
+          description: Programming language used
 
 definitions:
   QnHistory:
@@ -64,6 +67,9 @@ definitions:
       code:
         type: string
         description: Code submitted
+      language:
+        type: string
+        description: Programming language used
       createdAt:
         type: string
         description: Date of creation

docker-compose-test.yml

@@ -98,6 +98,23 @@ services:
     restart: on-failure
     command: ["npm", "test"]
 
+  test-qn-history-service:
+    image: peerprep/qn-history-service
+    build: ./backend/qn-history-service
+    environment:
+      - NODE_ENV=test
+      - SERVICE_PORT=3005
+      - MONGO_URI_TEST=mongodb://mongo:mongo@test-mongo:27017/
+    depends_on:
+      - test-mongo
+    networks:
+      - peerprep-network
+    volumes:
+      - ./backend/qn-history-service:/qn-history-service
+      - /qn-history-service/node_modules
+    restart: on-failure
+    command: ["npm", "test"]
+
   test-frontend:
     image: peerprep/frontend
     build: ./frontend

frontend/src/App.tsx

@@ -24,6 +24,7 @@ import MatchProvider from "./contexts/MatchContext";
 import CollabSandbox from "./pages/CollabSandbox";
 import NoDirectAccessRoutes from "./components/NoDirectAccessRoutes";
 import EmailVerification from "./pages/EmailVerification";
+import QuestionHistoryDetail from "./pages/QuestionHistoryDetail";
 
 function App() {
   return (
@@ -51,6 +52,14 @@ function App() {
                 </ProfileContextProvider>
               }
             />
+            <Route 
+              path="profile/:userId/:qnHistoryId" 
+              element={
+                <AuthProvider>
+                  <QuestionHistoryDetail />
+                </AuthProvider>
+              } 
+            />
             <Route path="matching" element={<ProtectedRoutes />}>
               <Route element={<NoDirectAccessRoutes />}>
                 <Route index element={<Matching />} />

frontend/src/components/ServerError/index.tsx

@@ -9,7 +9,7 @@ const ServerError: React.FC<ServerErrorProps> = (props) => {
 
   return (
     <AppMargin classname={`${classes.fullheight} ${classes.center}`}>
-      <Box>
+      <Box sx={(theme) => ({marginTop: theme.spacing(4) })}>
         <Typography
           component={"h1"}
           variant="h3"