Theo's Typesafe Cult•2y ago

How can i remove the parameter

I want to remove the parameter createdAt cause its of type date.

Solution:

I want to remove the parameter createdAt cause its of type date.

Jump to solution

58 Replies

elpupperOP•2y ago

but to be honest what im really tryna do is solve this error

elpupperOP•2y ago

elpupperOP•2y ago

    async function sort({ items, sortDescriptor }: { items: Teacher[], sortDescriptor: Descriptor }) {
        console.log(items);
        console.log(sortDescriptor);
        return {
            items: items.sort((a, b) => {
                let first = a[sortDescriptor.column as keyof typeof a];
                let second = b[sortDescriptor.column as keyof typeof b];
                if (typeof first !== "string" || typeof second !== "string") {
                    first = first.toString();
                    second = second.toString();
                }
                let cmp = collator.compare(first, second); 
                if (sortDescriptor.direction === "descending") {
                    cmp *= -1;
                }
                return cmp;
            }),
        };
    }

    async function sort({ items, sortDescriptor }: { items: Teacher[], sortDescriptor: Descriptor }) {
        console.log(items);
        console.log(sortDescriptor);
        return {
            items: items.sort((a, b) => {
                let first = a[sortDescriptor.column as keyof typeof a];
                let second = b[sortDescriptor.column as keyof typeof b];
                if (typeof first !== "string" || typeof second !== "string") {
                    first = first.toString();
                    second = second.toString();
                }
                let cmp = collator.compare(first, second); 
                if (sortDescriptor.direction === "descending") {
                    cmp *= -1;
                }
                return cmp;
            }),
        };
    }

type Descriptor = {
    column: string;
    direction: "ascending" | "descending";
};

type Descriptor = {
    column: string;
    direction: "ascending" | "descending";
};

ok so i did

type Sorter = {
    name: string;
    phone: string;
    role: string;
    email: string;
};

    async function sort({ items, sortDescriptor }: { items: Teacher[], sortDescriptor: Descriptor }) {
        return {
            items: items.sort((a, b) => {
                let first = a[sortDescriptor.column as keyof Sorter];
                let second = b[sortDescriptor.column as keyof Sorter];
                let cmp = collator.compare(first, second); 
                if (sortDescriptor.direction === "descending") {
                    cmp *= -1;
                }
                return cmp;
            }),
        };
    }

type Sorter = {
    name: string;
    phone: string;
    role: string;
    email: string;
};

    async function sort({ items, sortDescriptor }: { items: Teacher[], sortDescriptor: Descriptor }) {
        return {
            items: items.sort((a, b) => {
                let first = a[sortDescriptor.column as keyof Sorter];
                let second = b[sortDescriptor.column as keyof Sorter];
                let cmp = collator.compare(first, second); 
                if (sortDescriptor.direction === "descending") {
                    cmp *= -1;
                }
                return cmp;
            }),
        };
    }

elpupperOP•2y ago

elpupperOP•2y ago

still getting this error

sheng2808•2y ago

can i see how u queryed the data?

elpupperOP•2y ago

    const { data } = api.teachers.getAll.useQuery();

    async function load({ signal }: { signal: AbortSignal }) {

        const list: Teacher[] = await JSON.parse(JSON.stringify(data));
        return {
            items: list,
        };
    }

    const { data } = api.teachers.getAll.useQuery();

    async function load({ signal }: { signal: AbortSignal }) {

        const list: Teacher[] = await JSON.parse(JSON.stringify(data));
        return {
            items: list,
        };
    }

sheng2808•2y ago

what's your prisma schema for teacher?

elpupperOP•2y ago

model Teacher {
    id        String   @id @default(cuid())
    createdAt DateTime @default(now())

    name  String
    email String
    role  String
    phone String
    dob   String

    authorId String
    Course   Course[]
}

model Teacher {
    id        String   @id @default(cuid())
    createdAt DateTime @default(now())

    name  String
    email String
    role  String
    phone String
    dob   String

    authorId String
    Course   Course[]
}

