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

update data via react-hook-form

Hi, I’m trying to create some type of update functionality to my website using forms. Basically the idea is to fetch from the database and offer the user the possibility to change the details of each field as well as adding/removing fields. You can think of a structure similar to a résumé builder. Is react-hook-form the correct technology for that? Or should I consider something else?...

Please critique my workflow for replacing an entire legacy project with a C3TA-scaffolded prototype?

Been prototyping an 80% rewrite of my web app’s frontend scaffolded with Create-T3-App (NextJS 13 with pages, TypeScript, and Tailwind only, no tRPC, Prisma, or Next-Auth) in a separate repo. Significant rewrite with not only newer versions of Next, React, and Cypress, Tailwind as the CSS solution instead of Material-UI, and TypeScript instead of JavaScript, but also React Query, Jotai, and HeadlessUI too. Things have been going very well and I am almost ready to replace the running production frontend as it currently stands with the new frontend. 
 Main repo in legacy project has three branches: main (main dev branch), staging (auto builds on staging server), and production (auto builds on live production server) 
Backend is in separate repo/deployed separately. 
Proposed workflow for replacing old frontend with new one: 1. While on the main branch of the web frontend repo, completely empty out its top-level working directory of the entirety of the old frontend, moving the old frontend to a separate archive directory in the process, and copy the new frontend (including node_modules folder) in from the prototype directory. Ensure everything works & all tests pass (about 300 E2E tests I’ve been copying over and adapting) , then push the new frontend up to the main branch. 2. Merge the new frontend into the staging branch and confirm the staging app works. 3. Once it is confirmed that the staging app works, merge the frontend into the production branch at 3:30am on Tuesday morning and pray for no downtime. ...

How do you set up T3 with Shadcn UI

should I change the tailwind.config.js to tailwind.config.ts

Expo Screen Orientation not working

Hey all, I'm having an issue where I can't get the expo-screen-orientation package to work, I've tried on a latest v iOS simulator and on the expo app via my phone, both of which won't let me lock to landscape, here is my code, would be much appreciated if you could help. I am calling this function inside a specific screen, I'm assuming this must be allowed right? ```tsx const onLoadLockToPortrait = async () => { try {...

i18next App router setup

Hi! Is there some good resource about setting up i18next on app router? I need it to work on server components, client components and store the lang in cookies, so it wouldnt show up in route. Do you know how i'd approach that?...

How to make this documentation index effect?

I'm struggling to do this right now, using framer-motion

Next-Auth question about JWTs

This is my understanding of how JWT's and Session work in Next auth: - I send a login form to the server - the authorize(credentials) function finds a user associated with those credentials and returns user data. - That user data and accompanying data is given to the JWT() callback - The JWT() callback decides what to retain from this before the JWT is sent to my cookie jar...

React Joyride alternatives

What do you use for creating guided tours of your apps? Joyride seems most popular but it has class component in example so I'm hesistant about using it lmao

Why Theo doesn't talk about Ionic/CapacitorJS? [Capacitor vs React Native]

In my startup we've just went trough a rewrite or our product, going from an EXPO React Native + NextJS solution to an Ionic / CapacitorJS with React VITE solution. Honestly, we couldn't have made a better move. We are moving so much faster and we're having no problems at all with code sharing. ...

Help understanding this line of JS/TS

const globalForPrisma = global as unknown as { prisma: PrismaClient }; how is the object being casted to unknown but also to "prisma" (which itself is of type PrismaClient)? What is likely the purpose of this?

Why the infered type of this function is `string | undefined`?

Why the infered type of this function is string | undefined? How TypeScript is unable to see that the returned value can never be undefined? ```typescript export const myFunction = ( { value1 }: { value1?: string },...

How to convert shadcn/ui components to Client component?

I'm using shadcn/ui components, and I can't make them interactive. E.g. <Button onClick={() => console.log("hi")}></Button> gives error

Typescript with jwt passport

```js import { Strategy as JwtStrategy, ExtractJwt } from 'passport-jwt'; import passport from 'passport'; const opts = {};...

ncaught Error: Invalid hook call

ncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem....

JSDoc - Functions Taking Never

I'm using JS + JSDoc + @ts-check in a project, and I'm running into the following somewhat odd issue. It appears that when using JSDoc, TypeScript fails to recognize that an argument of type never should not be passed at the call site. Here's the minimum code needed to recreate this issue: ```js /** * @param {never} _ */...

Does API function timeout if it’s triggered by multiple cron jobs?

I need to send a newsletter to 20k subscribers. Resend doesn’t yet support bulk email sending, so I want to build my own using Resend, Vercel Cron and Next.js API route. I am not certain though, will a serverless function timeout if I keep triggering it via cron every second for like half an hour?...

how to know if i'm using React Server Components?

Trying to set up shadcn/ui. Setup config asks if I'm using React Server Components, how do I check? (I'm using nextjs with /app)

Subteams design model

Hey everyone, got inspired by the post on bullet train https://blog.bullettrain.co/teams-should-be-an-mvp-feature/. And got interested how to model Team having subteams?

Vercel builds errorring out due to Invalid Vercel URL.

Hi! Stuck during first deployment of my T3 app. It keeps saying the VERCEL_URL is invalid but looking at the env variables the VERCEL_URL is set and is set to https://**.vercel.app VERCEL_URL: z.string().url().optional(),...