Small rewrites

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';

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({

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) {

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;
 }

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;
 `;