Skip to content

Commit 93063de

Browse files
GarrettHutsonGarrettHutson
committed
cleans up some comments
1 parent e61dfa5 commit 93063de

File tree

5 files changed

+86
-101
lines changed

5 files changed

+86
-101
lines changed

‎app/src/Dashboard/ProjectContainer.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import React, { useState, useContext, createContext } from 'react';
1+
import React, { useState} from 'react';
22
import { ThemeProvider, Theme, StyledEngineProvider, useTheme } from '@mui/material/styles';
33
import makeStyles from '@mui/styles/makeStyles';
44
import { useQuery } from '@apollo/client';
55
import Tabs from '@mui/material/Tabs';
66
import Tab from '@mui/material/Tab';
7-
87
import Box from '@mui/material/Box';
98
import { GET_PROJECTS } from './gqlStrings';
109
import Project from './Project';

‎app/src/components/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,9 @@ export const App = (): JSX.Element => {
107107
>
108108
ReacType
109109
</header>
110-
{/* <StateContext.Provider value = {[state, dispatch]}> */}
110+
111111
<AppContainer />
112-
{/* </StateContext.Provider> */}
112+
113113
</DndProvider>
114114
</div>
115115
);

‎app/src/components/ContextAPIManager/ContextManager.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import CreateContainer from './CreateTab/CreateContainer';
1010
import AssignContainer from './AssignTab/AssignContainer';
1111
import DisplayContainer from './DisplayTab/DisplayContainer';
1212
import { useSelector } from 'react-redux';
13+
import store from '../../redux/store';
1314

