Merge pull request #17 from oslabs-beta/mike/darkmodefixes

continue state migration to redux toolkit and add initial websocket functionality.

Author: iancdavis

app/src/Dashboard/NavbarDash.tsx

@@ -50,7 +50,7 @@ const StyledMenu = withStyles({
 })(props => (
   <Menu
     elevation={0}
-    getContentAnchorEl={null}
+    // getContentAnchorEl={null}
     anchorOrigin={{
       vertical: 'bottom',
       horizontal: 'center'

app/src/Dashboard/ProjectContainer.tsx

@@ -84,11 +84,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

app/src/components/App.tsx

@@ -9,26 +9,39 @@ import reducer from '../reducers/componentReducer';
 import localforage from 'localforage';
 import { saveProject } from '../helperFunctions/projectGetSaveDel';
 import Cookies from 'js-cookie';
+//redux toolkit addition
+import { useSelector, useDispatch } from 'react-redux';
+import { setInitialState, toggleLoggedIn, configToggle } from '../redux/reducers/slice/appStateSlice';
+
 // Intermediary component to wrap main App component with higher order provider components
 export const App = (): JSX.Element => {
-  const [state, dispatch] = useReducer(reducer, initialState);
+  // const [state, dispatch] = useReducer(reducer, initialState);
+  const state = useSelector(store => store.appState);
+  const dispatch = useDispatch();
   // checks if user is signed in as guest or actual user and changes loggedIn boolean accordingly
-  if (window.localStorage.getItem('ssid') !== 'guest') {
-    state.isLoggedIn = true;
-  } else {
-    state.isLoggedIn = false;
-  }
+  useEffect(()=>{
+    if (window.localStorage.getItem('ssid') !== 'guest') {
+      // state.isLoggedIn = true;
+      dispatch(toggleLoggedIn())
+    } 
+  },[])
+
+  // else {
+  //   state.isLoggedIn = false;
+  // }
   // following useEffect runs on first mount
   useEffect(() => {
     // if user is a guest, see if a project exists in localforage and retrieve it
-    if (state.isLoggedIn === false) {
+    // if (state.isLoggedIn === false) {
+      if (!state.isLoggedIn) {
       localforage.getItem('guestProject').then(project => {
         // if project exists, use dispatch to set initial state to that project
         if (project) {
-          dispatch({
-            type: 'SET INITIAL STATE',
-            payload: project
-          });
+          // dispatch({
+          //   type: 'SET INITIAL STATE',
+          //   payload: project
+          // });
+          dispatch(setInitialState(project))
         }
       });
     } else {
@@ -42,10 +55,11 @@ export const App = (): JSX.Element => {
       //also load user's last project, which was saved in localforage on logout
       localforage.getItem(userId).then(project => {
         if (project) {
-          dispatch({
-            type: 'SET INITIAL STATE',
-            payload: project
-          });
+          // dispatch({
+          //   type: 'SET INITIAL STATE',
+          //   payload: project
+          // });
+          dispatch(setInitialState(project))
         } else {
           console.log(
             'No user project found in localforage, setting initial state blank'
@@ -56,35 +70,38 @@ export const App = (): JSX.Element => {
   }, []);
   useEffect(() => {
     // provide config properties to legacy projects so new edits can be auto saved
-    if (state.config === undefined) {
-      state.config = { saveFlag: true, saveTimer: false };
-    }
+    // if (state.config === undefined) {
+    //   state.config = { saveFlag: true, saveTimer: false };
+    // }
     // New project save configuration to optimize server load and minimize Ajax requests
     if (state.config.saveFlag) {
-      state.config.saveFlag = false;
-      state.config.saveTimer = true;
+      // state.config.saveFlag = false;
+      // state.config.saveTimer = true;
+      dispatch(configToggle())
+
       let userId;
       if (Cookies.get('ssid')) {
         userId = Cookies.get('ssid');
       } else {
         userId = window.localStorage.getItem('ssid');
       }
-      if (state.isLoggedIn === false) {
+      // if (state.isLoggedIn === false) {
+      if (!state.isLoggedIn) {
         localforage.setItem('guestProject', state);
       } else if (state.name !== '') {
         saveProject(state.name, state);
         localforage.setItem(userId, state);
       }
     }
-    if (state.config.saveTimer) {
-      state.config.saveTimer = false;
+    if (!state.config.saveTimer) {
+      // state.config.saveTimer = false;
       setTimeout(() => {
-        state.config.saveFlag = true;
+        // state.config.saveFlag = true;
       }, 15000);
     }
   }, [state]);
   // uncomment below to log state
-  // console.log('STATE!!!!: ', state);
+
   return (
     <div className="app">
       <DndProvider backend={HTML5Backend}>

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

@@ -9,28 +9,32 @@ 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 [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 allContext = useSelector(state => state.contextSlice);
+  // 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]);
+  // useEffect(() => {
+  //   setState(allContext);
+  // }, [allContext]);
 
-  const renderTable = targetContext => {
+  const renderTable = (targetContext) => {
     if (targetContext === null || !targetContext.values) {
       setTableState(defaultTableData);
     } else {
@@ -39,7 +43,7 @@ const AssignContainer = () => {
   };
 
   //construct data for table displaying component table
-  const renderComponentTable = targetComponent => {
+  const renderComponentTable = (targetComponent) => {
     //target Component is main
 
     const listOfContexts = [];
@@ -48,7 +52,7 @@ const AssignContainer = () => {
       targetComponent !== null &&
       targetComponent.name
     ) {
-      state.allContext.forEach(context => {
+      contextParam.allContext.forEach((context) => {
         if (context.components.includes(targetComponent.name)) {
           listOfContexts.push(context.name);
         }
@@ -67,16 +71,18 @@ const AssignContainer = () => {
     )
       return;
     dispatch(
-    addComponentToContext({
+      addComponentToContext({
         context: contextInput,
         component: componentInput
       })
     );
     //trigger generateCode(), update code preview tab
-    dispatchContext({
-      type: 'DELETE ELEMENT',
-      payload: 'FAKE_ID'
-    });
+    dispatch(deleteElement({ id: 'FAKE_ID', contextParam: contextParam }));
+
+    // dispatchContext({
+    //   type: 'DELETE ELEMENT',
+    //   payload: 'FAKE_ID'
+    // });
 
     // setState(allContext);
     renderComponentTable(componentInput);
@@ -96,7 +102,7 @@ const AssignContainer = () => {
           >
             <Grid item>
               <ContextDropDown
-                contextStore={state}
+                contextStore={contextParam}
                 renderTable={renderTable}
                 contextInput={contextInput}
                 setContextInput={setContextInput}
@@ -125,7 +131,7 @@ const AssignContainer = () => {
             >
               <Grid item>
                 <ComponentDropDown
-                  contextStore={state}
+                  contextStore={contextParam}
                   renderComponentTable={renderComponentTable}
                   componentInput={componentInput}
                   setComponentInput={setComponentInput}

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

@@ -3,6 +3,7 @@ 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';
 
 const filter = createFilterOptions();
 
@@ -13,7 +14,11 @@ const ComponentDropDown = ({
   setComponentInput
 }) => {
   const { allContext } = contextStore;
-  const [componentList] = useContext(StateContext);
+  // const [componentList] = useContext(StateContext);
+  const { state, isDarkMode } = useSelector((store) => ({
+    state: store.appState,
+    isDarkMode: store.darkMode.isDarkMode
+  }));
 
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
@@ -38,7 +43,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,
@@ -51,7 +56,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;
@@ -65,6 +70,7 @@ const ComponentDropDown = ({
   };
 
   const renderOption = (props, option) => <li {...props}>{option.name}</li>;
+  const color = isDarkMode ? 'lightgray' : 'black';
 
   return (
     <Fragment>
@@ -77,13 +83,20 @@ const ComponentDropDown = ({
           selectOnFocus
           clearOnBlur
           handleHomeEndKeys
-          options={componentList.components || []}
+          options={state.components || []}
           getOptionLabel={getOptionLabel}
           renderOption={renderOption}
           sx={{ width: 425 }}
           freeSolo
-          renderInput={params => (
-            <TextField {...params} label="Select Component" helperText='Select a component for your selected context to consume' />
+          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 } }}
+            />
           )}
         />
       </Box>

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();
 
@@ -14,6 +15,7 @@ const ContextDropDown = ({
   setContextInput
 }) => {
   const { allContext } = contextStore;
+  const isDarkMode = useSelector((store) => store.darkMode.isDarkMode);
 
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
@@ -38,7 +40,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,
@@ -51,7 +53,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;
@@ -65,6 +67,7 @@ const ContextDropDown = ({
   };
 
   const renderOption = (props, option) => <li {...props}>{option.name}</li>;
+  const color = isDarkMode ? 'lightgray' : 'black';
 
   return (
     <Fragment>
@@ -82,8 +85,15 @@ const ContextDropDown = ({
           renderOption={renderOption}
           sx={{ width: 425 }}
           freeSolo
-          renderInput={params => (
-            <TextField {...params} label="Select Context" helperText='Select a context you would like to assign'/>
+          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 } }}
+            />
           )}
         />
       </Box>