improve-live-room-function

Author: namos2502

app/src/components/left/RoomsContainer.tsx

@@ -2,7 +2,7 @@ import { Stack, Typography } from '@mui/material';
 import { useDispatch, useSelector } from 'react-redux';
 
 import Button from '@mui/material/Button';
-import React from 'react';
+import React, { useState } from 'react';
 import { RootState } from '../../redux/store';
 import TextField from '@mui/material/TextField';
 import { allCooperativeState } from '../../redux/reducers/slice/appStateSlice';
@@ -21,8 +21,10 @@ import debounce from '../../../../node_modules/lodash/debounce.js';
 let socket;
 const { API_BASE_URL } = config;
 const RoomsContainer = () => {
-  const [roomCode, setRoomCode] = React.useState('');
-  const [confirmRoom, setConfirmRoom] = React.useState('');
+  const [roomCode, setRoomCode] = useState('');
+  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,
@@ -116,10 +118,19 @@ const RoomsContainer = () => {
     setConfirmRoom((confirmRoom) => roomCode);
     // Call handleUserEnteredRoom when joining a room
     handleUserEnteredRoom(roomCode);
+    setUserJoined(true); //setting joined room to true for rendering leave room button
   }
+
+  function leaveRoom() {
+    if (socket) socket.disconnect(); //disconnecting socket
+    dispatch(changeRoom(''));
+    setRoomCode('');
+    setUserJoined(false); //setting joined to false so join button appear
+  }
+
   return (
     <div>
-      <Stack
+      <Stack //stack styling for container
         spacing={2}
         sx={{
           paddingTop: '20px',
@@ -129,44 +140,57 @@ const RoomsContainer = () => {
         }}
       >
         {' '}
+        {/* live room display */}
         <Typography variant="h6" color={'white'}>
           Live Room: {joinedRoom}
         </Typography>
-        <TextField
-          hiddenLabel
-          id="filled-hidden-label-small"
-          variant="filled"
-          size="small"
-          onChange={(e) => setRoomCode(e.target.value)}
-        />
-        {/* <input
-        type="text"
-        style={{
-          margin: '3px 5%',
-          borderRadius: '5px',
-          padding: '3px',
-          width: '90%'
-        }}
-        placeholder="Room Code"
-        onChange={(e) => setRoomCode(e.target.value)}
-      ></input> */}
-        <Button
-          variant="contained"
-          onClick={() => joinRoom()}
-          sx={{
-            backgroundColor: '#ffffff',
-            color: '#000000',
-            '&:hover': {
-              backgroundColor: '#C6C6C6',
-              borderColor: '#0062cc',
-              boxShadow: 'none'
-            }
-          }}
-        >
-          Join Room
-        </Button>
+        {/*  Set up condition rendering depends on if user joined a room then render leave button if not render join button */}
+        {userJoined ? (
+          <Button
+            variant="contained"
+            onClick={() => leaveRoom()}
+            sx={{
+              backgroundColor: '#ffffff',
+              color: '#000000',
+              '&:hover': {
+                backgroundColor: '#C6C6C6',
+                borderColor: '#0062cc'
+              }
+            }}
+          >
+            {' '}
+            Leave Room{' '}
+          </Button>
+        ) : (
+          <>
+            <TextField
+              hiddenLabel={true}
+              id="filled-hidden-label-small"
+              variant="filled"
+              size="small"
+              value={roomCode}
+              placeholder="Input Room Number"
+              onChange={(e) => setRoomCode(e.target.value)}
+            />
+            <Button
+              variant="contained"
+              disabled={roomCode.trim() === ''}
+              onClick={() => joinRoom()}
+              sx={{
+                backgroundColor: '#ffffff',
+                color: '#000000',
+                '&:hover': {
+                  backgroundColor: '#C6C6C6',
+                  borderColor: '#0062cc'
+                }
+              }}
+            >
+              {' '}
+              Join Room{' '}
+            </Button>
+          </>
+        )}
       </Stack>
-      {/* <button onClick={() => joinRoom()}>Join Room</button> */}
     </div>
   );
 };

app/src/components/top/NavBarButtons.tsx

@@ -254,33 +254,6 @@ function navbarDropDown(props) {
   //   // Call handleUserEnteredRoom when joining a room
   //   handleUserEnteredRoom(roomCode);
   // }
-<<<<<<< HEAD
-  // Part - Dark Mode
-  const switchDark = isDarkMode ? (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      fill="currentColor"
-      className="bi bi-lightbulb"
-      viewBox="0 0 16 16"
-    >
-      <path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z" />
-    </svg>
-  ) : (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      fill="currentColor"
-      className="bi bi-moon"
-      viewBox="0 0 16 16"
-    >
-      <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z" />
-    </svg>
-  );
-=======
->>>>>>> dev
 
   let showMenu = props.dropMenu ? 'navDropDown' : 'hideNavDropDown';
 
@@ -354,14 +327,6 @@ function navbarDropDown(props) {
           <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z" />
         </svg>
       </button>
-<<<<<<< HEAD
-      {/* {<ExportButton />} */}
-      {/* 
-      <button onClick={handleDarkModeToggle}>
-        {isDarkMode ? 'Light' : 'Dark'} Mode {switchDark}
-      </button> */}
-=======
->>>>>>> dev
       {state.isLoggedIn && (
         <button onClick={handleClick}>
           Manage Project

server/server.ts

@@ -95,6 +95,7 @@ const io = new Server(httpServer, {
   }
 });
 
+
 io.on('connection', (socket) => {
   console.log('Socket ID: -----', socket.id);
   socket.on('custom-event', (string, redux_store, room) => {
@@ -171,7 +172,7 @@ app.post(
   sessionController.startSession,
   (req, res) => res.status(200).json({ sessionId: res.locals.ssid })
 );
-
+let getusername ='';
 //confirming whether user is logged in for index.tsx rendering
 app.get('/loggedIn', sessionController.isLoggedIn, (req, res) =>
   res.status(200).json(res.locals.loggedIn)