From 66d975aab3fe5e3ed4a0abaac452efcf3bf3ea83 Mon Sep 17 00:00:00 2001 From: Pjero Nizetic Date: Thu, 23 Nov 2023 17:51:50 +0100 Subject: [PATCH] Improve existing conversions view --- package-lock.json | 38 +++++++++++++++++++ package.json | 1 + src/common/api/conversions.js | 26 ++++++++----- .../route/__snapshots__/route.test.js.snap | 12 ++++++ src/components/route/route.js | 13 +++++++ src/pages/conversions/index.js | 19 +++++++--- 6 files changed, 95 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index db495f9..ab2575b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "react": "^17.0.2", "react-azure-maps": "^0.4.4", "react-dom": "^17.0.2", + "react-hot-toast": "^2.4.1", "react-i18next": "^11.18.6", "react-id-generator": "^3.0.2", "react-json-view": "^1.21.3", @@ -14557,6 +14558,14 @@ "node": ">=0.6.0" } }, + "node_modules/goober": { + "version": "2.1.13", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.13.tgz", + "integrity": "sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==", + "peerDependencies": { + "csstype": "^3.0.10" + } + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -23576,6 +23585,21 @@ "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==", "dev": true }, + "node_modules/react-hot-toast": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz", + "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==", + "dependencies": { + "goober": "^2.1.10" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/react-i18next": { "version": "11.18.6", "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.18.6.tgz", @@ -38388,6 +38412,12 @@ "minimist": "^1.2.5" } }, + "goober": { + "version": "2.1.13", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.13.tgz", + "integrity": "sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==", + "requires": {} + }, "gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -44994,6 +45024,14 @@ "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==", "dev": true }, + "react-hot-toast": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz", + "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==", + "requires": { + "goober": "^2.1.10" + } + }, "react-i18next": { "version": "11.18.6", "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.18.6.tgz", diff --git a/package.json b/package.json index 84b850d..4770f52 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "react": "^17.0.2", "react-azure-maps": "^0.4.4", "react-dom": "^17.0.2", + "react-hot-toast": "^2.4.1", "react-i18next": "^11.18.6", "react-id-generator": "^3.0.2", "react-json-view": "^1.21.3", diff --git a/src/common/api/conversions.js b/src/common/api/conversions.js index 08813da..4afe3e3 100644 --- a/src/common/api/conversions.js +++ b/src/common/api/conversions.js @@ -34,12 +34,20 @@ const getTilesets = () => { return fetch(url); }; -export const getAllData = () => - Promise.all([getUploads(), getConversions(), getDatasets(), getTilesets()]) - .then(re => Promise.all([re[0].json(), re[1].json(), re[2].json(), re[3].json()])) - .then(([uploads, conversions, datasets, tilesets]) => ({ - ...uploads, - ...conversions, - ...datasets, - ...tilesets, - })); +export const getExistingConversions = async () => { + const responses = await Promise.all([getUploads(), getConversions(), getDatasets(), getTilesets()]); + + if (responses.some(res => res.status !== 200)) { + return { error: true }; + } + + const [uploads, conversions, datasets, tilesets] = await Promise.all(responses.map(res => res.json())); + + return { + error: false, + ...uploads, + ...conversions, + ...datasets, + ...tilesets, + }; +}; diff --git a/src/components/route/__snapshots__/route.test.js.snap b/src/components/route/__snapshots__/route.test.js.snap index 827aea2..7a272a6 100644 --- a/src/components/route/__snapshots__/route.test.js.snap +++ b/src/components/route/__snapshots__/route.test.js.snap @@ -20,6 +20,9 @@ Object {
+
TopBar
@@ -60,6 +63,9 @@ Object { }
+
TopBar
@@ -158,6 +164,9 @@ Object {
+
TopBar
@@ -199,6 +208,9 @@ Object { }
+
TopBar
diff --git a/src/components/route/route.js b/src/components/route/route.js index d01b65f..cfcf3a4 100644 --- a/src/components/route/route.js +++ b/src/components/route/route.js @@ -3,6 +3,7 @@ import { PATHS } from 'common'; import { LRO_STATUS, progressBarSteps, useResponseStore, useUserStore } from 'common/store'; import PropTypes from 'prop-types'; import { useEffect, useMemo } from 'react'; +import { Toaster } from 'react-hot-toast'; import { useTranslation } from 'react-i18next'; import { useLocation, useNavigate } from 'react-router-dom'; import BreadCrumbNav from '../bread-crumb-nav/bread-crumb-nav'; @@ -39,6 +40,18 @@ const Route = ({ title, component: Component, dataRequired }) => { return ( <> +
diff --git a/src/pages/conversions/index.js b/src/pages/conversions/index.js index acc0d20..a49ad18 100644 --- a/src/pages/conversions/index.js +++ b/src/pages/conversions/index.js @@ -1,10 +1,11 @@ -import { TextField } from '@fluentui/react'; +import { Spinner, SpinnerSize, TextField } from '@fluentui/react'; import { DetailsList, DetailsListLayoutMode, DetailsRow } from '@fluentui/react/lib/DetailsList'; import { PATHS } from 'common'; -import { getAllData } from 'common/api/conversions'; +import { getExistingConversions } from 'common/api/conversions'; import { useConversionPastStore } from 'common/store/conversion-past.store'; import { conversionStatuses, useConversionStore } from 'common/store/conversion.store'; import { useCallback, useEffect, useState } from 'react'; +import toast from 'react-hot-toast'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { shallow } from 'zustand/shallow'; @@ -101,16 +102,20 @@ const Conversions = () => { const onNameFilterChange = (e, text) => setDescriptionFilter(text); useEffect(() => { + // setIsLoading(true); setColumns( defaultColumns.map(column => ({ ...column, onColumnClick: getOnColumnClickCallback(defaultColumns, setColumns, setSorting), })) ); - getAllData().then(({ conversions, datasets, mapDataList, tilesets }) => { + getExistingConversions().then(({ error, conversions, datasets, mapDataList, tilesets }) => { setIsLoading(false); + if (error) { + toast.error('Unable to fetch existing conversions. Check your Geography and Subscription key'); + navigate(PATHS.INDEX); + } const groupedItems = groupItems(ongoingConversion, { conversions, datasets, mapDataList, tilesets }); - groupedItems.sort((a, b) => (a.date < b.date ? 1 : -1)); setExistingConversions(groupedItems); }); }, []); // eslint-disable-line @@ -195,7 +200,11 @@ const Conversions = () => { }, [existingConversions, ongoingConversion, t, sorting, descriptionFilter]); if (isLoading) { - return
{t('loading')}
; + return ( +
+ +
+ ); } return (