-
Notifications
You must be signed in to change notification settings - Fork 4.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Refine routes definitions * Replace HoC wrappers with functions to create route definition * Some updates for code consistency * ItemsList component: remove currentRoute dependency * Prepare route parametes in wrapper functions
- Loading branch information
1 parent
a36b101
commit 19c6d33
Showing
30 changed files
with
317 additions
and
630 deletions.
There are no files selected for viewing
59 changes: 0 additions & 59 deletions
59
client/app/components/ApplicationArea/AuthenticatedPageWrapper.jsx
This file was deleted.
Oops, something went wrong.
41 changes: 0 additions & 41 deletions
41
client/app/components/ApplicationArea/SignedOutPageWrapper.jsx
This file was deleted.
Oops, something went wrong.
63 changes: 63 additions & 0 deletions
63
client/app/components/ApplicationArea/routeWithApiKeySession.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import React, { useEffect, useState, useContext } from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import { ErrorBoundaryContext } from "@/components/ErrorBoundary"; | ||
| import { Auth } from "@/services/auth"; | ||
|
|
||
| // This wrapper modifies `route.render` function and instead of passing `currentRoute` passes an object | ||
| // that contains: | ||
| // - `currentRoute.routeParams` | ||
| // - `pageTitle` field which is equal to `currentRoute.title` | ||
| // - `onError` field which is a `handleError` method of nearest error boundary | ||
| // - `apiKey` field | ||
|
|
||
| function ApiKeySessionWrapper({ apiKey, currentRoute, renderChildren }) { | ||
| const [isAuthenticated, setIsAuthenticated] = useState(false); | ||
| const { handleError } = useContext(ErrorBoundaryContext); | ||
|
|
||
| useEffect(() => { | ||
| let isCancelled = false; | ||
| Auth.setApiKey(apiKey); | ||
| Auth.loadConfig() | ||
| .then(() => { | ||
| if (!isCancelled) { | ||
| setIsAuthenticated(true); | ||
| } | ||
| }) | ||
| .catch(() => { | ||
| if (!isCancelled) { | ||
| setIsAuthenticated(false); | ||
| } | ||
| }); | ||
| return () => { | ||
| isCancelled = true; | ||
| }; | ||
| }, [apiKey]); | ||
|
|
||
| if (!isAuthenticated) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <React.Fragment key={currentRoute.key}> | ||
| {renderChildren({ ...currentRoute.routeParams, pageTitle: currentRoute.title, onError: handleError, apiKey })} | ||
| </React.Fragment> | ||
| ); | ||
| } | ||
|
|
||
| ApiKeySessionWrapper.propTypes = { | ||
| apiKey: PropTypes.string.isRequired, | ||
| renderChildren: PropTypes.func, | ||
| }; | ||
|
|
||
| ApiKeySessionWrapper.defaultProps = { | ||
| renderChildren: () => null, | ||
| }; | ||
|
|
||
| export default function routeWithApiKeySession({ render, getApiKey, ...rest }) { | ||
| return { | ||
| ...rest, | ||
| render: currentRoute => ( | ||
| <ApiKeySessionWrapper apiKey={getApiKey(currentRoute)} currentRoute={currentRoute} renderChildren={render} /> | ||
| ), | ||
| }; | ||
| } |
82 changes: 82 additions & 0 deletions
82
client/app/components/ApplicationArea/routeWithUserSession.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import ErrorBoundary, { ErrorBoundaryContext } from "@/components/ErrorBoundary"; | ||
| import { Auth } from "@/services/auth"; | ||
| import organizationStatus from "@/services/organizationStatus"; | ||
| import ApplicationHeader from "./ApplicationHeader"; | ||
| import ErrorMessage from "./ErrorMessage"; | ||
|
|
||
| // This wrapper modifies `route.render` function and instead of passing `currentRoute` passes an object | ||
| // that contains: | ||
| // - `currentRoute.routeParams` | ||
| // - `pageTitle` field which is equal to `currentRoute.title` | ||
| // - `onError` field which is a `handleError` method of nearest error boundary | ||
|
|
||
| function UserSessionWrapper({ bodyClass, currentRoute, renderChildren }) { | ||
| const [isAuthenticated, setIsAuthenticated] = useState(!!Auth.isAuthenticated()); | ||
|
|
||
| useEffect(() => { | ||
| let isCancelled = false; | ||
| Promise.all([Auth.requireSession(), organizationStatus.refresh()]) | ||
| .then(() => { | ||
| if (!isCancelled) { | ||
| setIsAuthenticated(!!Auth.isAuthenticated()); | ||
| } | ||
| }) | ||
| .catch(() => { | ||
| if (!isCancelled) { | ||
| setIsAuthenticated(false); | ||
| } | ||
| }); | ||
| return () => { | ||
| isCancelled = true; | ||
| }; | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| if (bodyClass) { | ||
| document.body.classList.toggle(bodyClass, true); | ||
| return () => { | ||
| document.body.classList.toggle(bodyClass, false); | ||
| }; | ||
| } | ||
| }, [bodyClass]); | ||
|
|
||
| if (!isAuthenticated) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <React.Fragment> | ||
| <ApplicationHeader /> | ||
| <React.Fragment key={currentRoute.key}> | ||
| <ErrorBoundary renderError={error => <ErrorMessage error={error} />}> | ||
| <ErrorBoundaryContext.Consumer> | ||
| {({ handleError }) => | ||
| renderChildren({ ...currentRoute.routeParams, pageTitle: currentRoute.title, onError: handleError }) | ||
| } | ||
| </ErrorBoundaryContext.Consumer> | ||
| </ErrorBoundary> | ||
| </React.Fragment> | ||
| </React.Fragment> | ||
| ); | ||
| } | ||
|
|
||
| UserSessionWrapper.propTypes = { | ||
| bodyClass: PropTypes.string, | ||
| renderChildren: PropTypes.func, | ||
| }; | ||
|
|
||
| UserSessionWrapper.defaultProps = { | ||
| bodyClass: null, | ||
| renderChildren: () => null, | ||
| }; | ||
|
|
||
| export default function routeWithUserSession({ render, bodyClass, ...rest }) { | ||
| return { | ||
| ...rest, | ||
| render: currentRoute => ( | ||
| <UserSessionWrapper bodyClass={bodyClass} currentRoute={currentRoute} renderChildren={render} /> | ||
| ), | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.