From 9b97e3279bb4ae83cb0f2d30029f0f184f90349a Mon Sep 17 00:00:00 2001
From: Dawid Tarasiuk <tarasiukdawid@gmail.com>
Date: Tue, 14 Jul 2020 10:11:43 +0200
Subject: [PATCH] Use useAuth hook

---
 src/auth/AuthProvider.tsx |   3 +-
 src/index.tsx             | 281 +++++++++++++++++++-------------------
 2 files changed, 141 insertions(+), 143 deletions(-)

diff --git a/src/auth/AuthProvider.tsx b/src/auth/AuthProvider.tsx
index 5db93208c..05b0f8236 100644
--- a/src/auth/AuthProvider.tsx
+++ b/src/auth/AuthProvider.tsx
@@ -26,6 +26,7 @@ import {
 interface AuthProviderProps {
   children: React.ReactNode;
 }
+
 const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   const intl = useIntl();
   const notify = useNotifier();
@@ -136,7 +137,7 @@ export const useAuth = () => {
     isAuthenticated,
     tokenAuthLoading: user.tokenAuthLoading,
     tokenVerifyLoading: user.tokenVerifyLoading,
-    user
+    user: user.user
   };
 };
 
diff --git a/src/index.tsx b/src/index.tsx
index 15250b8cd..4bf643631 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -20,7 +20,7 @@ import { appsSection } from "./apps/urls";
 import AttributeSection from "./attributes";
 import { attributeSection } from "./attributes/urls";
 import Auth, { getAuthToken, removeAuthToken } from "./auth";
-import AuthProvider from "./auth/AuthProvider";
+import AuthProvider, { useAuth } from "./auth/AuthProvider";
 import LoginLoading from "./auth/components/LoginLoading/LoginLoading";
 import SectionRoute from "./auth/components/SectionRoute";
 import { isJwtError } from "./auth/errors";
