Skip to content

Commit 6ec20f9

Browse files
sonyahu15sonyahu15
authored
Merge pull request #14 from oslabs-beta/new
room container improved, typescript conversion
2 parents 7cce827 + 0d5e888 commit 6ec20f9

File tree

11 files changed

+146
-101
lines changed

11 files changed

+146
-101
lines changed

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

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
11
import React, { useState, useEffect } from 'react';
2-
import {
3-
DataGrid,
4-
GridEditRowsModel
5-
} from '@mui/x-data-grid';
2+
import { DataGrid, GridEditRowsModel } from '@mui/x-data-grid';
63
import Button from '@mui/material/Button';
74
import ClearIcon from '@mui/icons-material/Clear';
85
import makeStyles from '@mui/styles/makeStyles';
96
import { useDispatch, useSelector } from 'react-redux';
107
import { deletePassedInProps } from '../../../../redux/reducers/slice/appStateSlice';
11-
import { RootState } from '../../../../redux/store'
8+
import { RootState } from '../../../../redux/store';
9+
import { ColumnTab } from '../../../../interfaces/Interfaces';
1210

13-
14-
const TablePassedInProps = props => {
15-
const { state, contextParam } = useSelector((store:RootState) => ({
11+
const TablePassedInProps = (props) => {
12+
const { state, contextParam } = useSelector((store: RootState) => ({
1613
state: store.appState,
17-
contextParam: store.contextSlice,
14+
contextParam: store.contextSlice
1815
}));
1916
const dispatch = useDispatch();
2017
const classes = useStyles();
2118
const [editRowsModel] = useState<GridEditRowsModel>({});
2219
const [gridColumns, setGridColumns] = useState([]);
2320
const currentId = state.canvasFocus.componentId;
2421
const currentComponent = state.components[currentId - 1];
25-
const passedInProps = (currentComponent.name !== 'App' && currentComponent.name !== 'index') ? currentComponent.passedInProps : [];
22+
const passedInProps =
23+
currentComponent.name !== 'App' && currentComponent.name !== 'index'
24+
? currentComponent.passedInProps
25+
: [];
2626

2727
//formatting for data grid columns
28-
const columnTabs = [
28+
const columnTabs: ColumnTab[] = [
2929
{
3030
field: 'id',
3131
headerName: 'ID',
@@ -66,7 +66,6 @@ const TablePassedInProps = props => {
6666
>
6767
<ClearIcon style={{ width: `${15}px` }} />
6868
</Button>
69-
7069
);
7170
}
7271
}
@@ -76,7 +75,7 @@ const TablePassedInProps = props => {
7675
// get the current focused component
7776
// remove the state that the button is clicked
7877
// send a dispatch to rerender the table
79-
dispatch(deletePassedInProps({ rowId: rowId, contextParam: contextParam }))
78+
dispatch(deletePassedInProps({ rowId: rowId, contextParam: contextParam }));
8079
};
8180

8281
useEffect(() => {
@@ -89,14 +88,12 @@ const TablePassedInProps = props => {
8988
} else {
9089
setGridColumns(columnTabs.slice(0, gridColumns.length - 1));
9190
}
92-
9391
}, [state.canvasFocus.componentId]);
9492

9593
// fill data grid rows with all of the passed in props from parent component (if there are any)
9694
let rows: any = passedInProps?.slice();
9795
//let rows: readonly StateProp[] = passedInProps?.slice() || [];
9896

99-
10097
return (
10198
<div className={'state-prop-grid'}>
10299
<DataGrid
@@ -115,10 +112,10 @@ const TablePassedInProps = props => {
115112
const useStyles = makeStyles({
116113
themeLight: {
117114
color: 'white',
118-
'& button:hover':{
115+
'& button:hover': {
119116
backgroundColor: 'LightGray'
120117
},
121-
'& button':{
118+
'& button': {
122119
color: 'white'
123120
},
124121
'& .MuiTablePagination-root': {

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

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,28 @@
11
import React, { useState, useEffect } from 'react';
2-
import {
3-
DataGrid,
4-
GridEditRowsModel
5-
} from '@mui/x-data-grid';
2+
import { DataGrid, GridEditRowsModel } from '@mui/x-data-grid';
63
import Button from '@mui/material/Button';
74
import ClearIcon from '@mui/icons-material/Clear';
85
import makeStyles from '@mui/styles/makeStyles';
96
import { StatePropsPanelProps } from '../../../../interfaces/Interfaces';
107
import { useDispatch, useSelector } from 'react-redux';
118
import { deleteState } from '../../../../redux/reducers/slice/appStateSlice';
12-
import { RootState } from '../../../../redux/store'
13-
14-
// updates state mgmt boxes and data grid
15-
const TableStateProps = props => {
16-
const { state, contextParam } = useSelector((store:RootState) => ({
9+
import { RootState } from '../../../../redux/store';
10+
import { ColumnTab } from '../../../../interfaces/Interfaces';
11+
// updates state mgmt boxes and data grid
12+
const TableStateProps = (props) => {
13+
const { state, contextParam } = useSelector((store: RootState) => ({
1714
state: store.appState,
18-
contextParam: store.contextSlice,
15+
contextParam: store.contextSlice
1916
}));
2017
const dispatch = useDispatch();
2118
const classes = useStyles();
2219
const [editRowsModel] = useState<GridEditRowsModel>({});
2320
const [gridColumns, setGridColumns] = useState([]);
2421
const currentId = state.canvasFocus.componentId;
2522
const currentComponent = state.components[currentId - 1];
26-
27-
// formatting for data grid columns
28-
const columnTabs = [
23+
24+
// formatting for data grid columns
25+
const columnTabs: ColumnTab[] = [
2926
{
3027
field: 'id',
3128
headerName: 'ID',
@@ -43,10 +40,10 @@ const TableStateProps = props => {
4340
headerName: 'Initial Value',
4441
width: 100,
4542
editable: true,
46-
valueGetter: (param) => { //to display the actual object or array instead of [object Object], leave undefined if it is setter function
47-
if(param.row.type === 'func')
48-
return;
49-
return JSON.stringify(param.row.value)
43+
valueGetter: (param) => {
44+
//to display the actual object or array instead of [object Object], leave undefined if it is setter function
45+
if (param.row.type === 'func') return;
46+
return JSON.stringify(param.row.value);
5047
}
5148
},
5249
{
@@ -63,7 +60,7 @@ const TableStateProps = props => {
6360
renderCell: function renderCell(params: any) {
6461
return (
6562
<Button
66-
style={{ width: `${3}px`, color: 'black'}}
63+
style={{ width: `${3}px`, color: 'black' }}
6764
onClick={() => {
6865
handleDeleteState(params.id);
6966
}}
@@ -76,32 +73,39 @@ const TableStateProps = props => {
7673
];
7774

7875
const handleDeleteState = (selectedId) => {
79-
const currentId = state.canvasFocus.componentId;
80-
const currentComponent = state.components[currentId - 1];
81-
const filtered = currentComponent.stateProps.filter(
82-
element => element.id !== selectedId
83-
);
84-
dispatch(deleteState({stateProps: filtered, rowId: selectedId, contextParam: contextParam}))
76+
const currentId = state.canvasFocus.componentId;
77+
const currentComponent = state.components[currentId - 1];
78+
const filtered = currentComponent.stateProps.filter(
79+
(element) => element.id !== selectedId
80+
);
81+
dispatch(
82+
deleteState({
83+
stateProps: filtered,
84+
rowId: selectedId,
85+
contextParam: contextParam
86+
})
87+
);
8588
};
8689

8790
useEffect(() => {
8891
setGridColumns(columnTabs);
8992
}, [props.isThemeLight]);
9093

9194
const { selectHandler }: StatePropsPanelProps = props;
92-
95+
9396
useEffect(() => {
9497
if (props.canDeleteState) {
9598
setGridColumns(columnTabs);
9699
} else {
97100
setGridColumns(columnTabs.slice(0, gridColumns.length - 1));
98101
}
99-
100102
}, [state.canvasFocus.componentId]);
101103

102104
// rows to show are either from current component or from a given provider
103105
let rows = [];
104-
currentComponent.stateProps?.forEach((prop) =>{ rows.push(prop)});
106+
currentComponent.stateProps?.forEach((prop) => {
107+
rows.push(prop);
108+
});
105109

106110
return (
107111
<div className={'state-prop-grid'}>
@@ -122,10 +126,10 @@ const TableStateProps = props => {
122126
const useStyles = makeStyles({
123127
themeLight: {
124128
color: 'white',
125-
'& button:hover':{
129+
'& button:hover': {
126130
backgroundColor: 'LightGray'
127131
},
128-
'& button':{
132+
'& button': {
129133
color: 'white'
130134
}
131135
},

‎app/src/components/left/RoomsContainer.tsx

Lines changed: 49 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ let socket;
3030
const { API_BASE_URL } = config;
3131
const RoomsContainer = () => {
3232
const dispatch = useDispatch();
33+
//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.
3334
const { roomCode, userName, userList, userJoined } = useSelector(
3435
(store: RootState) => ({
3536
roomCode: store.roomSlice.roomCode,
@@ -41,9 +42,8 @@ const RoomsContainer = () => {
4142

4243
function initSocketConnection(roomCode: string) {
4344
if (socket) socket.disconnect(); //edge case check if socket connection existed
44-
45+
//establishing client and server connection
4546
socket = io(API_BASE_URL, {
46-
//establishing client and server connection
4747
transports: ['websocket']
4848
});
4949

@@ -77,27 +77,28 @@ const RoomsContainer = () => {
7777
// receiving the message from the back end
7878
socket.on('new state from back', (event) => {
7979
const currentStore = JSON.parse(JSON.stringify(store.getState()));
80-
const parsedEvent = JSON.parse(event);
80+
const newState = JSON.parse(event);
8181

8282
const areStatesEqual = (stateA, stateB) =>
8383
JSON.stringify(stateA) === JSON.stringify(stateB);
8484

85-
if (!areStatesEqual(currentStore, parsedEvent)) {
86-
if (!areStatesEqual(currentStore.appState, parsedEvent.appState)) {
87-
store.dispatch(allCooperativeState(parsedEvent.appState));
85+
//checking if current state are equal to the state being sent from server
86+
if (!areStatesEqual(currentStore, newState)) {
87+
if (!areStatesEqual(currentStore.appState, newState.appState)) {
88+
store.dispatch(allCooperativeState(newState.appState));
8889
} else if (
8990
!areStatesEqual(
9091
currentStore.codePreviewSlice,
91-
parsedEvent.codePreviewCooperative
92+
newState.codePreviewCooperative
9293
)
9394
) {
9495
store.dispatch(
95-
codePreviewCooperative(parsedEvent.codePreviewCooperative)
96+
codePreviewCooperative(newState.codePreviewCooperative)
9697
);
9798
} else if (
98-
!areStatesEqual(currentStore.styleSlice, parsedEvent.styleSlice)
99+
!areStatesEqual(currentStore.styleSlice, newState.styleSlice)
99100
) {
100-
store.dispatch(cooperativeStyle(parsedEvent.styleSlice));
101+
store.dispatch(cooperativeStyle(newState.styleSlice));
101102
}
102103
}
103104
});
@@ -144,7 +145,7 @@ const RoomsContainer = () => {
144145
dispatch(setRoomCode(''));
145146
dispatch(setUserName(''));
146147
dispatch(setUserList([]));
147-
dispatch(setUserJoined(false)); //setting joined to false so join button appear
148+
dispatch(setUserJoined(false)); //setting joined to false so join room UI appear
148149
}
149150

150151
//checking empty input field (not including spaces)
@@ -196,6 +197,7 @@ const RoomsContainer = () => {
196197
>
197198
Users: {userList.length}
198199
</Typography>
200+
{/* User count inside the box */}
199201
<Box
200202
sx={{
201203
width: '100%',
@@ -206,17 +208,34 @@ const RoomsContainer = () => {
206208
borderRadius: '5%',
207209
display: 'flex',
208210
flexDirection: 'column',
209-
justifyContent: 'center', // Center vertically
210211
alignItems: 'center',
211212
overflow: 'auto',
212213
color: 'white'
213214
}}
214215
>
215216
{/* User count inside the box */}
216-
<List sx={{ justifyContent: 'center', alignItems: 'flex-start' }}>
217+
<List
218+
sx={{
219+
display: 'flex',
220+
flexDirection: 'column',
221+
alignItems: 'center',
222+
padding: 0
223+
}}
224+
>
217225
{userList.map((user, index) => (
218-
<ListItem key={index} sx={{ color: 'white' }}>
219-
<ListItemText primary={user} />
226+
<ListItem
227+
key={index}
228+
sx={{
229+
color: 'white',
230+
textAlign: 'center',
231+
width: '100%'
232+
}}
233+
>
234+
<ListItemText
235+
primary={`${index + 1}. ${
236+
index === 0 ? `${user} (host)` : user
237+
}`}
238+
/>
220239
</ListItem>
221240
))}
222241
</List>
@@ -256,11 +275,24 @@ const RoomsContainer = () => {
256275
}
257276
}}
258277
>
259-
{' '}
260-
Join Room{' '}
278+
Join Room
261279
</Button>
280+
{/* Note about Collab room feature */}
262281
</>
263282
)}
283+
<Typography
284+
variant="body2"
285+
color="white" // Use a color that signifies a warning or important information
286+
sx={{
287+
marginTop: '10px',
288+
textAlign: 'center',
289+
fontStyle: 'italic',
290+
fontSize: 'smaller'
291+
}}
292+
>
293+
Note: For the best experience, limit Collab room occupancy to 3
294+
people. Exceeding this limit may lead to app performance issues.
295+
</Typography>
264296
</Stack>
265297
</div>
266298
);

‎app/src/components/main/DeleteButton.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ import { deleteChild } from '../../redux/reducers/slice/appStateSlice';
55
import { RootState } from '../../redux/store';
66

77
function DeleteButton({ id, name }: DeleteButtons) {
8-
const { state, contextParam } = useSelector((store:RootState) => ({
9-
state: store.appState,
8+
const { contextParam } = useSelector((store:RootState) => ({
109
contextParam: store.contextSlice,
1110
}));
1211

0 commit comments

Comments
 (0)