sheng2808•2y ago

lemme see your getAll code

elpupperOP•2y ago

    getAll: publicProcedure.query(({ ctx }) => {
        return ctx.prisma.teacher.findMany();
    }),

    getAll: publicProcedure.query(({ ctx }) => {
        return ctx.prisma.teacher.findMany();
    }),

should i change it up to where it only returns name email role phone

sheng2808•2y ago

okay usually i just do const teacher = api.teachers.getAll.useQuery().data then just pass it into the function, the type should be Teacher[] when you do this idk why u need to json parse the data

elpupperOP•2y ago

idk either kept throwing me errors

sheng2808•2y ago

what kind

elpupperOP•2y ago

async function load({ signal }: { signal: AbortSignal }) {

        return {
            items: data,
        };
    }

async function load({ signal }: { signal: AbortSignal }) {

        return {
            items: data,
        };
    }

const list = useAsyncList({ load, sort });

const list = useAsyncList({ load, sort });

sheng2808•2y ago

erm im abit confused tbh hahah do you mind we hop on a call and you can share screen me

elpupperOP•2y ago

i would but my upload is so ass that ill just lag like crazy here ill send u a reference to my code of how i derived to it

elpupperOP•2y ago

https://nextui.org/docs/components/table#sortable

Table | NextUI - Beautiful, fast and modern React UI Library

Tables are used to display tabular data using rows and columns. hey allow users to quickly scan, sort, compare, and take action on large amounts of data.

elpupperOP•2y ago

import { Table, useAsyncList, useCollator } from "@nextui-org/react";

export default function App() {
  const collator = useCollator({ numeric: true });
  async function load({ signal }) {
    const res = await fetch("https://swapi.py4e.com/api/people/?search", {
      signal,
    });
    const json = await res.json();
    return {
      items: json.results,
    };
  }
  async function sort({ items, sortDescriptor }) {
    return {
      items: items.sort((a, b) => {
        let first = a[sortDescriptor.column];
        let second = b[sortDescriptor.column];
        let cmp = collator.compare(first, second);
        if (sortDescriptor.direction === "descending") {
          cmp *= -1;
        }
        return cmp;
      }),
    };
  }
  const list = useAsyncList({ load, sort });
  return (...);
}

import { Table, useAsyncList, useCollator } from "@nextui-org/react";

export default function App() {
  const collator = useCollator({ numeric: true });
  async function load({ signal }) {
    const res = await fetch("https://swapi.py4e.com/api/people/?search", {
      signal,
    });
    const json = await res.json();
    return {
      items: json.results,
    };
  }
  async function sort({ items, sortDescriptor }) {
    return {
      items: items.sort((a, b) => {
        let first = a[sortDescriptor.column];
        let second = b[sortDescriptor.column];
        let cmp = collator.compare(first, second);
        if (sortDescriptor.direction === "descending") {
          cmp *= -1;
        }
        return cmp;
      }),
    };
  }
  const list = useAsyncList({ load, sort });
  return (...);
}

so for now we just wanna ignore the return oh damn im so stupid ok i coulda just done

    async function load({ signal }: { signal: AbortSignal }) {

        return {
            items: data === undefined ? [] : data,
        };
    }

    async function load({ signal }: { signal: AbortSignal }) {

        return {
            items: data === undefined ? [] : data,
        };
    }

sheng2808•2y ago

ouh lol does that work?

elpupperOP•2y ago

ya no more error on load not sure how to use await promise in this case to solve the eslint

sheng2808•2y ago

i thought that was another problem hahah

elpupperOP•2y ago

😭

sheng2808•2y ago

i dont use nextUI that's where i got confused about your code 😅

elpupperOP•2y ago

ah i just used it to get something up and running quickly alright so i think im done with the load function

sheng2808•2y ago

ahh interesting, glad you solved your problem 👍 :D

elpupperOP•2y ago

