Merge branch 'dev' into hadrian/ts

Author: HadriChan

app/src/components/StateManagement/CreateTab/components/TablePassedInProps.tsx

@@ -1,31 +1,31 @@
 import React, { useState, useEffect } from 'react';
-import {
-  DataGrid,
-  GridEditRowsModel
-} from '@mui/x-data-grid';
+import { DataGrid, GridEditRowsModel } from '@mui/x-data-grid';
 import Button from '@mui/material/Button';
 import ClearIcon from '@mui/icons-material/Clear';
 import makeStyles from '@mui/styles/makeStyles';
 import { useDispatch, useSelector } from 'react-redux';
 import { deletePassedInProps } from '../../../../redux/reducers/slice/appStateSlice';
-import { RootState } from '../../../../redux/store'
+import { RootState } from '../../../../redux/store';
+import { ColumnTab } from '../../../../interfaces/Interfaces';
 
-
-const TablePassedInProps = props => {
-  const { state, contextParam } = useSelector((store:RootState) => ({
+const TablePassedInProps = (props) => {
+  const { state, contextParam } = useSelector((store: RootState) => ({
     state: store.appState,
-    contextParam: store.contextSlice,
+    contextParam: store.contextSlice
   }));
   const dispatch = useDispatch();
   const classes = useStyles();
   const [editRowsModel] = useState<GridEditRowsModel>({});
   const [gridColumns, setGridColumns] = useState([]);
   const currentId = state.canvasFocus.componentId;
   const currentComponent = state.components[currentId - 1];
-  const passedInProps = (currentComponent.name !== 'App' && currentComponent.name !== 'index') ? currentComponent.passedInProps : [];
+  const passedInProps =
+    currentComponent.name !== 'App' && currentComponent.name !== 'index'
+      ? currentComponent.passedInProps
+      : [];
 
   //formatting for data grid columns
-  const columnTabs = [
+  const columnTabs: ColumnTab[] = [
     {
       field: 'id',
       headerName: 'ID',
@@ -66,7 +66,6 @@ const TablePassedInProps = props => {
           >
             <ClearIcon style={{ width: `${15}px` }} />
           </Button>
-
         );
       }
     }
@@ -76,7 +75,7 @@ const TablePassedInProps = props => {
     // get the current focused component
     // remove the state that the button is clicked
     // send a dispatch to rerender the table
-    dispatch(deletePassedInProps({ rowId: rowId, contextParam: contextParam }))
+    dispatch(deletePassedInProps({ rowId: rowId, contextParam: contextParam }));
   };
 
   useEffect(() => {
@@ -89,14 +88,12 @@ const TablePassedInProps = props => {
     } else {
       setGridColumns(columnTabs.slice(0, gridColumns.length - 1));
     }
-
   }, [state.canvasFocus.componentId]);
 
   // fill data grid rows with all of the passed in props from parent component (if there are any)
   let rows: any = passedInProps?.slice();
   //let rows: readonly StateProp[] = passedInProps?.slice() || [];
 
-
   return (
     <div className={'state-prop-grid'}>
       <DataGrid
@@ -115,10 +112,10 @@ const TablePassedInProps = props => {
 const useStyles = makeStyles({
   themeLight: {
     color: 'white',
-    '& button:hover':{
+    '& button:hover': {
       backgroundColor: 'LightGray'
     },
-    '& button':{
+    '& button': {
       color: 'white'
     },
     '& .MuiTablePagination-root': {

app/src/components/StateManagement/CreateTab/components/TableStateProps.tsx

@@ -1,31 +1,28 @@
 import React, { useState, useEffect } from 'react';
-import {
-  DataGrid,
-  GridEditRowsModel
-} from '@mui/x-data-grid';
+import { DataGrid, GridEditRowsModel } from '@mui/x-data-grid';
 import Button from '@mui/material/Button';
 import ClearIcon from '@mui/icons-material/Clear';
 import makeStyles from '@mui/styles/makeStyles';
 import { StatePropsPanelProps } from '../../../../interfaces/Interfaces';
 import { useDispatch, useSelector } from 'react-redux';
 import { deleteState } from '../../../../redux/reducers/slice/appStateSlice';
-import { RootState } from '../../../../redux/store'
-
-// updates state mgmt boxes and data grid 
-const TableStateProps = props => {
-  const { state, contextParam } = useSelector((store:RootState) => ({
+import { RootState } from '../../../../redux/store';
+import { ColumnTab } from '../../../../interfaces/Interfaces';
+// updates state mgmt boxes and data grid
+const TableStateProps = (props) => {
+  const { state, contextParam } = useSelector((store: RootState) => ({
     state: store.appState,
-    contextParam: store.contextSlice,
+    contextParam: store.contextSlice
   }));
   const dispatch = useDispatch();
   const classes = useStyles();
   const [editRowsModel] = useState<GridEditRowsModel>({});
   const [gridColumns, setGridColumns] = useState([]);
   const currentId = state.canvasFocus.componentId;
   const currentComponent = state.components[currentId - 1];
-  
-  // formatting for data grid columns 
-  const columnTabs = [
+
+  // formatting for data grid columns
+  const columnTabs: ColumnTab[] = [
     {
       field: 'id',
       headerName: 'ID',
@@ -43,10 +40,10 @@ const TableStateProps = props => {
       headerName: 'Initial Value',
       width: 100,
       editable: true,
-      valueGetter: (param) => { //to display the actual object or array instead of [object Object], leave undefined if it is setter function
-        if(param.row.type === 'func')
-          return;
-        return JSON.stringify(param.row.value)
+      valueGetter: (param) => {
+        //to display the actual object or array instead of [object Object], leave undefined if it is setter function
+        if (param.row.type === 'func') return;
+        return JSON.stringify(param.row.value);
       }
     },
     {
@@ -63,7 +60,7 @@ const TableStateProps = props => {
       renderCell: function renderCell(params: any) {
         return (
           <Button
-            style={{ width: `${3}px`, color: 'black'}}
+            style={{ width: `${3}px`, color: 'black' }}
             onClick={() => {
               handleDeleteState(params.id);
             }}
@@ -76,32 +73,39 @@ const TableStateProps = props => {
   ];
 
   const handleDeleteState = (selectedId) => {
-      const currentId = state.canvasFocus.componentId;
-      const currentComponent = state.components[currentId - 1];
-      const filtered = currentComponent.stateProps.filter(
-        element => element.id !== selectedId
-      );
-      dispatch(deleteState({stateProps: filtered, rowId: selectedId, contextParam: contextParam}))
+    const currentId = state.canvasFocus.componentId;
+    const currentComponent = state.components[currentId - 1];
+    const filtered = currentComponent.stateProps.filter(
+      (element) => element.id !== selectedId
+    );
+    dispatch(
+      deleteState({
+        stateProps: filtered,
+        rowId: selectedId,
+        contextParam: contextParam
+      })
+    );
   };
 
   useEffect(() => {
     setGridColumns(columnTabs);
   }, [props.isThemeLight]);
 
   const { selectHandler }: StatePropsPanelProps = props;
-  
+
   useEffect(() => {
     if (props.canDeleteState) {
       setGridColumns(columnTabs);
     } else {
       setGridColumns(columnTabs.slice(0, gridColumns.length - 1));
     }
-
   }, [state.canvasFocus.componentId]);
 
   // rows to show are either from current component or from a given provider
   let rows = [];
-  currentComponent.stateProps?.forEach((prop) =>{ rows.push(prop)}); 
+  currentComponent.stateProps?.forEach((prop) => {
+    rows.push(prop);
+  });
 
   return (
     <div className={'state-prop-grid'}>
@@ -122,10 +126,10 @@ const TableStateProps = props => {
 const useStyles = makeStyles({
   themeLight: {
     color: 'white',
-    '& button:hover':{
+    '& button:hover': {
       backgroundColor: 'LightGray'
     },
-    '& button':{
+    '& button': {
       color: 'white'
     }
   },

app/src/components/left/RoomsContainer.tsx

@@ -30,6 +30,7 @@ let socket;
 const { API_BASE_URL } = config;
 const RoomsContainer = () => {
   const dispatch = useDispatch();
+  //roomCode/userName for emiting to socket io, userList for displaying user List receiving from back end, userJoined fo conditional rendering between join and leave room.
   const { roomCode, userName, userList, userJoined } = useSelector(
     (store: RootState) => ({
       roomCode: store.roomSlice.roomCode,
@@ -41,9 +42,8 @@ const RoomsContainer = () => {
 
   function initSocketConnection(roomCode: string) {
     if (socket) socket.disconnect(); //edge case check if socket connection existed
-
+    //establishing client and server connection
     socket = io(API_BASE_URL, {
-      //establishing client and server connection
       transports: ['websocket']
     });
 
@@ -77,27 +77,28 @@ const RoomsContainer = () => {
     // receiving the message from the back end
     socket.on('new state from back', (event) => {
       const currentStore = JSON.parse(JSON.stringify(store.getState()));
-      const parsedEvent = JSON.parse(event);
+      const newState = JSON.parse(event);
 
       const areStatesEqual = (stateA, stateB) =>
         JSON.stringify(stateA) === JSON.stringify(stateB);
 
-      if (!areStatesEqual(currentStore, parsedEvent)) {
-        if (!areStatesEqual(currentStore.appState, parsedEvent.appState)) {
-          store.dispatch(allCooperativeState(parsedEvent.appState));
+      //checking if current state are equal to the state being sent from server
+      if (!areStatesEqual(currentStore, newState)) {
+        if (!areStatesEqual(currentStore.appState, newState.appState)) {
+          store.dispatch(allCooperativeState(newState.appState));
         } else if (
           !areStatesEqual(
             currentStore.codePreviewSlice,
-            parsedEvent.codePreviewCooperative
+            newState.codePreviewCooperative
           )
         ) {
           store.dispatch(
-            codePreviewCooperative(parsedEvent.codePreviewCooperative)
+            codePreviewCooperative(newState.codePreviewCooperative)
           );
         } else if (
-          !areStatesEqual(currentStore.styleSlice, parsedEvent.styleSlice)
+          !areStatesEqual(currentStore.styleSlice, newState.styleSlice)
         ) {
-          store.dispatch(cooperativeStyle(parsedEvent.styleSlice));
+          store.dispatch(cooperativeStyle(newState.styleSlice));
         }
       }
     });
@@ -144,7 +145,7 @@ const RoomsContainer = () => {
     dispatch(setRoomCode(''));
     dispatch(setUserName(''));
     dispatch(setUserList([]));
-    dispatch(setUserJoined(false)); //setting joined to false so join button appear
+    dispatch(setUserJoined(false)); //setting joined to false so join room UI appear
   }
 
   //checking empty input field (not including spaces)
@@ -196,6 +197,7 @@ const RoomsContainer = () => {
             >
               Users: {userList.length}
             </Typography>
+            {/* User count inside the box */}
             <Box
               sx={{
                 width: '100%',
@@ -206,17 +208,34 @@ const RoomsContainer = () => {
                 borderRadius: '5%',
                 display: 'flex',
                 flexDirection: 'column',
-                justifyContent: 'center', // Center vertically
                 alignItems: 'center',
                 overflow: 'auto',
                 color: 'white'
               }}
             >
               {/* User count inside the box */}
-              <List sx={{ justifyContent: 'center', alignItems: 'flex-start' }}>
+              <List
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  padding: 0
+                }}
+              >
                 {userList.map((user, index) => (
-                  <ListItem key={index} sx={{ color: 'white' }}>
-                    <ListItemText primary={user} />
+                  <ListItem
+                    key={index}
+                    sx={{
+                      color: 'white',
+                      textAlign: 'center',
+                      width: '100%'
+                    }}
+                  >
+                    <ListItemText
+                      primary={`${index + 1}. ${
+                        index === 0 ? `${user} (host)` : user
+                      }`}
+                    />
                   </ListItem>
                 ))}
               </List>
@@ -256,11 +275,24 @@ const RoomsContainer = () => {
                 }
               }}
             >
-              {' '}
-              Join Room{' '}
+              Join Room
             </Button>
+            {/* Note about Collab room feature */}
           </>
         )}
+        <Typography
+          variant="body2"
+          color="white" // Use a color that signifies a warning or important information
+          sx={{
+            marginTop: '10px',
+            textAlign: 'center',
+            fontStyle: 'italic',
+            fontSize: 'smaller'
+          }}
+        >
+          Note: For the best experience, limit Collab room occupancy to 3
+          people. Exceeding this limit may lead to app performance issues.
+        </Typography>
       </Stack>
     </div>
   );

app/src/components/main/DeleteButton.tsx

@@ -5,8 +5,7 @@ import { deleteChild } from '../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../redux/store';
 
 function DeleteButton({ id, name }: DeleteButtons) {
-  const { state, contextParam } = useSelector((store:RootState) => ({
-    state: store.appState,
+  const { contextParam } = useSelector((store:RootState) => ({
     contextParam: store.contextSlice,
   }));