Kyle
Kyle
TTCTheo's Typesafe Cult
Created by Kyle on 8/5/2024 in #questions
How to best approach coding this carousel
No description
5 replies
TTCTheo's Typesafe Cult
Created by Kyle on 7/15/2023 in #questions
eslint plugin for ordering imports
Hey guys! Just wondering how people are sorting imports on save lol
10 replies
TTCTheo's Typesafe Cult
Created by Kyle on 7/10/2023 in #questions
Are NextAuth column names sensitive?
I've been starting a new project with drizzle (it's been nice to work in) and I had sessions working great! I decided that I wanted to rename the tables in my db and then everything decided to go to shit. So I'm wondering if maybe the names of the database tables is directly correlated to how nextauth works? My adapters are entirely updated to reflect the new table names, so that's why I'm a bit confused, but then again there have been weirder things in the past lol.
3 replies
TTCTheo's Typesafe Cult
Created by Kyle on 7/8/2023 in #questions
Getting drizzle working with next-auth
Has anyone gotten drizzle working with next-auth? Here's the implementation that I've been using: https://github.com/c-karaolis/drizzle-next-auth-adapter-postgres/blob/main/src/lib/drizzle-next-auth-postgres-adapter.ts From what I can see I have all of my callback urls set up correctly, all environment vars that I need, and nothing else that is barring it from working that I can remember from previous times of setting it up. Maybe I'm missing something obvious here, but I'm really lost as to what is going on. I keep running into this error:
[next-auth][error][adapter_error_getUserByAccount]
https://next-auth.js.org/errors#adapter_error_getuserbyaccount Cannot read properties of undefined (reading 'users') {
message: "Cannot read properties of undefined (reading 'users')",
stack: "TypeError: Cannot read properties of undefined (reading 'users')\n" +
' at getUserByAccount (webpack-internal:///(sc_server)/./src/lib/drizzle-next-auth-postgres-adapter.ts:48:30)\n' +
' at process.processTicksAndRejections (node:internal/process/task_queues:95:5)',
name: 'TypeError'
}
[next-auth][error][OAUTH_CALLBACK_HANDLER_ERROR]
https://next-auth.js.org/errors#oauth_callback_handler_error Cannot read properties of undefined (reading 'users') TypeError: Cannot read properties of undefined (reading 'users')
at getUserByAccount (webpack-internal:///(sc_server)/./src/lib/drizzle-next-auth-postgres-adapter.ts:48:30)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
name: 'GetUserByAccountError',
code: undefined
}

- ┌ GET /api/auth/callback/github?code=50c5bc4bdc41e92f635b&state=pyudVQcppttAMcVmtAaOT15_0Afb8bR8C_1lnsVpPgQ 302 in 497ms

└──── GET https://api.github.com/user/emails 403 in 135ms (cache: MISS)
[next-auth][error][adapter_error_getUserByAccount]
https://next-auth.js.org/errors#adapter_error_getuserbyaccount Cannot read properties of undefined (reading 'users') {
message: "Cannot read properties of undefined (reading 'users')",
stack: "TypeError: Cannot read properties of undefined (reading 'users')\n" +
' at getUserByAccount (webpack-internal:///(sc_server)/./src/lib/drizzle-next-auth-postgres-adapter.ts:48:30)\n' +
' at process.processTicksAndRejections (node:internal/process/task_queues:95:5)',
name: 'TypeError'
}
[next-auth][error][OAUTH_CALLBACK_HANDLER_ERROR]
https://next-auth.js.org/errors#oauth_callback_handler_error Cannot read properties of undefined (reading 'users') TypeError: Cannot read properties of undefined (reading 'users')
at getUserByAccount (webpack-internal:///(sc_server)/./src/lib/drizzle-next-auth-postgres-adapter.ts:48:30)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
name: 'GetUserByAccountError',
code: undefined
}

- ┌ GET /api/auth/callback/github?code=50c5bc4bdc41e92f635b&state=pyudVQcppttAMcVmtAaOT15_0Afb8bR8C_1lnsVpPgQ 302 in 497ms

└──── GET https://api.github.com/user/emails 403 in 135ms (cache: MISS)
5 replies
TTCTheo's Typesafe Cult
Created by Kyle on 7/8/2023 in #questions
How much do you usually save in your db when using an external service like clerk?
As the title states, aside from saving the external id to reference, do you save anything else from the external service?
2 replies
TTCTheo's Typesafe Cult
Created by Kyle on 6/27/2023 in #questions
How to get data from server action
So I'm trying to get data back from a server action, like you would in Remix with useActionData and I just don't know how to access it. As an example:
async function addUser(data: FormData) {
"use server"
const schema = zfd.formData({
name: z.string(),
})

try {
const { name } = schema.parse(data)
await db.insert(UsersTable).values({ name })
revalidatePath("/")
} catch (e: any) {
if (e instanceof ZodError) {
return { data: null, error: "There is an issue" }
} else {
throw e
}
}
}


