Collaboration-Room-Improved

Author: namos2502

app/src/components/left/RoomsContainer.tsx

@@ -22,9 +22,12 @@ let socket;
 const { API_BASE_URL } = config;
 const RoomsContainer = () => {
   const [roomCode, setRoomCode] = useState('');
-  const [confirmRoom, setConfirmRoom] = useState('');
+  const [userName, setUserName] = useState('');
+  const [userList, setUserList] = useState(new Map());
+  // const [confirmRoom, setConfirmRoom] = useState('');
   const [userJoined, setUserJoined] = useState(false); //setting up state for joinning a room
   const [emptyInput, setEmptyInput] = useState(false);
+
   const dispatch = useDispatch();
   const { state, joinedRoom } = useSelector((store: RootState) => ({
     state: store.appState,
@@ -45,27 +48,28 @@ const RoomsContainer = () => {
     });
 
     socket.on('connect', () => {
-      console.log(`You connected with id: ${socket.id}`);
+      console.log(`You Connected With Id: ${socket.id}`);
       socket.emit('join-room', roomCode); // Join the room when connected
+      //passing current client nickname to server
+      console.log(`Your Nickname Is: ${userName}`);
+      socket.emit('user', userName);
     });
 
-    // Receiving the room state from the backend
-    socket.on('room-state-update', (stateFromServer) => {
-      const newState = JSON.parse(stateFromServer);
-      // Dispatch actions to update your Redux store with the received state
-      store.dispatch(allCooperativeState(newState.appState));
-      store.dispatch(codePreviewCooperative(newState.codePreviewCooperative));
-      store.dispatch(cooperativeStyle(newState.styleSlice));
-    });
+    // // Receiving the room state from the backend
+    // socket.on('room-state-update', (stateFromServer) => {
+    //   const newState = JSON.parse(stateFromServer);
+    //   // Dispatch actions to update your Redux store with the received state
+    //   store.dispatch(allCooperativeState(newState.appState));
+    //   store.dispatch(codePreviewCooperative(newState.codePreviewCooperative));
+    //   store.dispatch(cooperativeStyle(newState.styleSlice));
+    // });
 
     // receiving the message from the back end
     socket.on('receive message', (event) => {
-      // console.log('message from server: ', event);
       let currentStore: any = JSON.stringify(store.getState());
       if (currentStore !== event) {
         currentStore = JSON.parse(currentStore);
         event = JSON.parse(event);
-
         if (currentStore.appState !== event.appState) {
           store.dispatch(allCooperativeState(event.appState));
         } else if (
@@ -86,15 +90,16 @@ const RoomsContainer = () => {
   let previousState = store.getState();
   // console.log('Store States: ', store.getState);
   // sending info to backend whenever the redux store changes
+  //working!
   const handleStoreChange = debounce(() => {
     const newState = store.getState();
     const roomCode = newState.roomCodeSlice.roomCode;
 
     if (roomCode !== '') {
+      //why emitting room code every 100 milisecond
       // Emit the current room code
       socket.emit('room-code', roomCode);
     }
-
     if (newState !== previousState) {
       // Send the current state to the server
       socket.emit(
@@ -114,20 +119,32 @@ const RoomsContainer = () => {
   });
 
   function joinRoom() {
-    dispatch(changeRoom(roomCode));
-    setConfirmRoom((confirmRoom) => roomCode);
     // Call handleUserEnteredRoom when joining a room
     handleUserEnteredRoom(roomCode);
+    dispatch(changeRoom(roomCode));
+    // setConfirmRoom((confirmRoom) => roomCode);
     setUserJoined(true); //setting joined room to true for rendering leave room button
   }
 
   function leaveRoom() {
     if (socket) socket.disconnect(); //disconnecting socket
     dispatch(changeRoom(''));
     setRoomCode('');
+    setUserName('');
     setUserJoined(false); //setting joined to false so join button appear
   }
 
+  //checking if both text field have any input (not including spaces)
+  function checkInputField(...inputs: any) {
+    let userName: String = inputs[0].trim();
+    let roomCode: String = inputs[1].trim();
+    if (userName.length !== 0 && roomCode.length !== 0) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
   return (
     <div>
       <Stack //stack styling for container
@@ -163,6 +180,15 @@ const RoomsContainer = () => {
           </Button>
         ) : (
           <>
+            <TextField
+              hiddenLabel={true}
+              id="filled-hidden-label-small"
+              variant="filled"
+              size="small"
+              value={userName}
+              placeholder="Input nickname"
+              onChange={(e) => setUserName(e.target.value)}
+            />
             <TextField
               hiddenLabel={true}
               id="filled-hidden-label-small"
@@ -172,9 +198,10 @@ const RoomsContainer = () => {
               placeholder="Input Room Number"
               onChange={(e) => setRoomCode(e.target.value)}
             />
+
             <Button
               variant="contained"
-              disabled={roomCode.trim() === ''}
+              disabled={checkInputField(userName, roomCode)}
               onClick={() => joinRoom()}
               sx={{
                 backgroundColor: '#ffffff',

app/src/components/top/NavBarButtons.tsx

@@ -184,13 +184,13 @@ function navbarDropDown(props) {
 
   const [modal, setModal] = React.useState(null);
   const [anchorEl, setAnchorEl] = React.useState(null);
-  const [roomCode, setRoomCode] = React.useState('');
-  const [confirmRoom, setConfirmRoom] = React.useState('');
+  // const [roomCode, setRoomCode] = React.useState('');
+  // const [confirmRoom, setConfirmRoom] = React.useState('');
   const classes = useStyles();
 
-  const { state, joinedRoom } = useSelector((store: RootState) => ({
+  const { state } = useSelector((store: RootState) => ({
     state: store.appState,
-    joinedRoom: store.roomCodeSlice.roomCode
+    // joinedRoom: store.roomCodeSlice.roomCode
   }));
   const closeModal = () => setModal('');
   const handleClick = (event) => {

server/controllers/userController.ts

@@ -25,6 +25,20 @@ const randomPassword = () => {
 };
 
 const userController: UserController = {
+  getUser: async (req, res, next) => {
+    try{
+    const { username } = req.body;
+    const user = await Users.findOne({username});
+    res.locals.user = user;
+    return next();
+    } catch(err) {
+      return next({
+        log: 'error caught in getUsername middleware',
+        status: 400,
+        message: {err: 'cannot get username'}
+      })
+    }
+  },
   createUser: (req, res, next) => {
     let email, username, password;
     // use this condition for Oauth login

server/interfaces.ts

@@ -46,6 +46,7 @@ export interface newUserError extends NativeError {
 }
 
 export interface UserController {
+  getUser: RequestHandler;
   createUser: RequestHandler;
   verifyUser: RequestHandler;
 }

server/server.ts

@@ -87,28 +87,44 @@ app.use('/auth', authRoutes);
 import { createServer } from 'http';
 import { Server } from 'socket.io';
 
+
 const httpServer = createServer(app);
 const io = new Server(httpServer, {
   transports: ['websocket'],
   cors: {
     origin: ['http://localhost:5656', 'http://localhost:8080', API_BASE_URL]
   }
 });
-
+//creating map for user list
+const userList = new Map();
 io.on('connection', (socket) => {
   console.log('Socket ID: -----', socket.id);
   socket.on('custom-event', (string, redux_store, room) => {
-    console.log('Room Code', room);
+    console.log(string);
     if (room) {
+      //sending to sender client, only if they are in room
       socket.to(room).emit('receive message', redux_store);
     } else {
+      //send to all connected clients except the one that sent the message
       socket.broadcast.emit('receive message', redux_store);
     }
   });
   socket.on('room-code', (roomCode) => {
-    console.log('joined room: ', roomCode);
+    //working
     socket.join(roomCode);
   });
+  socket.on('user', (userName) => {
+    //working
+    userList.set(socket.id, userName);
+    io.emit('updateUserList', userList);
+  });
+  socket.on('disconnect', () => {
+    const userName = userList.get(socket.id);
+    console.log('User list before remove user', userList);
+    userList.delete(socket.id); //remove the user from the obj
+    console.log('User list after remove user', userList);
+    io.emit('disconnected', userName);
+  });
 });
 
 /*
@@ -167,6 +183,7 @@ app.post(
 app.post(
   '/login',
   userController.verifyUser,
+  userController.getUser,
   cookieController.setSSIDCookie,
   sessionController.startSession,
   (req, res) => res.status(200).json({ sessionId: res.locals.ssid })

tsconfig.json

@@ -13,7 +13,11 @@
     "allowSyntheticDefaultImports": true,
     "strictFunctionTypes": false,
     "esModuleInterop": true,
-    "typeRoots": ["node_modules/@types", "node_modules/@types/node", "@aws-amplify/core"],
+    "typeRoots": [
+      "node_modules/@types",
+      "node_modules/@types/node",
+      "@aws-amplify/core"
+    ],
     "noEmitOnError": false
   },
   // only compile ts files in this directory