@@ -138,7 +138,9 @@ const App: React.FC = () => {
                 <BackgroundTasksProvider>
                   <AppStateProvider>
                     <ShopProvider>
-                      <Routes />
+                      <AuthProvider>
+                        <Routes />
+                      </AuthProvider>
                     </ShopProvider>
                   </AppStateProvider>
                 </BackgroundTasksProvider>
@@ -154,150 +156,145 @@ const App: React.FC = () => {
 const Routes: React.FC = () => {
   const intl = useIntl();
   const [, dispatchAppState] = useAppState();
+  const {
+    hasToken,
+    isAuthenticated,
+    tokenAuthLoading,
+    tokenVerifyLoading,
+    user
+  } = useAuth();
 
   return (
     <>
       <WindowTitle title={intl.formatMessage(commonMessages.dashboard)} />
-      <AuthProvider>
-        {({
-          hasToken,
-          isAuthenticated,
-          tokenAuthLoading,
-          tokenVerifyLoading,
-          user
-        }) =>
-          isAuthenticated && !tokenAuthLoading && !tokenVerifyLoading ? (
-            <AppLayout>
-              <Navigator />
-              <ErrorBoundary
-                onError={() =>
-                  dispatchAppState({
-                    payload: {
-                      error: "unhandled"
-                    },
-                    type: "displayError"
-                  })
-                }
-              >
-                <Switch>
-                  <SectionRoute exact path="/" component={HomePage} />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_PRODUCTS]}
-                    path="/categories"
-                    component={CategorySection}
-                  />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_PRODUCTS]}
-                    path="/collections"
-                    component={CollectionSection}
-                  />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_USERS]}
-                    path="/customers"
-                    component={CustomerSection}
-                  />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_DISCOUNTS]}
-                    path="/discounts"
-                    component={DiscountSection}
-                  />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_PAGES]}
-                    path="/pages"
-                    component={PageSection}
-                  />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_PLUGINS]}
-                    path="/plugins"
-                    component={PluginsSection}
-                  />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_ORDERS]}
-                    path="/orders"
-                    component={OrdersSection}
-                  />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_PRODUCTS]}
-                    path="/products"
-                    component={ProductSection}
-                  />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_PRODUCTS]}
-                    path="/product-types"
-                    component={ProductTypesSection}
-                  />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_STAFF]}
-                    path="/staff"
-                    component={StaffSection}
-                  />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_STAFF]}
-                    path="/permission-groups"
-                    component={PermissionGroupSection}
-                  />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_SETTINGS]}
-                    path="/site-settings"
-                    component={SiteSettingsSection}
-                  />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_SETTINGS]}
-                    path="/taxes"
-                    component={TaxesSection}
-                  />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_SHIPPING]}
-                    path="/shipping"
-                    component={ShippingSection}
-                  />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_TRANSLATIONS]}
-                    path="/translations"
-                    component={TranslationsSection}
-                  />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_MENUS]}
-                    path={navigationSection}
-                    component={NavigationSection}
-                  />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_PRODUCTS]}
-                    path={attributeSection}
-                    component={AttributeSection}
-                  />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_APPS]}
-                    path={appsSection}
-                    component={AppsSection}
-                  />
-                  <SectionRoute
-                    permissions={[PermissionEnum.MANAGE_PRODUCTS]}
-                    path={warehouseSection}
-                    component={WarehouseSection}
-                  />
-                  {createConfigurationMenu(intl).filter(menu =>
-                    menu.menuItems.map(item =>
-                      hasPermission(item.permission, user)
-                    )
-                  ).length > 0 && (
-                    <SectionRoute
-                      exact
-                      path="/configuration"
-                      component={ConfigurationSection}
-                    />
-                  )}
-                  <Route component={NotFound} />
-                </Switch>
-              </ErrorBoundary>
-            </AppLayout>
-          ) : hasToken && tokenVerifyLoading ? (
-            <LoginLoading />
-          ) : (
-            <Auth hasToken={hasToken} />
-          )
-        }
-      </AuthProvider>
+      {isAuthenticated && !tokenAuthLoading && !tokenVerifyLoading ? (
+        <AppLayout>
+          <Navigator />
+          <ErrorBoundary
+            onError={() =>
+              dispatchAppState({
+                payload: {
+                  error: "unhandled"
+                },
+                type: "displayError"
+              })
+            }
+          >
+            <Switch>
+              <SectionRoute exact path="/" component={HomePage} />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_PRODUCTS]}
+                path="/categories"
+                component={CategorySection}
+              />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_PRODUCTS]}
+                path="/collections"
+                component={CollectionSection}
+              />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_USERS]}
+                path="/customers"
+                component={CustomerSection}
+              />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_DISCOUNTS]}
+                path="/discounts"
+                component={DiscountSection}
+              />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_PAGES]}
+                path="/pages"
+                component={PageSection}
+              />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_PLUGINS]}
+                path="/plugins"
+                component={PluginsSection}
+              />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_ORDERS]}
+                path="/orders"
+                component={OrdersSection}
+              />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_PRODUCTS]}
+                path="/products"
+                component={ProductSection}
+              />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_PRODUCTS]}
+                path="/product-types"
+                component={ProductTypesSection}
+              />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_STAFF]}
+                path="/staff"
+                component={StaffSection}
+              />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_STAFF]}
+                path="/permission-groups"
+                component={PermissionGroupSection}
+              />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_SETTINGS]}
+                path="/site-settings"
+                component={SiteSettingsSection}
+              />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_SETTINGS]}
+                path="/taxes"
+                component={TaxesSection}
+              />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_SHIPPING]}
+                path="/shipping"
+                component={ShippingSection}
+              />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_TRANSLATIONS]}
+                path="/translations"
+                component={TranslationsSection}
+              />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_MENUS]}
+                path={navigationSection}
+                component={NavigationSection}
+              />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_PRODUCTS]}
+                path={attributeSection}
+                component={AttributeSection}
+              />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_APPS]}
+                path={appsSection}
+                component={AppsSection}
+              />
+              <SectionRoute
+                permissions={[PermissionEnum.MANAGE_PRODUCTS]}
+                path={warehouseSection}
+                component={WarehouseSection}
+              />
+              {createConfigurationMenu(intl).filter(menu =>
+                menu.menuItems.map(item => hasPermission(item.permission, user))
+              ).length > 0 && (
+                <SectionRoute
+                  exact
+                  path="/configuration"
+                  component={ConfigurationSection}
+                />
+              )}
+              <Route component={NotFound} />
+            </Switch>
+          </ErrorBoundary>
+        </AppLayout>
+      ) : hasToken && tokenVerifyLoading ? (
+        <LoginLoading />
+      ) : (
+        <Auth hasToken={hasToken} />
+      )}
     </>
   );
 };