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

nextjs fetch into a global state

i am fetching a random word i whould like to use in my entire app. the fetching is happening on the initial get request for the URL (it is a hangman game). i am using Jotai for over things in this game app (got sudku going on and wanna add few more games). ...
No description

Best practices for typing a reusable button?

I have a React-TypeScript-Material UI app with a Button component but I'm not sure if what I'm doing is a good practice. Basically in the ButtonProps 4 out of 5 props are optional. Is this ok or should I structure the code in a different way? Perhaps not turning the button into a reusable component at all? ```js // src\components\shared\Button.tsx /** @jsxImportSource @emotion/react */...
Solution:
You can have something like this ```ts type ButtonProps = React.ComponentProps<"button"> & { leftIcon?: ReactElement<SVGSVGElement>;...

How to Call Hooks in sequence way

I'm utilizing Google Maps Address AutoComplete and I have two hooks. The first hook needs to work when the other hook is complete. ```javascript import { useJsApiLoader } from "@react-google-maps/api"; import usePlacesAutocomplete from "use-places-autocomplete";...

How to build Drizzle explicit types

Call me dumb, but I don't fully get how we can have explicit types that we can easily import in the various components of the application. I've worked few months with Prisma, and over there you have the engine that's able to generate all the types that your queries will generate and you can import them as needed. As far as I can see, Drizzle ORM does not do that. While I feel that what it does is still great, they provide you the type definition with all the props properly typed but you don't have a way to import them....

Using fetch with a cookie to get data from some website

1. I'm using a server action that POSTs some credentials to a login endpoint of some website and retrieves the cookie that is returned. 2. The cookie is saved on Redis. Then, I'm trying to use a different server action that POSTs to a different endpoint using the aforementioned cookie from Redis to retrieve some data. ...

Replicate Spotify player screen scroll. React Native

I'm trying to replicate the scrolling full page card from spotify. I would like to have a player card that can be dismissed with a vertical swipe gesture, but I would also like this to be able to be scrollable for lyrics. 1. Dismissible with a Vertical Swipe: Users can swipe up or down to dismiss the player card. 2. Scrollable for Lyrics: The card should also allow users to scroll within it to read the lyrics. ...

PWA UploadThing

I might be stretching upload thing to it's max, but uploadthing is working fine for me as a webapp but seems to die as part of a PWA, trying to get more logging details of what's not working but does anyone know of any gotchas with uploadingthing and pwas?

Best Practices for Structuring the /api folder in Next.js

While we all have our preferred methods for organizing Next.js projects, I haven't been able to find a comprehensive guide specifically focused on structuring the /pages/api folder and keeping API-side code well-organized This might be because many of us come from a frontend background and approach the /api folder with a "make it work" mentality. Would love to hear your thoughts on how you structure your /pages/api folder in your Next.js projects. Are there any recommended practices or design patterns you've found that have streamlined your API development workflow? For example, do you group related API routes into subfolders? How do you handle middleware or shared logic across API routes? What are some great guides (similar to bulletproof-react) or repositories that I can refer?...

ESLint config

Hey guys, recently I watched one of Theo’s videos where he mention sth about the eslint-config plugin. He mentioned the fact that this Airbnb config “standard” is not really useful, even Airbnb itself does not use it. So happy to hear opinions about good ESLint rules for NextJS with prettier project…

what is YOUR_TOKEN

I want to use an API to retrieve files and perform related operations. I looked at the examples, and it seems that I need YOUR_TOKEN. However, my generated API has two: UPLOADTHING_SECRET UPLOADTHING_APP_ID...
No description

TypeScript types error using zod.

Good Evening, I have run a few different versions of the below fetch and parse of the json, I am recieving an error of "Unsafe return of an any[] type value" with both of these functions, I'm not sure what I am doing wrong. I also included my zod schemas to see if maybe thats where the problem is. I appreciate any and all help ...

Best PDF Parsing Practices?

I have a system that gets a bunch of legal documents. The documents are all for the same legal case type but they are not the same documents, as each lawyer has their own wording, they look and are formatted diff but have the same important info of course. I want to extract certain data. What is the best approach for this? As of now I am leaning towards: Anyscale JSON Mode that returns json object of vals I ask for, thoughts? https://www.anyscale.com/blog/anyscale-endpoints-json-mode-and-function-calling-features ^ Credit to Rauch 🙂 https://github.com/rauchg/next-ai-news ...

Brand new T3 stack project warnings

After creating a new project, running npm i I've got these warnings: ```npm warn deprecated [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. npm warn deprecated @humanwhocodes/[email protected]: Use @eslint/config-array instead npm warn deprecated [email protected]: Rimraf versions prior to v4 are no longer supported...
No description

Get HTMLElement from Element

Hey! It may be dumb? Idk. Anyways, I got an Element object from document.querySelector(), tho what I need to suit my needs is an HTMLElement. And when doing ↓...
Solution:
querySelector() either returns nothing or a dom element. if it does not return an element you can simply use ```ts const el = document.querySelector("#element") if (!el) { return...

How to get hotloading to work with t3 + sst?

built project using create-t3-app. did some small extra stuff (pointing prisma to supabase db, changed discord auth to google auth) installed sst so i didn't need to run it from npx package.json: ```json...

Best headless CMS for t3-stack?

Hey, Im currently looking in to which headless CMS i want to implement with the t3-stack, do you guys have any recommendations?...

UploadThing - Cant pass userId

Hey guys, my lack of knowledge is showing here 😓 I am trying to pass the input prop to pass my user ID but I cant use that prop since I am not really using the base UploadComponent as I followed the nextJS docs and it uses a generator. So it says input is not a valid prop, how do I fix this? ...

NextAuth with Discord & GitHub

Hey, I want to use both Github and Discord on my app, and I want to attach the profiles to the sessions so that they are accessible from the client. The user must first sign in with Discord and then the GitHub account can be linked. Can somebody please explain how I can do this? ```ts import { PrismaAdapter } from "@auth/prisma-adapter";...

disable logging in next 14.2

anyone have any idea how i can disable the logging added in 14.2?
GET / 200 in 3422ms
POST /api/auth/_log 200 in 21ms
GET / 200 in 3422ms
POST /api/auth/_log 200 in 21ms
...

Has anyone tried using prisma just for migrations, and using drizzle for querying on Postgres DB?

I have a postgres database used by another non JS backend and we were using drizzle to manage the schema and migrations as well as querrying it from this another BFF where drizzle is installed. But facing a lot of issues, seems like Postgres is not a priority for drizzle at the moment seeing some perpetually open issues https://github.com/drizzle-team/drizzle-orm/issues/295 that are unaddressed. I love the query structure of drizzle and the performance gains are also nice to have. Is it advisable to use prisma just for the migrations? Has anyone had any success with this? If so how is the experience. Would really appreciate more insight into this....