adding global login state

Author: akbuma

src/actionTypes/index.ts

@@ -41,7 +41,4 @@ export const UPDATE_CHILDREN_SORT: string = 'UPDATE_CHILDREN_SORT';
 export const UPDATE_CODE: string = 'UPDATE_CODE';
 export const UPDATE_HTML_ATTR: string = 'UPDATE_HTML_ATTR';
 
-export const SET_USERNAME: string = 'SET_USERNAME';
-export const SET_PASSWORD: string = 'SET_PASSWORD';
-export const LOGIN: string = 'LOGIN';
-export const SIGNUP: string = 'SIGNUP';
+export const SET_LOGIN_STATE: string = 'SET_LOGIN_STATE';

src/actions/actionCreators.ts

@@ -39,10 +39,7 @@ import {
   UNDO,
   UPDATE_HTML_ATTR,
   UPDATE_CODE,
-  SET_USERNAME,
-  SET_PASSWORD,
-  LOGIN,
-  SIGNUP
+  SET_LOGIN_STATE
 } from '../actionTypes/index';
 import { loadState } from '../localStorage';
 import createFiles from '../utils/createFiles.util';
@@ -333,28 +330,6 @@ export const updateHtmlAttr = ({
   payload: { attr, value }
 });
 
-export const setUsername = (username: string): Action => ({
-  type: SET_USERNAME,
-  payload: username
-});
-
-export const setPassword = (password: string): Action => ({
-  type: SET_PASSWORD,
-  payload: password
-})
-
-// export const login = (username: string, password: string) => ({
-//   return (dispatch: any) => {
-//     fetch('/login', {
-//       method: 'POST',
-//       body: JSON.stringify({ username, password })
-//     })
-//     .then(response => response.json())
-//     .then(data => console.log(data))
-//   }
-// })
-
-// export const signup = (username: string, password: string): Action => ({
-//   type: SIGNUP,
-//   payload: { username, password }
-// })
+export const setLoginState = (): Action => ({
+  type: SET_LOGIN_STATE
+})

src/components/login/SignIn.tsx

@@ -1,8 +1,8 @@
 import React, { Component, useState } from 'react';
 //import { connect } from 'react';
 import { LoginInt } from '../../interfaces/Interfaces';
-import { setUsername, setPassword } from '../../actions/actionCreators';
-//import { useSelector } from 'react-redux';
+import { setLoginState } from '../../actions/actionCreators';
+import { useSelector, useDispatch } from 'react-redux';
 import { Link as RouteLink, withRouter, useHistory } from 'react-router-dom';
 
 import Avatar from '@material-ui/core/Avatar';
@@ -20,6 +20,7 @@ import { makeStyles, withStyles } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 import { render } from 'enzyme';
 
+/*
 const mapStateToProps = (store: any) => ({
   username: store.credentials.username,
   password: store.credentials.password
@@ -36,6 +37,7 @@ interface LoginProps extends LoginInt {
   setUsername(username: string): void;
   setPassword(username: string): void;
 }
+*/
 
 function Copyright() {
   return (
@@ -70,15 +72,18 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const SignIn: React.FC<LoginProps> = props => {
+const SignIn: React.FC<LoginInt> = props => {
   const classes = useStyles();
-  //const count = useSelector(state => state);
+  const s = useSelector(state => state);
+  const dispatch = useDispatch();
 
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
 
   const history = useHistory();
 
+  console.log('state on load: ', s.auth)
+
   const handleChange = e => {
     let inputVal = e.target.value;
     switch (e.target.name) {
@@ -93,6 +98,9 @@ const SignIn: React.FC<LoginProps> = props => {
 
   const handleLogin = e => {
     console.log('click fired on handleLogin');
+    console.log('state: ', s);
+    dispatch(setLoginState());
+    /*
     e.preventDefault();
     const body = JSON.stringify({
       username,
@@ -119,6 +127,7 @@ const SignIn: React.FC<LoginProps> = props => {
         }
       })
       .catch(err => console.log(err));
+    */
   };
 
   return (

src/containers/LoginContainer.tsx

@@ -18,14 +18,21 @@ ReactDOM.render(
 );
 */
 
+/*
+The first file that loads 
+If cookie is valid, send the user to app and set the login boolean to true
+If the cookie has expired, send the user back to login
+*/
+
 ReactDOM.render(
   <Provider store={store}>
     <Router>
       <Switch>
         {/* change route to signin later for official release */}
-        <Route exact path="/" component={App} />
+        <Route exact path="/" component={SignIn} />
         <Route exact path="/signup" component={SignUp} />
         <Route exact path="/app" component={App} />
+        {/* <PrivateRoute path='/protected' component={Protected} /> */}
       </Switch>
     </Router>
   </Provider>,

src/index.js

@@ -85,8 +85,7 @@ export interface ApplicationStateInt {
 }
 
 export interface LoginInt {
-  username: string;
-  password: string;
+  isLoggedIn: boolean;
 }
 
 //Global Action interface \

src/interfaces/Interfaces.ts

@@ -5,7 +5,7 @@ import loginReducer from './loginReducer';
 
 const reducers = combineReducers({
   workspace: componentReducer,
-  credentials: loginReducer
+  auth: loginReducer
 });
 
 export default reducers;

src/reducers/index.ts

@@ -112,8 +112,7 @@ export const initialComponentState: ComponentInt = {
 };
 
 export const initialLoginState: LoginInt = {
-  username: '',
-  password: ''
+  isLoggedIn: false
 };
 
 export const nativeComponentTypes = [

src/reducers/initialState.ts

@@ -1,45 +1,13 @@
 import { initialLoginState } from './initialState';
 import { Action } from '../interfaces/Interfaces';
-import { SET_USERNAME, SET_PASSWORD } from '../actionTypes/index';
-/*
-export interface LoginInt {
-  username: string;
-  password: string;
-}
-
-export const initialLoginState: LoginInt = {
-  username: '',
-  password: ''
-};
-
-export interface Action {
-  type: string;
-  payload?: any;
-}
-
-export const setUsername = (username: string): Action => ({
-  type: SET_USERNAME,
-  payload: username
-});
-
-export const setPassword = (password: string): Action => ({
-  type: SET_PASSWORD,
-  payload: password
-})
-*/
+import { SET_LOGIN_STATE } from '../actionTypes/index';
 
 const loginReducer = (state = initialLoginState, action: Action) => {
   switch(action.type) {
-    case SET_USERNAME:
-      return {
-        ...state,
-        username: action.payload
-      }
-
-    case SET_PASSWORD:
+    case SET_LOGIN_STATE:
+      const status = !state.isLoggedIn
       return {
-        ...state,
-        password: action.payload
+        isLoggedIn: status
       }
 
     default: