with password procection room procection and Jons bugs fixed

Author: cyburns

app/src/components/left/RoomsContainer.tsx

@@ -53,8 +53,15 @@ import {
   DeleteContextPayload,
   addComponentToContext
 } from '../../../src/redux/reducers/slice/contextReducer';
+import { useState } from 'react';
 
 const RoomsContainer = () => {
+  const [isJoinCallabRoom, setIsJoinCollabRoom] = useState(false);
+  const [joinedPasswordAttempt, setJoinedPasswordAttempt] = useState('');
+  const [isPasswordAttemptIncorrect, setIsPasswordAttemptIncorrect] =
+    useState(true);
+  const [isCollabRoomTaken, setIsCollabRoomTaken] = useState(false);
+
   const dispatch = useDispatch();
   const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
   const userName = useSelector((store: RootState) => store.roomSlice.userName);
@@ -68,7 +75,11 @@ const RoomsContainer = () => {
   );
   const messages = useSelector((store: RootState) => store.roomSlice.messages);
 
-  const initSocketConnection = (roomCode: string) => {
+  const initSocketConnection = (
+    roomCode: string,
+    roomPassword: string,
+    method: string
+  ) => {
     // helper function to create socket connection
     initializeSocket();
     // assign socket to result of helper function to return socket created
@@ -77,10 +88,45 @@ const RoomsContainer = () => {
     if (socket) {
       //run everytime when a client connects to server
       socket.on('connect', () => {
-        socket.emit('joining', userName, roomCode);
-        // console.log(`${userName} Joined room ${roomCode} from RoomsContainer`);
+        if (method === 'CREATE') {
+          socket.emit(
+            'creating a room',
+            userName,
+            roomCode,
+            roomPassword,
+            method
+          );
+          // socket.emit('creating', userName, roomCode, roomPassword);
+        } else if (method === 'JOIN') {
+          socket.emit(
+            'creating a room',
+            userName,
+            roomCode,
+            roomPassword,
+            method
+          );
+        }
       });
 
+      socket.on('wrong password', () => {
+        setIsPasswordAttemptIncorrect(false);
+        console.log('WRONG PASSWORD in client');
+      });
+
+      socket.on('correct password', () => {
+        setIsPasswordAttemptIncorrect(true);
+        addNewUserToCollabRoom();
+        console.log('correct in client');
+      });
+
+      socket.on('user created a new room', () => {
+        addNewUserToCollabRoom();
+      });
+
+      socket.on('room is already taken', () => {
+        setIsCollabRoomTaken(true);
+        console.log('room is already taken');
+      });
       //If you are the host: send current state to server when a new user joins
       socket.on('requesting state from host', (callback) => {
         const newState = store.getState(); //pull the current state
@@ -275,23 +321,35 @@ const RoomsContainer = () => {
     }
   };
 
-  const handleUserEnteredRoom = (roomCode) => {
-    initSocketConnection(roomCode);
+  const createNewCollabRoom = () => {
+    if (userList.length !== 0) {
+      dispatch(setUserList([]));
+    }
+
+    initSocketConnection(roomCode, roomPassword, 'CREATE');
   };
 
-  const joinRoom = () => {
-    if (userList.length !== 0) dispatch(setUserList([]));
-    handleUserEnteredRoom(roomCode);
+  const addNewUserToCollabRoom = () => {
     dispatch(setRoomCode(roomCode));
     dispatch(setPassword(roomPassword));
     dispatch(setUserJoined(true));
   };
 
+  const joinExistingCollabRoom = async () => {
+    if (userList.length !== 0) {
+      dispatch(setUserList([]));
+    }
+
+    initSocketConnection(roomCode, joinedPasswordAttempt, 'JOIN');
+  };
+
   const leaveRoom = () => {
     let socket = getSocket();
+
     if (socket) {
       socket.disconnect();
     }
+
     dispatch(setRoomCode(''));
     dispatch(setUserName(''));
     dispatch(setUserList([]));
@@ -303,16 +361,18 @@ const RoomsContainer = () => {
   const checkInputField = (...inputs) => {
     let userName: string = inputs[0].trim();
     let roomCode: string = inputs[1].trim();
-    return userName.length === 0 || roomCode.length === 0;
+    let password: string = inputs[2].trim();
+    return (
+      userName.length === 0 || roomCode.length === 0 || password.length === 0
+    );
   };
 
   const handleKeyDown = (e) => {
     if (e.key === 'Enter' && e.target.id === 'filled-hidden-label-small') {
       e.preventDefault();
-      joinRoom();
+      createNewCollabRoom();
     }
   };
-
   const userColors = [
     '#FC00BD',
     '#D0FC00',
@@ -333,7 +393,6 @@ const RoomsContainer = () => {
           margin: '0 auto 0 auto'
         }}
       >
-        {' '}
         <Typography variant="h5" color={'#f2fbf8'}>
           Live Room: {roomCode}
         </Typography>
@@ -387,7 +446,7 @@ const RoomsContainer = () => {
                   >
                     <ListItemText
                       primary={`${index + 1}. ${
-                        index === 0 ? `${user} (host)` : user
+                        index === 0 ? `${user.userName} (host)` : user.userName
                       }`}
                       style={{ color: userColors[userList.indexOf(user)] }}
                     />
@@ -402,13 +461,12 @@ const RoomsContainer = () => {
                 backgroundColor: '#f2fbf8',
                 color: '#092a26',
                 '&:hover': {
-                  backgroundColor: '#354e9c',
+                  backgroundColor: '#a5ead6',
                   borderColor: '#0062cc'
                 }
               }}
             >
-              {' '}
-              Leave Room{' '}
+              Leave Room
             </Button>
           </>
         ) : (
@@ -424,6 +482,7 @@ const RoomsContainer = () => {
               onChange={(e) => dispatch(setUserName(e.target.value))}
             />
             <TextField
+              error={isCollabRoomTaken}
               fullWidth
               hiddenLabel={true}
               id="filled-hidden-label-small"
@@ -434,33 +493,68 @@ const RoomsContainer = () => {
               onChange={(e) => dispatch(setRoomCode(e.target.value))}
               className="enterRoomInput"
               onKeyDown={handleKeyDown}
+              helperText={isCollabRoomTaken ? 'Room name already taken' : ''}
             />
-            <TextField
-              fullWidth
-              hiddenLabel={true}
-              id="filled-hidden-label-small"
-              variant="standard"
-              size="small"
-              value={roomCode}
-              placeholder="Password"
-              onChange={(e) => dispatch(setPassword(e.target.value))}
-              // className="enterRoomInput"
-            />
+            {isJoinCallabRoom ? (
+              <TextField
+                error={isPasswordAttemptIncorrect === false}
+                fullWidth
+                hiddenLabel={true}
+                id="filled-hidden-label-small"
+                variant="standard"
+                size="small"
+                value={joinedPasswordAttempt}
+                placeholder="Password"
+                helperText={
+                  isPasswordAttemptIncorrect === false
+                    ? 'Incorrect password.'
+                    : ''
+                }
+                onChange={(e) => setJoinedPasswordAttempt(e.target.value)}
+              />
+            ) : (
+              <TextField
+                fullWidth
+                hiddenLabel={true}
+                id="filled-hidden-label-small"
+                variant="standard"
+                size="small"
+                value={roomPassword}
+                placeholder="Password"
+                onChange={(e) => dispatch(setPassword(e.target.value))}
+              />
+            )}
+
             <Button
               variant="contained"
-              disabled={checkInputField(userName, roomCode)}
+              disabled={checkInputField(userName, roomCode, roomCode)}
               fullWidth
-              onClick={() => joinRoom()}
+              onClick={(e) =>
+                isJoinCallabRoom
+                  ? joinExistingCollabRoom()
+                  : createNewCollabRoom()
+              }
               sx={{
                 backgroundColor: '#e9e9e9',
-                color: '#354e9c',
+                color: '#253b80',
                 '&:hover': {
-                  backgroundColor: '#354e9c'
+                  backgroundColor: '#99d7f2'
                 }
               }}
             >
-              Join Room
+              {isJoinCallabRoom ? 'Join' : 'Start'}
             </Button>
+            <Typography
+              onClick={() => setIsJoinCollabRoom(!isJoinCallabRoom)}
+              sx={{
+                color: 'grey',
+                '&:hover': {
+                  textDecoration: 'underline'
+                }
+              }}
+            >
+              {isJoinCallabRoom ? 'Start a new room' : 'Join a room'}
+            </Typography>
           </>
         )}
       </Stack>