Fix some bugs

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 = () => {
         </div>
       </div>
       <div>
-        <textarea
-          placeholder={'Message'}
-          className="input"
-          onChange={(e) => setMessage(e.target.value)}
-          value={message}
-          rows={1}
-          cols={30}
-        ></textarea>
-        <div className="button" onClick={sendThisMessage}>
-          Send
-        </div>
+        {active ? (
+          <>
+            <textarea
+              placeholder={'Message'}
+              className="input"
+              onChange={(e) => setMessage(e.target.value)}
+              value={message}
+              rows={1}
+              cols={30}
+            ></textarea>
+            <div className="button" onClick={sendThisMessage}>
+              Send
+            </div>
+          </>
+        ) : (
+          <div>
+            <p>This room has been marked inactive and has been deleted.</p>
+          </div>
+        )}
         <div className="button">
           <Link to="/">Back to map</Link>
         </div>

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(),

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];
 };

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) {

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()',
           },

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;

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,
+      });
+    }
   }
 }

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);
   }