Add route-to-module map to dashboard #6357
Conversation
| const matchRoute = (parser: Parser, route: string, path: string) => { | ||
| const { pattern, keys } = parser(route); | ||
|
|
||
| // array destructuring loses keys, so this is done in two steps | ||
| const result = pattern.exec(path) || []; | ||
|
|
||
| // when parser is in "loose" mode, `$base` is equal to the | ||
| // first part of the route that matches the pattern | ||
| // (e.g. for pattern `/a/:b` and path `/a/1/2/3` the `$base` is `a/1`) | ||
| // we use this for route nesting | ||
| const [$base, ...matches] = result; | ||
|
|
||
| if ($base === undefined) { | ||
| return [false, null]; | ||
| } | ||
|
|
||
| // an object with parameters matched, e.g. { foo: "bar" } for "/:foo" | ||
| // we "zip" two arrays here to construct the object | ||
| // ["foo"], ["bar"] → { foo: "bar" } | ||
| const groups = Object.fromEntries(keys.map((key, i) => [key, matches[i]])); | ||
|
|
||
| // convert the array to an instance of object | ||
| // this makes it easier to integrate with the existing param implementation | ||
| const obj = { ...matches }; | ||
| // merge named capture groups with matches array | ||
| Object.assign(obj, groups); | ||
|
|
||
| return [true, obj]; | ||
| }; |
There was a problem hiding this comment.
From wouter's source code. This is the function that useRoute internally uses to match routes.
In here we can't use useRoute because it needs to be called dynamically inside a loop. I asked in wouter's repository if they would be ok exposing their matchRoute helper.
There was a problem hiding this comment.
I asked in wouter's repository if they would be ok exposing their matchRoute helper.
They thought it was a good idea. I provided a PR and it has just been merged, so this function won't be needed after updating to next wouter's version.
| const routesMap = new Map([ | ||
| [ | ||
| '/assignments/:assignmentId', | ||
| () => import('./dashboard/AssignmentActivity') as Promise<RouteModule>, | ||
| ], | ||
| [ | ||
| '/courses/:courseId', | ||
| () => import('./dashboard/CourseActivity') as Promise<RouteModule>, | ||
| ], | ||
| [ | ||
| '', | ||
| () => import('./dashboard/OrganizationActivity') as Promise<RouteModule>, | ||
| ], | ||
| ]); |
There was a problem hiding this comment.
I hardcoded this here for simplicity, but the idea would be that this is passed as a prop by callers.
acelaya
force-pushed
the
dashboard-routes-map
branch
from
36aef47 to
e5d814d
Compare
|
Closing for now, until we come back to this. |
This is an extension of #6342, but defining a way to pass a map of
route -> modulethat avoids the use of multipleuseRoutecalls, and decouples the logic with the dashboard, as this map could be passed as a prop.It also replaces dynamic imports with static ones.