still didnt solve the problem 😭

    async function load({ signal }: { signal: AbortSignal }) {
        await Promise.resolve(signal);

        return {
            items: data === undefined ? [] : data,
        };
    }

    async function load({ signal }: { signal: AbortSignal }) {
        await Promise.resolve(signal);

        return {
            items: data === undefined ? [] : data,
        };
    }

sheng2808•2y ago

LOL

elpupperOP•2y ago

now the sort function

sheng2808•2y ago

what's the error

elpupperOP•2y ago

    async function sort({ items, sortDescriptor }: { items: Teacher[], sortDescriptor: Descriptor }) {
        return {
            items: items.sort((a, b) => {
                let first = a[sortDescriptor.column as keyof Sorter];
                let second = b[sortDescriptor.column as keyof Sorter];
                let cmp = collator.compare(first, second); 
                if (sortDescriptor.direction === "descending") {
                    cmp *= -1;
                }
                return cmp;
            }),
        };
    }

    async function sort({ items, sortDescriptor }: { items: Teacher[], sortDescriptor: Descriptor }) {
        return {
            items: items.sort((a, b) => {
                let first = a[sortDescriptor.column as keyof Sorter];
                let second = b[sortDescriptor.column as keyof Sorter];
                let cmp = collator.compare(first, second); 
                if (sortDescriptor.direction === "descending") {
                    cmp *= -1;
                }
                return cmp;
            }),
        };
    }

its what i sent earlier .

elpupperOP•2y ago

sheng2808•2y ago

your column type is wrong

elpupperOP•2y ago

is it

type Descriptor = {
    column: string;
    direction: string;
};

type Descriptor = {
    column: string;
    direction: string;
};

sheng2808•2y ago

apparently you need to type it as Key | undefined

elpupperOP•2y ago

should be Key then? wtf is type Key

sheng2808•2y ago

that's what im asking myself LOL probably sth from nextui

elpupperOP•2y ago

it isnt or is it

sheng2808•2y ago

maybe not?

elpupperOP•2y ago

got it

async function sort({ items, sortDescriptor }: { items: Teacher[], sortDescriptor: SortDescriptor })

async function sort({ items, sortDescriptor }: { items: Teacher[], sortDescriptor: SortDescriptor })

it was part of nextui but i didnt find it in there docs 😭

elpupperOP•2y ago

i found it in https://react-spectrum.adobe.com/react-stately/useAsyncList.html

useAsyncList

Documentation for useAsyncList in the React Stately package.

sheng2808•2y ago

it's in beta so docs might not be complete cos of all the changes

elpupperOP•2y ago

67:9  Error: Promises must be awaited, end with a call to .catch, end with a call to .then with a rejection handler or be explicitly marked as ignored with the `void` operator.  @typescript-eslint/no-floating-promises

67:9  Error: Promises must be awaited, end with a call to .catch, end with a call to .then with a rejection handler or be explicitly marked as ignored with the `void` operator.  @typescript-eslint/no-floating-promises

sheng2808•2y ago

put await in?

elpupperOP•2y ago

    async function sort({ items, sortDescriptor }: { items: Teacher[], sortDescriptor: SortDescriptor }) {
        
        await Promise.resolve(items);

        return {
            items: items.sort((a, b) => {
                const first = a[sortDescriptor.column as keyof Sorter];
                const second = b[sortDescriptor.column as keyof Sorter];
                let cmp = collator.compare(first, second); 
                if (sortDescriptor.direction === "descending") {
                    cmp *= -1;
                }
                return cmp;
            }),
        };
    }

    async function sort({ items, sortDescriptor }: { items: Teacher[], sortDescriptor: SortDescriptor }) {
        
        await Promise.resolve(items);

        return {
            items: items.sort((a, b) => {
                const first = a[sortDescriptor.column as keyof Sorter];
                const second = b[sortDescriptor.column as keyof Sorter];
                let cmp = collator.compare(first, second); 
                if (sortDescriptor.direction === "descending") {
                    cmp *= -1;
                }
                return cmp;
            }),
        };
    }

