💄 Use MUI for ErrorView

src/components/settings/InactiveSettingsCard.tsx

@@ -40,7 +40,11 @@ const InactiveSettingsCard: FC = () => {
   }
 
   if (error || data === undefined || data.status === 'error') {
-    return <ErrorView>Unable to fetch inactive settings from server.</ErrorView>
+    return (
+      <ErrorView queryKey={['inactive_settings']}>
+        Unable to fetch inactive settings from server.
+      </ErrorView>
+    )
   }
 
   const setting = data.data.setting

src/components/settings/RefreshIntervalCard.tsx

@@ -40,7 +40,7 @@ const RefreshIntervalCard: FC = () => {
 
   if (error || data === undefined || data.status === 'error') {
     return (
-      <ErrorView>
+      <ErrorView queryKey={['refresh_interval_setting']}>
         Unable to fetch refresh interval setting from server.
       </ErrorView>
     )

src/components/user/UserList.tsx

@@ -23,7 +23,11 @@ const UserList: FC = () => {
   }
 
   if (error || data === undefined || data.status === 'error') {
-    return <ErrorView>Unable to fetch users from server.</ErrorView>
+    return (
+      <ErrorView queryKey={['users']}>
+        Unable to fetch users from server.
+      </ErrorView>
+    )
   }
 
   const users = data.data.users

src/views/ErrorView.tsx

@@ -1,22 +1,50 @@
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  colors,
+  Divider,
+  Stack,
+  Typography,
+} from '@mui/material'
+import { QueryKey, useQueryClient } from '@tanstack/react-query'
 import React, { FC } from 'react'
-import { Icon, Message } from 'semantic-ui-react'
 
 interface Props {
   children: React.ReactNode
+  queryKey: QueryKey
 }
 
-const ErrorView: FC<Props> = ({ children }) => {
+const ErrorView: FC<Props> = ({ children, queryKey }) => {
+  const queryClient = useQueryClient()
+
+  const handleClick = () => {
+    queryClient.invalidateQueries(queryKey)
+  }
+
   return (
-    <Message error icon>
-      <Icon name="thumbs down outline" />
-      <Message.Content>
-        <Message.Header>Oh no! An error occured</Message.Header>
-        <p>{children}</p>
-        <p>
-          <small>Please try again later or contact your administrator.</small>
-        </p>
-      </Message.Content>
-    </Message>
+    <Card>
+      <CardContent>
+        <Typography component="h2" variant="h4">
+          Oh no! An error occured
+        </Typography>
+        <Divider sx={{ mt: 1, mb: 2 }} />
+        <Stack alignItems="center" direction="row" spacing={2}>
+          <Box>
+            <Button color="secondary" onClick={handleClick} variant="contained">
+              Reload
+            </Button>
+          </Box>
+          <Box>
+            <Typography variant="body1">{children}</Typography>
+            <Typography color={colors.grey[700]} component="p" variant="body2">
+              Please try again later or contact your administrator.
+            </Typography>
+          </Box>
+        </Stack>
+      </CardContent>
+    </Card>
   )
 }
 

src/views/HomeView.tsx

@@ -32,7 +32,9 @@ const HomeView: FC = () => {
   if (error || data === undefined || data.status === 'error') {
     return (
       <Layout>
-        <ErrorView>Unable to fetch tickers from server.</ErrorView>
+        <ErrorView queryKey={['tickers']}>
+          Unable to fetch tickers from server.
+        </ErrorView>
       </Layout>
     )
   }

src/views/SettingsView.test.tsx

@@ -118,4 +118,18 @@ describe('SettingsView', function () {
 
     expect(refreshIntervalDialogTitle).not.toBeVisible()
   })
+
+  test('settings could not fetched', async function () {
+    fetchMock.mockReject(new Error('network error'))
+    setup()
+
+    const loaders = screen.getAllByText(/loading/i)
+    expect(loaders).toHaveLength(2)
+    loaders.forEach(loader => {
+      expect(loader).toBeInTheDocument()
+    })
+    expect(
+      await screen.findByText('Oh no! An error occured')
+    ).toBeInTheDocument()
+  })
 })

src/views/TickerView.tsx

@@ -27,7 +27,11 @@ const TickerView: FC = () => {
   }
 
   if (error || data === undefined || data.status === 'error') {
-    return <ErrorView>Unable to fetch the ticker from server.</ErrorView>
+    return (
+      <ErrorView queryKey={['ticker', tickerIdNum]}>
+        Unable to fetch the ticker from server.
+      </ErrorView>
+    )
   }
 
   const ticker = data.data.ticker

src/views/UsersView.test.tsx

@@ -156,4 +156,14 @@ describe('UsersView', function () {
 
     expect(deleteClose).not.toBeVisible()
   })
+
+  test('user list could not fetched', async function () {
+    fetchMock.mockReject(new Error('network error'))
+    setup()
+
+    expect(screen.getByText(/loading/i)).toBeInTheDocument()
+    expect(
+      await screen.findByText('Oh no! An error occured')
+    ).toBeInTheDocument()
+  })
 })