search

NASA-IMPACT / veda-ui

Frontend for the Dashboard Evolution project
Other
21 stars 5 forks source link

[Refactor] Establish Pattern and Remove Routing Dependencies #1108

Open sandrahoang686 opened 2 months ago

sandrahoang686 commented 2 months ago

We need to decouple react-router and navigation dependencies within our veda-ui components. This is because routing is not controlled at the instance level and react-router does not work for nextJs.

Components shouldn't manage any of the routing and should just return the selected filters in which the passed in callback from the instance side should handle the routing.

hanbyul-here commented 2 months ago

From Data Catalog implementation try, we could find the routing problems that need to be handled.

Base finding: react-router-dom component doesn't work with Next instance, and Next has its own Link component.

  1. <NavLink> of react-router-dom embedded in source code One of the possible solutions is to Pass Link Components from Consumer level

  2. Components using react-router for their behaviors (ex. sticky header using useLocation of react-router-dom to detect page transition ) We should first identify these components and approach them holistically. ex. Do we need this behavior when it is not used in SPA environment?

  3. Query parameter manager needing react-router-dom (useQSState hook requires navigate from react-router-dom's useNavigate as a parameter) One of the possible solutions is to make this as a prop

  4. Make sure the link works with routings defined on the instance level. (ex. does dataset catalog card work with different DATACATALOG_PATH ?)

sandrahoang686 commented 1 week ago

Update: This has been kindof been worked on when during breakout components by having the Link Component pass down as a prop. But there are some hacks in there that need to be clean up and we should relook at how we are doing this to see if it is the most optimal and clean...

Going to think about what we should do with this ticket...