add session gating

frontend/public/stylesheets/master.css

@@ -3,6 +3,7 @@
 @import './footer.css';
 @import './filter.css';
 @import './order.css';
+@import './session.css';
 
 /* background: #2b4162; */
 /* background: #4daa57 */

frontend/public/stylesheets/session.css

+.login {
+  padding: 50px; 
+  display: flex;
+  justify-content: center;
+}
\ No newline at end of file

frontend/src/App.jsx

 import { useEffect, useState } from "react";
 import { connect } from "react-redux";
-import Header from "./components/header/Header";
 import OrderIndex from "./components/order/OrderIndex";
 import NoOrders from "./components/order/NoOrders";
 import { fetchOrders } from "./actions/order_actions";
@@ -23,7 +22,6 @@ const App = ({ orders, fetchOrders }) => {
 
   return (
     <div className="app">
-      <Header />
       <div className="fs-collapse">
         <FilterSearch setOrdersToShow={setOrdersToShow} />
         <div className="collapse-expand">

frontend/src/Root.jsx

+import { connect } from "react-redux";
+import Header from "./components/header/Header";
+import App from "./App"
+import Login from "./components/session/Login";
+
+const Root = ({ isLoggedIn }) => {
+  return (
+    <div>
+      <Header />
+      {isLoggedIn ? 
+        <App /> :
+        <Login />
+      }
+    </div>
+  );
+}
+
+const mapStateToProps = (state) => ({
+  isLoggedIn: state.session.isAuthenticated,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Root);
\ No newline at end of file

frontend/src/actions/session_actions.js

+import * as SessionAPIUtil from "../util/session_api_util";
+
+export const LOGIN_USER = 'LOGIN_USER';
+export const LOGOUT_USER = 'LOGOUT_USER';
+
+const receiveLogin = (user) => ({
+  type: LOGIN_USER,
+  user,
+})
+
+const receiveLogout = () => ({
+  type: LOGOUT_USER,
+})
+
+export const login = payload => dispatch => {
+  SessionAPIUtil.createSession(payload)
+  .then(res => {
+    dispatch(receiveLogin(res))
+  })
+}
+
+export const logout = () => dispatch => {
+  dispatch(receiveLogout());
+}

frontend/src/components/header/Header.jsx

-import React from "react";
+import { connect } from "react-redux";
 import Image from "../atoms/Image";
 import Logout from "../session/Logout";
 
-const Header = () => {
+const Header = ({ isLoggedIn, logout }) => {
   return (
     <div className="header">
       <div>
         <Image src="https://www.flaticon.com/svg/vstatic/svg/2562/2562296.svg?token=exp=1620448865~hmac=b6bb0b0a072e16f423c481f7a3175fa9" />{" "}
-        <div>
-          Warehouse Management
-        </div>
+        <div>Warehouse Management</div>
       </div>
-      <Logout />
+      {isLoggedIn ? <Logout onClick={logout} /> : null}
     </div>
   );
 };
 
-export default Header;
+const mapStateToProps = (state) => ({
+  isLoggedIn: state.session.isAuthenticated,
+});
+
+const mapDispatchToProps = (dispatch) => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Header);

frontend/src/components/session/Login.jsx

-import React from 'react';
+import React from "react";
+import { connect } from "react-redux";
 import { GoogleLogin } from "react-google-login";
-import keys from "../../config/keys_dev"
+import keys from "../../config/keys_dev";
+import { login } from "../../actions/session_actions";
 
 const clientId = keys.clientId;
 
-const Login = () => {
-
-  const responseGoogle = (response) => {
-    console.log(response);
+const Login = ({ login }) => {
+  const responseGoogle = (googleResponse) => {
+    const { tokenId, profileObj } = googleResponse;
+    login({ token: tokenId, user: profileObj });
   };
 
   return (
-    <div>
+    <div className="login">
       <GoogleLogin
         clientId={clientId}
         buttonText="Login with Google"
         onSuccess={responseGoogle}
         onFailure={responseGoogle}
         cookiePolicy={"single_host_origin"}
-        // isSignedIn={true}
+        isSignedIn={true}
       />
     </div>
   );
-}
+};
+
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = (dispatch) => ({
+  login: (token) => dispatch(login(token)),
+});
 
-export default Login;
+export default connect(mapStateToProps, mapDispatchToProps)(Login);
\ No newline at end of file

frontend/src/components/session/Logout.jsx

-import React from "react";
+import { connect } from "react-redux";
 import { GoogleLogout } from "react-google-login";
+import { logout } from "../../actions/session_actions";
 import keys from "../../config/keys_dev";
 
 const clientId = keys.clientId;
 
-const Logout = () => {
-  
-  const responseGoogle = (response) => {
-    console.log(response);
+const Logout = ({ logout }) => {
+  const responseGoogle = (googleResponse) => {
+    logout();
   };
 
   return (
@@ -16,10 +16,15 @@ const Logout = () => {
         clientId={clientId}
         buttonText="Logout"
         onLogoutSuccess={responseGoogle}
-        isSignedIn={true}
       />
     </div>
   );
 };
 
-export default Logout;
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = (dispatch) => ({
+  logout: () => dispatch(logout()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Logout);

frontend/src/index.jsx

 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
 import reportWebVitals from './reportWebVitals';
 import configureStore from './store/store';
 import { Provider } from 'react-redux';
+import Root from './Root';
 
 document.addEventListener('DOMContentLoaded', () => {
 
@@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   ReactDOM.render(
     <Provider store={store}>
-      <App />
+      <Root />
     </Provider>,
     document.getElementById('root')
   );

frontend/src/reducers/root_reducer.js

 import { combineReducers } from "redux";
 import entities from "./entities/entities_reducer";
+import session from "./session/session_reducer";
 
 const RootReducer = combineReducers({
   entities,
+  session,
 });
 
 export default RootReducer;

frontend/src/reducers/session/session_reducer.js

+import { LOGIN_USER, LOGOUT_USER } from "../../actions/session_actions";
+
+const initialState = {
+  isAuthenticated: false,
+  user: null
+}
+
+const SessionState = (oldState = initialState, action) => {
+  Object.freeze(oldState);
+  switch (action.type) {
+    case LOGIN_USER:
+      return {
+        isAuthenticated: !!action.user,
+        user: action.user,
+      }
+    case LOGOUT_USER:
+      return initialState;
+    default:
+      return oldState;
+  }
+}
+
+export default SessionState;
\ No newline at end of file

frontend/src/util/session_api_util.jsx

+// import axios from 'axios';
+
+export const createSession = (payload) => {
+  const { token, user } = payload;
+
+  // call axios with token
+
+  return new Promise((resolve, reject) => {
+    resolve(user);
+  })  
+};