WIP on several user stories. BOD-10 BOD-52

client/src/App/App.container.jsx

@@ -1,3 +1,4 @@
+import { ApolloProvider } from "@apollo/react-common";
 import { ApolloLink } from "apollo-boost";
 import { InMemoryCache } from "apollo-cache-inmemory";
 import ApolloClient from "apollo-client";
@@ -8,22 +9,13 @@ import apolloLogger from "apollo-link-logger";
 import { WebSocketLink } from "apollo-link-ws";
 import { getMainDefinition } from "apollo-utilities";
 import React, { Component } from "react";
-import { ApolloProvider } from "react-apollo";
+import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 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";
-import { connect } from "react-redux";
-import {
-  endLoading,
-  startLoading
-} from "../redux/application/application.actions";
-const mapDispatchToProps = dispatch => ({
-  startLoading: () => dispatch(startLoading()),
-  endLoading: () => dispatch(endLoading())
-});
 
-class AppContainer extends Component {
+
+export default class AppContainer extends Component {
   state = {
     client: null,
     loaded: false
@@ -92,23 +84,6 @@ class AppContainer extends Component {
       middlewares.push(apolloLogger);
     }
 
-    //New
-    // const startLoad = new ApolloLink((operation, forward) => {
-    //   console.log("Starting", operation);
-    //   this.props.startLoading();
-    //   return forward(operation);
-    // });
-
-    // const endLoad = new ApolloLink((operation, forward) => {
-    //   return forward(operation).map(response => {
-    //     console.log("Completed", operation);
-    //     this.props.endLoading();
-    //     return response;
-    //   });
-    // });
-    // middlewares.push(startLoad, endLoad);
-    //End new
-
     middlewares.push(errorLink.concat(authLink.concat(link)));
 
     const cache = new InMemoryCache();
@@ -130,15 +105,14 @@ class AppContainer extends Component {
   render() {
     const { client, loaded } = this.state;
     if (!loaded) {
-      return <SpinnerComponent />;
+      return <SpinnerComponent message='Connecting to Bodyshop.app Database' />;
     }
 
     return (
       <ApolloProvider client={client}>
+        <GlobalLoadingBar />
         <App />
       </ApolloProvider>
     );
   }
 }
-
-export default connect(null, mapDispatchToProps)(AppContainer);

client/src/App/App.js

@@ -26,6 +26,7 @@ const mapStateToProps = createStructuredSelector({
 const mapDispatchToProps = dispatch => ({
   checkUserSession: () => dispatch(checkUserSession())
 });
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps
@@ -34,6 +35,7 @@ export default connect(
     checkUserSession();
     return () => {};
   }, [checkUserSession]);
+
   const { t } = useTranslation();
   if (currentUser && currentUser.language)
     i18next.changeLanguage(currentUser.language, (err, t) => {
@@ -49,14 +51,13 @@ export default connect(
     <div>
       <Switch>
         <ErrorBoundary>
-          <Suspense fallback={<LoadingSpinner />}>
+          <Suspense fallback={<LoadingSpinner message='In Suspense.' />}>
             <Route exact path='/' component={LandingPage} />
             <Route exact path='/unauthorized' component={Unauthorized} />
 
             <Route exact path='/signin' component={SignInPage} />
 
             <PrivateRoute
-              //isAuthorized={HookCurrentUser.data.currentUser ? true : false}
               isAuthorized={currentUser.authorized}
               path='/manage'
               component={ManagePage}