Theo's Typesafe Cult

TTC

Theo's Typesafe Cult

Join the community to ask questions about Theo's Typesafe Cult and get answers from other members.

Join

Read input from many child components

I have a page with hundreds of text fields. From the page, I'm trying to read the user's input from each field when they click on a button. useState can work but would be too slow What would be a better solution? Should/how do I use useRef in this case?...

Does CRA have any weird issues with rendering images?

I know I shouldnt even be using CRA, im moving off of it, so dont yell at me lol. But is rendering images a known issue that it has??

Are there any examples on how to implement web notifications?

If, for example, a User A leaves a comment on User B's photo, how do I show a notification to User B? I would need to know if User B has seen the comment or not. How would I check that? I'm assuming I would need a Notifications Table in my database with a one-to-many relationship. Where each user would have one notification table with many notifications. The notifications would have to get deleted automatically once the user sees the new comment. Are there any examples that show how to implement such a system?...

Prisma query failing in NextJS deployment

I have a NextJS project which is using prisma and Planetscale. I have a webhook from Stripe where I read from one table and then write to another. The first prisma query always seems to fail. I have added other random queries before it, but it is always the first one which fails. After that failure/timeout (~5mins) the next request always runs instantly. When running locally everything works totally fine, but it always fails when deployed. I am using global.prisma to ensure there is only one PrismaClient in the entire project (as described here) I think this might be connection pool issue because the error message is this (but I'm not sure why this would be the problem):...

Best way to add CRUD to routers without duplicate code

Is there a best practise on how to add CRUD functionality to multiple routers without repeating the code for it?

tailwind newly added spacing overrides the defaults

I just added this custom spacing to tailwind: spacing: {main: '10%'} and other spacings eg.py-4 stopped working....

Should you share zod schema from server side to client side?

I have a zod schema which is used to validate trpc router procedure on server, and I need same schema to validate input on client side form, so, is there any security threat, if I import that server schema on client component?...

import HASH slash styles

import '#/styles/globals.css'; Reading the code in https://github.com/vercel/app-playground and they're using a convention ```typescript import '#/styles/globals.css';...

Credentials Provider session always return null

So im trying to make the login page work with email and password from the DB and when i click to submit the values im always having the session as null. This is what im doing: ```ts CredentialsProvider({ name: "Credentials", credentials: {},...

Supabase Realtime Presence vs Pusher Presence

What do you recommend for a chat application? Supabase new realtime presence or Pusher Presence Channels?

Prisma sort by latest post to a thread

Hi everyone, trying to return a list of "threads" which have lots of "posts" on them. I'm trying to write a query that will return the x most recently updated threads by sorting on their latest post. I've tried using take: 1, and _max on the relation and a few other things but it feels like I'm missing something. Feels like it should be fairly trivial but I just can't figure out an easy way to do it in the query. Any ideas for this pattern? (I'm abstracting a bit, my objects are named a bit differently but the pattern is the same)....

functional components vs functions that return jsx

Are functions that return jsx in your component an anti pattern? Is it usually better to abstract these into another component outside of your current one?

infinite render with server fetch hook I wrote

One picture is the hook I wrote, and the other picture is how I'm using it; I'm getting a really nasty infinite render, and I'm sure it has to do with dependencies causing useEffect to keep firing, but I can't quite figure out why.

Image Fetching bug with NextJS

So I'm trying to load in a set of profile pictures for a list of contributors to a repo. I have a list of everyone's github handle's. I'm fetching the profile pictures like so
<img className="mx-auto h-20 w-20 rounded-full lg:h-24 lg:w-24" src={`https://github.com/${person[1]}.png`} onError={(e) => replace(e)} />
<img className="mx-auto h-20 w-20 rounded-full lg:h-24 lg:w-24" src={`https://github.com/${person[1]}.png`} onError={(e) => replace(e)} />
Their are a few github handle's that were submitted incorrectly, so I'm trying to replace those images with a default thumbnail using the onError callback: ...

throwing error doesn't work in next auth

I am trying to throw a custom error in my [nextauth].ts Example instead of returning null when a user isn't found I want to throw a new errro with custom messages bust this doesn't work...

Use nextauth with supabase email and password

I know this is not a recommended practice. But im trying to setup nextauth to work with supabase's ``` const { data, error } = await supabase.auth.signInWithPassword({ email: credentials?.email,...

Typescript Determining type of generic.

Hi, I have the following generic function
const handleContinue = <T extends A | B>(data: T) => {}
const handleContinue = <T extends A | B>(data: T) => {}

How can I check inside this function when data = A, or when data = B?...

Is there a way on NextAuth to redirect upon login to a specific page based on session role?

E.g. - If session.role === 'teacher', redirect to '/teacher/dashboard', else - redirect to '/admin/dashboard' The NextAuth docs don't show a way to redirect based on session data: https://next-auth.js.org/configuration/callbacks#redirect-callback...

Best Practices - separating business logic from UI

So, I've seen this pattern which the Business logic is put into a hook, so it doesn't bloat the component. I've also seen that some critics that having the business logic into the component is wrong Here's a stackoverflow thread that illustrates well what I'm talking about: https://stackoverflow.com/questions/69332889/reactjs-separation-of-ui-and-business-logic...