export default async function NewUser() {
// How do I get this?
const stuffReturnedFromAction = idkWhat()

return (
<form action={addUser}>
<label htmlFor="name">First Name</label>
<input id="name" name="name" type="text" required />
<button type="submit" className="w-4 h-2 font-bold">
Add User
</button>
{/* to put it here */}
<p className="color-red">{stuffReturnedFromAction.error}</p>
</form>
)
}
async function addUser(data: FormData) {
"use server"
const schema = zfd.formData({
name: z.string(),
})

try {
const { name } = schema.parse(data)
await db.insert(UsersTable).values({ name })
revalidatePath("/")
} catch (e: any) {
if (e instanceof ZodError) {
return { data: null, error: "There is an issue" }
} else {
throw e
}
}
}


export default async function NewUser() {
// How do I get this?
const stuffReturnedFromAction = idkWhat()

return (
<form action={addUser}>
<label htmlFor="name">First Name</label>
<input id="name" name="name" type="text" required />
<button type="submit" className="w-4 h-2 font-bold">
Add User
</button>
{/* to put it here */}
<p className="color-red">{stuffReturnedFromAction.error}</p>
</form>
)
}
5 replies
TTCTheo's Typesafe Cult
Created by Kyle on 5/24/2023 in #questions
TypeScript being grumpy with includes when comparing string[] to MyType[]
So I'm currently working on some checkboxes which correlate to some values for rent syndication. The values are strings of numbers, like this: ['12', '13', '14'] So I'm wanting to check to see if the checked box's value already exists in the array of these values. the values are a string[] as a type. But I have a type of the checkboxes that I'm working on since they pertain specifically to pets. So I have this: (petPolicyValue) => !amenitiesPets.includes(petPolicyValue) But I get an error like this: Argument of type 'string' is not assignable to parameter of type 'PetAmenityValues'. So I'm curious... why does include work like this? If it wasn't possible to be included it would just return false, which is what I want, but I understand that my types don't overlap correctly. Is there a good way around this?
5 replies
TTCTheo's Typesafe Cult
Created by Kyle on 4/17/2023 in #questions
Can you add an arbitrary row when using an SQL Query?
Hey guys! I'm currently fetching a list of users assigned to a ticket to use in a filter. And I want an option for no assigned user as well. Due to the constraints of Retool, which I'm working in, I don't have a ton of control over the dropdown input to be able to put in a select for a "no value", but I need it in order to be able to filter out for tickets that don't currently an assingnee. Right now my query looks something like this:
select id, email, first_name, last_name
from users
where true
and not users.is_deleted
and users.admin_roles @> '{"removedforsecurity)": {}}'::jsonb
order by is_deleted desc, email
select id, email, first_name, last_name
from users
where true
and not users.is_deleted
and users.admin_roles @> '{"removedforsecurity)": {}}'::jsonb
order by is_deleted desc, email
I was wondering if there was a way to get a row that doesn't actually exist and put in arbitrary data to it. In other words, select an id of null, with an email of null, and first and last name of null. That doesn't exist in the database currently, and I don't believe they want to add one (logically so), so I was wondering if there was a way to do this.
2 replies
TTCTheo's Typesafe Cult
Created by Kyle on 2/8/2023 in #questions
Cleaning up setter function that is a function
So I need to set my state to this: () => {}. However, if you supply () => {} to react in a setter, like so: setState(() => {}) it will instead return an empty object, since React uses that syntax to use the previous state. Is there a better way to do this than this: setState(() => () => {})?
6 replies
TTCTheo's Typesafe Cult
Created by Kyle on 1/8/2023 in #questions
Is there a String Union Type of all HTML Element names?
Pretty much what the title says. I want to be able to pass in any name of an html element, to then apply a style to, and return to the user.
7 replies
TTCTheo's Typesafe Cult
Created by Kyle on 12/8/2022 in #questions
Creating effective shared types in TypeScript without destroying hoverability
Sorry that my title is a bit wonky wacky, but I hope that my description will make sense: So in this codebase I have a button component, this button component accepts a few props, such as size, fill, color, etc. In this specific case, I am running into a code design question with my fill option. Fill can be one of 3 things: 'solid' | 'outline' | 'none'. However, I have some components which want to refer to this component, but also be able to take a prop themselves of how the button should work. (So in some cases where this button is used it will be solid, in others it will be an outline) For this, my corworker made this type to refer to in our Button component's types: export type ButtonFill = 'solid' | 'outline' | 'none' which is all fine and good, except for one thing. Now when you hover over fill, it shows ButtonFill rather than 'solid' | 'outline' | 'none'. I do not like this behavior, as I feel that it makes our codebase more confusing. So what would you guys do to make this more intuitive? Is his solution of making the separate type something you would like? Would you import the Button props and use Pick<'fill'>? Would you just hardcode the union wherever it is needed to be referenced in the codebase?
4 replies
TTCTheo's Typesafe Cult
Created by Kyle on 11/23/2022 in #questions
React Query refetch is refetching very slowly
So I'm running into an issue with react query where I am having to put an event listener which refetches the data to display. Essentially, we're using a 3rd party api to schedule meetings (Nylas), and their api is interesting, and requires you to attach a modal to the window. We are refetching the data when the window sees the modal closing. We know that the event listener is running due to a console.log. However, when we call the refetch function, the data doesn't update right away, instead, it will stall for a few seconds, and then eventually update. We know that the data is updated, since when you reload the page, the data is correct. Any ideas on what I could be doing wrong here? Should I be running a useMutation despite not owning the 3rd party api? Am I misunderstanding refetch? Thanks in advance!
13 replies
TTCTheo's Typesafe Cult
Created by Kyle on 9/30/2022 in #questions
How would you run something like eslint locally? (contributing)
So I'm wanting to contribute to eslint_d but I have no clue how to run it locally. How do you test your local changes that you want to attempt to make with a package like this?
4 replies
TTCTheo's Typesafe Cult
Created by Kyle on 9/20/2022 in #questions
Why isn't TypeScript giving an error?
So I'm helping this person on another server and their code looks like the following:
type Unit = {
unit: string;
abbreviation: string;
contains: string[];
};

