BREAKING CHANGES: Converted to use Redux stores. Login now working using Redux.

2020-01-31 13:20:15 -08:00
parent f1ac052a1b
commit 3060c16dd3
26 changed files with 628 additions and 360 deletions
--- a/client/package.json
+++ b/client/package.json
@@ -26,9 +26,15 @@
    "react-image-file-resizer": "^0.2.1",
    "react-moment": "^0.9.7",
    "react-number-format": "^4.3.1",
+    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "react-trello": "^2.2.3",
+    "redux": "^4.0.5",
+    "redux-logger": "^3.0.6",
+    "redux-persist": "^6.0.0",
+    "redux-saga": "^1.1.3",
+    "reselect": "^4.0.0",
    "styled-components": "^4.4.1",
    "subscriptions-transport-ws": "^0.9.16"
  },
--- a/client/src/App/App.container.jsx
+++ b/client/src/App/App.container.jsx
@@ -1,23 +1,20 @@
-import React, { Component } from "react";
-
-import App from "./App";
-import Spin from "../components/loading-spinner/loading-spinner.component";
-
+import { ApolloLink } from "apollo-boost";
+import { InMemoryCache } from "apollo-cache-inmemory";
 import ApolloClient from "apollo-client";
 import { split } from "apollo-link";
+import { setContext } from "apollo-link-context";
 import { HttpLink } from "apollo-link-http";
+import apolloLogger from "apollo-link-logger";
 import { WebSocketLink } from "apollo-link-ws";
 import { getMainDefinition } from "apollo-utilities";
-import { InMemoryCache } from "apollo-cache-inmemory";
-import { setContext } from "apollo-link-context";
-import { resolvers, typeDefs } from "../graphql/resolvers";
-import apolloLogger from "apollo-link-logger";
-import { ApolloLink } from "apollo-boost";
+import React, { Component } from "react";
 import { ApolloProvider } from "react-apollo";
-import { persistCache } from "apollo-cache-persist";
-import initialState from "../graphql/initial-state";
+import SpinnerComponent from "../components/loading-spinner/loading-spinner.component";
 //import { shouldRefreshToken, refreshToken } from "../graphql/middleware";
 import errorLink from "../graphql/apollo-error-handling";
