Skip to content

Commit 7cc7d19

Browse files
mdunnmonmdunnmon
authored
Merge pull request #23 from oslabs-beta/garrett/websockets
Garrett/websockets
2 parents 41e7144 + 9bc5fb2 commit 7cc7d19

37 files changed

+74
-542
lines changed

‎app/src/Dashboard/NavbarDash.tsx

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import HomeIcon from '@mui/icons-material/Home';
1313
import Toolbar from '@mui/material/Toolbar';
1414
import Typography from '@mui/material/Typography';
1515
import { Link } from 'react-router-dom';
16-
// import { styleContext } from '../containers/AppContainer';
1716
import Menu from '@mui/material/Menu';
1817
import MenuItem from '@mui/material/MenuItem';
1918
import SortIcon from '@mui/icons-material/Sort';
@@ -77,7 +76,6 @@ const StyledMenuItem = withStyles(theme => ({
7776
export default function NavBar(props) {
7877
// TO DO: import setStyle
7978
const classes = useStyles();
80-
// const { style, setStyle } = useContext(styleContext);
8179
const style = useSelector(store => store.styleSlice);
8280
const dispatch = useDispatch();
8381
const toggling = () => setIsOpen(!isOpen);
@@ -152,12 +150,6 @@ export default function NavBar(props) {
152150
: dispatch(setStyle( null ))
153151
props.isThemeLight ? props.setTheme(false) : props.setTheme(true);
154152
}}
155-
// onClick={() => {
156-
// !props.styles[0].backgroundColor
157-
// ? props.styles[1]({ backgroundColor: '#21262D' }) //dark mode color
158-
// : props.styles[1]({ backgroundColor: null })
159-
// props.isThemeLight ? props.setTheme(false) : props.setTheme(true);
160-
// }}
161153
>
162154
{props.isThemeLight ? 'Dark Mode' : 'Light Mode'}
163155
</Button>

‎app/src/Dashboard/Project.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ const Project = ({
3939
// 1) schema change projId => id to allows Apollo Client cache auto-update. Only works with 'id'
4040
// 2) always request the 'id' in a mutation request
4141
const [commentVal, setCommentVal] = useState('');
42-
const [clicked, setClicked] = useState(false);
4342
const [modal, setModal] = useState(null);
4443
const [addLike] = useMutation(ADD_LIKE);
4544
const [makeCopy] = useMutation(MAKE_COPY);

‎app/src/Dashboard/ProjectContainer.tsx

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,6 @@ declare module '@mui/styles/defaultTheme' {
2222
// 1) Impliment Apollo Provider in the top component in ./src/index.js, this allows children components access to the queried data
2323
// 2) useQuery hook will update the data stored in Apollo Client's cache and automatically trigger child components rendering
2424

25-
// export const styleContext = createContext({
26-
// style: null,
27-
// setStyle: null
28-
// });
2925

3026
// setting light and dark themes (navbar and background); linked to theme.ts
3127
const lightTheme = theme1;
@@ -103,8 +99,6 @@ const ProjectContainer = (): JSX.Element => {
10399
const userSSID = window.localStorage.getItem('ssid') || 'unavailable';
104100
const username = window.localStorage.getItem('username') || 'unavailable';
105101
const [isThemeLight, setTheme] = useState(true);
106-
// const initialStyle = useContext(styleContext);
107-
// const [style, setStyle] = useState(initialStyle);
108102
const style = useSelector(store => store.styleSlice)
109103
// hook for sorting menu
110104
const [selectedOption, setSelectedOption] = useState('RATING');

‎app/src/components/App.tsx

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useReducer, useEffect } from 'react';
1+
import React, {useEffect } from 'react';
22
import '../public/styles/style.css';
33
import { DndProvider } from 'react-dnd';
44
import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -12,32 +12,22 @@ import { setInitialState, toggleLoggedIn, configToggle } from '../redux/reducers
1212

1313
// Intermediary component to wrap main App component with higher order provider components
1414
export const App = (): JSX.Element => {
15-
// const [state, dispatch] = useReducer(reducer, initialState);
1615
const state = useSelector(store => store.appState);
1716
const dispatch = useDispatch();
1817
// checks if user is signed in as guest or actual user and changes loggedIn boolean accordingly
1918
useEffect(()=>{
2019
if (window.localStorage.getItem('ssid') !== 'guest') {
21-
// state.isLoggedIn = true;
2220
dispatch(toggleLoggedIn())
2321
}
2422
},[])
2523

26-
// else {
27-
// state.isLoggedIn = false;
28-
// }
2924
// following useEffect runs on first mount
3025
useEffect(() => {
3126
// if user is a guest, see if a project exists in localforage and retrieve it
32-
// if (state.isLoggedIn === false) {
3327
if (!state.isLoggedIn) {
3428
localforage.getItem('guestProject').then(project => {
3529
// if project exists, use dispatch to set initial state to that project
3630
if (project) {
37-
// dispatch({
38-
// type: 'SET INITIAL STATE',
39-
// payload: project
40-
// });
4131
dispatch(setInitialState(project))
4232
}
4333
});
@@ -52,10 +42,7 @@ export const App = (): JSX.Element => {
5242
//also load user's last project, which was saved in localforage on logout
5343
localforage.getItem(userId).then(project => {
5444
if (project) {
55-
// dispatch({
56-
// type: 'SET INITIAL STATE',
57-
// payload: project
58-
// });
45+
5946
dispatch(setInitialState(project))
6047
} else {
6148
console.log(

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

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,8 @@
1-
import React, { useEffect, useState } from 'react';
2-
// import { useStore } from 'react-redux';
1+
import React from 'react';
32
import Grid from '@mui/material/Grid';
43
import StatePropsPanel from './components/StatePropsPanel';
54

65
const CreateContainer = ({isThemeLight, data}) => {
7-
// const store = useStore();
8-
// const [state, setState] = useState([]);
9-
10-
// //pulling data from redux store
11-
// useEffect(() => {
12-
// setState(store.getState().contextSlice);
13-
// }, []);
146

157
return (
168
<Grid container display="flex" justifyContent="stretch" flexDirection="column">

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

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,6 @@ import TablePassedInProps from "./TablePassedInProps";
1919

2020

2121
const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
22-
// const [state, dispatch] = useContext(StateContext);
23-
// const state = useSelector(store => store.appState);
2422
const { state, contextParam } = useSelector((store) => ({
2523
state: store.appState,
2624
contextParam: store.contextSlice,
@@ -116,11 +114,6 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
116114
value: '',
117115
type: 'func',
118116
};
119-
120-
// dispatch({
121-
// type: 'ADD STATE',
122-
// payload: {newState: newState, setNewState: setNewState}
123-
// });
124117
dispatch(addState({newState: newState, setNewState: setNewState, contextParam: contextParam}))
125118
setRows1([...rows1, newState])
126119
resetError();
@@ -447,15 +440,5 @@ const useStyles = makeStyles((theme: Theme) =>
447440
}
448441
})
449442
);
450-
// change to Button to keep styling consistent
451-
// const MyButton = styled(Button)({
452-
// background: "#0099E6",
453-
// border: 0,
454-
// borderRadius: 3,
455-
// boxShadow: "0 0px 0px 2px #1a1a1a",
456-
// color: "white",
457-
// height: 24,
458-
// width: 40,
459-
// padding: "0 30px",
460-
// });
443+
461444
export default StatePropsPanel;

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@ import AddIcon from '@mui/icons-material/Add';
1212
import { addPassedInProps } from '../../../../redux/reducers/slice/appStateSlice';
1313

1414
const TableParentProps = props => {
15-
// const [state, dispatch] = useContext(StateContext);
16-
// const state = useSelector(store => store.appState);
1715
const { state, contextParam } = useSelector((store) => ({
1816
state: store.appState,
1917
contextParam: store.contextSlice,
@@ -76,10 +74,6 @@ const TableParentProps = props => {
7674
// get the current focused component
7775
// remove the state that the button is clicked
7876
// send a dispatch to rerender the table
79-
// dispatch({
80-
// type: 'ADD PASSEDINPROPS',
81-
// payload: { passedInProps: parentComponentProps, rowId: rowId, parentComponent: parentComponent }
82-
// });
8377
dispatch(addPassedInProps({ passedInProps: parentComponentProps, rowId: rowId, parentComponent: parentComponent, contextParam: contextParam}))
8478
};
8579

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

Lines changed: 15 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
1-
import React, { useState, useContext, useEffect } from 'react';
1+
import React, { useState, useEffect } from 'react';
22
import {
33
DataGrid,
44
GridEditRowsModel,
55
} from '@mui/x-data-grid';
66
import Button from '@mui/material/Button';
77
import ClearIcon from '@mui/icons-material/Clear';
8-
import StateContext from "../../../../context/context";
98
import makeStyles from '@mui/styles/makeStyles';
10-
import { StatePropsPanelProps } from '../../../../interfaces/Interfaces';
119
import { useDispatch, useSelector } from 'react-redux';
1210
import { deletePassedInProps } from '../../../../redux/reducers/slice/appStateSlice';
1311

1412

1513
const TablePassedInProps = props => {
16-
// const [state, dispatch] = useContext(StateContext);
17-
// const state = useSelector(store => store.appState);
1814
const { state, contextParam } = useSelector((store) => ({
1915
state: store.appState,
2016
contextParam: store.contextSlice,
@@ -25,7 +21,7 @@ const TablePassedInProps = props => {
2521
const [gridColumns, setGridColumns] = useState([]);
2622
const currentId = state.canvasFocus.componentId;
2723
const currentComponent = state.components[currentId - 1];
28-
const passedInProps = (currentComponent.name !== 'App' && currentComponent.name !== 'index')? currentComponent.passedInProps : '';
24+
const passedInProps = (currentComponent.name !== 'App' && currentComponent.name !== 'index') ? currentComponent.passedInProps : '';
2925

3026
//formatting for data grid columns
3127
const columnTabs = [
@@ -62,14 +58,14 @@ const TablePassedInProps = props => {
6258
renderCell: function renderCell(params: any) {
6359
return (
6460
<Button
65-
style={{ width: `${3}px`, color: 'black'}}
61+
style={{ width: `${3}px`, color: 'black' }}
6662
onClick={() => {
67-
deleteProps(params.id);
63+
deleteProps(params.id);
6864
}}
6965
>
7066
<ClearIcon style={{ width: `${15}px` }} />
7167
</Button>
72-
68+
7369
);
7470
}
7571
}
@@ -79,11 +75,7 @@ const TablePassedInProps = props => {
7975
// get the current focused component
8076
// remove the state that the button is clicked
8177
// send a dispatch to rerender the table
82-
// dispatch({
83-
// type: 'DELETE PASSEDINPROPS',
84-
// payload: { rowId: rowId }
85-
// });
86-
dispatch(deletePassedInProps({rowId:rowId, contextParam: contextParam}))
78+
dispatch(deletePassedInProps({ rowId: rowId, contextParam: contextParam }))
8779
};
8880

8981
useEffect(() => {
@@ -96,21 +88,21 @@ const TablePassedInProps = props => {
9688
} else {
9789
setGridColumns(columnTabs.slice(0, gridColumns.length - 1));
9890
}
99-
91+
10092
}, [state.canvasFocus.componentId]);
10193

10294
// fill data grid rows with all of the passed in props from parent component (if there are any)
10395
let rows = passedInProps?.slice();
104-
96+
10597
return (
10698
<div className={'state-prop-grid'}>
107-
<DataGrid
108-
rows={rows}
109-
columns={gridColumns}
110-
pageSize={5}
111-
editRowsModel={editRowsModel}
112-
className={props.isThemeLight ? classes.themeLight : classes.themeDark}
113-
/>
99+
<DataGrid
100+
rows={rows}
101+
columns={gridColumns}
102+
pageSize={5}
103+
editRowsModel={editRowsModel}
104+
className={props.isThemeLight ? classes.themeLight : classes.themeDark}
105+
/>
114106
</div>
115107
);
116108
};

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

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
1-
import React, { useState, useContext, useEffect } from 'react';
1+
import React, { useState, useEffect } from 'react';
22
import {
33
DataGrid,
44
GridEditRowsModel,
55
} from '@mui/x-data-grid';
66
import Button from '@mui/material/Button';
77
import ClearIcon from '@mui/icons-material/Clear';
8-
import StateContext from "../../../../context/context";
98
import makeStyles from '@mui/styles/makeStyles';
109
import { StatePropsPanelProps } from '../../../../interfaces/Interfaces';
1110
import { useDispatch, useSelector } from 'react-redux';
1211
import { deletePassedInProps } from '../../../../redux/reducers/slice/appStateSlice';
1312

1413
const TableStateProps = props => {
15-
// const [state, dispatch] = useContext(StateContext);
16-
// const state = useSelector(store => store.appState);
1714
const { state, contextParam } = useSelector((store) => ({
1815
state: store.appState,
1916
contextParam: store.contextSlice,
@@ -81,7 +78,6 @@ const TableStateProps = props => {
8178
let otherId;
8279
for (let i = 0; i < filtered.length; i++) {
8380
let curr = filtered[i];
84-
// filtered.push(curr);
8581
if (curr.id === selectedId) {
8682
if (i %2 ===0) {
8783
otherId = filtered[i + 1];
@@ -92,10 +88,6 @@ const TableStateProps = props => {
9288
}
9389
}
9490
}
95-
// dispatch({
96-
// type: 'DELETE STATE',
97-
// payload: { stateProps: filtered, rowId: selectedId, otherId: otherId.id }
98-
// });
9991
dispatch(deletePassedInProps({stateProps: filtered, rowId: selectedId, otherId: otherId.id, contextParam: contextParam}))
10092
};
10193

‎app/src/components/StateManagement/DisplayTab/DataTable.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ export default function DataTable(props) {
3434
const {
3535
currComponentState, parentProps, clickedComp, data,
3636
} = props;
37-
// const [state, dispatch] = useContext(StateContext);
3837
const state = useSelector(store => store.appState)
3938

4039
// determine if the current component is a root component

‎app/src/components/StateManagement/DisplayTab/DisplayContainer.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ function DisplayContainer({ data, props }) { // "data" is referring to component
1111
// grabbing intialized state from App using UseContext
1212
const [currComponentState, setCurrComponentState] = useState([]);
1313
const [parentProps, setParentProps] = useState([]);
14-
// const [state, dispatch] = useContext(StateContext);
1514
const state = useSelector(store => store.appState)
1615

1716
let root = '';

‎app/src/components/StateManagement/DisplayTab/Tree.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import React, { useRef, useEffect, useContext } from 'react';
1+
import React, { useRef, useEffect} from 'react';
22
import {
33
select, hierarchy, tree, linkHorizontal,
44
} from 'd3';
55
import cloneDeep from 'lodash/cloneDeep';
66
import useResizeObserver from './useResizeObserver';
7-
import StateContext from '../../../context/context';
87
import { useSelector } from 'react-redux';
98

109
function usePrevious(value) {
@@ -14,9 +13,8 @@ function usePrevious(value) {
1413
}
1514

1615
function Tree({
17-
data, currComponentState, setCurrComponentState, parentProps, setParentProps, setClickedComp,
16+
data, setCurrComponentState, setParentProps, setClickedComp,
1817
}) {
19-
// const [state, dispatch] = useContext(StateContext);
2018
const state = useSelector(store => store.appState)
2119
const svgRef = useRef();
2220
const wrapperRef = useRef();

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,11 @@ import Tab from '@mui/material/Tab';
55
import TabContext from '@mui/lab/TabContext';
66
import TabList from '@mui/lab/TabList';
77
import TabPanel from '@mui/lab/TabPanel';
8-
import StateContext from '../../context/context';
98
import { useSelector } from 'react-redux';
109

1110
import CreateContainer from './CreateTab/CreateContainer';
1211
import DisplayContainer from './DisplayTab/DisplayContainer';
1312

14-
15-
1613
const useStyles = makeStyles({
1714
contextContainer: {
1815
backgroundColor: 'white',
@@ -24,11 +21,10 @@ const useStyles = makeStyles({
2421

2522
const StateManager = (props): JSX.Element => {
2623

27-
// const [state, dispatch] = useContext(StateContext);
2824
const state = useSelector(store => store.appState)
2925
const isDarkMode = useSelector(state => state.darkMode.isDarkMode);
3026

31-
const { components, HTMLTypes } = state;
27+
const { components } = state;
3228
const classes = useStyles();
3329
const [value, setValue] = React.useState<string>('1');
3430

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useContext } from 'react';
1+
import React, { useState} from 'react';
22
import makeStyles from '@mui/styles/makeStyles';
33
import Tabs from '@mui/material/Tabs';
44
import Tab from '@mui/material/Tab';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useContext } from 'react';
1+
import React from 'react';
22
import ComponentPanel from '../right/ComponentPanel'
33
import HTMLPanel from '../left/HTMLPanel'
44
import { useSelector } from 'react-redux';

0 commit comments

Comments
 (0)