Skip to content

Commit b4f4e01

Browse files
authored
Merge pull request #249 from CS3219-AY2425S1/jehou/disconnect
Jehou/disconnect
2 parents b6ebcc5 + ec77e75 commit b4f4e01

File tree

8 files changed

+80
-5
lines changed

8 files changed

+80
-5
lines changed

backend/collaboration/src/models/Session.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ import mongoose, { Document, Schema } from "mongoose";
77
export type TSession = {
88
collabid: string;
99
users: [string];
10-
language: [string];
10+
language: string;
1111
question_id: number;
1212
code: string;
13+
createdAt: Date;
1314
};
1415

1516
// Document provides an id field
@@ -37,6 +38,10 @@ const sessionSchema: Schema = new Schema(
3738
type: String,
3839
required: false,
3940
},
41+
createdAt: {
42+
type: Date,
43+
required: false,
44+
}
4045
},
4146
{ collection: "sessions" }
4247
);

backend/collaboration/src/routes/collaborationRoutes.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ router.post(
4646
language,
4747
question_id,
4848
code: "",
49+
createdAt: new Date(),
4950
};
5051

5152
const newSession = new Session(session);
@@ -75,7 +76,7 @@ router.get("/sessions", async (req: Request, res: Response) => {
7576
router.post("/sessions/:id", async (req: Request, res: Response) => {
7677
try {
7778
const { id } = req.params;
78-
const sessions: TSession[] = await Session.find({ users: id }).exec();
79+
const sessions: TSession[] = await Session.find({ users: id }).sort({ createdAt: -1 }).exec();
7980

8081
return res.status(200).json(sessions);
8182
} catch (error) {

frontend/package-lock.json

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

frontend/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"class-variance-authority": "^0.7.0",
2929
"clsx": "^2.1.1",
3030
"cmdk": "^1.0.0",
31+
"date-fns": "^4.1.0",
3132
"dotenv": "^16.4.5",
3233
"framer-motion": "^11.9.0",
3334
"js-base64": "^3.7.7",

frontend/src/app/(user)/dashboard/components/DashboardDataTable.tsx

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import {
1010
useReactTable,
1111
} from "@tanstack/react-table";
1212

13+
import { format } from 'date-fns';
14+
1315
import { Button } from "@/components/ui/button";
1416
import {
1517
Table,
@@ -92,6 +94,19 @@ export const columns: ColumnDef<TCombinedSession>[] = [
9294
);
9395
},
9496
},
97+
{
98+
accessorKey: "createdAt",
99+
header: () => <Cell>Date</Cell>,
100+
cell: ({ row }) => {
101+
const date: Date = row.getValue("createdAt");
102+
103+
return (
104+
<Cell>
105+
{format(date, 'dd-MM-yyyy HH:mm:ss')}
106+
</Cell>
107+
);
108+
},
109+
},
95110
{
96111
accessorKey: "collabid",
97112
header: () => <Cell>Collab Space</Cell>,
@@ -133,8 +148,8 @@ export function DashboardDataTable({ data }: { data: TCombinedSession[] }) {
133148
<div>
134149
<Table className="font-light">
135150
<TableHeader className="w-full">
136-
<TableRow className="text-white bg-primary-900 font-medium hover:bg-transparent h-[5rem] text-md">
137-
<TableCell colSpan={6} className="pl-10">
151+
<TableRow className="text-white w-full bg-primary-900 font-medium hover:bg-transparent h-[5rem] text-md">
152+
<TableCell colSpan={7} className="pl-10">
138153
Past Collaborations
139154
</TableCell>
140155
</TableRow>

frontend/src/app/collaboration/components/editor.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ function Collaboration({ room, language, code, setLanguage }: Readonly<Props>) {
2727
const [username, setUsername] = useState<string | null>(null);
2828
const [selectionRange, setSelectionRange] = useState(null);
2929
const [saving, setSaving] = useState(false);
30+
const [peerOnline, setPeerOnline] = useState(false);
3031
const [editorTheme, setEditorTheme] = useState("dark-plus");
3132

3233
// Fetch username on component mount
@@ -88,6 +89,35 @@ function Collaboration({ room, language, code, setLanguage }: Readonly<Props>) {
8889
}
8990
}, [code]);
9091

92+
useEffect(() => {
93+
const awarenessListener = ({
94+
added,
95+
removed,
96+
}: {
97+
added: number[];
98+
removed: number[];
99+
}) => {
100+
added.forEach((clientId) => {
101+
if (clientId !== providerRef.current?.awareness.clientID) {
102+
setPeerOnline(true);
103+
}
104+
});
105+
106+
removed.forEach((clientId) => {
107+
if (clientId !== providerRef.current?.awareness.clientID) {
108+
setPeerOnline(false);
109+
}
110+
}
111+
)
112+
};
113+
114+
providerRef.current?.awareness.on("change", awarenessListener);
115+
116+
return () => {
117+
providerRef.current?.awareness.off("change", awarenessListener);
118+
};
119+
}, [providerRef.current]);
120+
91121
async function initializeShiki(monaco: any, editor: any) {
92122
const highlighter = await createHighlighter({
93123
themes: ["dark-plus", "light-plus"],
@@ -178,6 +208,7 @@ function Collaboration({ room, language, code, setLanguage }: Readonly<Props>) {
178208
theme={editorTheme}
179209
setTheme={setEditorTheme}
180210
saving={saving}
211+
peerOnline={peerOnline}
181212
/>
182213
<div className="w-full h-[1px] mx-auto my-2"></div>
183214
<Editor

frontend/src/app/collaboration/components/toolbar.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ type Props = {
1313
language: string;
1414
saving: boolean;
1515
setLanguage: (language: string) => void;
16+
peerOnline: boolean;
1617
theme: string;
1718
setTheme: (theme: string) => void;
1819
};
@@ -27,7 +28,7 @@ type ThemeOption = {
2728
label: string;
2829
}
2930

30-
export function Toolbar({ editor, language, saving, setLanguage, theme, setTheme }: Props) {
31+
export function Toolbar({ editor, language, saving, setLanguage, peerOnline, theme, setTheme }: Readonly<Props>) {
3132
const languages: LanguageOption[] = [
3233
{ value: 'javascript', label: 'JavaScript' },
3334
{ value: 'python', label: 'Python' },
@@ -82,6 +83,15 @@ export function Toolbar({ editor, language, saving, setLanguage, theme, setTheme
8283
>
8384
<RedoIcon />
8485
</button>
86+
<div className="flex items-center justify-items-center mx-4">
87+
<div
88+
className={`${
89+
peerOnline ? 'bg-green' : 'bg-red'
90+
} text-black text-xs font-semibold px-2 py-1 rounded-2xl`}
91+
>
92+
{peerOnline ? "Peer Online" : "Peer Offline"}
93+
</div>
94+
</div>
8595
<div className="text-grey-300 h-6 py-1 px-2 ml-auto mr-2 gap-4 rounded-full text-xs flex items-center justify-center">
8696
{saving && (
8797
<div className="flex flex-row gap-1 items-center">

frontend/src/types/dashboard.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,5 @@ export type TCombinedSession = {
2020
title: string;
2121
complexity: string;
2222
category: string;
23+
createdAt: Date;
2324
};

0 commit comments

Comments
 (0)