Skip to content

Commit c10edb8

Browse files
Leo7DengLeo7Deng
committed
Fix bug for overwriting allMessages
1 parent 7d3a8d4 commit c10edb8

2 files changed

Lines changed: 68 additions & 46 deletions

File tree

‎frontend/app/components/Dashboard.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default function Dashboard2() {
1717

1818
const [circles, setCircles] = useState<Circle[]>([]);
1919
const { userID, username, fetchUserData, handleDelete } = useFetchDashboard(setCircles);
20-
const { sendMessage } = useWebSocketDashboard(setCircles, allMessages, setAllMessages);
20+
const { sendMessage } = useWebSocketDashboard(setCircles, setAllMessages);
2121

2222
useEffect(() => {
2323
const fetchData = async () => {
@@ -106,6 +106,7 @@ export default function Dashboard2() {
106106
[selectedCircleID]: [...messages, message],
107107
};
108108
});
109+
console.log("allMessages from dashboard:", allMessages);
109110
(event.target as HTMLInputElement).value = "";
110111
}
111112
}

‎frontend/app/hooks/useWebsocketDashboard.tsx‎

Lines changed: 66 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useAuth } from "../context/authContext";
44

55

66

7-
export function useWebSocketDashboard(setCircles: React.Dispatch<React.SetStateAction<Circle[]>>, allMessages: { [key: string]: Message[] }, setAllMessages: React.Dispatch<React.SetStateAction<{ [key: string]: Message[] }>> ) {
7+
export function useWebSocketDashboard(setCircles: React.Dispatch<React.SetStateAction<Circle[]>>, setAllMessages: React.Dispatch<React.SetStateAction<{ [key: string]: Message[] }>> ) {
88
const ws = useRef<WebSocket | null>(null);
99
const lastSentMessageTime = useRef<string>("");
1010
const authContext = useAuth();
@@ -15,18 +15,22 @@ export function useWebSocketDashboard(setCircles: React.Dispatch<React.SetStateA
1515

1616
// Connect to WebSocket
1717
useEffect(() => {
18-
const connectWebSocket = async () => {
18+
let wsCurrent: WebSocket;
19+
20+
(async () => {
1921
const token = await getAccessToken();
20-
ws.current = new WebSocket("ws://localhost:8000/ws", [token]);
21-
ws.current.onopen = () => console.log("ws opened");
22-
ws.current.onclose = () => console.log("ws closed");
23-
const wsCurrent = ws.current;
24-
return () => {
22+
wsCurrent = new WebSocket("ws://localhost:8000/ws", [token]);
23+
wsCurrent.onopen = () => console.log("ws opened");
24+
wsCurrent.onclose = () => console.log("ws closed");
25+
ws.current = wsCurrent;
26+
})();
27+
28+
return () => {
29+
if (wsCurrent) {
2530
wsCurrent.close();
26-
};
31+
}
2732
};
28-
connectWebSocket();
29-
}, []);
33+
}, [getAccessToken]);
3034

3135
// Handle incoming messages
3236
useEffect(() => {
@@ -35,47 +39,51 @@ export function useWebSocketDashboard(setCircles: React.Dispatch<React.SetStateA
3539
try {
3640
var parsedData = JSON.parse(e.data);
3741
switch (parsedData.origin) {
38-
case "server":
42+
case "server": {
3943
switch (parsedData.type) {
40-
case "message":
44+
case "message": {
4145
switch (parsedData.action) {
42-
case "create":
43-
const circleID = parsedData.circle_id;
44-
parsedData = parsedData.message;
45-
const isDuplicate = lastSentMessageTime.current === parsedData.created_at
46-
console.log("isDuplicate:", isDuplicate);
46+
case "create": {
47+
const message: Message = parsedData.message;
48+
const circleID = message.circle_id;
49+
50+
const isDuplicate = lastSentMessageTime.current === message.created_at;
4751
if (isDuplicate) {
48-
const sentTime = new Date(parsedData.created_at).getTime();
49-
const receivedTime = new Date().getTime();
50-
const timeDifference = receivedTime - sentTime;
51-
console.log(`Message round-trip time: ${timeDifference}ms`);
52+
const sentTime = new Date(message.created_at).getTime();
53+
const receivedTime = Date.now();
54+
console.log(`Message round-trip time: ${receivedTime - sentTime}ms`);
5255
break;
5356
}
54-
setAllMessages({
55-
...allMessages,
56-
[parsedData.circle_id]: [
57-
...allMessages[parsedData.circle_id] || [],
58-
parsedData,
59-
],
57+
58+
setAllMessages(prev => {
59+
const current = prev[circleID] ?? [];
60+
return {
61+
...prev,
62+
[circleID]: [...current, message],
63+
};
6064
});
6165
break;
62-
case "delete":
66+
}
67+
case "delete": {
6368
parsedData = parsedData.circle;
6469
const circleIDToDelete = parsedData.circle_id;
65-
console.log("Removing circle with ID:", circleID);
70+
console.log("Removing circle with ID:", circleIDToDelete);
6671
setCircles((prevCircles) => prevCircles.filter((circle) => circle.id !== circleIDToDelete));
67-
setAllMessages({
68-
...allMessages,
72+
setAllMessages(prev => ({
73+
...prev,
6974
[circleIDToDelete]: [],
70-
});
75+
}));
7176
break;
72-
default:
77+
}
78+
default: {
7379
console.error("Unknown message action:", parsedData.action);
80+
}
7481
}
7582
break;
76-
case "circle":
83+
}
84+
case "circle": {
7785
switch (parsedData.action) {
78-
case "create":
86+
case "create": {
7987
parsedData = parsedData.circle;
8088
console.log("Adding circle:", parsedData.id);
8189
const newCircle : Circle = {
@@ -85,42 +93,55 @@ export function useWebSocketDashboard(setCircles: React.Dispatch<React.SetStateA
8593
};
8694
setCircles((prevCircles) => [...prevCircles, newCircle]);
8795
break;
88-
case "delete":
96+
}
97+
case "delete": {
8998
parsedData = parsedData.circle;
9099
const circleID = parsedData.id;
91100
console.log("Removing circle with ID:", circleID);
92101
setCircles((prevCircles) => prevCircles.filter((circle) => circle.id !== circleID));
93-
setAllMessages({
94-
...allMessages,
102+
setAllMessages(prev => ({
103+
...prev,
95104
[circleID]: [],
96-
});
105+
}));
97106
break;
98-
default:
107+
}
108+
default: {
99109
console.error("Unknown message action:", parsedData.action);
110+
}
100111
}
101112
break;
102-
default:
113+
}
114+
default: {
103115
console.error("Unknown message type:", parsedData.type);
104116
return;
117+
}
105118
}
106119
break;
107-
case "client":
120+
}
121+
case "client": {
108122
break;
109-
default:
123+
}
124+
default: {
110125
console.error("Unknown origin:", parsedData.origin);
111126
return;
127+
}
112128
}
113129
} catch (error) {
114130
console.log(error);
115131
console.error("Error parsing WebSocket message:", error);
116132
}
133+
// print a list of all messages
134+
// console.log("allMessages:", JSON.stringify(allMessages, null, 2));
117135
};
118136
}, [ws.current]);
119137

120138
// Function to send messages
121139
const sendMessage = (messagePayload: WebSocketMessage) => {
122-
const currentTime = new Date().toISOString();
123-
lastSentMessageTime.current = currentTime;
140+
if (messagePayload.message) {
141+
lastSentMessageTime.current = messagePayload.message.created_at;
142+
} else {
143+
console.error("Message payload is undefined");
144+
}
124145

125146
if (ws.current?.readyState === WebSocket.OPEN) {
126147
ws.current.send(JSON.stringify(messagePayload));

0 commit comments

Comments
 (0)