rocawear Comments - Answer Overflow

export const filtersSchema = z.object({
  example: z.string().nullable(),
  example2: z.string().nullable(),
})

const ExamplePage: NextPage = () => {
  const { control, values, update } = useFilters({
    schema: filtersSchema,
    defaultValues: {
      example: null,
      example2: null,
    },
  })

  return (
    <PageContainer>
      <form onSubmit={update}>
        <Select
          title="title"
          placeholder="placeholder"
          control={control}
          label="example"
          options={[
            { label: "option 1", value: "option 1" },
            { label: "option 2", value: "option 2" },
            { label: "option 3", value: "option 3" },
          ]}
        />
        <Select
          title="title"
          placeholder="placeholder"
          control={control}
          label="example2"
          options={[
            { label: "option 1", value: "option 1" },
            { label: "option 2", value: "option 2" },
            { label: "option 3", value: "option 3" },
          ]}
        />
        <Button type="submit">submit</Button>
      </form>
      {JSON.stringify(values, null, 2)}
    </PageContainer>
  )
}

export const filtersSchema = z.object({
  example: z.string().nullable(),
  example2: z.string().nullable(),
})

const ExamplePage: NextPage = () => {
  const { control, values, update } = useFilters({
    schema: filtersSchema,
    defaultValues: {
      example: null,
      example2: null,
    },
  })

  return (
    <PageContainer>
      <form onSubmit={update}>
        <Select
          title="title"
          placeholder="placeholder"
          control={control}
          label="example"
          options={[
            { label: "option 1", value: "option 1" },
            { label: "option 2", value: "option 2" },
            { label: "option 3", value: "option 3" },
          ]}
        />
        <Select
          title="title"
          placeholder="placeholder"
          control={control}
          label="example2"
          options={[
            { label: "option 1", value: "option 1" },
            { label: "option 2", value: "option 2" },
            { label: "option 3", value: "option 3" },
          ]}
        />
        <Button type="submit">submit</Button>
      </form>
      {JSON.stringify(values, null, 2)}
    </PageContainer>
  )
}

Hook:

type UseFiltersProps<Schema extends z.ZodTypeAny> = {
  schema: Schema
  defaultValues: DefaultValues<z.infer<Schema>>
}

export const useFilters = <Schema extends z.ZodTypeAny>({ schema, defaultValues }: UseFiltersProps<Schema>) => {
  const { control, handleSubmit } = useForm<z.infer<Schema>>({
    resolver: zodResolver(schema),
    defaultValues,
  })

  const router = useRouter()
  const values = useWatch({ control })

  const update = (values: z.infer<Schema>) => {
    const v = pickBy(values, (value) => value !== null)
    router.push({ query: v }, undefined, { shallow: true })
  }

  return {
    control,
    values,
    update: handleSubmit(update),
  }
}

type UseFiltersProps<Schema extends z.ZodTypeAny> = {
  schema: Schema
  defaultValues: DefaultValues<z.infer<Schema>>
}

export const useFilters = <Schema extends z.ZodTypeAny>({ schema, defaultValues }: UseFiltersProps<Schema>) => {
  const { control, handleSubmit } = useForm<z.infer<Schema>>({
    resolver: zodResolver(schema),
    defaultValues,
  })

  const router = useRouter()
  const values = useWatch({ control })

  const update = (values: z.infer<Schema>) => {
    const v = pickBy(values, (value) => value !== null)
    router.push({ query: v }, undefined, { shallow: true })
  }

  return {
    control,
    values,
    update: handleSubmit(update),
  }
}

4 replies

TtRPC

•Created by rustclan on 9/22/2023 in #❓-help

return type of a query endpoint

https://trpc.io/docs/client/react/infer-types

8 replies

TTCTheo's Typesafe Cult

•Created by samuele on 9/1/2023 in #questions

broken dinamic page react quey

https://nextjs.org/docs/app/api-reference/functions/use-params

4 replies

TTCTheo's Typesafe Cult

•Created by samuele on 9/1/2023 in #questions

broken dinamic page react quey

Because it's not something you can do on client/component. Use router for that

4 replies

TtRPC

•Created by AlexVern on 7/14/2023 in #❓-help

tRPC & redux toolkit query

Sorry I have no idea but you have baseUrl: "/rtpc", should it be "/trpc"

4 replies

TTCTheo's Typesafe Cult

•Created by chnmrn. on 6/28/2023 in #questions

ts-node not recognize

Yeah but it's unnecessary since ts-node works with nodemon without configuration

7 replies

TTCTheo's Typesafe Cult

•Created by chnmrn. on 6/28/2023 in #questions

ts-node not recognize

nodemon will use ts-node

7 replies

TTCTheo's Typesafe Cult

•Created by chnmrn. on 6/28/2023 in #questions

ts-node not recognize

Keep the nodemon part but remove ts-node stuff from the dev script

7 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 6/27/2023 in #questions

How to disable App Dir?

I did not get message after I removed experimental from next config

4 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 6/27/2023 in #questions

How to disable App Dir?

I also dont have app/ folder

4 replies

TTCTheo's Typesafe Cult

•Created by niels on 6/27/2023 in #questions

useQuery endless fetching loop

What happens if you change to static queryKey

15 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 6/25/2023 in #questions

Prisma Schema

This sounds abit hacky because i would like to keep history of questions (i am storing answers so those would be gone after update):

    const j = await db.feedback.update({
      where: { id: params.feedbackId },
      data: {
        name: payload.name,
        questions: {
          deleteMany: {},
          create: payload.questions,
        },
      },
      include: { questions: true },
    });

    const j = await db.feedback.update({
      where: { id: params.feedbackId },
      data: {
        name: payload.name,
        questions: {
          deleteMany: {},
          create: payload.questions,
        },
      },
      include: { questions: true },
    });

6 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 6/25/2023 in #questions

Prisma Schema

That code updates feedback name as expected but not sure how to update questions so what i would want is to update the feedback to be what i send

6 replies

TTCTheo's Typesafe Cult

•Created by rocawear on 6/25/2023 in #questions

Prisma Schema

Here not sure how to update it correctly, I using useArrayFields() on my frontend and I am sending data like:

{
  "name": "feed",
  "questions": [
    {
      "content": "jkjjj"
    },
    {
      "content": "jkjjjdddd"
    }
  ]
}

{
  "name": "feed",
  "questions": [
    {
      "content": "jkjjj"
    },
    {
      "content": "jkjjjdddd"
    }
  ]
}

    const j = await db.feedback.update({
      where: { id: params.feedbackId },
      data: {
        name: payload.name,
        questions: {},
      },
      include: { questions: true },
    });

    const j = await db.feedback.update({
      where: { id: params.feedbackId },
      data: {
        name: payload.name,
        questions: {},
      },
      include: { questions: true },
    });

6 replies

Gaming

Programming