Implement router transitions #358
Conversation
Now content slides in and out in y-axis as the route changes. Also refactored router creation strategy to use components instead of factory function.
✅ Deploy Preview for acre-dapp-testnet ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
dapp/src/router/index.tsx
Outdated
| export function Router() { | ||
| return ( | ||
| <BrowserRouter> | ||
| <Routes> | ||
| <Route path="/" element={<Layout />}> | ||
| <Route index path={routerPath.home} element={<OverviewPage />} /> | ||
| <Route | ||
| path={`${routerPath.activity}/:activityId`} | ||
| element={<ActivityPage />} | ||
| /> | ||
| </Route> | ||
| </Routes> | ||
| </BrowserRouter> | ||
| ) | ||
| } |
There was a problem hiding this comment.
With <Layout /> parent route nested routes in JSX are easier to read and maintain instead of object notation (array of children) elements when using createBrowserRouter factory function.
dapp/src/DApp.tsx
Outdated
| <DocsDrawer /> | ||
| </> | ||
| ) | ||
| return <Router /> |
There was a problem hiding this comment.
In case when DApp returns only the Router component maybe we should consider moving this logic to the parent and then deleting this file simplifying the structure. What do you think?
There was a problem hiding this comment.
In this case I'd opt for slightly different solution - to leave routing separated as is - routing is kind of hermetic area with it's "natural" namespace and it's good to have it separated in case the application scales and the need of new routes might occur.
My suggestion is to remove the useInitApp hook. Now when DApp component has such a simple structure this hook is only a redundant wrapper to click through when inspecting the code.
What do you think?
There was a problem hiding this comment.
I'd rather leave useInitApp as it is. I'm considering whether DAppProviders should return GlobalStyles(it's not a provider), so maybe we should move it to DApp component to be semantically correct.
There was a problem hiding this comment.
Ref commit: eb37fa9
Closes: #363 ## Goal: To implement Landing Page This PR aggregates all component PRs to finally complete the implementation of landing page ## Component PRs: The list of PRs is given in the issue's description. Each component PR merges to this PR. - #357 - #358 - #364 - #368 - #369 ## Designs: <img width="1205" alt="image" src="https://github.com/thesis/acre/assets/11503879/be6b6ed2-a808-483e-9daf-43d2c042cba4">
Ref: #355
Goal:
To animate the content rendered by React Router - now it slides in and out in y-axis as the route changes.
Pros:
Misc:
Refactored router creation strategy to use components instead of factory function.