const units: Unit[] = [{
unit: "ounce",
abbreviation: "oz",
contains: ["ounce", "oz"]
}];

const getUnitAbbreviation = (ingredient: string) => {
const filteredUnits = units.filter(({contains}) => contains.filter((cont) => ingredient.includes(cont)).length > 0)
const sortedUnits = filteredUnits.sort((a, b) => b.unit.split(" ").length - a.unit.split(" ").length)
const zeroth = sortedUnits[0];
const abbv = zeroth.abbreviation;
return abbv;
};

const shouldWork = getUnitAbbreviation("1 ounce of idk");
console.log("shouldWork", shouldWork);
const shouldFail = getUnitAbbreviation("1 idk of idk");
console.log("shouldFail", shouldFail);
type Unit = {
unit: string;
abbreviation: string;
contains: string[];
};

const units: Unit[] = [{
unit: "ounce",
abbreviation: "oz",
contains: ["ounce", "oz"]
}];

const getUnitAbbreviation = (ingredient: string) => {
const filteredUnits = units.filter(({contains}) => contains.filter((cont) => ingredient.includes(cont)).length > 0)
const sortedUnits = filteredUnits.sort((a, b) => b.unit.split(" ").length - a.unit.split(" ").length)
const zeroth = sortedUnits[0];
const abbv = zeroth.abbreviation;
return abbv;
};

const shouldWork = getUnitAbbreviation("1 ounce of idk");
console.log("shouldWork", shouldWork);
const shouldFail = getUnitAbbreviation("1 idk of idk");
console.log("shouldFail", shouldFail);
When you run this, you will get an error of abbreviation isn't defined (for the shouldFail case) It will return undefined if you provide the ? operator zeroth?.abbreviation as expected, but typescript doesn't give a linting error for it Anyone know why?
18 replies
TTCTheo's Typesafe Cult
Created by Kyle on 9/20/2022 in #questions
Are there any differences between these two pieces of code performance or bug wise?
I don't believe they do, but I found the second snippet in my codebase, so I wanted to be sure that I wasn't going to break something that I didn't try. Everything seems fine when I try it myself on my local server and test the functionality of what is being updated, but wanted to know if I was missing something, or some practice, by adding an empty array first
this.setState({ user: { ...(response || {}), ...data } });
this.setState({ user: { ...(response || {}), ...data } });
this.setState({ user: { ...response, ...data } });
this.setState({ user: { ...response, ...data } });
5 replies
TTCTheo's Typesafe Cult
Created by Kyle on 9/20/2022 in #questions
Can you (or should you I suppose) put a type inside of a component?
Primarily asking in relation to performance. I know that putting a type inside of a component is something that you can do, but does it give any performance hit to do so? This is more just to put types right on top of functions that reside inside of a component, instead of doing them inline. Example:
const BlahComponent = () => {
const myFunction = ({foo, bar, baz}: {foo: string, bar: string, baz: string}) => null;

return <></>
}
const BlahComponent = () => {
const myFunction = ({foo, bar, baz}: {foo: string, bar: string, baz: string}) => null;

return <></>
}
vs
const BlahComponent = () => {
type Props = {
foo: string;
bar: string;
baz: string;
}
const myFunction = ({foo, bar, baz}: Props) => null;

return <></>
}
const BlahComponent = () => {
type Props = {
foo: string;
bar: string;
baz: string;
}
const myFunction = ({foo, bar, baz}: Props) => null;

return <></>
}
17 replies