diff --git a/package-lock.json b/package-lock.json index ddb20cd7d..c35d2e33d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3142,12 +3142,6 @@ "@types/webpack-env": "*" } }, - "@types/string-similarity": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@types/string-similarity/-/string-similarity-1.2.1.tgz", - "integrity": "sha512-a4tFqvEznBVSCoRPsr3xTdZstgeWvgoWq9KyEbsYW/EaEnq4xCMX0A5oMeBpYEmy7LoG8QqH7GntUZhfe+I8LQ==", - "dev": true - }, "@types/url-join": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/@types/url-join/-/url-join-0.8.3.tgz", @@ -13552,20 +13546,11 @@ "integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=", "dev": true }, - "lodash.every": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/lodash.every/-/lodash.every-4.6.0.tgz", - "integrity": "sha1-64mYS+vENkJ5uzrvu9HKGb+mxqc=" - }, "lodash.flattendeep": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz", - "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=" - }, - "lodash.foreach": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz", - "integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM=" + "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=", + "dev": true }, "lodash.get": { "version": "4.4.2", @@ -13588,16 +13573,6 @@ "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=", "dev": true }, - "lodash.map": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz", - "integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=" - }, - "lodash.maxby": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/lodash.maxby/-/lodash.maxby-4.6.0.tgz", - "integrity": "sha1-CCJABo88eiJ6oAqDgOTzjPB4bj0=" - }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -16615,6 +16590,11 @@ "prop-types-extra": "^1.1.0" } }, + "react-error-boundary": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-1.2.5.tgz", + "integrity": "sha512-5CPSeLJA2igJNppAgFRwnTL9aK3ojenk65enNzhVyoxYNbHpIJXnChUO7+4vPhkncRA9wvQMXq6Azp2XeXd+iQ==" + }, "react-error-overlay": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.0.tgz", @@ -18552,18 +18532,6 @@ } } }, - "string-similarity": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/string-similarity/-/string-similarity-1.2.2.tgz", - "integrity": "sha512-IoHUjcw3Srl8nsPlW04U3qwWPk3oG2ffLM0tN853d/E/JlIvcmZmDY2Kz5HzKp4lEi2T7QD7Zuvjq/1rDw+XcQ==", - "requires": { - "lodash.every": "^4.6.0", - "lodash.flattendeep": "^4.4.0", - "lodash.foreach": "^4.5.0", - "lodash.map": "^4.6.0", - "lodash.maxby": "^4.6.0" - } - }, "string-width": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", diff --git a/package.json b/package.json index 8bba69e0a..3c5570d86 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "react-apollo": "^3.0.0", "react-dom": "^16.9.0", "react-dropzone": "^8.2.0", + "react-error-boundary": "^1.2.5", "react-helmet": "^5.2.1", "react-infinite-scroller": "^1.2.4", "react-inlinesvg": "^0.8.4", diff --git a/src/auth/components/SectionRoute.tsx b/src/auth/components/SectionRoute.tsx index a9ec3a493..dec2dbb42 100644 --- a/src/auth/components/SectionRoute.tsx +++ b/src/auth/components/SectionRoute.tsx @@ -1,8 +1,11 @@ import React from "react"; +import ErrorBoundary from "react-error-boundary"; import { Route, RouteProps } from "react-router-dom"; import AppLayout from "@saleor/components/AppLayout"; -import { UserContext } from ".."; +import ErrorPage from "@saleor/components/ErrorPage"; +import useNavigator from "@saleor/hooks/useNavigator"; +import useUser from "@saleor/hooks/useUser"; import NotFound from "../../NotFound"; import { PermissionEnum } from "../../types/globalTypes"; import { hasPermission } from "../misc"; @@ -14,21 +17,27 @@ interface SectionRouteProps extends RouteProps { export const SectionRoute: React.StatelessComponent = ({ permissions, ...props -}) => ( - - {({ user }) => - !permissions || - permissions - .map(permission => hasPermission(permission, user)) - .reduce((prev, curr) => prev && curr) ? ( - - - - ) : ( - - ) - } - -); +}) => { + const navigate = useNavigator(); + const { user } = useUser(); + + const hasPermissions = + !permissions || + permissions + .map(permission => hasPermission(permission, user)) + .reduce((prev, curr) => prev && curr); + return hasPermissions ? ( + + navigate("/")} />} + key={permissions ? permissions.join(":") : "home"} + > + + + + ) : ( + + ); +}; SectionRoute.displayName = "Route"; export default SectionRoute;