Add Router, errorAtom, renderLogic #181
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
| @@ -26,7 +26,7 @@ | |||
| /* Aliases */ | |||
| "baseUrl": ".", | |||
| "paths": { | |||
| "@*": ["src/*"] | |||
| "@/*": ["src/*"] | |||
There was a problem hiding this comment.
This fixes auto imports / ide from suggesting @components instead of @/components which isn't valid with this config
| import { ErrorPage } from '@/pages/ErrorPage/ErrorPage'; | ||
| import { SwapExecutionPage } from '@/pages/SwapExecutionPage/SwapExecutionPage'; | ||
| import { SwapPage } from '@/pages/SwapPage/SwapPage'; | ||
| import { errorAtom } from '@/state/errorPage'; | ||
| import { Routes, currentPageAtom } from '@/state/router'; | ||
| import { useAtom } from 'jotai'; | ||
| import { ErrorBoundary } from 'react-error-boundary'; | ||
|
|
||
| export const Router = () => { | ||
| const [currentPage] = useAtom(currentPageAtom); | ||
| const [error, setError] = useAtom(errorAtom); | ||
|
|
||
| if (error) { | ||
| return <ErrorPage />; | ||
| } | ||
|
|
||
| switch (currentPage) { | ||
| case Routes.SwapPage: | ||
| return ( | ||
| <ErrorBoundary fallback={null} onError={(error) => setError(error)}> | ||
| <SwapPage /> | ||
| </ErrorBoundary> | ||
| ); | ||
| case Routes.SwapExecutionPage: | ||
| return ( | ||
| <ErrorBoundary fallback={null} onError={(error) => setError(error)}> | ||
| <SwapExecutionPage /> | ||
| </ErrorBoundary> | ||
| ); | ||
| } | ||
| }; |
There was a problem hiding this comment.
I tested manually throwing an error within SwapPage and it successfully sets errorAtom state and renders ErrorPage
There was a problem hiding this comment.
I also tested and can confirm that these error boundaries will not catch any errors thrown within a modal, we will need to handle those separately
| import { errorAtom } from '@/state/errorPage'; | ||
| import { useResetAtom } from 'jotai/utils'; | ||
|
|
||
| export const ErrorPage = () => { | ||
| const resetError = useResetAtom(errorAtom); | ||
|
|
||
| return ( | ||
| <div> | ||
| error page | ||
| <button onClick={() => resetError()}>reset</button> | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
this is temp, i created a ticket to actually create the ErrorPage properly
| args: { | ||
| operations: operations as Operation[], | ||
| }, | ||
| args: {}, |
There was a problem hiding this comment.
any reason why you move it inside?
There was a problem hiding this comment.
@codingki yeah I figure that eventually this data will exist in an atom, so we won't be passing it into the component as a prop, so I decided to just move it inside for now (the usage of the component is more similar to how it'll be when we have the data in an atom)
No description provided.