✨ Add generic ErrorView

src/components/InactiveSettingsCard.tsx

@@ -11,6 +11,7 @@ import {
   Loader,
 } from 'semantic-ui-react'
 import { useSettingsApi } from '../api/Settings'
+import ErrorView from '../views/ErrorView'
 import InactiveSettingsModalForm from './InactiveSettingsModalForm'
 import useAuth from './useAuth'
 
@@ -34,8 +35,7 @@ const InactiveSettingsCard: FC = () => {
   }
 
   if (error || data === undefined) {
-    //TODO: Generic Error View
-    return <React.Fragment>Error occured</React.Fragment>
+    return <ErrorView>Unable to fetch inactive settings from server.</ErrorView>
   }
 
   const setting = data.data.setting

src/components/RefreshIntervalCard.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react'
 import { useQuery } from 'react-query'
 import { Button, Card, Dimmer, Icon, List, Loader } from 'semantic-ui-react'
 import { useSettingsApi } from '../api/Settings'
+import ErrorView from '../views/ErrorView'
 import RefreshIntervalModalForm from './RefreshIntervalModalForm'
 import useAuth from './useAuth'
 
@@ -25,8 +26,11 @@ const RefreshIntervalCard: FC = () => {
   }
 
   if (error || data === undefined) {
-    //TODO: Generic Error View
-    return <React.Fragment>Error occured</React.Fragment>
+    return (
+      <ErrorView>
+        Unable to fetch refresh interval setting from server.
+      </ErrorView>
+    )
   }
 
   const setting = data.data.setting

src/components/UserList.tsx

@@ -5,6 +5,7 @@ import UserListItems from './UserListItems'
 import UserModalForm from './UserModalForm'
 import useAuth from './useAuth'
 import { useUserApi } from '../api/User'
+import ErrorView from '../views/ErrorView'
 
 const UserList: FC = () => {
   const { token } = useAuth()
@@ -22,8 +23,7 @@ const UserList: FC = () => {
   }
 
   if (error || data === undefined) {
-    //TODO: Generic Error View
-    return <React.Fragment>Error occured</React.Fragment>
+    return <ErrorView>Unable to fetch users from server.</ErrorView>
   }
 
   const users = data.data.users

src/views/ErrorView.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react'
+import { Icon, Message } from 'semantic-ui-react'
+
+interface Props {
+  children: React.ReactNode
+}
+
+const ErrorView: FC<Props> = ({ children }) => {
+  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>
+  )
+}
+
+export default ErrorView

src/views/HomeView.tsx

@@ -14,6 +14,7 @@ import { useQuery } from 'react-query'
 import Ticker from '../components/Ticker'
 import TickerModalForm from '../components/TickerModalForm'
 import Layout from './Layout'
+import ErrorView from './ErrorView'
 
 const HomeView: FC = () => {
   const { token, user } = useAuth()
@@ -31,8 +32,11 @@ const HomeView: FC = () => {
   }
 
   if (error || data === undefined) {
-    //TODO: Generic Error View
-    return <React.Fragment>Error occured</React.Fragment>
+    return (
+      <Layout>
+        <ErrorView>Unable to fetch tickers from server.</ErrorView>
+      </Layout>
+    )
   }
 
   const tickers = data.data.tickers

src/views/TickerView.tsx

@@ -6,6 +6,7 @@ import { useParams } from 'react-router-dom'
 import useAuth from '../components/useAuth'
 import Ticker from '../components/Ticker'
 import Layout from './Layout'
+import ErrorView from './ErrorView'
 
 interface TickerViewParams {
   tickerId: string
@@ -28,8 +29,7 @@ const TickerView: FC = () => {
   }
 
   if (error || data === undefined) {
-    //TODO: Generic Error View
-    return <React.Fragment>Error occured</React.Fragment>
+    return <ErrorView>Unable to fetch the ticker from server.</ErrorView>
   }
 
   const ticker = data.data.ticker