+import App from "./App";
+
+

 class AppContainer extends Component {
  state = {
@@ -69,14 +66,8 @@ class AppContainer extends Component {
    );

    const authLink = setContext((_, { headers }) => {
-      // get the authentication token from local storage if it exists
      const token = localStorage.getItem("token");
-      // return the headers to the context so httpLink can read them
      if (token) {
-        // if (shouldRefreshToken) {
-        //   refreshToken();
-        // }
-
        return {
          headers: {
            ...headers,
@@ -99,31 +90,13 @@ class AppContainer extends Component {
    const client = new ApolloClient({
      link: ApolloLink.from(middlewares),
      cache,
-      typeDefs,
-      resolvers,
      connectToDevTools: true
    });

-    client.writeData({
-      data: initialState
-    });
-
-    try {
-      await persistCache({
-        cache,
-        storage: window.sessionStorage,
-        debug: true
-      });
-    } catch (error) {
-      console.error("Error restoring Apollo cache", error);
-    }
-
    this.setState({
      client,
      loaded: true
    });
-
-    //Init local state.
  }

  componentWillUnmount() {}
@@ -132,7 +105,7 @@ class AppContainer extends Component {
    const { client, loaded } = this.state;

    if (!loaded) {
-      return <Spin />;
+      return <SpinnerComponent />;
    }

    return (
--- a/client/src/App/App.js
+++ b/client/src/App/App.js
@@ -1,22 +1,20 @@
-import React, { useEffect, Suspense, lazy, useState } from "react";
-import { useApolloClient, useQuery } from "@apollo/react-hooks";
-import { Switch, Route, Redirect } from "react-router-dom";
-import firebase from "../firebase/firebase.utils";
+import { useApolloClient } from "@apollo/react-hooks";
 import i18next from "i18next";
-
-import "./App.css";
-
+import React, { lazy, Suspense, useEffect, useState } from "react";
+import { Route, Switch } from "react-router-dom";
+import ErrorBoundary from "../components/error-boundary/error-boundary.component";
 //Component Imports
 import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
-import AlertComponent from "../components/alert/alert.component";
-import ErrorBoundary from "../components/error-boundary/error-boundary.component";
-
 import { auth } from "../firebase/firebase.utils";
 import { UPSERT_USER } from "../graphql/user.queries";
-import { GET_CURRENT_USER, GET_LANGUAGE } from "../graphql/local.queries";
-// import { QUERY_BODYSHOP } from "../graphql/bodyshop.queries";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";

+// import { QUERY_BODYSHOP } from "../graphql/bodyshop.queries";
 import PrivateRoute from "../utils/private-route";
+import "./App.css";
+import { checkUserSession } from "../redux/user/user.actions";
+import { selectCurrentUser } from "../redux/user/user.selectors";

 const LandingPage = lazy(() => import("../pages/landing/landing.page"));
 const ManagePage = lazy(() => import("../pages/manage/manage.page"));
@@ -25,110 +23,85 @@ const Unauthorized = lazy(() =>
  import("../pages/unauthorized/unauthorized.component")
 );

-export default () => {
-  const apolloClient = useApolloClient();
-  const [loaded, setloaded] = useState(false);
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser
+});
+
+const mapDispatchToProps = dispatch => ({
+  checkUserSession: () => dispatch(checkUserSession())
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(({ checkUserSession, currentUser }) => {
  useEffect(() => {
-    //Run the auth code only on the first render.
-    const unsubscribeFromAuth = auth.onAuthStateChanged(async user => {
-      console.log("Auth State Changed.");
-      setloaded(true);
-      if (user) {
-        let token;
-        token = await user.getIdToken();
-        const idTokenResult = await user.getIdTokenResult();
-        const hasuraClaim =
-          idTokenResult.claims["https://hasura.io/jwt/claims"];
-        if (!hasuraClaim) {
-          // Check if refresh is required.
-          const metadataRef = firebase
-            .database()
-            .ref("metadata/" + user.uid + "/refreshTime");
+    checkUserSession();
+    return () => {};
+  }, [checkUserSession]);

-          metadataRef.on("value", async () => {
-            // Force refresh to pick up the latest custom claims changes.
-            token = await user.getIdToken(true);
-          });
-        }
+  // useEffect(() => {
+  //   //Run the auth code only on the first render.
+  //   const unsubscribeFromAuth = auth.onAuthStateChanged(async user => {
+  //     console.log("onAuthStateChanged: User:", user);
+  //     if (user) {
+  //       let token;
+  //       token = await user.getIdToken();

-        //add the bearer token to the headers.
-        localStorage.setItem("token", token);
-        const now = new Date();
-        window.sessionStorage.setItem(`lastTokenRefreshTime`, now);
-        // window.sessionStorage.setItem("user", user);
+  //       //add the bearer token to the headers.
+  //       localStorage.setItem("token", token);
+  //       const now = new Date();
+  //       window.sessionStorage.setItem(`lastTokenRefreshTime`, now);

-        apolloClient
-          .mutate({
-            mutation: UPSERT_USER,
-            variables: { authEmail: user.email, authToken: user.uid }
-          })
-          .then()
-          .catch(error => {
-            console.log("User login upsert error.", error);
-          });
+  //       //token = await user.getIdToken(true); //how to refresh the token.

-        apolloClient.writeData({
-          data: {
-            currentUser: {
-              email: user.email,
-              displayName: user.displayName,
-              token,
-              uid: user.uid,
-              photoUrl: user.photoURL,
-              __typename: "currentUser"
-            }
-          }
-        });
-      } else {
-        apolloClient.writeData({ data: { currentUser: null } });
-        localStorage.removeItem("token");
-      }
-    });
+  //       apolloClient
+  //         .mutate({
+  //           mutation: UPSERT_USER,
+  //           variables: { authEmail: user.email, authToken: user.uid }
+  //         })
+  //         .then()
+  //         .catch(error => {
+  //           console.log("User login upsert error.", error);
+  //         });

-    return function cleanup() {
-      unsubscribeFromAuth();
-    };
-  }, [apolloClient]);
-  const HookCurrentUser = useQuery(GET_CURRENT_USER);
-  const HookLanguage = useQuery(GET_LANGUAGE);
+  //     } else {
+  //       localStorage.removeItem("token");
+  //     }
+  //     setloaded(true);
+  //   });

-  if (!loaded) return <LoadingSpinner />;
-  if (HookCurrentUser.loading || HookLanguage.loading)
-    return <LoadingSpinner />;
-  if (HookCurrentUser.error || HookLanguage.error)
-    return (
-      <AlertComponent
-        message={HookCurrentUser.error.message || HookLanguage.error.message}
-      />
-    );
+  //   return function cleanup() {
+  //     unsubscribeFromAuth();
+  //   };
+  // }, [apolloClient]);

-  if (HookLanguage.data.language)
-    i18next.changeLanguage(HookLanguage.data.language, (err, t) => {
+  if (false)
+    i18next.changeLanguage("en_US", (err, t) => {
      if (err)
        return console.log("Error encountered when changing languages.", err);
    });

+  console.log("currentUser", currentUser);
+  if (currentUser.authorized === null) {
+    //TODO: Translate this.
+    return <LoadingSpinner message="Waiting for Current Auth to persist." />;
+  }
+
  return (
    <div>
      <Switch>
        <ErrorBoundary>
          <Suspense fallback={<LoadingSpinner />}>
-            <Route exact path='/' component={LandingPage} />
-            <Route exact path='/unauthorized' component={Unauthorized} />
-            <Route
-              exact
-              path='/signin'
-              render={() =>
-                HookCurrentUser.data.currentUser ? (
-                  <Redirect to='/manage' />
-                ) : (
-                  <SignInPage />
-                )
-              }
-            />
+            <Route exact path="/" component={LandingPage} />
+            <Route exact path="/unauthorized" component={Unauthorized} />
+
+            <Route exact path="/signin" component={SignInPage} />
+
            <PrivateRoute
-              isAuthorized={HookCurrentUser.data.currentUser ? true : false}
-              path='/manage'
+              //isAuthorized={HookCurrentUser.data.currentUser ? true : false}
+              isAuthorized={currentUser.authorized}
+              path="/manage"
              component={ManagePage}
            />
          </Suspense>
@@ -136,4 +109,4 @@ export default () => {
      </Switch>
    </div>
  );
-};
+});
--- a/client/src/components/chat-window/chat-window.container.jsx
+++ b/client/src/components/chat-window/chat-window.container.jsx
@@ -1,8 +1,22 @@
 import React, { useState } from "react";
 import ChatWindowComponent from "./chat-window.component";
 import { Button } from "antd";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectCurrentUser } from "../../redux/user/user.selectors";

-export default function ChatWindowContainer() {
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser
+});
+
+const mapDispatchToProps = dispatch => ({
+  // signOutStart: () => dispatch(signOutStart())
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function ChatWindowContainer({ currentUser }) {
  const [visible, setVisible] = useState(false);
  return (
    <div style={{ position: "absolute", zIndex: 1000 }}>
@@ -10,9 +24,10 @@ export default function ChatWindowContainer() {
      <Button
        onClick={() => {
          setVisible(!visible);
-        }}>
+        }}
+      >
        Open!
      </Button>
    </div>
  );
-}
+});
--- a/client/src/components/current-user-dropdown/current-user-dropdown.component.jsx
+++ b/client/src/components/current-user-dropdown/current-user-dropdown.component.jsx
@@ -1,17 +1,29 @@
-import { useApolloClient, useQuery } from "@apollo/react-hooks";
+import { useApolloClient } from "@apollo/react-hooks";
 import { Avatar, Col, Dropdown, Icon, Menu, Row } from "antd";
 import i18next from "i18next";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
 import { Link } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
 import UserImage from "../../assets/User.svg";
-import { GET_CURRENT_USER } from "../../graphql/local.queries";
-import AlertComponent from "../alert/alert.component";
+import { selectCurrentUser } from "../../redux/user/user.selectors";
 import SignOut from "../sign-out/sign-out.component";

-export default function CurrentUserDropdown() {
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser
+});
+
+const mapDispatchToProps = dispatch => ({
+  // signOutStart: () => dispatch(signOutStart())
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function CurrentUserDropdown({ currentUser }) {
  const { t } = useTranslation();
-  const { loading, error, data } = useQuery(GET_CURRENT_USER);
+
  const client = useApolloClient();

  const handleMenuClick = e => {
@@ -24,43 +36,39 @@ export default function CurrentUserDropdown() {
    }
  };
  const menu = (
-    <Menu mode='vertical' onClick={handleMenuClick}>
+    <Menu mode="vertical" onClick={handleMenuClick}>
      <Menu.Item>
        <SignOut />
      </Menu.Item>
      <Menu.Item>
-        <Link to='/manage/profile'> {t("menus.currentuser.profile")}</Link>
+        <Link to="/manage/profile"> {t("menus.currentuser.profile")}</Link>
      </Menu.Item>
      <Menu.SubMenu
        title={
          <span>
-            <Icon type='global' />
+            <Icon type="global" />
            <span>{t("menus.currentuser.languageselector")}</span>
          </span>
-        }>
-        <Menu.Item actiontype='lang-select' key='en_us'>
+        }
+      >
+        <Menu.Item actiontype="lang-select" key="en_us">
          {t("general.languages.english")}
        </Menu.Item>
-        <Menu.Item actiontype='lang-select' key='fr'>
+        <Menu.Item actiontype="lang-select" key="fr">
          {t("general.languages.french")}
        </Menu.Item>
-        <Menu.Item actiontype='lang-select' key='es'>
+        <Menu.Item actiontype="lang-select" key="es">
          {t("general.languages.spanish")}
        </Menu.Item>
      </Menu.SubMenu>
    </Menu>
  );

-  if (loading) return null;
-  if (error) return <AlertComponent message={error.message} type='error' />;
-
-  const { currentUser } = data;
-
  return (
    <Dropdown overlay={menu}>
      <Row>
        <Col span={8}>
-          <Avatar size='large' alt='Avatar' src={UserImage} />
+          <Avatar size="large" alt="Avatar" src={UserImage} />
        </Col>
        <Col span={16} style={{ color: "white" }}>
          {currentUser.displayName || t("general.labels.unknown")}
@@ -68,4 +76,4 @@ export default function CurrentUserDropdown() {
      </Row>
    </Dropdown>
  );
-}
+});
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -6,45 +6,45 @@ import { Link } from "react-router-dom";
 import CurrentUserDropdown from "../current-user-dropdown/current-user-dropdown.component";
 import GlobalSearch from "../global-search/global-search.component";
 import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component";
-import "./header.styles.scss";

 export default ({ landingHeader, navItems, selectedNavItem }) => {
  const apolloClient = useApolloClient();
  const { t } = useTranslation();
-  
+
  const handleClick = e => {
    apolloClient.writeData({ data: { selectedNavItem: e.key } });
  };

  return (
-    <Row type='flex' justify='space-around'>
+    <Row type="flex" justify="space-around">
      <Col span={16}>
        <Menu
-          theme='dark'
-          className='header'
+          theme="dark"
+          className="header"
          onClick={handleClick}
          selectedKeys={selectedNavItem}
-          mode='horizontal'>
+          mode="horizontal"
+        >
          <Menu.Item>
            <GlobalSearch />
          </Menu.Item>

-          <Menu.Item key='home'>
-            <Link to='/manage'>
-              <Icon type='home' />
+          <Menu.Item key="home">
+            <Link to="/manage">
+              <Icon type="home" />
              {t("menus.header.home")}
            </Link>
          </Menu.Item>
          <Menu.SubMenu title={t("menus.header.jobs")}>
-            <Menu.Item key='activejobs'>
-              <Link to='/manage/jobs'>
-                <Icon type='home' />
+            <Menu.Item key="activejobs">
+              <Link to="/manage/jobs">
+                <Icon type="home" />
                {t("menus.header.activejobs")}
              </Link>
            </Menu.Item>
-            <Menu.Item key='availablejobs'>
-              <Link to='/manage/available'>
-                <Icon type='home' />
+            <Menu.Item key="availablejobs">
+              <Link to="/manage/available">
+                <Icon type="home" />
                {t("menus.header.availablejobs")}
              </Link>
            </Menu.Item>
--- a/client/src/components/header/header.container.jsx
+++ b/client/src/components/header/header.container.jsx
@@ -1,25 +1,8 @@
 import React from "react";
-import "./header.styles.scss";
-import { useQuery } from "react-apollo";
-// //import {
-//   GET_LANDING_NAV_ITEMS,
-//   GET_NAV_ITEMS
-// } from "../../graphql/metadata.queries";
-import { GET_CURRENT_SELECTED_NAV_ITEM } from "../../graphql/local.queries";
-//import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-//import AlertComponent from "../alert/alert.component";
 import HeaderComponent from "./header.component";

 export default ({ landingHeader, signedIn }) => {
-  const hookSelectedNavItem = useQuery(GET_CURRENT_SELECTED_NAV_ITEM);
-
-  const { selectedNavItem } = hookSelectedNavItem.data;
-
-  console.log("selectedNavItem", selectedNavItem);
  return (
-    <HeaderComponent
-      landingHeader={landingHeader}
-      selectedNavItem={selectedNavItem}
-    />
+    <HeaderComponent landingHeader={landingHeader} selectedNavItem={null} />
  );
 };
--- a/client/src/components/header/header.styles.scss
+++ b/client/src/components/header/header.styles.scss
@@ -1,4 +0,0 @@
-.header{
-        text-align: center;     
-        width: 100%; 
-}
--- a/client/src/components/job-detail-lines/job-lines.component.jsx
+++ b/client/src/components/job-detail-lines/job-lines.component.jsx
@@ -132,6 +132,7 @@ export default function JobLinesComponent({
          />
        );
      }}
+      {...formItemLayout}
      size="small"
      pagination={{ position: "bottom", defaultPageSize: 50 }}
      columns={columns.map(item => ({ ...item }))}
--- a/client/src/components/manage-sign-in-button/manage-sign-in-button.component.jsx
+++ b/client/src/components/manage-sign-in-button/manage-sign-in-button.component.jsx
@@ -4,18 +4,23 @@ import { Link } from "react-router-dom";
 import { GET_CURRENT_USER } from "../../graphql/local.queries";
 import { Icon } from "antd";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectCurrentUser } from "../../redux/user/user.selectors";

-export default function ManageSignInButton() {
-  const {
-    loading,
-    error,
-    data: { currentUser }
-  } = useQuery(GET_CURRENT_USER);
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser
+});

-  if (loading) return <LoadingSpinner />;
-  if (error) return error.message;
+const mapDispatchToProps = dispatch => ({
+  // signOutStart: () => dispatch(signOutStart())
+});

-  return currentUser ? (
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function ManageSignInButton({ currentUser }) {
+  return currentUser.isAuthorized ? (
    <div>
      {" "}
      <Link to="/manage">
@@ -31,4 +36,4 @@ export default function ManageSignInButton() {
      </Link>
    </div>
  );
-}
+});
--- a/client/src/components/sign-in-form/sign-in-form.component.jsx
+++ b/client/src/components/sign-in-form/sign-in-form.component.jsx
@@ -1,76 +1,97 @@
+import { Button, Form, Icon, Input } from "antd";
 import React from "react";
-import { auth } from "../../firebase/firebase.utils";
-import { Form, Icon, Input, Button, Alert } from "antd";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import Logo from "../../assets/logo240.png";
+import { emailSignInStart } from "../../redux/user/user.actions";
+import {
+  selectCurrentUser,
+  selectSignInError
+} from "../../redux/user/user.selectors";
+import { Redirect } from "react-router-dom";

-class SignInForm extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      errorMessage: null
-    };
-  }
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  signInError: selectSignInError
+});

-  handleSubmit = e => {
-    e.preventDefault();
+const mapDispatchToProps = dispatch => ({
+  emailSignInStart: (email, password) =>
+    dispatch(emailSignInStart({ email, password }))
+});

-    this.props.form.validateFields(async (err, values) => {
-      if (!err) {
-        const { email, password } = values;
-        try {
-          await auth.signInWithEmailAndPassword(email, password);
-
-          this.props.form.resetFields();
-        } catch (error) {
-          this.setState({ ...this.state, errorMessage: error.message });
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(
+  Form.create({ name: "sign_in" })(function SignInComponent({
+    form,
+    emailSignInStart,
+    currentUser,
+    signInError
+  }) {
+    const handleSubmit = e => {
+      e.preventDefault();
+      form.validateFields(async (err, values) => {
+        if (!err) {
+          const { email, password } = values;
+          emailSignInStart(email, password);
+          //Try to do the login using a saga here.
        }
-      }
-    });
-  };
-
-  render() {
-    const { getFieldDecorator } = this.props.form;
-    const { errorMessage } = this.state;
+      });
+    };

+    console.log("currentUser", currentUser);
+    const { getFieldDecorator } = form;
    return (
-      <Form onSubmit={this.handleSubmit} className="login-form">
-        <Form.Item label="E-mail">
-          {getFieldDecorator("email", {
-            rules: [
-              {
-                type: "email",
-                message: "Please enter a valid email."
-              },
-              {
-                required: true,
-                message: "Please your email."
-              }
-            ]
-          })(<Input />)}
-        </Form.Item>
-        <Form.Item>
-          {getFieldDecorator("password", {
-            rules: [{ required: true, message: "Please enter your password." }]
-          })(
-            <Input
-              prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
-              type="password"
-              placeholder="Password"
-            />
-          )}
-        </Form.Item>
-        <Form.Item>
-          <div className="login-form-forgot">Forgot password</div>
-          <Button
-            type="primary"
-            htmlType="submit"
-            className="login-form-button"
-          >
-            Log in
-          </Button>
-        </Form.Item>
-        {errorMessage ? <Alert message={errorMessage} type="error" /> : null}
-      </Form>
+      <div>
+        {currentUser.authorized === true ? <Redirect to="/manage?" /> : null}
+
+        <img src={Logo} height="100" width="100" alt="Bodyshop.app" />
+
+        <Form onSubmit={handleSubmit} className="login-form">
+          <Form.Item label="E-mail">
+            {getFieldDecorator("email", {
+              rules: [
+                {
+                  type: "email",
+                  message: "Please enter a valid email."
+                },
+                {
+                  required: true,
+                  message: "Please your email."
+                }
+              ]
+            })(<Input />)}
+          </Form.Item>
+          <Form.Item>
+            {getFieldDecorator("password", {
+              rules: [
+                { required: true, message: "Please enter your password." }
+              ]
+            })(
+              <Input
+                prefix={
+                  <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
+                }
+                type="password"
+                placeholder="Password"
+              />
+            )}
+          </Form.Item>
+          <Form.Item>
+            <div className="login-form-forgot">Forgot password</div>
+            <Button
+              type="primary"
+              htmlType="submit"
+              className="login-form-button"
+            >
+              Log in
+            </Button>
+          </Form.Item>
+          {signInError ? <div>{signInError.message}</div> : null}
+        </Form>
+      </div>
    );
-  }
-}
-export default Form.create({ name: "sign_in" })(SignInForm);
+  })
+);
--- a/client/src/components/sign-in-form/sign-in-form.container.jsx
+++ b/client/src/components/sign-in-form/sign-in-form.container.jsx
@@ -1,46 +0,0 @@
-import React from "react";
-import { ApolloConsumer } from "react-apollo";
-import SignInFormComponent from "./sign-in-form.component";
-import { Row, Col, Layout, Typography } from "antd";
-import FooterComponent from "../footer/footer.component";
-import Logo from "../../assets/logo240.png";
-
-const { Content, Footer } = Layout;
-
-export default function SignInFormContainer() {
-  return (
-    <ApolloConsumer>
-      {client => {
-        return (
-          <Layout>
-            <Content>
-              <Row align="middle">
-                <Col span={2} offset={8}>
-                  <div>
-                    <img
-                      src={Logo}
-                      height="100"
-                      width="100"
-                      alt="Bodyshop.app"
-                    />
-                  </div>
-                </Col>
-                <Col span={6}>
-                  <Typography.Title>Bodyshop.app</Typography.Title>
-                </Col>
-              </Row>
-              <Row>
-                <Col span={8} offset={8}>
-                  <SignInFormComponent apolloClient={client} />
-                </Col>
-              </Row>
-            </Content>
-            <Footer>
-              <FooterComponent />
-            </Footer>
-          </Layout>
-        );
-      }}
-    </ApolloConsumer>
-  );
-}
--- a/client/src/firebase/firebase.utils.js
+++ b/client/src/firebase/firebase.utils.js
@@ -38,6 +38,14 @@ export const firestore = firebase.firestore();

 const provider = new firebase.auth.GoogleAuthProvider();
 provider.setCustomParameters({ prompt: "select_account" });
-export const signInWithGoogle = () => auth.signInWithPopup(provider);

 export default firebase;
+
+export const getCurrentUser = () => {
+  return new Promise((resolve, reject) => {
+    const unsubscribe = auth.onAuthStateChanged(userAuth => {
+      unsubscribe();
+      resolve(userAuth);
+    }, reject);
+  });
+};
--- a/client/src/graphql/apollo-error-handling.js
+++ b/client/src/graphql/apollo-error-handling.js
@@ -1,5 +1,4 @@
 import { onError } from "apollo-link-error";
-import { Observable } from "apollo-link";
 import { auth } from "../firebase/firebase.utils";
 //https://stackoverflow.com/questions/57163454/refreshing-a-token-with-apollo-client-firebase-auth

--- a/client/src/graphql/resolvers.js
+++ b/client/src/graphql/resolvers.js
@@ -1,31 +0,0 @@
-import { gql } from "apollo-boost";
-import { GET_CURRENT_USER } from "./local.queries";
-
-export const typeDefs = gql`
-  extend type Mutation {
-    SetCurrentUser(user: User!): User!
-  }
-
-  extend type User {
-    email: String!
-    displayName: String!
-    token: String!
-  }
-
-  extend type Jobs {
-    id: uuid!
-  }
-`;
-
-export const resolvers = {
-  Mutation: {
-    setCurrentUser: (_root, { user }, { cache }) => {
-      cache.writeQuery({
-        query: GET_CURRENT_USER,
-        data: { currentUser: user }
-      });
-
-      return user;
-    }
-  }
-};
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -3,16 +3,26 @@ import ReactDOM from "react-dom";
 import { BrowserRouter } from "react-router-dom";
 import "./translations/i18n";
 import * as serviceWorker from "./serviceWorker";
-
-import "./index.css";
+import { Provider } from "react-redux";
+import { PersistGate } from "redux-persist/integration/react";
+import { store, persistor } from "./redux/store";
 import AppContainer from "./App/App.container";
+import "./index.css";
+import LoadingSpinner from "./components/loading-spinner/loading-spinner.component";

 require("dotenv").config();

 ReactDOM.render(
-  <BrowserRouter>
-    <AppContainer />
-  </BrowserRouter>,
+  <Provider store={store}>
+    <BrowserRouter>
+      <PersistGate
+        loading={<LoadingSpinner message="PersistGate Loading." />}
+        persistor={persistor}
+      >
+        <AppContainer />
+      </PersistGate>
+    </BrowserRouter>
+  </Provider>,
  document.getElementById("root")
 );

--- a/client/src/pages/sign-in/sign-in.page.jsx
+++ b/client/src/pages/sign-in/sign-in.page.jsx
@@ -1,6 +1,6 @@
 import React from "react";
-import SignInContainer from "../../components/sign-in-form/sign-in-form.container";
+import SignIn from "../../components/sign-in-form/sign-in-form.component";

 export default () => {
-  return <SignInContainer />;
+  return <SignIn />;
 };
--- a/client/src/redux/root.reducer.js
+++ b/client/src/redux/root.reducer.js
@@ -0,0 +1,24 @@
+import { combineReducers } from "redux";
+import { persistReducer } from "redux-persist";
+import storage from "redux-persist/lib/storage";
+
+import userReducer from "./user/user.reducer";
+// import cartReducer from './cart/cart.reducer';
+// import directoryReducer from './directory/directory.reducer';
+// import shopReducer from './shop/shop.reducer';
+
+const persistConfig = {
+  key: "root",
+  storage,
+  //whitelist: ["cart"]
+  blacklist: ["user"]
+};
+
+const rootReducer = combineReducers({
+  user: userReducer
+  //   cart: cartReducer,
+  //   directory: directoryReducer,
+  //   shop: shopReducer
+});
+
+export default persistReducer(persistConfig, rootReducer);
--- a/client/src/redux/root.saga.js
+++ b/client/src/redux/root.saga.js
@@ -0,0 +1,11 @@
+import { all, call } from "redux-saga/effects";
+
+//List of all Sagas
+// import { shopSagas } from "./shop/shop.sagas";
+import { userSagas } from "./user/user.sagas";
+//import { cartSagas } from "./cart/cart.sagas";
+
+export default function* rootSaga() {
+  //All starts all the Sagas concurrently.
+  yield all([call(userSagas)]);
+}
--- a/client/src/redux/store.js
+++ b/client/src/redux/store.js
@@ -0,0 +1,19 @@
+import { createStore, applyMiddleware } from "redux";
+import { persistStore } from "redux-persist";
+import logger from "redux-logger";
+import createSagaMiddleware from "redux-saga";
+import rootReducer from "./root.reducer";
+import rootSaga from "./root.saga";
+
+const sagaMiddleWare = createSagaMiddleware();
+const middlewares = [sagaMiddleWare];
+if (process.env.NODE_ENV === "development") {
+  middlewares.push(logger);
+}
+
+export const store = createStore(rootReducer, applyMiddleware(...middlewares));
+sagaMiddleWare.run(rootSaga);
+
+export const persistor = persistStore(store);
+
+export default { store, persistStore };
--- a/client/src/redux/user/user.actions.js
+++ b/client/src/redux/user/user.actions.js
@@ -0,0 +1,35 @@
+import UserActionTypes from "./user.types";
+
+export const signInSuccess = user => ({
+  type: UserActionTypes.SIGN_IN_SUCCESS,
+  payload: user
+});
+export const signInFailure = errorMsg => ({
+  type: UserActionTypes.SIGN_IN_FAILURE,
+  payload: errorMsg
+});
+
+export const emailSignInStart = emailAndPassword => ({
+  type: UserActionTypes.EMAIL_SIGN_IN_START,
+  payload: emailAndPassword
+});
+
+export const checkUserSession = () => ({
+  type: UserActionTypes.CHECK_USER_SESSION
+});
+
+export const signOutStart = () => ({
+  type: UserActionTypes.SIGN_OUT_START
+});
+export const signOutSuccess = () => ({
+  type: UserActionTypes.SIGN_OUT_SUCCESS
+});
+
+export const signOutFailure = error => ({
+  type: UserActionTypes.SIGN_OUT_FAILURE,
+  payload: error
+});
+
+export const unauthorizedUser = () => ({
+  type: UserActionTypes.UNAUTHORIZED_USER
+});
--- a/client/src/redux/user/user.reducer.js
+++ b/client/src/redux/user/user.reducer.js
@@ -0,0 +1,42 @@
+import UserActionTypes from "./user.types";
+
+const INITIAL_STATE = {
+  currentUser: {
+    authorized: null
+  },
+  error: null
+};
+
+const userReducer = (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+    case UserActionTypes.SIGN_IN_SUCCESS:
+      return {
+        ...state,
+        currentUser: action.payload,
+        error: null
+      };
+    case UserActionTypes.SIGN_OUT_SUCCESS:
+      return {
+        ...state,
+        currentUser: { authorized: false },
+        error: null
+      };
+    case UserActionTypes.UNAUTHORIZED_USER:
+      return {
+        ...state,
+        error: null,
+        currentUser: { authorized: false }
+      };
+    case UserActionTypes.SIGN_IN_FAILURE:
+    case UserActionTypes.SIGN_OUT_FAILURE:
+    case UserActionTypes.EMAIL_SIGN_UP_FAILURE:
+      return {
+        ...state,
+        error: action.payload
+      };
+    default:
+      return state;
+  }
+};
+
+export default userReducer;
--- a/client/src/redux/user/user.sagas.js
+++ b/client/src/redux/user/user.sagas.js
@@ -0,0 +1,87 @@
+import { all, call, put, takeLatest } from "redux-saga/effects";
+import { auth, getCurrentUser } from "../../firebase/firebase.utils";
+import {
+  signInFailure,
+  signInSuccess,
+  signOutFailure,
+  signOutSuccess,
+  unauthorizedUser
+} from "./user.actions";
+import UserActionTypes from "./user.types";
+
+// export function* getSnapshotFromUserAuth(userAuth) {
+//   try {
+//     const userRef = yield call(createUserProfileDocument, userAuth);
+//     //const userSnapshot = yield userRef.get();
+//   } catch (error) {
+//     yield put(signInFailure(error));
+//   }
+// }
+
+export function* signInWithEmail({ payload: { email, password } }) {
+  try {
+    const { user } = yield auth.signInWithEmailAndPassword(email, password);
+    yield put(
+      signInSuccess({
+        id: user.uid,
+        email: user.email,
+        displayName: user.displayName,
+        authorized: true
+      })
+    );
+  } catch (error) {
+    yield put(signInFailure(error));
+  }
+}
+//This is the listener fo rthe call, and when it finds it, it triggers somethign else.
+export function* onEmailSignInStart() {
+  yield takeLatest(UserActionTypes.EMAIL_SIGN_IN_START, signInWithEmail);
+}
+
+export function* isUserAuthenticated() {
+  try {
+    const user = yield getCurrentUser();
+    if (!user) {
+      yield put(unauthorizedUser());
+      return;
+    }
+    yield put(
+      signInSuccess({
+        id: user.uid,
+        email: user.email,
+        displayName: user.displayName,
+        authorized: true
+      })
+    );
+  } catch (error) {
+    yield put(signInFailure(error));
+  }
+}
+
+export function* onCheckUserSession() {
+  yield takeLatest(UserActionTypes.CHECK_USER_SESSION, isUserAuthenticated);
+}
+
+export function* signOutStart() {
+  try {
+    yield auth.signOut();
+    yield put(signOutSuccess());
+  } catch (error) {
+    yield put(signOutFailure(error.message));
+  }
+}
+
+export function* onSignOutStart() {
+  yield takeLatest(UserActionTypes.SIGN_OUT_START, signOutStart);
+}
+
+export function* userSagas() {
+  yield all([
+    // call(onGoogleSignInStart),
+    call(onEmailSignInStart),
+    call(onCheckUserSession),
+    call(onSignOutStart)
+    // call(onEmailSignUpStart),
+    // call(onEmailSignUpSuccess)
+  ]);
+}
--- a/client/src/redux/user/user.selectors.js
+++ b/client/src/redux/user/user.selectors.js
@@ -0,0 +1,13 @@
+import { createSelector } from "reselect";
+
+const selectUser = state => state.user;
+
+export const selectCurrentUser = createSelector(
+  [selectUser],
+  user => user.currentUser
+);
+
+export const selectSignInError = createSelector(
+  [selectUser],
+  user => user.error
+);
--- a/client/src/redux/user/user.types.js
+++ b/client/src/redux/user/user.types.js
@@ -0,0 +1,17 @@
+const UserActionTypes = {
+    SET_CURRENT_USER: "SET_CURRENT_USER",
+    GOOGLE_SIGN_IN_START: "GOOGLE_SIGN_IN_START",
+    SIGN_IN_SUCCESS: "SIGN_IN_SUCCESS",
+    SIGN_IN_FAILURE: "SIGN_IN_FAILURE",
+    EMAIL_SIGN_IN_START: "EMAIL_SIGN_IN_START",
+    CHECK_USER_SESSION: "CHECK_USER_SESSION",
+    SIGN_OUT_START: "SIGN_OUT_START",
+    SIGN_OUT_SUCCESS: "SIGN_OUT_SUCCESS",
+    SIGN_OUT_FAILURE: "SIGN_OUT_FAILURE",
+    EMAIL_SIGN_UP_START: "EMAIL_SIGN_UP_START",
+    EMAIL_SIGN_UP_SUCCESS: "EMAIL_SIGN_UP_SUCCESS",
+    EMAIL_SIGN_UP_FAILURE: "EMAIL_SIGN_UP_FAILURE",
+    UNAUTHORIZED_USER: "UNAUTHORIZED_USER"
+  };
+  export default UserActionTypes;
+  
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1026,6 +1026,13 @@
  dependencies:
    regenerator-runtime "^0.13.2"

