Added better error boundary page. Started some CSS and layout refactoring. **Major Changes**.

client/src/App/App.container.jsx

@@ -10,7 +10,7 @@ import { RetryLink } from "apollo-link-retry";
 import { WebSocketLink } from "apollo-link-ws";
 import { getMainDefinition } from "apollo-utilities";
 import LogRocket from "logrocket";
-import React, { Component } from "react";
+import React from "react";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import { auth } from "../firebase/firebase.utils";
 import errorLink from "../graphql/apollo-error-handling";
@@ -28,7 +28,6 @@ const wsLink = new WebSocketLink({
     lazy: true,
     reconnect: true,
     connectionParams: async () => {
-      //const token = localStorage.getItem("token");
       const token =
         auth.currentUser && (await auth.currentUser.getIdToken(true));
       if (token) {
@@ -110,26 +109,18 @@ if (process.env.NODE_ENV === "development") {
 middlewares.push(retryLink.concat(errorLink.concat(authLink.concat(link))));
 
 const cache = new InMemoryCache();
+
 export const client = new ApolloClient({
   link: ApolloLink.from(middlewares),
   cache,
-  connectToDevTools: true,
+  connectToDevTools: process.env.NODE_ENV !== "production",
 });
 
-export default class AppContainer extends Component {
-  constructor() {
-    super();
-    this.state = { client };
-  }
-
-  render() {
-    const { client } = this.state;
-
-    return (
-      <ApolloProvider client={client}>
-        <GlobalLoadingBar />
-        <App />
-      </ApolloProvider>
-    );
-  }
+export default function AppContainer() {
+  return (
+    <ApolloProvider client={client}>
+      <GlobalLoadingBar />
+      <App />
+    </ApolloProvider>
+  );
 }

client/src/App/App.css

@@ -1 +0,0 @@
-@import "~antd/dist/antd.css";

client/src/App/App.js

@@ -8,9 +8,8 @@ import ErrorBoundary from "../components/error-boundary/error-boundary.component
 import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
 import { checkUserSession } from "../redux/user/user.actions";
 import { selectCurrentUser } from "../redux/user/user.selectors";
-// import { QUERY_BODYSHOP } from "../graphql/bodyshop.queries";
 import PrivateRoute from "../utils/private-route";
-import "./App.css";
+import "antd/dist/antd.css";
 
 const LandingPage = lazy(() => import("../pages/landing/landing.page"));
 const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
@@ -27,13 +26,9 @@ const mapDispatchToProps = (dispatch) => ({
   checkUserSession: () => dispatch(checkUserSession()),
 });
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(({ checkUserSession, currentUser }) => {
+export function App({ checkUserSession, currentUser }) {
   useEffect(() => {
     checkUserSession();
-    return () => {};
   }, [checkUserSession]);
 
   const { t } = useTranslation();
@@ -61,4 +56,6 @@ export default connect(
       </Switch>
     </div>
   );
-});
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);