Skip to content

Commit d8c48f7

Browse files
dentonwongdentonwong
authored
Merge pull request #28 from oslabs-beta/victor/sidebar
Merge branch 'dev' into victor/sidebar
2 parents cba7ab2 + 1200f71 commit d8c48f7

File tree

11 files changed

+341
-108
lines changed

11 files changed

+341
-108
lines changed

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from 'react';
2-
import Grid from '@mui/material/Grid';
31
import ComponentPanelItem from '../right/ComponentPanelItem';
2+
import Grid from '@mui/material/Grid';
3+
import React from 'react';
4+
import { RootState } from '../../redux/store';
45
import makeStyles from '@mui/styles/makeStyles';
56
import { useSelector } from 'react-redux';
6-
import { RootState } from '../../redux/store';
77
// The component panel section of the left panel displays all components and has the ability to add new components
88
const ComponentDrag = ({ isThemeLight }): JSX.Element => {
99
const classes = useStyles();
@@ -54,7 +54,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
5454
})}
5555
</Grid>
5656
{/* Display all reusable components */}
57-
<h4
57+
{/* <h4
5858
className={
5959
!isDarkMode
6060
? classes.lightThemeFontColor
@@ -83,7 +83,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
8383
/>
8484
);
8585
})}
86-
</Grid>
86+
</Grid> */}
8787
</div>
8888
</div>
8989
);
@@ -108,7 +108,7 @@ const useStyles = makeStyles({
108108
wordWrap: 'break-word'
109109
},
110110
lightThemeFontColor: {
111-
color: '#155084'
111+
color: '#fff'
112112
},
113113
darkThemeFontColor: {
114114
color: '#fff'

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

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,82 @@
1+
import ComponentPanelItem from '../right/ComponentPanelItem';
2+
import Grid from '@mui/material/Grid';
13
import React from 'react';
4+
import { RootState } from '../../redux/store';
5+
import makeStyles from '@mui/styles/makeStyles';
6+
import { useSelector } from 'react-redux';
27

38
const ComponentsContainer = () => {
4-
return <div>ComponentsContainer</div>;
9+
const classes = useStyles();
10+
const state = useSelector((store: RootState) => store.appState);
11+
const isDarkMode = useSelector(
12+
(store: RootState) => store.darkMode.isDarkMode
13+
);
14+
const isFocus = (targetId: Number) => {
15+
return state.canvasFocus.componentId === targetId ? true : false;
16+
};
17+
return (
18+
<div>
19+
<div className={classes.panelWrapper}>
20+
<div className={classes.panelWrapperList}>
21+
<h4
22+
className={
23+
!isDarkMode
24+
? classes.lightThemeFontColor
25+
: classes.darkThemeFontColor
26+
}
27+
>
28+
Reusable Components
29+
</h4>
30+
<Grid
31+
container
32+
direction="row"
33+
justifyContent="center"
34+
alignItems="center"
35+
>
36+
{state.components
37+
.filter((comp) => !state.rootComponents.includes(comp.id))
38+
.map((comp) => {
39+
return (
40+
<ComponentPanelItem
41+
isFocus={isFocus(comp.id)}
42+
key={`comp-${comp.id}`}
43+
name={comp.name}
44+
id={comp.id}
45+
root={false}
46+
/>
47+
);
48+
})}
49+
</Grid>
50+
</div>
51+
</div>
52+
</div>
53+
);
554
};
655

56+
const useStyles = makeStyles({
57+
panelWrapper: {
58+
display: 'flex',
59+
flexDirection: 'column',
60+
alignItems: 'center',
61+
flexGrow: 1,
62+
overflow: 'auto'
63+
},
64+
panelWrapperList: {
65+
minHeight: '120px',
66+
marginLeft: '-15px',
67+
marginRight: '-15px',
68+
width: '100%',
69+
display: 'flex',
70+
flexDirection: 'column',
71+
alignItems: 'center',
72+
wordWrap: 'break-word'
73+
},
74+
lightThemeFontColor: {
75+
color: '#fff'
76+
},
77+
darkThemeFontColor: {
78+
color: '#fff'
79+
}
80+
});
81+
782
export default ComponentsContainer;

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

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,38 @@ import React from 'react';
55
import RoomsContainer from './RoomsContainer';
66
import TreeContainer from './TreeContainer';
77

8-
interface TabPanelProps {
9-
value: number;
10-
index: number;
8+
interface ContentAreaProps {
9+
activeTab: number | null;
10+
isVisible: boolean;
1111
}
1212

13-
const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => {
14-
return <Box hidden={value !== index}>{value === index && children}</Box>;
13+
const TabPanel: React.FC<{
14+
children: React.ReactNode;
15+
activeTab: number | null;
16+
index: number;
17+
}> = ({ children, activeTab, index }) => {
18+
return (
19+
<Box hidden={activeTab !== index}>{activeTab === index && children}</Box>
20+
);
1521
};
1622

17-
const ContentArea: React.FC<{ value: number | null }> = ({ value }) => {
18-
if (value === null) {
19-
return null;
20-
}
21-
23+
const panels = [
24+
<ElementsContainer />,
25+
<ComponentsContainer />,
26+
<RoomsContainer />
27+
];
28+
const ContentArea: React.FC<ContentAreaProps> = ({ activeTab, isVisible }) => {
2229
return (
23-
<div className="left-container">
30+
<div
31+
className="left-container"
32+
style={{ display: isVisible ? 'block' : 'none' }} // Visibility based on activeTab
33+
>
2434
<div className="column left">
25-
<TabPanel value={value} index={0}>
26-
<ElementsContainer />
27-
</TabPanel>
28-
<TabPanel value={value} index={1}>
29-
<ComponentsContainer />
30-
</TabPanel>
31-
<TabPanel value={value} index={2}>
32-
<TreeContainer />
33-
</TabPanel>
34-
<TabPanel value={value} index={3}>
35-
<RoomsContainer />
36-
</TabPanel>
35+
{panels.map((panel, idx) => (
36+
<TabPanel activeTab={activeTab} index={idx}>
37+
{panel}
38+
</TabPanel>
39+
))}
3740
</div>
3841
</div>
3942
);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const ElementsContainer = (props): JSX.Element => {
4848
textAlign: 'center'
4949
}}
5050
>
51-
<h4>Drag and Drop</h4>
51+
{' '}
5252
<DragDropPanel />
5353
<div id={'CompBottomHalf'}>
5454
<ComponentDrag isThemeLight={props.isThemeLight} />

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

Lines changed: 142 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,148 @@
1+
import { Stack, Typography } from '@mui/material';
2+
import { useDispatch, useSelector } from 'react-redux';
3+
4+
import Button from '@mui/material/Button';
15
import React from 'react';
6+
import { RootState } from '../../redux/store';
7+
import TextField from '@mui/material/TextField';
8+
import { allCooperativeState } from '../../redux/reducers/slice/appStateSlice';
9+
import { changeRoom } from '../../redux/reducers/slice/roomCodeSlice';
10+
import { codePreviewCooperative } from '../../redux/reducers/slice/codePreviewSlice';
11+
import config from '../../../../config';
12+
import { cooperativeStyle } from '../../redux/reducers/slice/styleSlice';
13+
// websocket front end starts here
14+
import { io } from 'socket.io-client';
15+
import store from '../../redux/store';
16+
import { toggleDarkMode } from '../../redux/reducers/slice/darkModeSlice';
217

18+
// for websockets
19+
// Part - join room and room code functionality
20+
let socket;
21+
const { API_BASE_URL } = config;
322
const RoomsContainer = () => {
4-
return <div>RoomsContainer</div>;
23+
const [roomCode, setRoomCode] = React.useState('');
24+
const [confirmRoom, setConfirmRoom] = React.useState('');
25+
const dispatch = useDispatch();
26+
const { isDarkMode, state, joinedRoom } = useSelector((store: RootState) => ({
27+
isDarkMode: store.darkMode.isDarkMode,
28+
state: store.appState,
29+
joinedRoom: store.roomCodeSlice.roomCode
30+
}));
31+
React.useEffect(() => {
32+
console.log('joinedRoom: ', joinedRoom);
33+
}, [joinedRoom]);
34+
35+
function initSocketConnection(roomCode) {
36+
if (socket) {
37+
socket.disconnect();
38+
}
39+
40+
socket = io(API_BASE_URL, {
41+
transports: ['websocket']
42+
});
43+
44+
socket.on('connect', () => {
45+
console.log(`You connected with id: ${socket.id}`);
46+
socket.emit('join-room', roomCode); // Join the room when connected
47+
});
48+
49+
// Receiving the room state from the backend
50+
socket.on('room-state-update', (stateFromServer) => {
51+
const newState = JSON.parse(stateFromServer);
52+
// Dispatch actions to update your Redux store with the received state
53+
store.dispatch(allCooperativeState(newState.appState));
54+
store.dispatch(codePreviewCooperative(newState.codePreviewCooperative));
55+
store.dispatch(cooperativeStyle(newState.styleSlice));
56+
});
57+
58+
// receiving the message from the back end
59+
socket.on('receive message', (event) => {
60+
// console.log('message from server: ', event);
61+
let currentStore: any = JSON.stringify(store.getState());
62+
if (currentStore !== event) {
63+
currentStore = JSON.parse(currentStore);
64+
event = JSON.parse(event);
65+
console.log('stores do not match');
66+
if (currentStore.darkMode.isDarkMode !== event.darkMode.isDarkMode) {
67+
store.dispatch(toggleDarkMode());
68+
} else if (currentStore.appState !== event.appState) {
69+
store.dispatch(allCooperativeState(event.appState));
70+
} else if (
71+
currentStore.codePreviewSlice !== event.codePreviewCooperative
72+
) {
73+
store.dispatch(codePreviewCooperative(event.codePreviewCooperative));
74+
} else if (currentStore.styleSlice !== event.styleSlice) {
75+
store.dispatch(cooperativeStyle(event.styleSlice));
76+
}
77+
}
78+
console.log('updated user Store from another user: ', store.getState());
79+
});
80+
}
81+
82+
function handleUserEnteredRoom(roomCode) {
83+
initSocketConnection(roomCode);
84+
}
85+
86+
function joinRoom() {
87+
console.log(roomCode);
88+
dispatch(changeRoom(roomCode));
89+
setConfirmRoom((confirmRoom) => roomCode);
90+
91+
// Call handleUserEnteredRoom when joining a room
92+
handleUserEnteredRoom(roomCode);
93+
}
94+
return (
95+
<div>
96+
<Stack
97+
spacing={2}
98+
sx={{
99+
paddingTop: '20px',
100+
maxWidth: '230px',
101+
alignItems: 'center',
102+
margin: '0 auto 0 auto'
103+
}}
104+
>
105+
{' '}
106+
<TextField
107+
hiddenLabel
108+
id="filled-hidden-label-small"
109+
variant="filled"
110+
size="small"
111+
onChange={(e) => setRoomCode(e.target.value)}
112+
/>
113+
{/* <input
114+
type="text"
115+
style={{
116+
margin: '3px 5%',
117+
borderRadius: '5px',
118+
padding: '3px',
119+
width: '90%'
120+
}}
121+
placeholder="Room Code"
122+
onChange={(e) => setRoomCode(e.target.value)}
123+
></input> */}
124+
<Button
125+
variant="contained"
126+
onClick={() => joinRoom()}
127+
sx={{
128+
backgroundColor: '#ffffff',
129+
color: '#000000',
130+
'&:hover': {
131+
backgroundColor: '#C6C6C6',
132+
borderColor: '#0062cc',
133+
boxShadow: 'none'
134+
}
135+
}}
136+
>
137+
Join Room
138+
</Button>
139+
<Typography variant="h6" color={'white'}>
140+
In Room: {joinedRoom}
141+
</Typography>
142+
</Stack>
143+
{/* <button onClick={() => joinRoom()}>Join Room</button> */}
144+
</div>
145+
);
5146
};
6147

7148
export default RoomsContainer;

0 commit comments

Comments
 (0)