Skip to content

Commit 637049d

Browse files
InvectivusTacoInvectivusTaco
authored
Merge pull request #14 from oslabs-beta/feature/MUI-comps-state
Feature/m UI comps state
2 parents 26f8c39 + 1c3c6ca commit 637049d

File tree

140 files changed

+16928
-13854
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

140 files changed

+16928
-13854
lines changed

‎app/src/Dashboard/NavbarDash.tsx

Lines changed: 223 additions & 206 deletions
Large diffs are not rendered by default.

‎app/src/Dashboard/Project.tsx

Lines changed: 268 additions & 248 deletions
Large diffs are not rendered by default.

‎app/src/Dashboard/ProjectContainer.tsx

Lines changed: 230 additions & 190 deletions
Large diffs are not rendered by default.

‎app/src/components/App.tsx

Lines changed: 40 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,40 @@
1-
import '../public/styles/style.css';
2-
3-
import React, { useEffect } from 'react';
4-
import { toggleLoggedIn } from '../redux/reducers/slice/appStateSlice';
5-
import { useDispatch } from 'react-redux';
6-
7-
import AppContainer from '../containers/AppContainer';
8-
9-
export const App: React.FC = (): JSX.Element => {
10-
const dispatch = useDispatch();
11-
useEffect(() => {
12-
if (window.localStorage.getItem('ssid') !== 'guest') {
13-
dispatch(toggleLoggedIn(true));
14-
}
15-
}, []);
16-
17-
return (
18-
<div className="app">
19-
<AppContainer />
20-
</div>
21-
);
22-
};
23-
24-
export default App;
1+
import '../public/styles/style.css';
2+
3+
import React, { useEffect } from 'react';
4+
import { toggleLoggedIn } from '../redux/reducers/slice/appStateSlice';
5+
import { useDispatch } from 'react-redux';
6+
7+
import AppContainer from '../containers/AppContainer';
8+
9+
/**
10+
* The `App` component is the root component of the React application. It performs an initial check
11+
* to determine if a user is logged in (not a 'guest') by inspecting local storage, and updates the
12+
* application's state accordingly using Redux. It then renders the `AppContainer`, which serves as
13+
* the main container for the application's user interface.
14+
*
15+
* The `useEffect` hook is used to perform the login check once on component mount, ensuring that
16+
* the login state is correctly set based on the presence of a specific item in local storage.
17+
*
18+
* @returns {JSX.Element} Renders the `AppContainer` wrapped within a div with a class of 'app',
19+
* serving as the root of the user interface.
20+
*
21+
* This component interacts with Redux by dispatching actions to modify the global state, particularly
22+
* the logged-in status of the user. This is central for managing conditional rendering and access
23+
* throughout the application based on user authentication status.
24+
*/
25+
export const App: React.FC = (): JSX.Element => {
26+
const dispatch = useDispatch();
27+
useEffect(() => {
28+
if (window.localStorage.getItem('ssid') !== 'guest') {
29+
dispatch(toggleLoggedIn(true));
30+
}
31+
}, []);
32+
33+
return (
34+
<div className="app">
35+
<AppContainer />
36+
</div>
37+
);
38+
};
39+
40+
export default App;

‎app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx

