From b2ba2c8cc184eb735468d08c7397c8d3a1af3bc8 Mon Sep 17 00:00:00 2001 From: Pjero Nizetic Date: Tue, 21 Nov 2023 16:07:08 +0100 Subject: [PATCH] Small rewrites --- src/common/store/index.js | 10 +++--- .../bread-crumb-nav/bread-crumb-nav.js | 13 +------- src/components/route/route.js | 31 +++++++++++-------- .../create-manifest.test.js.snap | 8 ++--- .../create-manifest/create-manifest.style.js | 2 +- 5 files changed, 29 insertions(+), 35 deletions(-) diff --git a/src/common/store/index.js b/src/common/store/index.js index 01e38d7..643a151 100644 --- a/src/common/store/index.js +++ b/src/common/store/index.js @@ -1,9 +1,9 @@ -export { getDomain, useUserStore } from './user.store'; -export { useResponseStore } from './response.store'; -export { progressBarSteps, progressBarStepsByKey, useCompletedSteps, useProgressBarStore } from './progress-bar-steps'; +export { conversionSteps, useConversionStore } from './conversion.store'; export { useDissolvedExterior, useGeometryStore } from './geometry.store'; export { useLayersStore } from './layers.store'; export { useLevelsStore } from './levels.store'; -export { useReviewManifestJson, useReviewManifestStore } from './review-manifest.store'; -export { useConversionStore, conversionSteps } from './conversion.store'; +export { progressBarSteps, progressBarStepsByKey, useCompletedSteps, useProgressBarStore } from './progress-bar-steps'; export { resetStores } from './reset'; +export { LRO_STATUS, useResponseStore } from './response.store'; +export { useReviewManifestJson, useReviewManifestStore } from './review-manifest.store'; +export { getDomain, useUserStore } from './user.store'; diff --git a/src/components/bread-crumb-nav/bread-crumb-nav.js b/src/components/bread-crumb-nav/bread-crumb-nav.js index ed0fed5..79feba4 100644 --- a/src/components/bread-crumb-nav/bread-crumb-nav.js +++ b/src/components/bread-crumb-nav/bread-crumb-nav.js @@ -1,32 +1,21 @@ import { Breadcrumb } from '@fluentui/react/lib/Breadcrumb'; import { PATHS, ROUTE_NAME_BY_PATH } from 'common/constants'; import { getSplitPaths } from 'common/functions'; -import { useConversionStore, useUserStore } from 'common/store'; -import { useEffect } from 'react'; +import { useConversionStore } from 'common/store'; import { useTranslation } from 'react-i18next'; import { useLocation, useNavigate } from 'react-router-dom'; -import { shallow } from 'zustand/shallow'; import { breadcrumbStyle } from './bread-crumb-nav.style'; const routesReset = [PATHS.CONVERSION]; -const userStoreSelector = s => [s.subscriptionKey]; - const BreadCrumbNav = () => { const { t } = useTranslation(); const navigate = useNavigate(); const { pathname: currentPath } = useLocation(); - const [subKey] = useUserStore(userStoreSelector, shallow); const splitPaths = getSplitPaths(currentPath); const itemsWithHeading = []; - useEffect(() => { - if (!subKey) { - navigate(PATHS.INDEX, { replace: true }); - } - }, [navigate, currentPath, subKey]); - splitPaths.forEach(nextPath => { if (ROUTE_NAME_BY_PATH.hasOwnProperty(nextPath)) { itemsWithHeading.push({ diff --git a/src/components/route/route.js b/src/components/route/route.js index 611fa87..d01b65f 100644 --- a/src/components/route/route.js +++ b/src/components/route/route.js @@ -1,30 +1,35 @@ -import { useTranslation } from 'react-i18next'; -import PropTypes from 'prop-types'; import { cx } from '@emotion/css'; +import { PATHS } from 'common'; +import { LRO_STATUS, progressBarSteps, useResponseStore, useUserStore } from 'common/store'; +import PropTypes from 'prop-types'; import { useEffect, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { useLocation, useNavigate } from 'react-router-dom'; - import BreadCrumbNav from '../bread-crumb-nav/bread-crumb-nav'; import Footer from '../footer/footer'; -import TopBar from '../top-bar/top-bar'; import ProgressBar from '../progress-bar/progress-bar'; -import { routeStyle, footerPadding } from './route.style'; -import { useResponseStore, LRO_STATUS } from 'common/store/response.store'; -import { PATHS } from 'common'; -import { progressBarSteps } from 'common/store'; +import TopBar from '../top-bar/top-bar'; +import { footerPadding, routeStyle } from './route.style'; const responseStoreSelector = s => s.lroStatus; +const userStoreSelector = s => s.subscriptionKey; const Route = ({ title, component: Component, dataRequired }) => { const { t } = useTranslation(); const navigate = useNavigate(); - const { pathname } = useLocation(); + const { pathname: currentPath } = useLocation(); + const lroStatus = useResponseStore(responseStoreSelector); + const subKey = useUserStore(userStoreSelector); - const shouldShowFooter = useMemo( - () => progressBarSteps.findIndex(route => route.href === pathname) !== -1, - [pathname] - ); + const shouldShowFooter = useMemo(() => { + return progressBarSteps.findIndex(route => route.href === currentPath) !== -1; + }, [currentPath]); + + useEffect(() => { + // Redirect to index if there is no subscription key + if (!subKey) navigate(PATHS.INDEX, { replace: true }); + }, [navigate, currentPath, subKey]); useEffect(() => { if (dataRequired && lroStatus !== LRO_STATUS.SUCCEEDED && lroStatus !== LRO_STATUS.FETCHING_DATA) { diff --git a/src/pages/create-manifest/__snapshots__/create-manifest.test.js.snap b/src/pages/create-manifest/__snapshots__/create-manifest.test.js.snap index f2c0e4c..a19dbda 100644 --- a/src/pages/create-manifest/__snapshots__/create-manifest.test.js.snap +++ b/src/pages/create-manifest/__snapshots__/create-manifest.test.js.snap @@ -148,7 +148,7 @@ Object { width: 100%; background-color: #ffffff; box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 4px; - padding: 12px; + padding: 0.75rem; height: 110px; border-radius: 4px; } @@ -656,7 +656,7 @@ Object { width: 100%; background-color: #ffffff; box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 4px; - padding: 12px; + padding: 0.75rem; height: 110px; border-radius: 4px; } @@ -1219,7 +1219,7 @@ Object { width: 100%; background-color: #ffffff; box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 4px; - padding: 12px; + padding: 0.75rem; height: 110px; border-radius: 4px; } @@ -1729,7 +1729,7 @@ Object { width: 100%; background-color: #ffffff; box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 4px; - padding: 12px; + padding: 0.75rem; height: 110px; border-radius: 4px; } diff --git a/src/pages/create-manifest/create-manifest.style.js b/src/pages/create-manifest/create-manifest.style.js index c3e134e..3bb7954 100644 --- a/src/pages/create-manifest/create-manifest.style.js +++ b/src/pages/create-manifest/create-manifest.style.js @@ -79,7 +79,7 @@ export const actionPanelStyle = css` width: 100%; background-color: #ffffff; box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 4px; - padding: 12px; + padding: 0.75rem; height: 110px; border-radius: 4px; `;