Use useAuth hook

This commit is contained in:
Dawid Tarasiuk 2020-07-14 10:11:43 +02:00 committed by dominik-zeglen
parent 03a2fff2a5
commit 9b97e3279b
2 changed files with 141 additions and 143 deletions

View file

@ -26,6 +26,7 @@ import {
interface AuthProviderProps { interface AuthProviderProps {
children: React.ReactNode; children: React.ReactNode;
} }
const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => { const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
const intl = useIntl(); const intl = useIntl();
const notify = useNotifier(); const notify = useNotifier();
@ -136,7 +137,7 @@ export const useAuth = () => {
isAuthenticated, isAuthenticated,
tokenAuthLoading: user.tokenAuthLoading, tokenAuthLoading: user.tokenAuthLoading,
tokenVerifyLoading: user.tokenVerifyLoading, tokenVerifyLoading: user.tokenVerifyLoading,
user user: user.user
}; };
}; };

View file

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