Merge branch 'dev' of https://github.com/oslabs-beta/ReacType-v15 into Yoheze/websockets

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;
@@ -84,11 +83,11 @@ const TabPanelItem = (props: TabPanelProps): JSX.Element => {
 const useStyles = makeStyles(theme => ({
   root: {
     flexGrow: 1,
-    backgroundColor: theme.palette.background.paper,
+    // backgroundColor: theme.palette.background.paper,
     display: 'flex'
   },
   tabs: {
-    borderRight: `1px solid ${theme.palette.divider}`
+    // borderRight: `1px solid ${theme.palette.divider}`
   }
 }));
 // End of prefab code to generate a tab panel
@@ -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,34 +7,25 @@ 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 { 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,
+    contextParam: store.contextSlice
   }));
 
-  //fetching data from redux store
-  // useEffect(() => {
-  //   setState(allContext);
-  // }, [allContext]);
 
-  const renderTable = targetContext => {
+
+  const renderTable = (targetContext) => {
     if (targetContext === null || !targetContext.values) {
       setTableState(defaultTableData);
     } else {
@@ -43,7 +34,7 @@ const AssignContainer = () => {
   };
 
   //construct data for table displaying component table
-  const renderComponentTable = targetComponent => {
+  const renderComponentTable = (targetComponent) => {
     //target Component is main
 
     const listOfContexts = [];
@@ -52,7 +43,7 @@ const AssignContainer = () => {
       targetComponent !== null &&
       targetComponent.name
     ) {
-      contextParam.allContext.forEach(context => {
+      contextParam.allContext.forEach((context) => {
         if (context.components.includes(targetComponent.name)) {
           listOfContexts.push(context.name);
         }
@@ -77,14 +68,7 @@ const AssignContainer = () => {
       })
     );
     //trigger generateCode(), update code preview tab
-    dispatch(deleteElement({id:'FAKE_ID', contextParam: contextParam}))
-
-    // dispatchContext({
-    //   type: 'DELETE ELEMENT',
-    //   payload: 'FAKE_ID'
-    // });
-
-    // setState(allContext);
+    dispatch(deleteElement({ id: 'FAKE_ID', contextParam: contextParam }));
     renderComponentTable(componentInput);
   };
 

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

@@ -2,8 +2,9 @@ import React, { Fragment, useState, useEffect, useContext } from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
-import StateContext from '../../../../context/context';
+
 import { useSelector } from 'react-redux';
+import { Store } from 'redux';
 
 const filter = createFilterOptions();
 
@@ -15,8 +16,11 @@ const ComponentDropDown = ({
 }) => {
   const { allContext } = contextStore;
   // const [componentList] = useContext(StateContext);
-  const state = useSelector(store => store.appState)
-
+  const {state, isDarkMode} = useSelector(store =>({
+    state:  store.appState,
+    isDarkMode: store.darkMode.isDarkMode
+  } ))
+  const color = isDarkMode ? "white":"black"
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
       setComponentInput({
@@ -66,11 +70,11 @@ const ComponentDropDown = ({
     return option.name;
   };
 
-  const renderOption = (props, option) => <li {...props}>{option.name}</li>;
+  const renderOption = (props, option) => <li  style={{ color: "black", border: "1px solid black" }}  {...props}>{option.name}</li>;
 
   return (
     <Fragment>
-      <Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
+      <Box sx={{ display: 'flex', gap: 2, mb: 4}}>
         <Autocomplete
           id="autoCompleteContextField"
           value={componentInput}
@@ -82,15 +86,18 @@ const ComponentDropDown = ({
           options={state.components || []}
           getOptionLabel={getOptionLabel}
           renderOption={renderOption}
-          sx={{ width: 425 }}
+          sx={{ width: 425, border: "1px solid black"  }}
           freeSolo
           renderInput={params => (
-            <TextField {...params} label="Select Component" helperText='Select a component for your selected context to consume' />
+            <TextField {...params} InputProps={{
+              ...params.InputProps,
+              style: { color: color },
+            }}   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,6 +4,7 @@ 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,6 +16,8 @@ const ContextDropDown = ({
 }) => {
   const { allContext } = contextStore;
 
+  const isDarkMode = useSelector(store => store.darkMode.isDarkMode)
+const color = isDarkMode ? "white":"black"
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
       setContextInput({
@@ -64,11 +67,11 @@ const ContextDropDown = ({
     return option.name;
   };
 
-  const renderOption = (props, option) => <li {...props}>{option.name}</li>;
+  const renderOption = (props, option) => <li style={{ color:"black", border: "1px solid black" }} {...props}>{option.name}</li>;
 
   return (
     <Fragment>
-      <Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
+      <Box sx={{ display: 'flex', gap: 2, mb: 4, border:"1px black solid" }}>
         <Autocomplete
           id="autoCompleteContextField"
           value={contextInput}
@@ -83,12 +86,17 @@ const ContextDropDown = ({
           sx={{ width: 425 }}
           freeSolo
           renderInput={params => (
-            <TextField {...params} label="Select Context" helperText='Select a context you would like to assign'/>
+            <TextField {...params}
+            InputProps={{
+              ...params.InputProps,
+              style: { color },
+            }}  
+            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';
@@ -20,7 +22,10 @@ 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');
 
@@ -29,17 +34,18 @@ const ContextManager = (props): JSX.Element => {
   };
 
   const background_Color = isDarkMode ? '#21262b' : 'white'
+  const color = isDarkMode ? 'white' : 'black'
 
   return (
     <React.Fragment>
-      <div className={classes.contextContainer} style={{backgroundColor: background_Color}}>
+      <div className={classes.contextContainer} style={style.style}>
         <Box sx={{ width: '100%', typography: 'body1' }}>
-          <TabContext value={value}>
+          <TabContext value={value} sx={{color:color}}>
             <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-              <TabList onChange={handleChange} centered={true}>
-                <Tab label="Create/Edit" value="1" />
-                <Tab label="Assign" value="2" />
-                <Tab label="Display" value="3" />
+              <TabList onChange={handleChange} centered={true} sx={{color:color}}>
+                <Tab   style={ { color: color }}label="Create/Edit" value="1" />
+                <Tab style={{ color: color }} label="Assign" value="2" />
+                <Tab style={{ color: color }} label="Display" value="3" />
               </TabList>
             </Box>
             <TabPanel value="1">
@@ -58,4 +64,4 @@ const ContextManager = (props): JSX.Element => {
   );
 };
 
-export default ContextManager;
+export default ContextManager;