From b9c7c76611fa006d5211cce2ea12f4fc33bae406 Mon Sep 17 00:00:00 2001 From: Alex <92830192+EtoKruto@users.noreply.github.com> Date: Thu, 3 Aug 2023 01:24:12 -0700 Subject: [PATCH 1/3] initial commit using the ErrorBoundary component for review --- client/package-lock.json | 20 ++++++++++++++ client/package.json | 1 + client/src/components/Modal.tsx | 28 ++++++++++++++++++-- client/src/components/Modals/SignInModal.tsx | 6 +++++ 4 files changed, 53 insertions(+), 2 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index a202559d..1cbdcaf9 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -27,6 +27,7 @@ "jsonwebtoken": "^9.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-error-boundary": "^4.0.10", "react-hook-form": "^7.34.0", "react-input-mask": "^3.0.0-alpha.2", "react-query": "^3.35.0", @@ -15708,6 +15709,17 @@ "react": "^18.2.0" } }, + "node_modules/react-error-boundary": { + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.10.tgz", + "integrity": "sha512-pvVKdi77j2OoPHo+p3rorgE43OjDWiqFkaqkJz8sJKK6uf/u8xtzuaVfj5qJ2JnDLIgF1De3zY5AJDijp+LVPA==", + "dependencies": { + "@babel/runtime": "^7.12.5" + }, + "peerDependencies": { + "react": ">=16.13.1" + } + }, "node_modules/react-error-overlay": { "version": "6.0.11", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", @@ -33046,6 +33058,14 @@ "scheduler": "^0.23.0" } }, + "react-error-boundary": { + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.10.tgz", + "integrity": "sha512-pvVKdi77j2OoPHo+p3rorgE43OjDWiqFkaqkJz8sJKK6uf/u8xtzuaVfj5qJ2JnDLIgF1De3zY5AJDijp+LVPA==", + "requires": { + "@babel/runtime": "^7.12.5" + } + }, "react-error-overlay": { "version": "6.0.11", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", diff --git a/client/package.json b/client/package.json index 0ee397d4..9bee943f 100644 --- a/client/package.json +++ b/client/package.json @@ -22,6 +22,7 @@ "jsonwebtoken": "^9.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-error-boundary": "^4.0.10", "react-hook-form": "^7.34.0", "react-input-mask": "^3.0.0-alpha.2", "react-query": "^3.35.0", diff --git a/client/src/components/Modal.tsx b/client/src/components/Modal.tsx index 08cc91be..c3455bb1 100644 --- a/client/src/components/Modal.tsx +++ b/client/src/components/Modal.tsx @@ -5,6 +5,23 @@ import type { Theme } from '@mui/material/styles'; import SignIn from './Modals/SignInModal'; import SignUp from './Modals/SignUpModal'; +import { ErrorBoundary } from 'react-error-boundary'; + +type ErrorFallbackProps = { + error: Error; + resetErrorBoundary: () => void; +}; + +const ErrorFallback: React.FC = ({ error, resetErrorBoundary }) => { + return ( +
+

Something went wrong:

+ 
{error.message}
+ +
+ ); +}; + const useStyles = makeStyles()((theme: Theme) => { const xPadding = 6; const yPadding = 6; @@ -106,8 +123,15 @@ const Modal = () => { } return ( -
- +
+ { + /* reset logic here */ + }} + > + +
); }; diff --git a/client/src/components/Modals/SignInModal.tsx b/client/src/components/Modals/SignInModal.tsx index 6c3293d1..44e40ef0 100644 --- a/client/src/components/Modals/SignInModal.tsx +++ b/client/src/components/Modals/SignInModal.tsx @@ -18,6 +18,11 @@ import Divider from '@mui/material/Divider'; import { UserContext } from '../../providers'; import routes from '../../routes/routes'; import { APP_API_BASE_URL } from '../../configs'; + +const handleErrorClick = () => { + throw new Error('An intentional error'); +}; + interface SignInModalProps { closeModal: () => void; className: { @@ -190,6 +195,7 @@ const SignInModal = React.forwardRef( > Login + {/* Placeholder for loading - waiting on UI/UX response as to what they want. */} From e25e102d51a32d89c399d423cca0825e3d80f42a Mon Sep 17 00:00:00 2001 From: Alex <92830192+EtoKruto@users.noreply.github.com> Date: Sat, 9 Sep 2023 20:55:57 -0700 Subject: [PATCH 2/3] create errorBoundary placeholder for future UI designs when app errors --- client/src/App.tsx | 61 ++++++++++---------- client/src/components/ErrorBoundary.tsx | 16 +++++ client/src/components/Modal.tsx | 26 +-------- client/src/components/Modals/SignInModal.tsx | 5 -- 4 files changed, 49 insertions(+), 59 deletions(-) create mode 100644 client/src/components/ErrorBoundary.tsx diff --git a/client/src/App.tsx b/client/src/App.tsx index 9eb78438..9930a851 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { BrowserRouter } from 'react-router-dom'; -// import { Grid, ThemeProvider, Theme, StyledEngineProvider } from '@mui/material'; import { Grid, ThemeProvider, StyledEngineProvider } from '@mui/material'; import theme from './theme'; @@ -8,7 +7,9 @@ import Header from './components/Header'; import Main from './views/Main'; import Footer from './components/Footer'; import Modal from './components/Modal'; +import ErrorFallback from './components/ErrorBoundary'; +import { ErrorBoundary } from 'react-error-boundary'; import { UserProvider } from './providers'; import { ModalProvider } from './providers/ModalProvider'; import { QueryClient, QueryClientProvider } from 'react-query'; @@ -16,11 +17,6 @@ import { ReactQueryDevtools } from 'react-query/devtools'; import './App.css'; -// declare module '@mui/styles/defaultTheme' { -// // eslint-disable-next-line @typescript-eslint/no-empty-interface -// interface DefaultTheme extends Theme {} -// } - const queryClient = new QueryClient(); function App(): JSX.Element { @@ -29,30 +25,37 @@ function App(): JSX.Element { - - - { - // intentionally left empty callback to block the default browser prompt. - }} - > - { + /* reset logic here */ + }} + > + + + { + // intentionally left empty callback to block the default browser prompt. + }} > - {/* move modal to below footer after troubleshooting */} - -
-
-