Merge pull request #203 from CS3219-AY2425S1/138-fe-view-previous-ses…

…sion View completed sessions
CS3219-AY2425S1 · Nov 8, 2024 · 04b3708 · 04b3708
2 parents 977e219 + 78b5d12
commit 04b3708
Show file tree

Hide file tree

Showing 20 changed files with 223 additions and 99 deletions.
diff --git a/backend/matching-service/src/controllers/matching.controller.ts b/backend/matching-service/src/controllers/matching.controller.ts
@@ -176,7 +176,7 @@ export async function handleGetPaginatedSessions(request: IPaginationRequest, re
             totalItems: count,
             limit,
         },
-        sessions: matches.map(MatchDto.fromModel),
+        sessions: matches,
     })
 }
 

diff --git a/backend/matching-service/src/models/matching.repository.ts b/backend/matching-service/src/models/matching.repository.ts
@@ -20,7 +20,7 @@ export async function isUserInMatch(userId: string): Promise<string | undefined>
 export async function getMatchByUserIdandMatchId(userId: string, matchId: string): Promise<IMatch> {
     return matchModel.findOne({
         $or: [{ user1Id: userId }, { user2Id: userId }],
-        $and: [{ isCompleted: false }, { _id: matchId }],
+        $and: [{ _id: matchId }],
     })
 }
 
@@ -34,6 +34,7 @@ export async function findPaginatedMatches(start: number, limit: number, userId:
         .find({
             $or: [{ user1Id: userId }, { user2Id: userId }],
         })
+        .sort([['createdAt', 'desc']])
         .limit(limit)
         .skip(start)
 }

diff --git a/docker-compose.local.yml b/docker-compose.local.yml
@@ -131,6 +131,7 @@ services:
             - ACCESS_TOKEN_PRIVATE_KEY=${ACCESS_TOKEN_PRIVATE_KEY}
             - USER_SERVICE_URL=http://user-service:3002
             - QUESTION_SERVICE_URL=http://question-service:3004
+            - COLLABORATION_SERVICE_URL=http://collaboration-service:3008
             - RMQ_USER=${RMQ_USER}
             - RMQ_PASSWORD=${RMQ_PASSWORD}
             - RMQ_HOST=rabbitmq

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -139,6 +139,7 @@ services:
             - ACCESS_TOKEN_PRIVATE_KEY=${ACCESS_TOKEN_PRIVATE_KEY}
             - USER_SERVICE_URL=http://user-service:3002
             - QUESTION_SERVICE_URL=http://question-service:3004
+            - COLLABORATION_SERVICE_URL=http://collaboration-service:3008
             - RMQ_USER=${RMQ_USER}
             - RMQ_PASSWORD=${RMQ_PASSWORD}
             - RMQ_HOST=rabbitmq

diff --git a/frontend/components/customs/datatable.tsx b/frontend/components/customs/datatable.tsx
@@ -4,6 +4,7 @@ import CustomSelect from './custom-select'
 import { DeleteIcon, EditIcon, LeftIcon, RightIcon } from '@/assets/icons'
 import { Button } from '../ui/button'
 import SortIcon from './sort-icon'