like this? im getting a error on this

    const refreshData = () => {
        router.replace(router.asPath);
    }

    const refreshData = () => {
        router.replace(router.asPath);
    }

const router = useRouter();

const router = useRouter();

import { useRouter } from 'next/router';

import { useRouter } from 'next/router';

sheng2808•2y ago

what's the error

elpupperOP•2y ago

67:9  Error: Promises must be awaited, end with a call to .catch, end with a call to .then with a rejection handler or be explicitly marked as ignored with the `void` operator.

67:9  Error: Promises must be awaited, end with a call to .catch, end with a call to .then with a rejection handler or be explicitly marked as ignored with the `void` operator.

😭

elpupperOP•2y ago

sheng2808•2y ago

wait it's for refreshing data? basically, you refresh the page to load data?

elpupperOP•2y ago

well not really its a way to rerender so the page doesnt actually refresh but it re renders

sheng2808•2y ago

when does it rerender?

elpupperOP•2y ago

when the list changes adding new teacher or deleting

sheng2808•2y ago

cant you just do a invalidate? const CartDelete = api.user.postDeleteCartItem.useMutation( { onSuccess() { void utils.user.getCart.invalidate() } } ) const utils = api.useContext(); i did sth like this <button type="button" onClick={() => { CartDelete.mutate(product.product.id) }} className="-m-2 inline-flex p-2 text-gray-400 hover:text-gray-500" > <span className="sr-only">Remove</span> <XMarkIcon className="h-5 w-5" aria-hidden="true" /> </button>

elpupperOP•2y ago

ok wait

const { mutate } = api.teachers.delete.useMutation();

const { mutate } = api.teachers.delete.useMutation();

                                                        mutate({ id: item.id },
                                                                {
                                                                    onSuccess: () => {
                                                                        list.remove(item.id);
                                                                        refreshData();
                                                                        ...
                                                                    },
                                                                    onError: (error) => {
                                                                        ...
                                                                    }
                                                                })
                                                        }}

                                                        mutate({ id: item.id },
                                                                {
                                                                    onSuccess: () => {
                                                                        list.remove(item.id);
                                                                        refreshData();
                                                                        ...
                                                                    },
                                                                    onError: (error) => {
                                                                        ...
                                                                    }
                                                                })
                                                        }}

teachers.tsx (prisma shit)

    delete: privateProcedure.input(
        z.object({
            id: z.string().cuid(),
        }),
    ).mutation(async ({ ctx, input }) => {
        const post = await ctx.prisma.teacher.delete({
            where: {
                id: input.id,
            },
        });
    }),

    delete: privateProcedure.input(
        z.object({
            id: z.string().cuid(),
        }),
    ).mutation(async ({ ctx, input }) => {
        const post = await ctx.prisma.teacher.delete({
            where: {
                id: input.id,
            },
        });
    }),

sheng2808•2y ago

ya just do a invalidate instead of refreshData

sheng2808•2y ago

https://trpc.io/docs/reactjs/usecontext#query-invalidation

useContext | tRPC

useContext is a hook that gives you access to helpers that let you manage the cached data of the queries you execute via @trpc/react-query. These helpers are actually thin wrappers around @tanstack/react-query's queryClient methods. If you want more in-depth information about options and usage patterns for useContext helpers than what we provide...

elpupperOP•2y ago

perfect worked didnt know about that thanks last error now 😎

111:43  Error: Avoid referencing unbound methods which may cause unintentional scoping of `this`.   
If your function does not access `this`, you can annotate it with `this: void`, or consider using an arrow function instead

111:43  Error: Avoid referencing unbound methods which may cause unintentional scoping of `this`.   
If your function does not access `this`, you can annotate it with `this: void`, or consider using an arrow function instead

now this one makes no sense at all alright i fixed everything im so happy

sheng2808•2y ago

Glad to help :))

Gaming

Programming

How can i remove the parameter