Pulling fix/papers-error-message into develop

apps/dicty-frontpage/src/common/hooks/useFetchPublications.ts

@@ -16,46 +16,58 @@ type PublicationItem = {
   pubmedId: string
 }
 
+const initialState = {
+  loading: true,
+  data: [] as Array<PublicationItem>,
+  error: Sempty,
+  refetch: () => {},
+}
+
 const useFetchPublications = (url: string) => {
-  const [fetchState, setFetchState] = useState({
-    loading: true,
-    data: [] as Array<PublicationItem>,
-    error: Sempty,
-  })
+  const [fetchState, setFetchState] = useState(initialState)
   useEffect(() => {
     let componentMounted = true
     const getPublicationItems = async () => {
-      await pipe(
-        getPublicationData(url),
-        TEmatch(
-          (errorString) => {
-            match(componentMounted)
-              .with(false, () => constVoid)
-              .with(true, () => {
-                setFetchState((previousState) => ({
-                  ...previousState,
-                  error: errorString,
-                  loading: false,
-                }))
-                return constVoid
-              })
-              .exhaustive()
-          },
-          ({ publicationItems }) => {
-            match(componentMounted)
-              .with(false, () => constVoid)
-              .with(true, () => {
-                setFetchState((previousState) => ({
-                  ...previousState,
-                  data: publicationItems,
-                  loading: false,
-                }))
-                return constVoid
-              })
-              .exhaustive()
-          },
-        ),
-      )()
+      const refetch = () => {
+        setFetchState({
+          ...initialState,
+          refetch,
+        })
+        return pipe(
+          getPublicationData(url),
+          TEmatch(
+            (errorString) => {
+              match(componentMounted)
+                .with(false, () => constVoid)
+                .with(true, () => {
+                  setFetchState((previousState) => ({
+                    ...previousState,
+                    error: errorString,
+                    loading: false,
+                    refetch,
+                  }))
+                  return constVoid
+                })
+                .exhaustive()
+            },
+            ({ publicationItems }) => {
+              match(componentMounted)
+                .with(false, () => constVoid)
+                .with(true, () => {
+                  setFetchState((previousState) => ({
+                    ...previousState,
+                    data: publicationItems,
+                    loading: false,
+                    refetch,
+                  }))
+                  return constVoid
+                })
+                .exhaustive()
+            },
+          ),
+        )()
+      }
+      await refetch()
     }
     getPublicationItems()
     return () => {

apps/dicty-frontpage/src/features/Frontpage/LatestPapers.tsx

@@ -16,7 +16,7 @@ const LatestPapers = () => {
     )
     .when(
       ({ error }) => error.length > 0,
-      ({ error }) => <LatestPapersError error={error} />,
+      ({ refetch }) => <LatestPapersError refetch={refetch} />,
     )
     .otherwise(() => <> This message should not appear. </>)
 }

apps/dicty-frontpage/src/features/Frontpage/LatestPapersView.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/no-array-index-key */
-import { Grid, Box, Container, Typography } from "@material-ui/core"
+import { Grid, Box, Container, Typography, Button } from "@material-ui/core"
+import ReplayIcon from "@material-ui/icons/Replay"
 import { makeStyles } from "@material-ui/styles"
 import { LoadingDisplay } from "@dictybase/ui-common"
 import { Link } from "react-router-dom"
@@ -12,7 +13,7 @@ type LatestPapersProperties = {
 }
 
 type LatestPapersErrorProperties = {
-  error: string
+  refetch: () => void
 }
 
 const useStyles = makeStyles({
@@ -108,19 +109,25 @@ const LatestPapersLoader = () => {
   )
 }
 
-const LatestPapersError = ({ error }: LatestPapersErrorProperties) => {
+const LatestPapersError = ({ refetch }: LatestPapersErrorProperties) => {
   const { container, errorContainer, errorText } = useStyles()
   return (
     <Grid
       container
       justifyContent="center"
       alignItems="center"
+      direction="column"
       className={`${errorContainer} ${container}`}>
       <Grid item>
         <Typography className={errorText} color="error">
-          {error}
+          There was a problem loading the latest papers.
         </Typography>
       </Grid>
+      <Grid item>
+        <Button endIcon={<ReplayIcon />} onClick={refetch}>
+          Retry
+        </Button>
+      </Grid>
     </Grid>
   )
 }