Skip to content

Commit 168191c

Browse files
GarrettHutsonGarrettHutson
committed
makes big moves towards migrating the style context, many bugs remain though
1 parent a93e904 commit 168191c

25 files changed

+173
-1556
lines changed

‎app/src/Dashboard/NavbarDash.tsx

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,15 @@ 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';
16+
// import { styleContext } from '../containers/AppContainer';
1717
import Menu from '@mui/material/Menu';
1818
import MenuItem from '@mui/material/MenuItem';
1919
import SortIcon from '@mui/icons-material/Sort';
2020
import StarBorderIcon from '@mui/icons-material/StarBorder';
2121
import PersonIcon from '@mui/icons-material/Person';
2222
import greenLogo from '../public/icons/png/512x512.png';
23+
import {setStyle} from '../redux/reducers/slice/styleSlice'
24+
import { useSelector,useDispatch } from 'react-redux';
2325

2426
// NavBar text and button styling
2527
const useStyles = makeStyles((theme: Theme) => createStyles({
@@ -75,7 +77,9 @@ const StyledMenuItem = withStyles(theme => ({
7577
export default function NavBar(props) {
7678
// TO DO: import setStyle
7779
const classes = useStyles();
78-
const { style, setStyle } = useContext(styleContext);
80+
// const { style, setStyle } = useContext(styleContext);
81+
const style = useSelector(store => store.styleSlice);
82+
const dispatch = useDispatch();
7983
const toggling = () => setIsOpen(!isOpen);
8084
// toggle to open and close dropdown sorting menu
8185
const [isOpen, setIsOpen] = useState(false);
@@ -143,11 +147,17 @@ export default function NavBar(props) {
143147
style={{minWidth: '113.97px'}}
144148
endIcon={props.isThemeLight ? <Brightness3Icon/> : <Brightness5Icon/>}
145149
onClick={() => {
146-
!props.styles[0].backgroundColor
147-
? props.styles[1]({ backgroundColor: '#21262D' }) //dark mode color
148-
: props.styles[1]({ backgroundColor: null })
150+
!style.backgroundColor
151+
? dispatch(setStyle({ backgroundColor: '#21262D' })) //dark mode color
152+
: dispatch(setStyle( null ))
149153
props.isThemeLight ? props.setTheme(false) : props.setTheme(true);
150154
}}
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+
// }}
151161
>
152162
{props.isThemeLight ? 'Dark Mode' : 'Light Mode'}
153163
</Button>

‎app/src/Dashboard/ProjectContainer.tsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import Box from '@mui/material/Box';
99
import { GET_PROJECTS } from './gqlStrings';
1010
import Project from './Project';
1111
import NavBarDash from './NavbarDash';
12-
12+
import { useSelector } from 'react-redux';
1313
import { theme1, theme2 } from '../public/styles/theme';
1414

1515

@@ -23,10 +23,10 @@ declare module '@mui/styles/defaultTheme' {
2323
// 1) Impliment Apollo Provider in the top component in ./src/index.js, this allows children components access to the queried data
2424
// 2) useQuery hook will update the data stored in Apollo Client's cache and automatically trigger child components rendering
2525

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

3131
// setting light and dark themes (navbar and background); linked to theme.ts
3232
const lightTheme = theme1;
@@ -104,8 +104,9 @@ const ProjectContainer = (): JSX.Element => {
104104
const userSSID = window.localStorage.getItem('ssid') || 'unavailable';
105105
const username = window.localStorage.getItem('username') || 'unavailable';
106106
const [isThemeLight, setTheme] = useState(true);
107-
const initialStyle = useContext(styleContext);
108-
const [style, setStyle] = useState(initialStyle);
107+
// const initialStyle = useContext(styleContext);
108+
// const [style, setStyle] = useState(initialStyle);
109+
const style = useSelector(store => store.styleSlice)
109110
// hook for sorting menu
110111
const [selectedOption, setSelectedOption] = useState('RATING');
111112
const sortByRating = projects => {
@@ -163,7 +164,7 @@ const ProjectContainer = (): JSX.Element => {
163164
<div className={'dashboardContainer'}>
164165
<NavBarDash
165166
setTheme={setTheme}
166-
styles={[style, setStyle]}
167+
// styles={[style]}
167168
isThemeLight={isThemeLight}
168169
optionClicked={optionClicked}
169170
/>

‎app/src/components/App.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,6 @@ import '../public/styles/style.css';
33
import { DndProvider } from 'react-dnd';
44
import { HTML5Backend } from 'react-dnd-html5-backend';
55
import AppContainer from '../containers/AppContainer';
6-
import StateContext from '../context/context';
7-
import initialState from '../context/initialState';
8-
import reducer from '../reducers/componentReducer';
96
import localforage from 'localforage';
107
import { saveProject } from '../helperFunctions/projectGetSaveDel';
118
import Cookies from 'js-cookie';
@@ -110,9 +107,9 @@ export const App = (): JSX.Element => {
110107
>
111108
ReacType
112109
</header>
113-
<StateContext.Provider value = {[state, dispatch]}>
110+
{/* <StateContext.Provider value = {[state, dispatch]}> */}
114111
<AppContainer />
115-
</StateContext.Provider>
112+
{/* </StateContext.Provider> */}
116113
</DndProvider>
117114
</div>
118115
);

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useContext } from 'react';
22
import makeStyles from '@mui/styles/makeStyles';
3-
import StateContext from '../../context/context';
3+
// import StateContext from '../../context/context';
44
import Tabs from '@mui/material/Tabs';
55
import Tab from '@mui/material/Tab';
66
import CodePreview from './CodePreview';
@@ -13,7 +13,7 @@ import StateManager from '../StateManagement/StateManagement';
1313
import Box from '@mui/material/Box';
1414
import Tree from '../../tree/TreeChart';
1515
import FormControl from '@mui/material/FormControl';
16-
import { styleContext } from '../../containers/AppContainer';
16+
// import { styleContext } from '../../containers/AppContainer';
1717
import MenuItem from '@mui/material/MenuItem';
1818
import Select from '@mui/material/Select';
1919
import Arrow from '../main/Arrow';
@@ -26,14 +26,15 @@ const BottomTabs = (props): JSX.Element => {
2626
// const [state, dispatch] = useContext(StateContext); //deconstructing properties from Context interface?
2727
const dispatch = useDispatch();
2828
// const state = useSelector(store => store.appState)
29-
const { state, contextParam } = useSelector((store) => ({
29+
const { state, contextParam, style } = useSelector((store) => ({
3030
state: store.appState,
3131
contextParam: store.contextSlice,
32+
style: store.styleSlice,
3233
}));
3334
const [tab, setTab] = useState(0);
3435
const classes = useStyles();
3536
const [theme, setTheme] = useState('solarized_light');
36-
const { style } = useContext(styleContext);
37+
// const { style } = useContext(styleContext);
3738

3839
// breaks if handleChange is commented out
3940
const handleChange = (event: React.ChangeEvent, value: number) => {

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import React, { useContext } from 'react';
22
import ComponentPanel from '../right/ComponentPanel'
33
import StatePropsPanel from '../right/StatePropsPanel'
44
import HTMLPanel from '../left/HTMLPanel'
5-
import { styleContext } from '../../containers/AppContainer';
5+
import { useSelector } from 'react-redux';
6+
// import { styleContext } from '../../containers/AppContainer';
67

78
// Creation panel holds all of the creation functionality of the application. ComponentPanel, HTMLPanel, and StatePropsPanel are all hanged here.
89
// This allows users to create all aspects of this application in one place.
910
const CreationPanel = (props): JSX.Element => {
10-
const {style} = useContext(styleContext);
11+
// const {style} = useContext(styleContext);
12+
const style = useSelector((store) => store.styleSlice);
1113
return (
1214
<div className="creation-panel" style={style}>
1315
<ComponentPanel isThemeLight={props.isThemeLight}/>

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,19 @@ import MenuItem from '@mui/material/MenuItem';
66
import Select from '@mui/material/Select';
77
import { InputLabel } from '@mui/material';
88
import { TextField } from '@mui/material';
9-
import { styleContext } from '../../containers/AppContainer';
9+
// import { styleContext } from '../../containers/AppContainer';
1010
import { makeStyles } from '@mui/material/styles'
1111
import {useDispatch, useSelector} from 'react-redux';
1212
import { updateAttributes } from '../../redux/reducers/slice/appStateSlice';
1313

1414
function AddLink({ id, onClickHandler, linkDisplayed }) {
15-
const { isThemeLight } = useContext(styleContext);
15+
// const { isThemeLight } = useContext(styleContext);
1616
// const [state, dispatch] = useContext(StateContext);
1717
// const state = useSelector(store => store.appState);
18-
const { state, contextParam } = useSelector((store) => ({
18+
const { state, contextParam, isThemeLight } = useSelector((store) => ({
1919
state: store.appState,
2020
contextParam: store.contextSlice,
21+
isThemeLight: store.styleSlice
2122
}));
2223
const dispatch = useDispatch();
2324
const [link, setLink] = useState('')

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@ import React, { useState, useEffect, useRef, useContext } from 'react';
22
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
33
import Box from '@mui/material/Box';
44
import cssRefresher from '../../helperFunctions/cssRefresh';
5-
import StateContext from '../../context/context';
65
import { Component } from '../../interfaces/Interfaces';
7-
86
import ReactDOMServer from 'react-dom/server';
97
import { stat } from 'fs/promises';
108
import { useDispatch, useSelector } from 'react-redux';
@@ -61,7 +59,8 @@ const DemoRender = (): JSX.Element => {
6159
//Switch between components when clicking on a link in the live render
6260
window.onmessage = (event) => {
6361
if (event.data === undefined) return;
64-
const component: string = event.data?.split('/').at(-1);
62+
console.log('event data demo render',event.data)
63+
const component: string = event.data.data?.split('/').at(-1);
6564
const componentId =
6665
component &&
6766
state.components?.find((el) => {

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,23 @@ import React, { useContext } from 'react';
22
import { ChildElement, HTMLType } from '../../interfaces/Interfaces';
33
import { useDrag } from 'react-dnd';
44
import { ItemTypes } from '../../constants/ItemTypes';
5-
import StateContext from '../../context/context';
5+
// import StateContext from '../../context/context';
66
import { combineStyles } from '../../helperFunctions/combineStyles';
77
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
88
import DeleteButton from './DeleteButton';
99

10-
import { styleContext } from '../../containers/AppContainer';
10+
// import { styleContext } from '../../containers/AppContainer';
1111
import { useDispatch, useSelector } from 'react-redux';
1212
import { changeFocus } from '../../redux/reducers/slice/appStateSlice';
1313

1414
function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
1515
// const [state, dispatch] = useContext(StateContext);
16-
const state = useSelector(store => store.appState);
16+
const {state, isThemeLight }= useSelector(store =>({
17+
state: store.appState,
18+
isThemeLight: store.styleSlice
19+
} ));
1720
const dispatch = useDispatch();
18-
const { isThemeLight } = useContext(styleContext);
21+
// const { isThemeLight } = useContext(styleContext);
1922

2023
// find the HTML element corresponding with this instance of an HTML element
2124
// find the current component to render on the canvas

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState, useContext, useEffect, useRef } from 'react';
22
import { ChildElement, HTMLType } from '../../interfaces/Interfaces';
33
import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
44
import { ItemTypes } from '../../constants/ItemTypes';
5-
import StateContext from '../../context/context';
5+
// import StateContext from '../../context/context';
66
import { combineStyles } from '../../helperFunctions/combineStyles';
77
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
88
import renderChildren from '../../helperFunctions/renderChildren';
@@ -16,7 +16,7 @@ import { useDispatch, useSelector } from 'react-redux';
1616

1717
import { changeFocus, changePosition, addChild, snapShotAction } from '../../redux/reducers/slice/appStateSlice';
1818

19-
import { styleContext } from '../../containers/AppContainer';
19+
// import { styleContext } from '../../containers/AppContainer';
2020

2121
function DirectChildHTMLNestable({
2222
childId,
@@ -28,12 +28,14 @@ function DirectChildHTMLNestable({
2828
attributes
2929
}: ChildElement) {
3030
// const [state, dispatch] = useContext(StateContext);
31-
const { isThemeLight } = useContext(styleContext);
32-
const isDarkMode = useSelector(store => store.darkMode.isDarkMode);
31+
// const { isThemeLight } = useContext(styleContext);
32+
// const isDarkMode = useSelector(store => store.darkMode.isDarkMode);
3333
// const state = useSelector(store => store.appState);
34-
const { state, contextParam } = useSelector((store) => ({
34+
const { state, contextParam, isThemeLight, isDarkMode } = useSelector((store) => ({
3535
state: store.appState,
3636
contextParam: store.contextSlice,
37+
isThemeLight: store.styleSlice,
38+
isDarkMode: store.darkMode.isDarkMode
3739
}));
3840
const dispatch = useDispatch();
3941
const ref = useRef(null);
@@ -47,7 +49,7 @@ function DirectChildHTMLNestable({
4749
//pushes the last user action on the canvas into the past array of Component
4850
// state.components[focusIndex].past.push(
4951
// deepCopiedState.components[focusIndex].children
50-
dispatch(snapShotAction({focusIndex: focusIndex, deepCopiedState: deepCopiedState}))
52+
dispatch(snapShotAction({ focusIndex: focusIndex, deepCopiedState: deepCopiedState }))
5153
};
5254

5355
// find the HTML element corresponding with this instance of an HTML element
@@ -124,7 +126,7 @@ function DirectChildHTMLNestable({
124126
// newParentChildId: childId
125127
// }
126128
// });
127-
dispatch(changePosition({currentChildId: item.childId, newParentChildId: childId, contextParam: contextParam}))
129+
dispatch(changePosition({ currentChildId: item.childId, newParentChildId: childId, contextParam: contextParam }))
128130
}
129131
}
130132
},
@@ -138,7 +140,7 @@ function DirectChildHTMLNestable({
138140

139141
const changeFocusFunction = (componentId: number, childId: number | null) => {
140142
// dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
141-
dispatch(changeFocus({ componentId, childId}));
143+
dispatch(changeFocus({ componentId, childId }));
142144

143145
};
144146

@@ -158,7 +160,7 @@ function DirectChildHTMLNestable({
158160
? '3px solid #186BB4'
159161
: '1px solid grey'
160162
};
161-
163+
162164
// interactive style to change color when nested element is hovered over
163165
if (isOver) defaultNestableStyle['yellow'];
164166
defaultNestableStyle['backgroundColor'] = isOver ? 'yellow' : defaultNestableStyle['backgroundColor'];
@@ -195,7 +197,7 @@ function DirectChildHTMLNestable({
195197
id={`canv${childId}`}
196198
>
197199
<span>
198-
<strong style={ {color: 'black' } }>{HTMLType.placeHolderShort}
200+
<strong style={{ color: 'black' }}>{HTMLType.placeHolderShort}
199201
</strong>
200202
<strong style={{ color: "#0099E6" }}>{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}
201203
</strong>

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@ import {
1515
deleteProject
1616
} from '../../helperFunctions/projectGetSaveDel';
1717
import localforage from 'localforage';
18-
import StateContext from '../../context/context';
19-
import initialState from '../../context/initialState';
2018
import { useSelector, useDispatch } from 'react-redux';
2119
import { setInitialState } from '../../redux/reducers/slice/appStateSlice';
2220
export interface ProjectDialogProps {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useContext } from 'react';
2-
import StateContext from '../../context/context';
2+
// import StateContext from '../../context/context';
33
import makeStyles from '@mui/styles/makeStyles';
44
import List from '@mui/material/List';
55
import ListItem from '@mui/material/ListItem';
@@ -23,7 +23,8 @@ const ProjectManager = () => {
2323
const dispatch = useDispatch();
2424
// const [state, dispatch] = useContext(StateContext);
2525
const classes = useStyles();
26-
const { style, setStyle } = useContext(styleContext);
26+
// const { style, setStyle } = useContext(styleContext);
27+
2728

2829
// State to keep track of how the user wants their components to be exported
2930
// GenOption = 0 --> export only components

0 commit comments

Comments
 (0)