Lines changed: 157 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,157 @@
1-
import React, { useState, Fragment } from 'react';
2-
import DataTable from '../CreateTab/components/DataTable';
3-
import ContextDropDown from './components/ContextDropDown';
4-
import ComponentDropDown from './components/ComponentDropDrown';
5-
import Divider from '@mui/material/Divider';
6-
import Grid from '@mui/material/Grid';
7-
import ComponentTable from './components/ComponentTable';
8-
import { Button } from '@mui/material';
9-
import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
10-
import { addComponentToContext } from '../../../redux/reducers/slice/contextReducer';
11-
import { useSelector, useDispatch } from 'react-redux';
12-
import { deleteElement } from '../../../redux/reducers/slice/appStateSlice';
13-
import { RootState } from '../../../redux/store';
14-
import { emitEvent } from '../../../../src/helperFunctions/socket';
15-
16-
const AssignContainer = () => {
17-
const dispatch = useDispatch();
18-
const defaultTableData = [{ key: 'Key', value: 'Value' }];
19-
const [tableState, setTableState] = React.useState(defaultTableData);
20-
const [contextInput, setContextInput] = React.useState(null);
21-
const [componentInput, setComponentInput] = React.useState(null);
22-
const [componentTable, setComponentTable] = useState([]);
23-
const { state, contextParam } = useSelector((store: RootState) => ({
24-
state: store.appState,
25-
contextParam: store.contextSlice
26-
}));
27-
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
28-
29-
//sets table data if it exists
30-
const renderTable = (targetContext) => {
31-
targetContext?.values && setTableState(targetContext.values);
32-
};
33-
34-
//construct data for table displaying component table
35-
const renderComponentTable = (targetComponent) => {
36-
//target Component is main
37-
const listOfContexts = [];
38-
if (!Array.isArray(state) && targetComponent?.name) {
39-
contextParam.allContext.forEach((context) => {
40-
if (context.components.includes(targetComponent.name)) {
41-
listOfContexts.push(context.name);
42-
}
43-
});
44-
setComponentTable(listOfContexts);
45-
}
46-
};
47-
48-
//handling assignment of contexts to components
49-
const handleAssignment = () => {
50-
if (
51-
contextInput === '' ||
52-
contextInput === null ||
53-
componentInput === '' ||
54-
componentInput === null
55-
)
56-
return;
57-
58-
dispatch(
59-
addComponentToContext({
60-
context: contextInput,
61-
component: componentInput
62-
})
63-
);
64-
//trigger generateCode(), update code preview tab
65-
dispatch(deleteElement({ id: 'FAKE_ID', contextParam: contextParam }));
66-
67-
if (roomCode) {
68-
emitEvent('assignContextActions', roomCode, {
69-
context: contextInput,
70-
component: componentInput,
71-
id: 'FAKE_ID',
72-
contextParam: contextParam
73-
});
74-
}
75-
76-
renderComponentTable(componentInput);
77-
};
78-
79-
return (
80-
<Fragment>
81-
<Grid container display="flex" justifyContent="space-evenly">
82-
<Grid item>
83-
<Grid
84-
container
85-
spacing={2}
86-
display="flex"
87-
direction="column"
88-
justifyContent="center"
89-
alignItems="center"
90-
>
91-
<Grid item>
92-
<ContextDropDown
93-
contextStore={contextParam}
94-
renderTable={renderTable}
95-
contextInput={contextInput}
96-
setContextInput={setContextInput}
97-
/>
98-
</Grid>
99-
100-
<Grid item>
101-
<DataTable target={tableState} contextInput={contextInput} />
102-
</Grid>
103-
</Grid>
104-
</Grid>
105-
<Divider orientation="vertical" variant="middle" flexItem>
106-
<Button onClick={handleAssignment}>
107-
<DoubleArrowIcon fontSize="large" color="primary" />
108-
</Button>
109-
</Divider>
110-
<Grid item>
111-
<Grid item>
112-
<Grid
113-
container
114-
spacing={2}
115-
display="flex"
116-
direction="column"
117-
justifyContent="center"
118-
alignItems="center"
119-
>
120-
<Grid item>
121-
<ComponentDropDown
122-
contextStore={contextParam}
123-
renderComponentTable={renderComponentTable}
124-
componentInput={componentInput}
125-
setComponentInput={setComponentInput}
126-
/>
127-
</Grid>
128-
129-
<Grid item>
130-
<ComponentTable target={componentTable} />
131-
</Grid>
132-
</Grid>
133-
</Grid>
134-
</Grid>
135-
</Grid>
136-
</Fragment>
137-
);
138-
};
139-
140-
export default AssignContainer;
1+
import React, { useState, Fragment } from 'react';
2+
import DataTable from '../CreateTab/components/DataTable';
3+
import ContextDropDown from './components/ContextDropDown';
4+
import ComponentDropDown from './components/ComponentDropDrown';
5+
import Divider from '@mui/material/Divider';
6+
import Grid from '@mui/material/Grid';
7+
import ComponentTable from './components/ComponentTable';
8+
import { Button } from '@mui/material';
9+
import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
10+
import { addComponentToContext } from '../../../redux/reducers/slice/contextReducer';
11+
import { useSelector, useDispatch } from 'react-redux';
12+
import { deleteElement } from '../../../redux/reducers/slice/appStateSlice';
13+
import { RootState } from '../../../redux/store';
14+
import { emitEvent } from '../../../../src/helperFunctions/socket';
15+
16+
/**
17+
* Provides an interface for assigning components to contexts within an application.
18+
* The component allows the selection of contexts and components through dropdown menus,
19+
* displays related data in tables, and permits the assignment of components to selected contexts.
20+
* It leverages Redux for state management and may trigger socket events for real-time updates across sessions.
21+
*
22+
* This component integrates several subcomponents:
23+
* - `ContextDropDown` for selecting contexts which triggers updates to the data table.
24+
* - `DataTable` for displaying key-value pairs related to the selected context.
25+
* - `ComponentDropDown` for selecting components which triggers updates to the component table.
26+
* - `ComponentTable` for displaying a list of contexts associated with a selected component.
27+
* - A button for assigning the selected component to the selected context, potentially emitting socket events if a room code is present.
28+
*
29+
* The state management involves interaction with the Redux store to fetch state information and dispatch actions related to context and component management.
30+
*
31+
* @returns {JSX.Element} A React component structured with a Grid layout, integrating forms and tables for managing and viewing context and component assignments.
32+
*/
33+
const AssignContainer = (): JSX.Element => {
34+
const dispatch = useDispatch();
35+
const defaultTableData = [{ key: 'Key', value: 'Value' }];
36+
const [tableState, setTableState] = React.useState(defaultTableData);
37+
const [contextInput, setContextInput] = React.useState(null);
38+
const [componentInput, setComponentInput] = React.useState(null);
39+
const [componentTable, setComponentTable] = useState([]);
40+
const { state, contextParam } = useSelector((store: RootState) => ({
41+
state: store.appState,
42+
contextParam: store.contextSlice
43+
}));
44+
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
45+
46+
//sets table data if it exists
47+
const renderTable = (targetContext) => {
48+
targetContext?.values && setTableState(targetContext.values);
49+
};
50+
51+
//construct data for table displaying component table
52+
const renderComponentTable = (targetComponent) => {
53+
//target Component is main
54+
const listOfContexts = [];
55+
if (!Array.isArray(state) && targetComponent?.name) {
56+
contextParam.allContext.forEach((context) => {
57+
if (context.components.includes(targetComponent.name)) {
58+
listOfContexts.push(context.name);
59+
}
60+
});
61+
setComponentTable(listOfContexts);
62+
}
63+
};
64+
65+
//handling assignment of contexts to components
66+
const handleAssignment = () => {
67+
if (
68+
contextInput === '' ||
69+
contextInput === null ||
70+
componentInput === '' ||
71+
componentInput === null
72+
)
73+
return;
74+
75+
dispatch(
76+
addComponentToContext({
77+
context: contextInput,
78+
component: componentInput
79+
})
80+
);
81+
//trigger generateCode(), update code preview tab
82+
dispatch(deleteElement({ id: 'FAKE_ID', contextParam: contextParam }));
83+
84+
if (roomCode) {
85+
emitEvent('assignContextActions', roomCode, {
86+
context: contextInput,
87+
component: componentInput,
88+
id: 'FAKE_ID',
89+
contextParam: contextParam
90+
});
91+
}
92+
93+
renderComponentTable(componentInput);
94+
};
95+
96+
return (
97+
<Fragment>
98+
<Grid container display="flex" justifyContent="space-evenly">
99+
<Grid item>
100+
<Grid
101+
container
102+
spacing={2}
103+
display="flex"
104+
direction="column"
105+
justifyContent="center"
106+
alignItems="center"
107+
>
108+
<Grid item>
109+
<ContextDropDown
110+
contextStore={contextParam}
111+
renderTable={renderTable}
112+
contextInput={contextInput}
113+
setContextInput={setContextInput}
114+
/>
115+
</Grid>
116+
117+
<Grid item>
118+
<DataTable target={tableState} contextInput={contextInput} />
119+
</Grid>
120+
</Grid>
121+
</Grid>
122+
<Divider orientation="vertical" variant="middle" flexItem>
123+
<Button onClick={handleAssignment}>
124+
<DoubleArrowIcon fontSize="large" color="primary" />
125+
</Button>
126+
</Divider>
127+
<Grid item>
128+
<Grid item>
129+
<Grid
130+
container
131+
spacing={2}
132+
display="flex"
133+
direction="column"
134+
justifyContent="center"
135+
alignItems="center"
136+
>
137+
<Grid item>
138+
<ComponentDropDown
139+
contextStore={contextParam}
140+
renderComponentTable={renderComponentTable}
141+
componentInput={componentInput}
142+
setComponentInput={setComponentInput}
143+
/>
144+
</Grid>
145+
146+
<Grid item>
147+
<ComponentTable target={componentTable} />
148+
</Grid>
149+
</Grid>
150+
</Grid>
151+
</Grid>
152+
</Grid>
153+
</Fragment>
154+
);
155+
};
156+
157+
export default AssignContainer;

0 commit comments

Comments
 (0)