fixs bugs related to logging in and logging out

Co-authored-by: Mike Dunnmon <[email protected]>

Author: GarrettHutson

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

@@ -46,21 +46,21 @@ function Copyright() {
 
 const useStyles = makeStyles(theme => ({
   paper: {
-    marginTop: theme.spacing(8),
+    // marginTop: theme.spacing(8),
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center'
   },
   avatar: {
-    margin: theme.spacing(1),
+    // margin: theme.spacing(1),
     backgroundColor: '#3EC1AC'
   },
   form: {
     width: '100%', // Fix IE 11 issue.
-    marginTop: theme.spacing(3)
+    // marginTop: theme.spacing(3)
   },
   submit: {
-    margin: theme.spacing(3, 0, 2)
+    // margin: theme.spacing(3, 0, 2)
   },
   root: {
     '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {

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) {