Replaced remaining parts of app to use Redux.

client/src/components/current-user-dropdown/current-user-dropdown.component.jsx

@@ -1,4 +1,3 @@
-import { useApolloClient } from "@apollo/react-hooks";
 import { Avatar, Col, Dropdown, Icon, Menu, Row } from "antd";
 import i18next from "i18next";
 import React from "react";
@@ -7,6 +6,7 @@ import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import UserImage from "../../assets/User.svg";
+import { setUserLanguage, signOutStart } from "../../redux/user/user.actions";
 import { selectCurrentUser } from "../../redux/user/user.selectors";
 import SignOut from "../sign-out/sign-out.component";
 
@@ -15,30 +15,30 @@ const mapStateToProps = createStructuredSelector({
 });
 
 const mapDispatchToProps = dispatch => ({
-  // signOutStart: () => dispatch(signOutStart())
+  signOutStart: () => dispatch(signOutStart()),
+  setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(function CurrentUserDropdown({ currentUser }) {
+)(function CurrentUserDropdown({ currentUser, signOutStart, setUserLanguage }) {
   const { t } = useTranslation();
 
-  const client = useApolloClient();
-
   const handleMenuClick = e => {
     if (e.item.props.actiontype === "lang-select") {
       i18next.changeLanguage(e.key, (err, t) => {
         if (err)
           return console.log("Error encountered when changing languages.", err);
-        client.writeData({ data: { language: e.key } });
+        setUserLanguage(e.key);
+        console.log("clicking");
       });
     }
   };
   const menu = (
     <Menu mode="vertical" onClick={handleMenuClick}>
       <Menu.Item>
-        <SignOut />
+        <SignOut signOutStart={signOutStart} />
       </Menu.Item>
       <Menu.Item>
         <Link to="/manage/profile"> {t("menus.currentuser.profile")}</Link>

client/src/components/header/header.component.jsx

@@ -1,4 +1,3 @@
-import { useApolloClient } from "@apollo/react-hooks";
 import { Col, Icon, Menu, Row } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -7,21 +6,15 @@ import CurrentUserDropdown from "../current-user-dropdown/current-user-dropdown.
 import GlobalSearch from "../global-search/global-search.component";
 import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component";
 
-export default ({ landingHeader, navItems, selectedNavItem }) => {
-  const apolloClient = useApolloClient();
+export default ({ landingHeader, selectedNavItem }) => {
   const { t } = useTranslation();
 
-  const handleClick = e => {
-    apolloClient.writeData({ data: { selectedNavItem: e.key } });
-  };
-
   return (
     <Row type="flex" justify="space-around">
       <Col span={16}>
         <Menu
           theme="dark"
           className="header"
-          onClick={handleClick}
           selectedKeys={selectedNavItem}
           mode="horizontal"
         >

client/src/components/jobs-documents/jobs-documents.container.jsx

@@ -1,13 +1,22 @@
 import React from "react";
 import { useQuery } from "react-apollo";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import { QUERY_SHOP_ID } from "../../graphql/bodyshop.queries";
 import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
+import { selectCurrentUser } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import JobDocuments from "./jobs-documents.component";
-import { GET_CURRENT_USER } from "../../graphql/local.queries";
 
-export default function JobsDocumentsContainer({ jobId }) {
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser
+});
+
+export default connect(
+  mapStateToProps,
+  null
+)(function JobsDocumentsContainer({ jobId, currentUser }) {
   const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
     variables: { jobId: jobId },
     fetchPolicy: "network-only"
@@ -17,14 +26,12 @@ export default function JobsDocumentsContainer({ jobId }) {
     fetchPolicy: "network-only"
   });
 
-  const user = useQuery(GET_CURRENT_USER);
-
-  if (loading || shopData.loading || user.loading) return <LoadingSpinner />;
-  if (error || shopData.error || user.error)
+  if (loading || shopData.loading) return <LoadingSpinner />;
+  if (error || shopData.error)
     return (
       <AlertComponent
-        type='error'
-        message={error.message || shopData.error.message || user.error.message}
+        type="error"
+        message={error.message || shopData.error.message}
       />
     );
 
@@ -32,7 +39,7 @@ export default function JobsDocumentsContainer({ jobId }) {
     <JobDocuments
       data={data.documents}
       jobId={jobId}
-      currentUser={user.data.currentUser}
+      currentUser={currentUser}
       shopId={
         shopData.data?.bodyshops[0]?.id
           ? shopData.data?.bodyshops[0]?.id
@@ -40,4 +47,4 @@ export default function JobsDocumentsContainer({ jobId }) {
       }
     />
   );
-}
+});

client/src/components/manage-sign-in-button/manage-sign-in-button.component.jsx

@@ -1,10 +1,7 @@
-import React from "react";
-import { useQuery } from "react-apollo";
-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 React from "react";
 import { connect } from "react-redux";
+import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectCurrentUser } from "../../redux/user/user.selectors";
 
@@ -12,28 +9,19 @@ const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser
 });
 
-const mapDispatchToProps = dispatch => ({
-  // signOutStart: () => dispatch(signOutStart())
-});
-
 export default connect(
   mapStateToProps,
-  mapDispatchToProps
+  null
 )(function ManageSignInButton({ currentUser }) {
-  return currentUser.isAuthorized ? (
-    <div>
-      {" "}
-      <Link to="/manage">
-        <Icon type="build" />
-        Manage
-      </Link>
-    </div>
+  return currentUser.authorized ? (
+    <Link to="/manage">
+      <Icon type="build" />
+      Manage
+    </Link>
   ) : (
-    <div>
-      <Link to="/signin">
-        <Icon type="login" />
-        Sign In
-      </Link>
-    </div>
+    <Link to="/signin">
+      <Icon type="login" />
+      Sign In
+    </Link>
   );
 });

client/src/components/sign-in-form/sign-in-form.component.jsx

@@ -1,14 +1,13 @@
 import { Button, Form, Icon, Input } from "antd";
 import React from "react";
+import { useApolloClient } from "react-apollo";
 import { connect } from "react-redux";
+import { Redirect } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import Logo from "../../assets/logo240.png";
+import { UPSERT_USER } from "../../graphql/user.queries";
 import { emailSignInStart } from "../../redux/user/user.actions";
-import {
-  selectCurrentUser,
-  selectSignInError
-} from "../../redux/user/user.selectors";
-import { Redirect } from "react-router-dom";
+import { selectCurrentUser, selectSignInError } from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -30,6 +29,8 @@ export default connect(
     currentUser,
     signInError
   }) {
+    const apolloClient = useApolloClient();
+
     const handleSubmit = e => {
       e.preventDefault();
       form.validateFields(async (err, values) => {
@@ -41,7 +42,21 @@ export default connect(
       });
     };
 
-    console.log("currentUser", currentUser);
+    if (currentUser.authorized === true) {
+      apolloClient
+        .mutate({
+          mutation: UPSERT_USER,
+          variables: {
+            authEmail: currentUser.email,
+            authToken: currentUser.uid
+          }
+        })
+        .then()
+        .catch(error => {
+          console.log("User login upsert error.", error);
+        });
+    }
+
     const { getFieldDecorator } = form;
     return (
       <div>

client/src/components/sign-out/sign-out.component.jsx

@@ -1,20 +1,8 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import firebase from "../../firebase/firebase.utils";
-
-export default function SignoutComponent() {
-  const signOut = async () => {
-    try {
-      await firebase.auth().signOut();
-      // this.setState({
-      //   redirect: true
-      // });
-    } catch (error) {
-      console.log(error);
-    }
-  };
 
+export default function SignoutComponent({ signOutStart }) {
   const { t } = useTranslation();
 
-  return <div onClick={signOut}>{t("user.actions.signout")}</div>;
+  return <div onClick={signOutStart}>{t("user.actions.signout")}</div>;
 }