Skip to content

Commit

Permalink
Improve existing conversions view
Browse files Browse the repository at this point in the history
  • Loading branch information
@nizetic
nizetic committed Nov 23, 2023
1 parent b2ba2c8 commit 66d975a
Show file tree
Hide file tree
Showing 6 changed files with 95 additions and 14 deletions.
38 changes: 38 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
26 changes: 17 additions & 9 deletions src/common/api/conversions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
};
12 changes: 12 additions & 0 deletions src/components/route/__snapshots__/route.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ Object {
<body>
<div>
<div
style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
/>
<div>
TopBar
</div>
Expand Down Expand Up @@ -60,6 +63,9 @@ Object {
}
<div>
<div
style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
/>
<div>
TopBar
</div>
Expand Down Expand Up @@ -158,6 +164,9 @@ Object {
<body>
<div>
<div
style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
/>
<div>
TopBar
</div>
Expand Down Expand Up @@ -199,6 +208,9 @@ Object {
}
<div>
<div
style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
/>
<div>
TopBar
</div>
Expand Down
13 changes: 13 additions & 0 deletions src/components/route/route.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -39,6 +40,18 @@ const Route = ({ title, component: Component, dataRequired }) => {

return (
<>
<Toaster
position="bottom-center"
toastOptions={{
duration: 5000,
style: {
background: '#525252',
color: '#fff',
borderRadius: 4,
padding: '0.75rem 1rem',
},
}}
/>
<TopBar />
<div className={cx(routeStyle, { [footerPadding]: shouldShowFooter })}>
<BreadCrumbNav />
Expand Down
19 changes: 14 additions & 5 deletions src/pages/conversions/index.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -195,7 +200,11 @@ const Conversions = () => {
}, [existingConversions, ongoingConversion, t, sorting, descriptionFilter]);

if (isLoading) {
return <div>{t('loading')}</div>;
return (
<div style={{ height: '80vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<Spinner size={SpinnerSize.large} label={t('loading')} />
</div>
);
}

return (
Expand Down

0 comments on commit 66d975a

Please sign in to comment.