Remove all duplicate queries #503
Conversation
Changes:
Total lines: 4564 (0) |
deployed preview: https://503.connect-d5y.pages.devWelcome to connect! Make sure to:
MobileDesktop |
| <RouteActions route={currentRoute()} /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="flex flex-col gap-2"> | ||
| <span class="text-label-md uppercase">Upload Files</span> | ||
| <div class="flex flex-col rounded-md overflow-hidden bg-surface-container"> | ||
| <RouteUploadButtons route={route()} /> | ||
| <RouteUploadButtons route={currentRoute()} /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="flex flex-col gap-2"> | ||
| <span class="text-label-md uppercase">Route Map</span> | ||
| <div class="aspect-square overflow-hidden rounded-lg"> | ||
| <Suspense fallback={<div class="h-full w-full skeleton-loader bg-surface-container" />}> | ||
| <RouteStaticMap route={route()} /> | ||
| <RouteStaticMap route={currentRoute()} /> |
There was a problem hiding this comment.
@greatgitsby have any thoughts about this? Passing in global signal from higher up, or just let each child component import the signal as needed? Not sure what's the more common pattern in web dev
There was a problem hiding this comment.
you're doing prop drilling which is one solution. the problem comes when you want to add more signals, you have to add more props, drill down further...
a Context abstracts all this away and you can reference whatever data you want whenever you need it. ends up being simpler to just call useAppContext() to get whatever you need
this app is pretty simple right now so you could get away with prop drilling, but as we add features, it might become a hindrance
There was a problem hiding this comment.
This was to get it working, I was thinking about just doing <RouteUploadButtons />, <RouteStaticMap /> and import the getter in each component as needed
There was a problem hiding this comment.
oh interesting, i missed that you're creating global signal variables
i've always thought that global state is an antipattern in these types of programs, but if it solves the problem in less lines, it can always be refactored later
There was a problem hiding this comment.
i also don't know how signals behave in a global context... we'd need to test this out
There was a problem hiding this comment.
https://www.solidjs.com/tutorial/stores_nocontext
Sometimes context is overkill, though; an alternative is to use the reactive system directly. For example, we can build a global reactive data store by creating a signal in a global scope, and exporting it for other modules to use
...
Solid's reactivity is a universal concept. It doesn't matter if it is inside or outside components. There is no separate concept for global vs local state.
|
We should be able to make a signal with all the loaded routes, then check once url state date string changes and set current route from that |
|
check my draft PR; set an event on the route card click to setCurrentRoute, route is a prop you don't even need to track all routes and do a lookup |
|
This is for when you visit a URL to a route and don't click on the card |
|
Partially implemented this in #579, but haven't tackled fetching the route or events |
Idea is to selectively import setters/getters where this global state is needed.
As noted here, where we query the routes is quite far away from the RouteActivity, so we'd need to pass setters/getters as properties from multiple components to get this information which is cumbersome.
Instead we can either implement currentX signals, or a global store of the devices and routes we've loaded so far. Currently experimenting with which is simpler.