+"@babel/runtime@^7.5.5":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308"
+  integrity sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.4.0", "@babel/template@^7.6.0", "@babel/template@^7.7.4":
  version "7.7.4"
  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b"
@@ -1569,6 +1576,50 @@
  resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
  integrity sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=

+"@redux-saga/core@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@redux-saga/core/-/core-1.1.3.tgz#3085097b57a4ea8db5528d58673f20ce0950f6a4"
+  integrity sha512-8tInBftak8TPzE6X13ABmEtRJGjtK17w7VUs7qV17S8hCO5S3+aUTWZ/DBsBJPdE8Z5jOPwYALyvofgq1Ws+kg==
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    "@redux-saga/deferred" "^1.1.2"
+    "@redux-saga/delay-p" "^1.1.2"
+    "@redux-saga/is" "^1.1.2"
+    "@redux-saga/symbols" "^1.1.2"
+    "@redux-saga/types" "^1.1.0"
+    redux "^4.0.4"
+    typescript-tuple "^2.2.1"
+
+"@redux-saga/deferred@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@redux-saga/deferred/-/deferred-1.1.2.tgz#59937a0eba71fff289f1310233bc518117a71888"
+  integrity sha512-908rDLHFN2UUzt2jb4uOzj6afpjgJe3MjICaUNO3bvkV/kN/cNeI9PMr8BsFXB/MR8WTAZQq/PlTq8Kww3TBSQ==
+
+"@redux-saga/delay-p@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@redux-saga/delay-p/-/delay-p-1.1.2.tgz#8f515f4b009b05b02a37a7c3d0ca9ddc157bb355"
+  integrity sha512-ojc+1IoC6OP65Ts5+ZHbEYdrohmIw1j9P7HS9MOJezqMYtCDgpkoqB5enAAZrNtnbSL6gVCWPHaoaTY5KeO0/g==
+  dependencies:
+    "@redux-saga/symbols" "^1.1.2"
+
+"@redux-saga/is@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@redux-saga/is/-/is-1.1.2.tgz#ae6c8421f58fcba80faf7cadb7d65b303b97e58e"
+  integrity sha512-OLbunKVsCVNTKEf2cH4TYyNbbPgvmZ52iaxBD4I1fTif4+MTXMa4/Z07L83zW/hTCXwpSZvXogqMqLfex2Tg6w==
+  dependencies:
+    "@redux-saga/symbols" "^1.1.2"
+    "@redux-saga/types" "^1.1.0"
+
+"@redux-saga/symbols@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@redux-saga/symbols/-/symbols-1.1.2.tgz#216a672a487fc256872b8034835afc22a2d0595d"
+  integrity sha512-EfdGnF423glv3uMwLsGAtE6bg+R9MdqlHEzExnfagXPrIiuxwr3bdiAwz3gi+PsrQ3yBlaBpfGLtDG8rf3LgQQ==
+
+"@redux-saga/types@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@redux-saga/types/-/types-1.1.0.tgz#0e81ce56b4883b4b2a3001ebe1ab298b84237204"
+  integrity sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg==
+
 "@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
