From 6c6b25ae182fdb5d55e0c5800bf0ba60ac0cede5 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 15 Aug 2020 14:59:48 +0300 Subject: feat: use more cool image --- src/assets/server.svg | 1 + src/components/EmptyState/EmptyState.tsx | 15 ++++++++++++--- src/containers/Page/DynoWaiter.tsx | 8 +++----- 3 files changed, 16 insertions(+), 8 deletions(-) create mode 100644 src/assets/server.svg diff --git a/src/assets/server.svg b/src/assets/server.svg new file mode 100644 index 0000000..79e3c5b --- /dev/null +++ b/src/assets/server.svg @@ -0,0 +1 @@ +server down \ No newline at end of file diff --git a/src/components/EmptyState/EmptyState.tsx b/src/components/EmptyState/EmptyState.tsx index f79a391..1a8eec5 100644 --- a/src/components/EmptyState/EmptyState.tsx +++ b/src/components/EmptyState/EmptyState.tsx @@ -1,14 +1,17 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; +import Image from '../Image/Image'; import Message from '../Message/Message'; import noContentIcon from '../../assets/noContent.svg'; import constructionIcon from '../../assets/construction.svg'; +import serverIcon from '../../assets/server.svg'; interface PropTypes { - variant?: 'default' | 'construction'; + variant?: 'default' | 'construction' | 'waiting'; message?: string; + smart?: boolean; } const useStyles = makeStyles(theme => ({ @@ -25,16 +28,22 @@ const CONTEXT = { construction: { icon: constructionIcon, tagline: 'Coming soon' + }, + waiting: { + icon: serverIcon, + tagline: 'Waiting for server' } }; -const EmptyState: React.FC = ({ variant = 'default', message }) => { +const EmptyState: React.FC = ({ variant = 'default', smart = false, message }) => { const classes = useStyles(); const { icon, tagline } = CONTEXT[variant]; + const Component = smart ? Image : 'img'; + return ( - No content + ); }; diff --git a/src/containers/Page/DynoWaiter.tsx b/src/containers/Page/DynoWaiter.tsx index 05d269f..92255da 100644 --- a/src/containers/Page/DynoWaiter.tsx +++ b/src/containers/Page/DynoWaiter.tsx @@ -7,9 +7,7 @@ import React, { import { makeStyles } from '@material-ui/core/styles'; import { get } from '../../requests'; import Loading from '../../components/Loading/Loading'; -import Image from '../../components/Image/Image'; -import Message from '../../components/Message/Message'; -import coffeIcon from '../../assets/coffeeBreak.svg'; +import EmptyState from '../../components/EmptyState/EmptyState'; const DYNO_WAKEUP_TIME = 30; @@ -67,8 +65,8 @@ const DynoWaiter: React.FC = ({ children }) => { <> {!isReady && ( <> - - {message && } + + {message && } )}
-- cgit v1.2.3 From 3fb3e865ccdb9af3e0b88424f7326aba9f92cdb9 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 16 Aug 2020 00:21:56 +0300 Subject: chore: install react-error-boundary --- package-lock.json | 18 ++++++++++++++++++ package.json | 1 + 2 files changed, 19 insertions(+) diff --git a/package-lock.json b/package-lock.json index a79494a..4ec8cee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10858,6 +10858,24 @@ "scheduler": "^0.19.1" } }, + "react-error-boundary": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-2.3.1.tgz", + "integrity": "sha512-w1i++MM5GV6WTnM3MtLdw9CNXxqydkZwbwNDT9GBFBaWs0sp21z27DGIevb3fism1T+LGfdWgTFlhaq7G1pIMA==", + "requires": { + "@babel/runtime": "^7.10.5" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.11.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz", + "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, "react-error-overlay": { "version": "6.0.7", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz", diff --git a/package.json b/package.json index afb17ab..7375c36 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "notistack": "^0.9.17", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-error-boundary": "^2.3.1", "react-icons": "^3.10.0", "react-router-dom": "^5.2.0", "react-sage": "^0.1.2", -- cgit v1.2.3 From 6f82250c15d26b8bfaaff07cda9f6b05c53ef2c4 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 16 Aug 2020 00:24:09 +0300 Subject: feat: add error boundary --- src/assets/error.svg | 1 + src/components/EmptyState/EmptyState.tsx | 7 ++++++- src/containers/Page/Page.tsx | 36 +++++++++++++++++++------------- 3 files changed, 28 insertions(+), 16 deletions(-) create mode 100644 src/assets/error.svg diff --git a/src/assets/error.svg b/src/assets/error.svg new file mode 100644 index 0000000..5adc7a3 --- /dev/null +++ b/src/assets/error.svg @@ -0,0 +1 @@ +Taken \ No newline at end of file diff --git a/src/components/EmptyState/EmptyState.tsx b/src/components/EmptyState/EmptyState.tsx index 1a8eec5..7167ba2 100644 --- a/src/components/EmptyState/EmptyState.tsx +++ b/src/components/EmptyState/EmptyState.tsx @@ -6,10 +6,11 @@ import Message from '../Message/Message'; import noContentIcon from '../../assets/noContent.svg'; import constructionIcon from '../../assets/construction.svg'; import serverIcon from '../../assets/server.svg'; +import errorIcon from '../../assets/error.svg'; interface PropTypes { - variant?: 'default' | 'construction' | 'waiting'; + variant?: 'default' | 'construction' | 'waiting' | 'error'; message?: string; smart?: boolean; } @@ -32,6 +33,10 @@ const CONTEXT = { waiting: { icon: serverIcon, tagline: 'Waiting for server' + }, + error: { + icon: errorIcon, + tagline: 'Something went wrong' } }; diff --git a/src/containers/Page/Page.tsx b/src/containers/Page/Page.tsx index 475f76d..a1d6456 100644 --- a/src/containers/Page/Page.tsx +++ b/src/containers/Page/Page.tsx @@ -2,11 +2,13 @@ import React, { Suspense, useEffect } from 'react'; import { makeStyles, useTheme } from '@material-ui/core/styles'; import { useMediaQuery } from '@material-ui/core'; import { SnackbarProvider } from 'notistack'; +import { ErrorBoundary } from 'react-error-boundary'; import { useHistory } from 'react-router-dom'; import Router from './Router'; import DynoWaiter from './DynoWaiter'; import Loading from '../../components/Loading/Loading'; +import EmptyState from '../../components/EmptyState/EmptyState'; const useStyles = makeStyles(theme => ({ @@ -33,22 +35,26 @@ const Page: React.FC = () => { }, [history]); return ( - } > -
- }> - - - - -
- + +
+ }> + + + + +
+ + ); }; -- cgit v1.2.3