1415
const useStyles = makeStyles({
1516
contextContainer: {
@@ -19,7 +20,10 @@ const useStyles = makeStyles({
1920
});
2021

2122
const ContextManager = (props): JSX.Element => {
22-
const isDarkMode = useSelector((state) => state.darkMode.isDarkMode);
23+
const {isDarkMode, style} = useSelector((store) =>({
24+
isDarkMode: store.darkMode.isDarkMode,
25+
style: store.styleSlice
26+
}) );
2327
const classes = useStyles();
2428
const [value, setValue] = React.useState<string>('1');
2529

@@ -32,7 +36,7 @@ const ContextManager = (props): JSX.Element => {
3236

3337
return (
3438
<React.Fragment>
35-
<div className={classes.contextContainer} style={{ backgroundColor }}>
39+
<div className={classes.contextContainer} style={style.style}>
3640
<Box sx={{ width: '100%', typography: 'body1' }}>
3741
<TabContext value={value}>
3842
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>

‎app/src/components/bottom/BottomTabs.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,11 @@ import { changeProjectType } from '../../redux/reducers/slice/appStateSlice';
2121
const BottomTabs = (props): JSX.Element => {
2222
// state that controls which tab the user is on
2323
const dispatch = useDispatch();
24-
const { state, contextParam, style } = useSelector((store) => ({
24+
const { state, contextParam, style, } = useSelector((store) => ({
2525
state: store.appState,
2626
contextParam: store.contextSlice,
2727
style: store.styleSlice,
28+
isDarkMode: store.darkMode.isDarkMode
2829
}));
2930
const [tab, setTab] = useState(0);
3031
const classes = useStyles();

‎app/src/components/right/ComponentPanel.tsx

Lines changed: 75 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
// Future developers: This file needs to move to right folder: src/components/right
2-
32
import React, { useState, useContext, useEffect, useCallback } from 'react';
4-
import StateContext from '../../context/context';
5-
import { styled } from '@mui/material/styles';
63
import makeStyles from '@mui/styles/makeStyles';
74
import {
85
Button,
@@ -19,15 +16,13 @@ import { addComponent } from '../../redux/reducers/slice/appStateSlice';
1916

2017

2118
// The component panel section of the left panel displays all components and has the ability to add new components
22-
const ComponentPanel = ({isThemeLight}): JSX.Element => {
19+
const ComponentPanel = ({ isThemeLight }): JSX.Element => {
2320
const classes = useStyles();
24-
// const [state, dispatch] = useContext(StateContext);
25-
2621
const { state, contextParam } = useSelector((store) => ({
2722
state: store.appState,
2823
contextParam: store.contextSlice,
2924
}));
30-
const dispatch = useDispatch();
25+
const dispatch = useDispatch();
3126

3227

3328
//state hooks for inputted component name, component id and array of components
@@ -76,14 +71,14 @@ const dispatch = useDispatch();
7671
};
7772

7873
const checkIfRoot = (inputName: String): boolean => {
79-
let rootDupe = false;
74+
let rootDupe = false;
8075
// checks to see if inputted comp name is equal to root component name. Want to prevent that
81-
76+
8277
//carly console logs
83-
const rootComponents = state.rootComponents;
84-
const allComponents = state.components;
78+
const rootComponents = state.rootComponents;
79+
const allComponents = state.components;
8580

86-
if (inputName.toLowerCase() === 'index'|| inputName.toLowerCase() === 'app') {
81+
if (inputName.toLowerCase() === 'index' || inputName.toLowerCase() === 'app') {
8782
rootDupe = true;
8883
}
8984
return rootDupe;
@@ -103,10 +98,6 @@ const dispatch = useDispatch();
10398
? inputNameClean.charAt(0).toUpperCase() + inputNameClean.slice(1) // capitalizes first letter
10499
: inputNameClean;
105100
// add new component to state
106-
// dispatch({
107-
// type: 'ADD COMPONENT',
108-
// payload: { componentName: formattedName, root: isRoot }
109-
// });
110101
dispatch(addComponent({ componentName: formattedName, root: isRoot, contextParam: contextParam }));
111102
// reset root toggle back to default position
112103
setIsRoot(false);
@@ -145,88 +136,88 @@ const dispatch = useDispatch();
145136

146137
const keyBindCreateComponent = useCallback((e) => {
147138

148-
if(e.key === 'Enter' && e.target.tagName !== "TEXTAREA") {
139+
if (e.key === 'Enter' && e.target.tagName !== "TEXTAREA") {
149140
e.preventDefault();
150141
document.getElementById('addComponentButton').click();
151142
}
152143
}, []);
153-
144+
154145
useEffect(() => {
155146
document.addEventListener('keydown', keyBindCreateComponent);
156147
return () => {
157148
document.removeEventListener('keydown', keyBindCreateComponent)
158149
}
159150
}, []);
160-
151+
console.log(isThemeLight)
161152
return (
162153
<div className={`${classes.panelWrapper}`}>
163154
{/* Add a new component*/}
164155
<div className={classes.addComponentWrapper}>
165-
<h4
166-
className={isThemeLight ? `${classes.newComponent} ${classes.lightThemeFontColor}` : `${classes.newComponent} ${classes.darkThemeFontColor}`}
167-
>
168-
New Component
169-
</h4>
170-
{/* input for new component */}
171-
<div style={{display: 'flex', justifyContent:'center', marginTop: '20px', marginBottom: '20px', alignItems:'baseline'}}>
172-
<div style={{alignSelf:'center'}}>
173-
<InputLabel className={isThemeLight ? `${classes.inputLabel} ${classes.lightThemeFontColor}` : `${classes.inputLabel} ${classes.darkThemeFontColor}`}>
174-
Name:
175-
</InputLabel>
176-
<div className={classes.inputWrapper}>
177-
<TextField
178-
// label='New Component Name'
179-
color='primary'
180-
variant="outlined"
181-
className={isThemeLight ? `${classes.inputField} ${classes.lightThemeFontColor}` : `${classes.inputField} ${classes.darkThemeFontColor}`}
182-
// inputprops and helpertext must be lowercase
183-
inputProps={{ className: classes.input }}
184-
value={compName}
185-
// Doesn't accept boolean value needs to be a string
186-
error={errorStatus}
187-
// Updated
188-
helperText={errorStatus ? errorMsg : ''}
189-
onChange={handleNameInput}
190-
style={{}}
191-
InputProps={{
192-
style: {
193-
color: isThemeLight ? 'black' : 'white'
194-
}
195-
}}
196-
/>
197-
</div>
198-
</div>
199-
200-
<div className={classes.btnGroup} id="checkboxContainer" style={{marginBottom: '30px'}}>
201-
<FormControlLabel
202-
value="top"
203-
control={
204-
<Checkbox
205-
className={isThemeLight ? `${classes.rootCheckBox} ${classes.lightThemeFontColor}` : `${classes.rootCheckBox} ${classes.darkThemeFontColor}`}
206-
color="primary"
207-
checked={isRoot}
208-
onChange={toggleRootStatus}
209-
210-
/>
211-
}
212-
label={state.projectType === 'Next.js' || state.projectType === 'Gatsby.js' ? 'Page' : 'Root'} // name varies depending on mode
213-
className={isThemeLight ? `${classes.rootCheckBoxLabel} ${classes.lightThemeFontColor}` : `${classes.rootCheckBoxLabel} ${classes.darkThemeFontColor}`}
214-
labelPlacement="top"
156+
<h4
157+
className={isThemeLight ? `${classes.newComponent} ${classes.lightThemeFontColor}` : `${classes.newComponent} ${classes.darkThemeFontColor}`}
158+
>
159+
New Component
160+
</h4>
161+
{/* input for new component */}
162+
<div style={{ display: 'flex', justifyContent: 'center', marginTop: '20px', marginBottom: '20px', alignItems: 'baseline' }}>
163+
<div style={{ alignSelf: 'center' }}>
164+
<InputLabel className={isThemeLight ? `${classes.inputLabel} ${classes.lightThemeFontColor}` : `${classes.inputLabel} ${classes.darkThemeFontColor}`}>
165+
Name:
166+
</InputLabel>
167+
<div className={classes.inputWrapper}>
168+
<TextField
169+
// label='New Component Name'
170+
color='primary'
171+
variant="outlined"
172+
className={isThemeLight ? `${classes.inputField} ${classes.lightThemeFontColor}` : `${classes.inputField} ${classes.darkThemeFontColor}`}
173+
// inputprops and helpertext must be lowercase
174+
inputProps={{ className: classes.input }}
175+
value={compName}
176+
// Doesn't accept boolean value needs to be a string
177+
error={errorStatus}
178+
// Updated
179+
helperText={errorStatus ? errorMsg : ''}
180+
onChange={handleNameInput}
181+
style={{}}
182+
InputProps={{
183+
style: {
184+
color: isThemeLight ? 'black' : 'white'
185+
}
186+
}}
215187
/>
216188
</div>
217189
</div>
218-
<div style={{display: 'flex', justifyContent: 'center'}}>
219-
<br/>
220-
<Button
221-
className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
222-
color='primary'
223-
variant='contained'
224-
id="addComponentButton"
225-
onClick={handleNameSubmit}
226-
>
227-
Create
228-
</Button>
190+
191+
<div className={classes.btnGroup} id="checkboxContainer" style={{ marginBottom: '30px' }}>
192+
<FormControlLabel
193+
value="top"
194+
control={
195+
<Checkbox
196+
className={isThemeLight ? `${classes.rootCheckBox} ${classes.lightThemeFontColor}` : `${classes.rootCheckBox} ${classes.darkThemeFontColor}`}
197+
color="primary"
198+
checked={isRoot}
199+
onChange={toggleRootStatus}
200+
201+
/>
202+
}
203+
label={state.projectType === 'Next.js' || state.projectType === 'Gatsby.js' ? 'Page' : 'Root'} // name varies depending on mode
204+
className={isThemeLight ? `${classes.rootCheckBoxLabel} ${classes.lightThemeFontColor}` : `${classes.rootCheckBoxLabel} ${classes.darkThemeFontColor}`}
205+
labelPlacement="top"
206+
/>
229207
</div>
208+
</div>
209+
<div style={{ display: 'flex', justifyContent: 'center' }}>
210+
<br />
211+
<Button
212+
className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
213+
color='primary'
214+
variant='contained'
215+
id="addComponentButton"
216+
onClick={handleNameSubmit}
217+
>
218+
Create
219+
</Button>
220+
</div>
230221
</div>
231222
</div>
232223
);
@@ -256,9 +247,9 @@ const useStyles = makeStyles({
256247
},
257248
panelWrapper: {
258249
display: 'flex',
259-
flexDirection:'column',
260-
alignItems:'center',
261-
flexGrow : 1,
250+
flexDirection: 'column',
251+
alignItems: 'center',
252+
flexGrow: 1,
262253
color: '#000000',
263254
},
264255
addComponentWrapper: {
@@ -315,16 +306,6 @@ const useStyles = makeStyles({
315306
}
316307
}
317308
});
318-
// change to Button to make styling consistent
319-
// const CreateButton = styled(Button)({
320-
// background: "#0099E6",
321-
// border: 0,
322-
// borderRadius: 3,
323-
// boxShadow: "0 0px 0px 2px #1a1a1a",
324-
// color: "white",
325-
// height: 24,
326-
// width: 60,
327-
// padding: "0 30px",
328-
// });
309+
329310

330311
export default ComponentPanel;

0 commit comments

Comments
 (0)