Junk Drawer Example

[Benanna2019]

This is a port of Kent C Dodds Frontend Masters Remix Workshop app to Tanstack Router | Query | Express | Clerk | Typescript | Tailwind

I have used this app for learning new technologies and it continues to be a great way to learn a full stack.

Of Note:

• In the Customer ID route I am making use of the defer, Await, and Suspense. Took some time but got it working. When you run the code and navigate to a customer page you will see the deferred loading ui
• beforeLoad in the salesRoute gets authentication info off of routerContext and protects the sales route and all child routes if the user is not logged in
• Using Clerk for auth
• Using Clerks auth and tanstack/router's beforeLoad we can protect routes rather than passing tokens for data querying and mutations. Assumably if the user cannot access a route they will not be able to access data. So why pass tokens 🤷‍♂️ Some security person may yell but this is a reason for using Clerk
• The useMatches hook is used to set activeProps on links for routes and child routes
• ShadUI is installed and we can have future examples on this junk drawer example of using shadUI components which make use of Tanstack apis, like table. Currently ShadUI is not being used
• The example used for Optimistic UI in other versions of this app is in the deposits.tsx component. If someone wants to add an optimistic update within react queries useMutation hook please do. Or if you want to attempt getting react's experimental channel setup and use the useOptimistic hook, that is another option. I attempted both and were taking far too long to do so.

Things to add:

• ~[ ] Use tanstack/form with all forms~
• [x] Update types for axios request types
• [x] ~fix how bun runs the server.ts file to hot reload rather than having to start and stop server each time something changes~
• [ ] There are a handful of routes that could add tanstack/charts or tanstack/table to increase use of the tanstack suite. I want to add ShadUI table and some of the invoice data into these
• [x] In the $customerId router I wanted to use the defer method but couldn't get it working. I think the fetching the deferred data needs to be changed around and, in this case, the data we were attempting to defer (for demo purposes) was the customerDetails data
• [ ] I didn't make much use of search params so finding a good demo for those would be great. Maybe have a route that has charts and tables that when a different customer is clicked, the search params update and the charts and tables do as well
• [ ] Still thinking on ways to be clever with search params. Maybe a sharable graph page based off of search params. 🤷‍♂️
• [ ] Lastly, Im sure there needs to be optimizations as I do not have the best grasp on caching.

[tannerlinsley]

Now that things are more stable, would love an updated of this example so we can get it merged.

[Benanna2019]

Now that things are more stable, would love an updated of this example so we can get it merged.

What were you thinking update specifically? Just dependencies or anything else?

I was also thinking of attempting to use this for an egghead course. I don't know if you have any preferences in regards to what gets built or feature set to show off?

One example I think that could be really good to show off is the extensive search params behind auth. So one example I had in mind is a url that is only valid for people belong to a specific org and when shared has a bunch of params that determine what the page shows.

[schiller-manuel]

What were you thinking update specifically? Just dependencies or anything else?

The API change quite a bit, e.g. @tanstack/react-loaders does not exist anymore ...

[Benanna2019]

What were you thinking update specifically? Just dependencies or anything else?

The API change quite a bit, e.g. @tanstack/react-loaders does not exist anymore ...

Perfect. Thanks. I will work on this and update when I have it working.

[Benanna2019]

@schiller-manuel I have updated everything to be in sync with V1 to the best of my knowledge.

The primary things to note here:

• since this uses prisma it cannot run in Stackblitz. I tried for a while today and I had no luck.
• I removed bun because it cannot be used within stackblitz and so I moved everything over to work without bun before I new that prisma had issues running on Stackblitz
• There is a little bit of a buggy thing going on that I don't know if it is a router issue or a clerk provider issue. Basically I have the beforeLoad function in a parent route throw an error for signin. So if someone isn't signed in they should get a little error message saying they need to sign in before they can access whatever path we are on.
  • That works great. But 2 things:
    1. if I redirect back to the same path after login I have to click to different routes and then back to that path before it will show anything.
    2. If I do some mutation and it fails, I will get the sign in error. However it is not a sign in error and shouldn't be blocking paths and child paths. I am still signed in the mutation just failed. I have to then click to other routes before it will allow me to navigate back to where I was.

This may be worth making a video and explaining what is happening but that is a kind of niche bug. The app is ready to go. Let me know if you have any question

[Benanna2019]

@tannerlinsley @schiller-manuel, just wanted to check in. Just wanted to see if there is anything else I needed to do so this can get merged.