feat: Handle dataset loading error

visualize-admin · Feb 1, 2022 · fcbda35 · fcbda35
1 parent 74c2bc6
commit fcbda35
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 17 deletions.
diff --git a/app/components/hint.tsx b/app/components/hint.tsx
@@ -151,7 +151,7 @@ export const NoDataHint = () => (
     </Text>
   </Flex>
 );
-export const LoadingDataError = () => (
+export const LoadingDataError = ({ message }: { message?: string }) => (
   <Flex
     sx={{
       width: "100%",
@@ -169,11 +169,18 @@ export const LoadingDataError = () => (
     <Text as="h5" variant="heading2" sx={{ my: 3 }}>
       <Trans id="hint.dataloadingerror.title">Data loading error</Trans>
     </Text>
-    <Text as="p" variant="paragraph2" sx={{ maxWidth: "40rem" }}>
-      <Trans id="hint.dataloadingerror.message">
-        The data could not be loaded.
-      </Trans>
-    </Text>
+    <Box sx={{ "& > * + *:not([data-no-margin])": { marginTop: 2 } }}>
+      <Text as="p" variant="paragraph2" sx={{ maxWidth: "40rem" }}>
+        <Trans id="hint.dataloadingerror.message">
+          The data could not be loaded.
+        </Trans>
+      </Text>
+      {message ? (
+        <Text as="p" variant="paragraph2" sx={{ maxWidth: "40rem" }}>
+          {message}
+        </Text>
+      ) : null}
+    </Box>
   </Flex>
 );
 

diff --git a/app/configurator/components/dataset-preview.tsx b/app/configurator/components/dataset-preview.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Box, Text, Flex } from "theme-ui";
-import { HintRed, Loading } from "../../components/hint";
+import { HintRed, Loading, LoadingDataError } from "../../components/hint";
 import { DataSetPreviewTable } from "./datatable";
 import { Trans } from "@lingui/macro";
 import { useDataCubePreviewQuery } from "../../graphql/query-hooks";
@@ -15,7 +15,7 @@ export interface Preview {
 }
 export const DataSetPreview = ({ dataSetIri }: { dataSetIri: string }) => {
   const locale = useLocale();
-  const [{ data: metaData }] = useDataCubePreviewQuery({
+  const [{ data: metaData, fetching, error }] = useDataCubePreviewQuery({
     variables: { iri: dataSetIri, locale },
   });
 
@@ -108,7 +108,7 @@ export const DataSetPreview = ({ dataSetIri }: { dataSetIri: string }) => {
         </Box>
       </Flex>
     );
-  } else {
+  } else if (fetching) {
     return (
       <Flex
         sx={{
@@ -121,5 +121,18 @@ export const DataSetPreview = ({ dataSetIri }: { dataSetIri: string }) => {
         <Loading />
       </Flex>
     );
+  } else {
+    return (
+      <Flex
+        sx={{
+          flexDirection: "column",
+          justifyContent: "space-between",
+          flexGrow: 1,
+          p: 5,
+        }}
+      >
+        <LoadingDataError message={error?.message} />
+      </Flex>
+    );
   }
 };
diff --git a/app/configurator/components/select-dataset-step.tsx b/app/configurator/components/select-dataset-step.tsx
@@ -157,15 +157,11 @@ export const SelectDatasetStepContent = () => {
               <SearchDatasetBox browseState={browseState} searchResult={data} />
             </Box>
           )}
-          {dataset || !data ? (
+          {dataset ? (
             <>
-              {dataset ? (
-                <Box>
-                  <DataSetPreview dataSetIri={dataset} />
-                </Box>
-              ) : (
-                <DataSetHint />
-              )}
+              <Box>
+                <DataSetPreview dataSetIri={dataset} />
+              </Box>
             </>
           ) : (
             <DatasetResults fetching={fetching} data={data} />