Merge pull request #18 from oslabs-beta/garrett/stylecontext

Garrett/stylecontext

Author: Yoheze

app/src/Dashboard/NavbarDash.tsx

@@ -13,13 +13,15 @@ import HomeIcon from '@mui/icons-material/Home';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
-import { styleContext } from '../containers/AppContainer';
+// import { styleContext } from '../containers/AppContainer';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import SortIcon from '@mui/icons-material/Sort';
 import StarBorderIcon from '@mui/icons-material/StarBorder';
 import PersonIcon from '@mui/icons-material/Person';
 import greenLogo from '../public/icons/png/512x512.png';
+import {setStyle} from '../redux/reducers/slice/styleSlice'
+import { useSelector,useDispatch } from 'react-redux';
 
 // NavBar text and button styling
 const useStyles = makeStyles((theme: Theme) => createStyles({
@@ -75,7 +77,9 @@ const StyledMenuItem = withStyles(theme => ({
 export default function NavBar(props) {
   // TO DO: import setStyle
   const classes = useStyles();
-  const { style, setStyle } = useContext(styleContext);
+  // const { style, setStyle } = useContext(styleContext);
+  const style = useSelector(store => store.styleSlice);
+  const dispatch = useDispatch();
   const toggling = () => setIsOpen(!isOpen);
   // toggle to open and close dropdown sorting menu
   const [isOpen, setIsOpen] = useState(false);
@@ -143,11 +147,17 @@ export default function NavBar(props) {
             style={{minWidth: '113.97px'}}
             endIcon={props.isThemeLight ? <Brightness3Icon/> : <Brightness5Icon/>}
             onClick={() => {
-              !props.styles[0].backgroundColor
-                ? props.styles[1]({ backgroundColor: '#21262D' }) //dark mode color
-                : props.styles[1]({ backgroundColor: null })
+              !style.backgroundColor
+                ? dispatch(setStyle({ backgroundColor: '#21262D' })) //dark mode color
+                : dispatch(setStyle( null ))
               props.isThemeLight ? props.setTheme(false) : props.setTheme(true);
             }}
+            // onClick={() => {
+            //   !props.styles[0].backgroundColor
+            //     ? props.styles[1]({ backgroundColor: '#21262D' }) //dark mode color
+            //     : props.styles[1]({ backgroundColor: null })
+            //   props.isThemeLight ? props.setTheme(false) : props.setTheme(true);
+            // }}
           >
             {props.isThemeLight ? 'Dark Mode' : 'Light Mode'}
           </Button>  

app/src/Dashboard/ProjectContainer.tsx

@@ -1,15 +1,14 @@
-import React, { useState, useContext, createContext } from 'react';
+import React, { useState} from 'react';
 import { ThemeProvider, Theme, StyledEngineProvider, useTheme } from '@mui/material/styles';
 import makeStyles from '@mui/styles/makeStyles';
 import { useQuery } from '@apollo/client';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
-
 import Box from '@mui/material/Box';
 import { GET_PROJECTS } from './gqlStrings';
 import Project from './Project';
 import NavBarDash from './NavbarDash';
-
+import { useSelector } from 'react-redux';
 import { theme1, theme2 } from '../public/styles/theme';
 
 
@@ -23,10 +22,10 @@ declare module '@mui/styles/defaultTheme' {
 // 1) Impliment Apollo Provider in the top component in ./src/index.js, this allows children components access to the queried data
 // 2) useQuery hook will update the data stored in Apollo Client's cache and automatically trigger child components rendering
 
-export const styleContext = createContext({
-  style: null,
-  setStyle: null
-});
+// export const styleContext = createContext({
+//   style: null,
+//   setStyle: null
+// });
 
 // setting light and dark themes (navbar and background); linked to theme.ts
 const lightTheme = theme1;
@@ -104,8 +103,9 @@ const ProjectContainer = (): JSX.Element => {
   const userSSID = window.localStorage.getItem('ssid') || 'unavailable';
   const username = window.localStorage.getItem('username') || 'unavailable';
   const [isThemeLight, setTheme] = useState(true);
-  const initialStyle = useContext(styleContext);
-  const [style, setStyle] = useState(initialStyle);
+  // const initialStyle = useContext(styleContext);
+  // const [style, setStyle] = useState(initialStyle);
+  const style = useSelector(store => store.styleSlice)
   // hook for sorting menu
   const [selectedOption, setSelectedOption] = useState('RATING');
   const sortByRating = projects => {
@@ -163,7 +163,7 @@ const ProjectContainer = (): JSX.Element => {
           <div className={'dashboardContainer'}>
             <NavBarDash
               setTheme={setTheme}
-              styles={[style, setStyle]}
+              // styles={[style]} 
               isThemeLight={isThemeLight}
               optionClicked={optionClicked}
             />

app/src/components/App.tsx

@@ -3,9 +3,6 @@ import '../public/styles/style.css';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import AppContainer from '../containers/AppContainer';
-import StateContext from '../context/context';
-import initialState from '../context/initialState';
-import reducer from '../reducers/componentReducer';
 import localforage from 'localforage';
 import { saveProject } from '../helperFunctions/projectGetSaveDel';
 import Cookies from 'js-cookie';
@@ -110,9 +107,9 @@ export const App = (): JSX.Element => {
         >
           ReacType
         </header>
-        <StateContext.Provider value = {[state, dispatch]}>
+   
           <AppContainer />
-        </StateContext.Provider>
+    
       </DndProvider>
     </div>
   );

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

@@ -1,4 +1,4 @@
-import React, { useContext, useState, Fragment, useEffect } from 'react';
+import React, { useState, Fragment } from 'react';
 import DataTable from '../CreateTab/components/DataTable';
 import ContextDropDown from './components/ContextDropDown';
 import ComponentDropDown from './components/ComponentDropDrown';
@@ -7,32 +7,23 @@ import Grid from '@mui/material/Grid';
 import ComponentTable from './components/ComponentTable';
 import { Button } from '@mui/material';
 import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
-// import * as actions from '../../../redux/actions/actions';
-import StateContext from '../../../context/context';
 import { addComponentToContext } from '../../../redux/reducers/slice/contextReducer';
 import { useSelector, useDispatch, useStore } from 'react-redux';
 import { deleteElement } from '../../../redux/reducers/slice/appStateSlice';
 
 const AssignContainer = () => {
-  const store = useStore();
   const dispatch = useDispatch();
-
-  // const [state, setState] = useState([]);
   const defaultTableData = [{ key: 'Key', value: 'Value' }];
   const [tableState, setTableState] = React.useState(defaultTableData);
   const [contextInput, setContextInput] = React.useState(null);
   const [componentInput, setComponentInput] = React.useState(null);
   const [componentTable, setComponentTable] = useState([]);
-  // const [stateContext, dispatchContext] = useContext(StateContext);
   const { state, contextParam } = useSelector((store) => ({
     state: store.appState,
     contextParam: store.contextSlice
   }));
 
-  //fetching data from redux store
-  // useEffect(() => {
-  //   setState(allContext);
-  // }, [allContext]);
+
 
   const renderTable = (targetContext) => {
     if (targetContext === null || !targetContext.values) {
@@ -78,13 +69,6 @@ const AssignContainer = () => {
     );
     //trigger generateCode(), update code preview tab
     dispatch(deleteElement({ id: 'FAKE_ID', contextParam: contextParam }));
-
-    // dispatchContext({
-    //   type: 'DELETE ELEMENT',
-    //   payload: 'FAKE_ID'
-    // });
-
-    // setState(allContext);
     renderComponentTable(componentInput);
   };
 

app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx

@@ -15,10 +15,7 @@ const ComponentDropDown = ({
 }) => {
   const { allContext } = contextStore;
   // const [componentList] = useContext(StateContext);
-  const { state, isDarkMode } = useSelector((store) => ({
-    state: store.appState,
-    isDarkMode: store.darkMode.isDarkMode
-  }));
+  const state = useSelector(store => store.appState)
 
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
@@ -43,7 +40,7 @@ const ComponentDropDown = ({
     const filtered = filter(options, params);
     const { inputValue } = params;
     // Suggest the creation of a new contextInput
-    const isExisting = options.some((option) => inputValue === option.name);
+    const isExisting = options.some(option => inputValue === option.name);
     if (inputValue !== '' && !isExisting) {
       filtered.push({
         inputValue,
@@ -56,7 +53,7 @@ const ComponentDropDown = ({
     return filtered;
   };
 
-  const getOptionLabel = (option) => {
+  const getOptionLabel = option => {
     // Value selected with enter, right from the input
     if (typeof option === 'string') {
       return option;
@@ -70,7 +67,6 @@ const ComponentDropDown = ({
   };
 
   const renderOption = (props, option) => <li {...props}>{option.name}</li>;
-  const color = isDarkMode ? 'lightgray' : 'black';
 
   return (
     <Fragment>
@@ -88,20 +84,13 @@ const ComponentDropDown = ({
           renderOption={renderOption}
           sx={{ width: 425 }}
           freeSolo
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              label="Select Component"
-              helperText="Select a component for your selected context to consume"
-              InputLabelProps={{ style: { color } }}
-              FormHelperTextProps={{ style: { color } }}
-              InputProps={{ style: { color } }}
-            />
+          renderInput={params => (
+            <TextField {...params} label="Select Component" helperText='Select a component for your selected context to consume' />
           )}
         />
       </Box>
     </Fragment>
   );
 };
 
-export default ComponentDropDown;
+export default ComponentDropDown;

app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx

@@ -49,4 +49,4 @@ export default function DataTable({ target }) {
       </Table>
     </TableContainer>
   );
-}
+}

app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx

@@ -4,7 +4,6 @@ import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import { Typography } from '@mui/material';
-import { useSelector } from 'react-redux';
 
 const filter = createFilterOptions();
 
@@ -15,7 +14,6 @@ const ContextDropDown = ({
   setContextInput
 }) => {
   const { allContext } = contextStore;
-  const isDarkMode = useSelector((store) => store.darkMode.isDarkMode);
 
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
@@ -40,7 +38,7 @@ const ContextDropDown = ({
     const filtered = filter(options, params);
     const { inputValue } = params;
     // Suggest the creation of a new contextInput
-    const isExisting = options.some((option) => inputValue === option.name);
+    const isExisting = options.some(option => inputValue === option.name);
     if (inputValue !== '' && !isExisting) {
       filtered.push({
         inputValue,
@@ -53,7 +51,7 @@ const ContextDropDown = ({
     return filtered;
   };
 
-  const getOptionLabel = (option) => {
+  const getOptionLabel = option => {
     // Value selected with enter, right from the input
     if (typeof option === 'string') {
       return option;
@@ -67,7 +65,6 @@ const ContextDropDown = ({
   };
 
   const renderOption = (props, option) => <li {...props}>{option.name}</li>;
-  const color = isDarkMode ? 'lightgray' : 'black';
 
   return (
     <Fragment>
@@ -85,20 +82,13 @@ const ContextDropDown = ({
           renderOption={renderOption}
           sx={{ width: 425 }}
           freeSolo
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              label="Select Context"
-              helperText="Select a context you would like to assign"
-              InputLabelProps={{ style: { color } }}
-              FormHelperTextProps={{ style: { color } }}
-              InputProps={{ style: { color } }}
-            />
+          renderInput={params => (
+            <TextField {...params} label="Select Context" helperText='Select a context you would like to assign'/>
           )}
         />
       </Box>
     </Fragment>
   );
 };
 
-export default ContextDropDown;
+export default ContextDropDown;

app/src/components/ContextAPIManager/AssignTab/components/ContextTable.tsx

@@ -69,4 +69,4 @@ export default function ContextTable() {
       </Table>
     </TableContainer>
   );
-}
+}

app/src/components/ContextAPIManager/ContextManager.tsx

@@ -1,3 +1,5 @@
+
+
 import React, { useContext } from 'react';
 import { makeStyles } from '@mui/styles';
 import Box from '@mui/material/Box';
@@ -9,7 +11,8 @@ import TabPanel from '@mui/lab/TabPanel';
 import CreateContainer from './CreateTab/CreateContainer';
 import AssignContainer from './AssignTab/AssignContainer';
 import DisplayContainer from './DisplayTab/DisplayContainer';
-import { useSelector } from 'react-redux';
+import { useSelector } from 'react-redux'
+
 
 const useStyles = makeStyles({
   contextContainer: {
@@ -19,27 +22,29 @@ const useStyles = makeStyles({
 });
 
 const ContextManager = (props): JSX.Element => {
-  const isDarkMode = useSelector((state) => state.darkMode.isDarkMode);
+  const { isDarkMode, style } = useSelector((store) => ({
+    isDarkMode: store.darkMode.isDarkMode,
+    style: store.styleSlice
+  }));
   const classes = useStyles();
   const [value, setValue] = React.useState<string>('1');
-
+  
   const handleChange = (event: React.SyntheticEvent, newValue: string) => {
     setValue(newValue);
   };
 
-  const backgroundColor = isDarkMode ? '#21262b' : 'white';
-  const color = isDarkMode ? 'lightgray' : 'black';
+  const background_Color = isDarkMode ? '#21262b' : 'white'
 
   return (
     <React.Fragment>
-      <div className={classes.contextContainer} style={{ backgroundColor }}>
+      <div className={classes.contextContainer} style={style.style}>
         <Box sx={{ width: '100%', typography: 'body1' }}>
           <TabContext value={value}>
             <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
               <TabList onChange={handleChange} centered={true}>
-                <Tab label="Create/Edit" value="1" style={{ color }} />
-                <Tab label="Assign" value="2" style={{ color }} />
-                <Tab label="Display" value="3" style={{ color }} />
+                <Tab label="Create/Edit" value="1" />
+                <Tab label="Assign" value="2" />
+                <Tab label="Display" value="3" />
               </TabList>
             </Box>
             <TabPanel value="1">
@@ -58,4 +63,4 @@ const ContextManager = (props): JSX.Element => {
   );
 };
 
-export default ContextManager;
+export default ContextManager;