@@ -10425,6 +10476,18 @@ react-redux@^5.0.7:
    react-is "^16.6.0"
    react-lifecycles-compat "^3.0.0"

+react-redux@^7.1.3:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.3.tgz#717a3d7bbe3a1b2d535c94885ce04cdc5a33fc79"
+  integrity sha512-uI1wca+ECG9RoVkWQFF4jDMqmaw0/qnvaSvOoL/GA4dNxf6LoV8sUAcNDvE5NWKs4hFpn0t6wswNQnY3f7HT3w==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    hoist-non-react-statics "^3.3.0"
+    invariant "^2.2.4"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.9.0"
+
 react-router-dom@^5.1.2:
  version "5.1.2"
  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"
@@ -10691,7 +10754,19 @@ redux-logger@^3.0.6:
  dependencies:
    deep-diff "^0.3.5"

-redux@^4.0.0:
+redux-persist@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
+  integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==
+
+redux-saga@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/redux-saga/-/redux-saga-1.1.3.tgz#9f3e6aebd3c994bbc0f6901a625f9a42b51d1112"
+  integrity sha512-RkSn/z0mwaSa5/xH/hQLo8gNf4tlvT18qXDNvedihLcfzh+jMchDgaariQoehCpgRltEm4zHKJyINEz6aqswTw==
+  dependencies:
+    "@redux-saga/core" "^1.1.3"
+
+redux@^4.0.0, redux@^4.0.4, redux@^4.0.5:
  version "4.0.5"
  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
  integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
