DogPawHat Posts - Answer Overflow

DogPawHat

Explore posts from servers

TTCTheo's Typesafe Cult CCConvex Community

•Created by DogPawHat on 11/29/2024 in #show-and-tell

Tanstack Start/Convex 1app6stacks - Now with Turbo and video!

Video demo: https://youtu.be/Vxu11-HsuZQ Previous Post: https://discord.com/channels/1019350475847499849/1310646901259108456 As requested by @Wayne This now has a turbo route with optimistic route preloading alongside the vote mutation. It's been resonably fast; I've noticed some slowdowns while trying to demo it but when it's fast it's fast. Code here: https://github.com/DogPawHat/1app6stacks/tree/with-tanstack-start Site here: https://roundest-tss-convex.vercel.app/

7 replies

CCConvex Community

•Created by DogPawHat on 11/25/2024 in #show-and-tell

Tanstack Start/Convex 1app6stacks version

https://github.com/DogPawHat/1app6stacks/tree/with-tanstack-start https://1app6stacks.vercel.app/ See https://www.youtube.com/watch?v=O-EWIlZW0mM and https://www.youtube.com/watch?v=hW2IiPFFd_0 for the og projects. Tanstack Start + Convex version of voting for the Roundest pokemon Convex backend I was initially developing on my own, but hit into a lot of issues with the random element and convexs caching. Initally was trying to do the random selction client side, but I've sense just copied Jamies backend code for now. I have some ideas to change it for the "turbo" version I want to make. For the main vote page, I've actually not used a lot of the router integration with Tanstack Query. I found it easier to decouple the state of the random seed from the router, so the battles are loaded as not critical data inside it's own Suspense boundary. Still very fast. I had some issues with client server hydration mismatches with the random numbers as well, so I created a server function to just return Math.random and have a queryOptions object with staleTime: Infinity. So when the query client rehydrates on the client-side it doesn't fetch again. As an aside, the Tanstack Query integration seems to be invalidating everything including my own queries when you call a mutation, so no need to invalidate manually. Next TODO for this app - [ ] loc - [ ] turbo route - [ ] use framer to provide clean transtions between different pokemon battles (over the coarse of voting and fetching next pokemon) loc TBD

13 replies

TTCTheo's Typesafe Cult

•Created by DogPawHat on 11/21/2023 in #questions

Form components with shadcn

When I look at the shadcn components examples for forms, they all have the primitives put inline in the form as below:

<FormField
  control={form.control}
  name='email'
  render={({ field }) => (
    <FormItem>
      <FormLabel>Email</FormLabel>
      <Select onValueChange={field.onChange} defaultValue={field.value}>
        <FormControl>
          <SelectTrigger>
            <SelectValue placeholder='Select a verified email to display' />
          </SelectTrigger>
        </FormControl>
        <SelectContent>
          <SelectItem value='[email protected]'>[email protected]</SelectItem>
          <SelectItem value='[email protected]'>[email protected]</SelectItem>
          <SelectItem value='[email protected]'>[email protected]</SelectItem>
        </SelectContent>
      </Select>
      <FormDescription>
        You can manage verified email addresses in your <Link href='/examples/forms'>email settings</Link>.
      </FormDescription>
      <FormMessage />
    </FormItem>
  )}
/>

<FormField
  control={form.control}
  name='email'
  render={({ field }) => (
    <FormItem>
      <FormLabel>Email</FormLabel>
      <Select onValueChange={field.onChange} defaultValue={field.value}>
        <FormControl>
          <SelectTrigger>
            <SelectValue placeholder='Select a verified email to display' />
          </SelectTrigger>
        </FormControl>
        <SelectContent>
          <SelectItem value='[email protected]'>[email protected]</SelectItem>
          <SelectItem value='[email protected]'>[email protected]</SelectItem>
          <SelectItem value='[email protected]'>[email protected]</SelectItem>
        </SelectContent>
      </Select>
      <FormDescription>
        You can manage verified email addresses in your <Link href='/examples/forms'>email settings</Link>.
      </FormDescription>
      <FormMessage />
    </FormItem>
  )}
/>

The pros of this to my mind is you can directly style the labels and fields with tailwind without having to do some wierd propdrilling. It is verbose however, and I've recently started on a code base that has build higher level componets on top of the shadcn form primitives and uses this when it makes a form:

<FormSelect
  name='email'
  label='Email'
  items={[
    { value: '[email protected]', label: '[email protected]' },
    { value: '[email protected]', label: '[email protected]' },
    { value: '[email protected]', label: '[email protected]' },
  ]}
/>

<FormSelect
  name='email'
  label='Email'
  items={[
    { value: '[email protected]', label: '[email protected]' },
    { value: '[email protected]', label: '[email protected]' },
    { value: '[email protected]', label: '[email protected]' },
  ]}
/>

While simpler to use, you can't add extra tailwind classes to say the label and are stuck with whatever styles are used inside FormSelect The context is we have these components used inside a frontend app for the team I recently joined, but I would not say there's exactly a defined design language yet? (We have like three Button components, and a split of forms using either shadcn + react-hook-form or formik for some reason). I'm not sure having the intermediate molecular components help as much in this situation as every form is slighly different, but the existing frontend engineer appreciates not having to copy and paste the same code over and over again. I'm wondering if there's much in the way of opinions as to how to use shadcn's stuff, just copy and paste the patterns like the examples or abstract into higher level components. Not found much answers anywhere else at the moment.

3 replies

Gaming

Programming