Merge branch 'garrett/statecontexttest' of https://github.com/oslabs-beta/ReacType-v15 into mike/statecontexttest

Author: mdunnmon

app/src/components/App.tsx

@@ -12,16 +12,21 @@ 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 = useSelector(store => store.appState);
   const dispatch = useDispatch();
+  console.log("loaded right away")
   // 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;
-    dispatch(toggleLoggedIn())
-  } 
+  useEffect(()=>{
+    if (window.localStorage.getItem('ssid') !== 'guest') {
+      // state.isLoggedIn = true;
+      dispatch(toggleLoggedIn())
+    } 
+  },[])
+
   // else {
   //   state.isLoggedIn = false;
   // }
@@ -63,7 +68,7 @@ export const App = (): JSX.Element => {
         }
       });
     }
-  }, []);
+  }, [state.isLoggedIn]);
   useEffect(() => {
     // provide config properties to legacy projects so new edits can be auto saved
     // if (state.config === undefined) {

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

@@ -1,16 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { useStore } from 'react-redux';
+// import { useStore } from 'react-redux';
 import Grid from '@mui/material/Grid';
 import StatePropsPanel from './components/StatePropsPanel';
 
 const CreateContainer = ({isThemeLight, data}) => {
-  const store = useStore();
-  const [state, setState] = useState([]);
+  // const store = useStore();
+  // const [state, setState] = useState([]);
 
-  //pulling data from redux store
-  useEffect(() => {
-    setState(store.getState().contextSlice);
-  }, []);
+  // //pulling data from redux store
+  // useEffect(() => {
+  //   setState(store.getState().contextSlice);
+  // }, []);
 
   return (
       <Grid container display="flex" justifyContent="stretch" flexDirection="column">

app/src/components/login/SignUp.tsx

@@ -52,7 +52,7 @@ const useStyles = makeStyles(theme => ({
     alignItems: 'center'
   },
   avatar: {
-    margin: theme.spacing(1),
+    // margin: theme.spacing(1),
     backgroundColor: '#3EC1AC'
   },
   form: {

app/src/components/right/ComponentPanel.tsx

@@ -25,7 +25,7 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
 
 const state = useSelector(store => store.appState);
 const dispatch = useDispatch();
-console.log('state', state)
+
 
   //state hooks for inputted component name, component id and array of components
   const [errorStatus, setErrorStatus] = useState(false);

app/src/components/right/LoginButton.tsx

@@ -5,11 +5,14 @@ import { useHistory } from 'react-router-dom';
 import makeStyles from '@mui/styles/makeStyles';
 import StateContext from '../../context/context';
 import { useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
+import { toggleLoggedIn } from '../../redux/reducers/slice/appStateSlice';
 
 export default function LoginButton() {
   const history = useHistory();
   // const [state,] = useContext(StateContext);
   const state = useSelector(store => store.appState)
+  const dispatch = useDispatch();
   // const handleLogout = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
   //   e.preventDefault();
   //   // clear local storage
@@ -29,6 +32,7 @@ export default function LoginButton() {
       window.location.href = '/index-prod.html'
     } else {
     window.location.href = 'http://localhost:8080/#/login';
+    dispatch(toggleLoggedIn())
     }
   }
   if (state.isLoggedIn) {