@@ -10888,6 +10963,11 @@ requires-port@^1.0.0:
  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=

+reselect@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
+  integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
+
 resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1:
  version "1.5.1"
  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
@@ -12269,6 +12349,25 @@ typedarray@^0.0.6:
  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=

+typescript-compare@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/typescript-compare/-/typescript-compare-0.0.2.tgz#7ee40a400a406c2ea0a7e551efd3309021d5f425"
+  integrity sha512-8ja4j7pMHkfLJQO2/8tut7ub+J3Lw2S3061eJLFQcvs3tsmJKp8KG5NtpLn7KcY2w08edF74BSVN7qJS0U6oHA==
+  dependencies:
+    typescript-logic "^0.0.0"
+
+typescript-logic@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/typescript-logic/-/typescript-logic-0.0.0.tgz#66ebd82a2548f2b444a43667bec120b496890196"
+  integrity sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q==
+
+typescript-tuple@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/typescript-tuple/-/typescript-tuple-2.2.1.tgz#7d9813fb4b355f69ac55032e0363e8bb0f04dad2"
+  integrity sha512-Zcr0lbt8z5ZdEzERHAMAniTiIKerFCMgd7yjq1fPnDJ43et/k9twIFQMUYff9k5oXcsQ0WpvFcgzK2ZKASoW6Q==
+  dependencies:
+    typescript-compare "^0.0.2"
+
 ua-parser-js@^0.7.18:
  version "0.7.21"
  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.21.tgz#853cf9ce93f642f67174273cc34565ae6f308777"