From 638b3e0750c61aded2d08dfad7680bfcff8abf9f Mon Sep 17 00:00:00 2001 From: Logan Hunt Date: Fri, 1 Apr 2022 16:31:24 -0600 Subject: [PATCH] Fix some bugs --- client/components/chatroom/_chat_room.jsx | 32 +++++++---- client/components/map/chat_room_geoman.jsx | 6 +- client/utils/use_chat.js | 10 ++-- server/controllers/chat_room.controller.ts | 6 +- .../migrations/1648605030863-AddChatRoom.ts | 2 +- server/entities/chat_room.entity.ts | 2 +- .../providers/gateways/chat_room.gateway.ts | 56 +++++++++++++------ .../providers/services/chat_room.service.ts | 13 ++++- 8 files changed, 84 insertions(+), 43 deletions(-) diff --git a/client/components/chatroom/_chat_room.jsx b/client/components/chatroom/_chat_room.jsx index 22fb399..6a93807 100644 --- a/client/components/chatroom/_chat_room.jsx +++ b/client/components/chatroom/_chat_room.jsx @@ -11,7 +11,7 @@ import { generateGruvboxFromString } from '../../utils/generate_gruvbox'; export const ChatRoom = () => { const { id } = useParams(); const [chatRoom, setChatRoom] = useState(''); - const [connections, messages, sendMessage] = useChat(chatRoom); + const [active, connections, messages, sendMessage] = useChat(chatRoom); const [message, setMessage] = useState(''); const [color, setColor] = useState(generateGruvboxFromString('placeholder')); const [user, setUser] = useState({}); @@ -78,17 +78,25 @@ export const ChatRoom = () => {
- -
- Send -
+ {active ? ( + <> + +
+ Send +
+ + ) : ( +
+

This room has been marked inactive and has been deleted.

+
+ )}
Back to map
diff --git a/client/components/map/chat_room_geoman.jsx b/client/components/map/chat_room_geoman.jsx index 07d0a4c..86b5c8a 100644 --- a/client/components/map/chat_room_geoman.jsx +++ b/client/components/map/chat_room_geoman.jsx @@ -51,7 +51,7 @@ const haversine = (p1, p2) => { export const Geoman = ({ user, userPos, joinRoom }) => { const context = useLeafletContext(); const api = useContext(ApiContext); - let dontRedirect = true; + let dontRedirect = false; const circleAndMarkerFromChatroom = (chatRoom) => { const circle = new L.Circle(chatRoom.center, chatRoom.radius); const marker = new L.Marker(chatRoom.center, { pmIgnore: !chatRoom.editable, icon }); @@ -64,7 +64,7 @@ export const Geoman = ({ user, userPos, joinRoom }) => { return; } dontRedirect = false; - }, 500); + }, 200); }); marker.bindPopup(chatRoom.name || `Chat Room ${chatRoom.id}`); marker.on('mouseover', (e) => { @@ -158,7 +158,7 @@ export const Geoman = ({ user, userPos, joinRoom }) => { const { lat: latitude, lng: longitude } = shape.layer.getLatLng(); const chatRoom = await api.post('/chat_rooms', { - name: prompt("What's the name of the chat room?"), + name: prompt("What's the name of the chat room?\n(Chat rooms are deleted after 2 hours of inactivity)"), latitude, longitude, radius: shape.layer.getRadius(), diff --git a/client/utils/use_chat.js b/client/utils/use_chat.js index d5250bf..b8c07b3 100644 --- a/client/utils/use_chat.js +++ b/client/utils/use_chat.js @@ -5,8 +5,8 @@ import { io } from 'socket.io-client'; export const useChat = (chatRoom) => { const [messages, setMessages] = useState([]); const [connections, setConnections] = useState([]); + const [active, setActive] = useState(true); const messageRef = useRef([]); - const connectionsRef = useRef([]); const [socket, setSocket] = useState({}); const [authToken] = useContext(AuthContext); @@ -28,8 +28,10 @@ export const useChat = (chatRoom) => { setMessages([...messageRef.current]); }); socket.on('userlist', ({ users }) => { - connectionsRef.current = users; - setConnections([...connectionsRef.current]); + setConnections([...users]); + }); + socket.on('inactive', (id) => { + setActive(false); }); return () => { socket.off('new-message'); @@ -44,5 +46,5 @@ export const useChat = (chatRoom) => { } }; - return [connections, messages, sendMessage]; + return [active, connections, messages, sendMessage]; }; diff --git a/server/controllers/chat_room.controller.ts b/server/controllers/chat_room.controller.ts index 9b75c1f..f63549f 100644 --- a/server/controllers/chat_room.controller.ts +++ b/server/controllers/chat_room.controller.ts @@ -19,11 +19,7 @@ const haversine = (p1, p2) => { }; @Controller() export class ChatRoomController { - constructor(private chatRoomService: ChatRoomService, private usersService: UsersService) { - setInterval(() => { - console.log('Hello'); - }, 60 * 1000); - } + constructor(private chatRoomService: ChatRoomService, private usersService: UsersService) {} @Get('/chat_rooms') async get(@JwtBody() jwtBody: JwtBodyDto, @Query() query: any) { diff --git a/server/database/migrations/1648605030863-AddChatRoom.ts b/server/database/migrations/1648605030863-AddChatRoom.ts index e50f049..fc5885b 100644 --- a/server/database/migrations/1648605030863-AddChatRoom.ts +++ b/server/database/migrations/1648605030863-AddChatRoom.ts @@ -44,7 +44,7 @@ export class AddChatRoom1648605030863 implements MigrationInterface { isNullable: true, }, { - name: 'lastConnection', + name: 'lastModified', type: 'timestamp', default: 'now()', }, diff --git a/server/entities/chat_room.entity.ts b/server/entities/chat_room.entity.ts index 36ce585..99e339f 100644 --- a/server/entities/chat_room.entity.ts +++ b/server/entities/chat_room.entity.ts @@ -20,7 +20,7 @@ export class ChatRoom { name: string; @Column() - lastConnection: Date; + lastModified: Date; @ManyToOne(() => User, (user) => user.chatRooms) user: User; diff --git a/server/providers/gateways/chat_room.gateway.ts b/server/providers/gateways/chat_room.gateway.ts index bee83c5..9c305bf 100644 --- a/server/providers/gateways/chat_room.gateway.ts +++ b/server/providers/gateways/chat_room.gateway.ts @@ -28,7 +28,15 @@ export class ChatRoomGateway implements OnGatewayInit, OnGatewayConnection, OnGa private jwtService: JwtService, private userService: UsersService, private chatRoomService: ChatRoomService, - ) {} + ) { + setInterval(async () => { + const inactiveRooms = await chatRoomService.inactiveRooms(); + inactiveRooms.forEach((room) => { + this.server.to(room.id).emit('inactive', room.id); + chatRoomService.remove(room); + }); + }, 5 * (1000 * 60)); + } afterInit(server: Server) { console.log('Sockets initialized'); @@ -38,12 +46,18 @@ export class ChatRoomGateway implements OnGatewayInit, OnGatewayConnection, OnGa try { const jwtBody = this.jwtService.parseToken(client.handshake.auth.token); const user = await this.userService.find(jwtBody.userId); + const chatRoom = await this.chatRoomService.findById(client.handshake.query.chatRoomId as unknown as string); - await this.chatRoomService.connectUser(chatRoom, user); - client.join(chatRoom.id); - this.server.to(chatRoom.id).emit('userlist', { - users: await this.chatRoomService.connectedUsers(chatRoom), - }); + if (chatRoom) { + chatRoom.lastModified = new Date(); + this.chatRoomService.save(chatRoom); + + await this.chatRoomService.connectUser(chatRoom, user); + client.join(chatRoom.id); + this.server.to(chatRoom.id).emit('userlist', { + users: await this.chatRoomService.connectedUsers(chatRoom), + }); + } } catch (e) { throw new WsException(e.message); } @@ -53,11 +67,14 @@ export class ChatRoomGateway implements OnGatewayInit, OnGatewayConnection, OnGa console.log('Client Disconnected'); const jwtBody = this.jwtService.parseToken(client.handshake.auth.token); const user = await this.userService.find(jwtBody.userId); + const chatRoom = await this.chatRoomService.findById(client.handshake.query.chatRoomId as unknown as string); - await this.chatRoomService.disconnectUser(chatRoom, user); - this.server.to(chatRoom.id).emit('userlist', { - users: await this.chatRoomService.connectedUsers(chatRoom), - }); + if (chatRoom) { + await this.chatRoomService.disconnectUser(chatRoom, user); + this.server.to(chatRoom.id).emit('userlist', { + users: await this.chatRoomService.connectedUsers(chatRoom), + }); + } } @SubscribeMessage('message') @@ -67,11 +84,18 @@ export class ChatRoomGateway implements OnGatewayInit, OnGatewayConnection, OnGa @GatewayJwtBody() jwtBody: JwtBodyDto, ) { const user = await this.userService.find(jwtBody.userId); - this.server.to(client.handshake.query.chatRoomId).emit('new-message', { - id: user.id * Math.random() * Math.pow(2, 16) * Date.now(), - content: data, - userName: `${user.firstName} ${user.lastName}`, - userId: user.id, - }); + + const chatRoom = await this.chatRoomService.findById(client.handshake.query.chatRoomId as unknown as string); + if (chatRoom) { + chatRoom.lastModified = new Date(); + this.chatRoomService.save(chatRoom); + + this.server.to(chatRoom.id).emit('new-message', { + id: user.id * Math.random() * Math.pow(2, 16) * Date.now(), + content: data, + userName: `${user.firstName} ${user.lastName}`, + userId: user.id, + }); + } } } diff --git a/server/providers/services/chat_room.service.ts b/server/providers/services/chat_room.service.ts index 148ff19..de08c02 100644 --- a/server/providers/services/chat_room.service.ts +++ b/server/providers/services/chat_room.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@nestjs/common'; import { InjectRepository } from '@nestjs/typeorm'; -import { Repository } from 'typeorm'; +import { Repository, LessThan } from 'typeorm'; import { ChatRoom } from 'server/entities/chat_room.entity'; import { User } from 'server/entities/user.entity'; import { ChatRoomConnection } from 'server/entities/chat_room_connection.entity'; @@ -73,6 +73,17 @@ export class ChatRoomService { return false; }; + async inactiveRooms() { + const inactiveRooms = await this.chatRoomRepository.find({ + where: { + lastModified: LessThan(new Date(Date.now() - 2 * 60 * (1000 * 60))), + }, + }); + return inactiveRooms.filter(async (room) => { + return !(await this.connectedUsers(room)).length; + }); + } + save(chatRoom: ChatRoom) { return this.chatRoomRepository.save(chatRoom); }