+import { useRouter } from 'next/router'
 
 export default function Datatable({
     data,
@@ -16,6 +17,7 @@ export default function Datatable({
     actionsHandler,
 }: IDatatableProps) {
     const pageOptions = [5, 10, 20, 50]
+    const router = useRouter()
 
     const handleSort = (key: string) => {
         if (sortBy?.sortKey === key) {
@@ -127,17 +129,19 @@ export default function Datatable({
                                                     <DeleteIcon />
                                                 </Button>
                                             )}
-                                            {col.customAction && col.customAction.onClick(elem) && (
+                                            {col.customAction && col.customAction.formatter ? (
+                                                col.customAction.formatter(elem, router)
+                                            ) : (
                                                 <Button
                                                     variant="iconNoBorder"
                                                     size="icon"
                                                     onClick={() => {
-                                                        if (col.customAction) {
+                                                        if (col.customAction && col.customAction.onClick) {
                                                             col.customAction.onClick(elem)
                                                         }
                                                     }}
                                                 >
-                                                    {col.customAction.customActionIcon}
+                                                    {col.customAction?.customActionIcon}
                                                 </Button>
                                             )}
                                         </TableCell>

diff --git a/frontend/components/dashboard/new-session.tsx b/frontend/components/dashboard/new-session.tsx
@@ -79,9 +79,11 @@ export const NewSession = () => {
             return
         }
 
-        const socket = new WebSocket(
-            process.env.NEXT_PUBLIC_API_URL?.concat(`/matching/ws/?id=${websocketId}`) ?? 'ws://localhost:3006'
+        // Refactor this
+        const wsUrl = (process.env.NEXT_PUBLIC_API_URL || 'ws://localhost:3006')?.concat(
+            `/matching/ws/?id=${websocketId}`
         )
+        const socket = new WebSocket(wsUrl)
         setTimeout(() => {
             socket.close()
         }, 60000)

diff --git a/frontend/components/dashboard/recent-sessions.tsx b/frontend/components/dashboard/recent-sessions.tsx
@@ -4,31 +4,24 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@
 
 import Link from 'next/link'
 import { MoveRight } from 'lucide-react'
+import { IPartialSessions } from '@/types'
 
-export const RecentSessions = () => {
-    const data = [
-        {
-            collaborator: 'Olivia Martin',
-            question: 'Reverse a String',
-        },
-        {
-            collaborator: 'Olivia Martin',
-            question: 'Reverse a String',
-        },
-        {
-            collaborator: 'Olivia Martin',
-            question: 'Reverse a String',
-        },
-        {
-            collaborator: 'Olivia Martin',
-            question: 'Reverse a String',
-        },
-        {
-            collaborator: 'Olivia Martin',
-            question: 'Reverse a String',
-        },
-    ]
+const cols: { key: keyof IPartialSessions; label: string }[] = [
+    {
+        key: 'collaboratorName',
+        label: 'Collaborator',
+    },
+    {
+        key: 'questionTitle',
+        label: 'Question',
+    },
+    {
+        key: 'category',
+        label: 'Category',
+    },
+]
 
+export const RecentSessions = ({ data }: { data: IPartialSessions[] }) => {
     return (
         <div className="border-solid border-2 border-gray-200 rounded flex flex-col w-dashboard p-6 min-h-[60vh] max-h-[90vh] overflow-auto justify-between">
             <div>
@@ -37,23 +30,30 @@ export const RecentSessions = () => {
                 <Table>
                     <TableHeader>
                         <TableRow>
-                            <TableHead>Collaborator</TableHead>
-                            <TableHead className="text-right">Question</TableHead>
+                            {cols.map((col) => (
+                                <TableHead key={col.key} className="font-bold">
+                                    {col.label}
+                                </TableHead>
+                            ))}
                         </TableRow>
                     </TableHeader>
                     <TableBody>
-                        {data.map(({ collaborator, question }, index) => (
+                        {data.map((row, index) => (
                             <TableRow key={index}>
-                                <TableCell>
-                                    <p>{collaborator}</p>
-                                </TableCell>
-                                <TableCell className="text-right">
-                                    <p>{question}</p>
-                                </TableCell>
+                                {cols.map((col) => (
+                                    <TableCell key={col.key}>
+                                        <p>{row[col.key]}</p>
+                                    </TableCell>
+                                ))}
                             </TableRow>
                         ))}
                     </TableBody>
                 </Table>
+                {!data.length && (
+                    <p className="py-10 text-center text-sm text-gray-400 border-2 border-t-0 rounded-xl rounded-t-none border-gray-100">
+                        No recent sessions
+                    </p>
+                )}
             </div>
             <Link className="flex flex-row justify-center underline text-purple-600" href={'/sessions'}>
                 <p className="mr-1">View all sessions</p>

diff --git a/frontend/pages/code/[id]/chat.tsx b/frontend/pages/code/[id]/chat.tsx
@@ -12,7 +12,7 @@ const formatTimestamp = (timestamp: string) => {
     return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true }).toUpperCase()
 }
 
-const Chat: FC<{ socketRef: RefObject<socketIO.Socket | null> }> = ({ socketRef }) => {
+const Chat: FC<{ socketRef: RefObject<socketIO.Socket | null>; isViewOnly: boolean }> = ({ socketRef, isViewOnly }) => {
     const [chatData, setChatData] = useState<ChatModel[]>()
     const chatEndRef = useRef<HTMLDivElement | null>(null)
     const { data: session } = useSession()
@@ -35,15 +35,15 @@ const Chat: FC<{ socketRef: RefObject<socketIO.Socket | null> }> = ({ socketRef
     }, [router])
 
     useEffect(() => {
+        if (isViewOnly) return
         if (socketRef?.current) {
             socketRef.current.on('receive_message', (data: ChatModel) => {
-                console.log('Got a msg', data)
                 setChatData((prev) => {
                     return [...(prev ?? []), data]
                 })
             })
         }
-    }, [socketRef])
+    }, [socketRef, isViewOnly])
 
     const getChatBubbleFormat = (currUser: string, type: 'label' | 'text') => {
         let format = ''
@@ -73,7 +73,6 @@ const Chat: FC<{ socketRef: RefObject<socketIO.Socket | null> }> = ({ socketRef
 
     const handleSendMessage = (message: string) => {
         if (!session || !socketRef?.current) return
-
         if (message.trim()) {
             const msg: ChatModel = {
                 message: message,
@@ -87,14 +86,16 @@ const Chat: FC<{ socketRef: RefObject<socketIO.Socket | null> }> = ({ socketRef
     }
 
     useEffect(() => {
+        if (isViewOnly) return
+
         if (chatEndRef.current) {
             chatEndRef.current.scrollIntoView({ behavior: 'smooth' })
         }
-    }, [chatData])
+    }, [chatData, isViewOnly])
 
     return (
         <>
-            <div className="overflow-y-auto p-3 pb-0">
+            <div className="overflow-y-auto p-3">
                 {!!chatData?.length &&
                     Object.values(chatData).map((chat, index) => (
                         <div
@@ -114,18 +115,24 @@ const Chat: FC<{ socketRef: RefObject<socketIO.Socket | null> }> = ({ socketRef
                             </div>
                         </div>
                     ))}
+                {(!chatData || !chatData?.length) && (
+                    <p className="w-full text-center text-gray-400 text-sm my-1">No chat history</p>
+                )}
                 <div ref={chatEndRef}></div>
             </div>
-            <div className="m-3 px-3 py-1 border-[1px] rounded-xl text-sm">
-                <input
-                    type="text"
-                    className="w-full bg-transparent border-none focus:outline-none"
-                    placeholder="Send a message..."
-                    onKeyDown={handleKeyDown}
-                    value={value}
-                    onChange={(e) => setValue(e.target.value)}
-                />
-            </div>
+            {!isViewOnly && (
+                <div className="m-3 mt-0 px-3 py-1 border-[1px] rounded-xl text-sm">
+                    <input
+                        type="text"
+                        className="w-full bg-transparent border-none focus:outline-none"
+                        placeholder="Send a message..."
+                        onKeyDown={handleKeyDown}
+                        value={value}
+                        onChange={(e) => setValue(e.target.value)}
+                        readOnly={isViewOnly}
+                    />
+                </div>
+            )}
         </>
     )
 }