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

React Hook Form Typescript - Tabs

Hello All, Currently I have setup tabs on my form, and currently the state only saves to the page context when submit is pressed on each tab, however I would like it to save the values between changing tabs without having to use submit or shouldUnregister: false as its deprecated. I figured I could persist the state on click of the tab (pretty much just run submit form outside of the form), but I don't like this method as I lose metadata like isDirty. ...

Updating State does not rerender when calling a method on my class

I am setting a state with new FileSystem() After calling the createDirectory method which adds a new child directory to the current directory of the file system object it does not rerender the component. const [fs, setFS] = useState<FileSystem>(new FileSystem()); ...

How to update data on a static site?

I have a site that is mostly static. I feel like astro would be fairly well suited for it. My problem is something about static sites just doesn't click with me. I see all these examples of Blogs for example. How are they adding new posts if a blog is static? Are they redeploying the entire app every time a new post is added? I have for example a few posts (not many. If things go well, there may be a few thousand) and a few users who manage those posts (again, not many. Maybe a few dozen or a couple hundred way down the line). I need to be able to go into a portal and submit a new post and have that show up without having to redeploy every time (unless there is some trick to make that happen really really fast that I don't know about. And I do have some minimal javascript required such as filtering and sorting and searching as well as analyzing metrics (how many posts there are, how many posts per user, etc.). Is there something I'm just not getting? I'm just feeling more and more like the t3 stack is overkill for what I'm doing but maybe that's just what is required for something like this?...

Create T3, appDir, tRPC

So I'm wanting to start new pet project, this'll be the first time I'm using T3 with Tailwind, Next, and tRPC. I want to use the new experimental appDir setting. When I create a repo with npm create t3-app@latest it defaults to the pages/ style. I added experimental: {appDir: true} to the next config, created a app/ directory, and copy pasted pages/index.tsx to app/page.tsx. But I'm getting errors saying I'm importing a component that needs useState, which only works on Client Components....

Complex object interface

Sometimes I get an object CoolStuff from api. It has two kinds. I try using discriminated unions. type CoolStuff = ...

Vercel failing build on empty arrow function in context

Hey guys, my Vercel build is failing because in my context declaration Im initiating an empty function which gets caught by the linter. Whats the correct way of doing this? Assuming I'm doing something wrong.

react table v7 with typescript

I'm unable to get this example to work with typescript, from react table v7 docs https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/editable-data?from-embed here is my code Editable Cell component ```tsx...

Better Way Of Declaring Variables For Tests

In a lot of my tests, I use beforeEach to setup variables for the testing file. That code looks like this: ```typescript let text_channel: TextChannel; let client: Client;...

ct3a + react-hexgrid npm package = "Cannot use import statement outside a module"

So I'm a bit confused about this and it's somewhat hard to google cause content mills spam the search with unrelated(?) beginner tutorials... Basically, when I try to import from the react-hexgrid@2.0.1 npm package from a ct3a app, I get the error on page load. Any hints for understanding this problem are appreciated. FWIW, I tried the package with a create-react-app and at least it spat out a webpage (with a couple warnings/errors). ...

help styling footer

i have this chunk of my footer pictured (just assume it takes the width of the screen) my goal is that at large screens it is just 1 row as pictured, with even gaps, and then at smaller widths it becomes 2x2 grid to me, the easy solution is to just do 1x4 grid on large screens, and 2x2 on small screens, but hardcoding in grid sizes feels wrong to me. any suggestions are appreciated....

Best library for pinch to zoom + drag to pan

Does anybody know a good library for pinch to zoom + drag to pan? Things I've tried: - I've heard Theo talk about useGesture() before and this seems good, but the docs are.... minimal and their only pinch example doesn't run anymore: https://codesandbox.io/s/github/pmndrs/use-gesture/tree/main/demo/src/sandboxes/card-zoom - I did some googling and also found react-zoom-pan-pinch, but it has dependency issues with react 18 https://www.npmjs.com/package/react-zoom-pan-pinch...

Environment variables pass on backend but fail on client?

I don't know what's going on here. The client says there's an error in the server.mjs file: ❌ Invalid environment variables. But it passes the safeParse serverside? WTF is happening here It's like it passes on the backend but when it gets to the front end it doesn't anymore. I'm not sure what's going on here! I attached my env keys, my schema.mjs file, the console.log result happening in server.mjs and the error I get on the client....

TRPC Server Side verification of action.

I have a button that can only be pressed once a day (as a vote). I've made it so the button turns to disabled when a vote has already been processed, or a click for the day. I've read previously never trust the client, so are there any additional steps/best practices I should take in order to stop abuse? My mind leads towards doing a check query whenever a button press is handled, but unsure....

Is it possible to host (blog.abc.com on astro) and (abc.com on nextjs vercel) ?

What is the standard practice for folks who build websites that have corresponding blog's.

How do I update my old t3 app to be in line with the most recent changes?

Seeing Theo's recent video, I see that t3 has gone through a few changes and improvements. How can I update it to the latest version safely?

Benefits of NextPage type

As in the title. What are benefits of typing our next pages with NextPage type. (Next 13, pages dir) The only one I see is that I have to return JSX but since react 18 React.FC type does the same and not intentionaly types children why wouldn't I use it insead of NextPage?...

How to create a cli like create-t3-app?

I am hoping to create a template similar to create-t3-app which is inspired by t3-stack as well but with my personalised spin on it. I know how to create CLIs but I was wondering if there are any tips/shortcuts/suggestions that I can use to create it without wanting to kill myself. Please help me out. 🙂

Creating polygons with borders in HTML and CSS

I have spent the better part of the day trying to come up with a robust way to create polygons with a consistent border on HTML / CSS. I have tried 4 different methods so far which are all pretty inadequate. which can be found here: https://jsfiddle.net/op78fv6n/84/ Can someone help me figure out how to do this in a sane way?...

Correct way to get data based on email

Hello experimenting with t3-stack, What would be the correct way to query from my submissions table by checking if an email exists within the table ? ``` getSubmissionData: publicProcedure...