Kseikyo Comments - Answer Overflow

But in my opinion, it would be much easier to just have one form, and change only the inputs of the form on each step. That way, the form will have the data when the user hits cancel, shouldn't require any extra code.

9 replies

TTCTheo's Typesafe Cult

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

shadcn Form

you're handling with multiple forms, you must be using multiple uses of useForm, in that case, if you're removing the entire form between each step, you can save that form data using local storage and on hit cancel, you get that data from local storage and set to the form.

9 replies

TTCTheo's Typesafe Cult

•Created by 'antonyyprints' on 8/31/2023 in #questions

Discord not signing in

Did you create an app on discord and add the right id and secret to the .env file?

9 replies

TTCTheo's Typesafe Cult

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

shadcn Form

If I understand what you're trying to achieve, you want a multi step form, there are multiple ways of doing it, by changing routes within a layout, using only one form provider and rendering each step according to some state. This is a simple example generated by chatgpt

import { useState } from 'react';
import { useForm } from 'react-hook-form';

const MultiStepForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const [currentStep, setCurrentStep] = useState(1);
  const [formData, setFormData] = useState({});

  const onSubmit = (data) => {
    // You can handle form submission here, e.g., send data to the server
    console.log('Form Data:', data);
  };

  const nextStep = () => {
    setCurrentStep(currentStep + 1);
  };

  const prevStep = () => {
    setCurrentStep(currentStep - 1);
  };

  const renderStep = () => {
    switch (currentStep) {
      case 1:
        return (
          <div>
            <label htmlFor="Nom">Nom</label>
            <input
              {...register('Nom')}
              type="text"
              id="Nom"
              placeholder="John"
              className={` ${
                errors.Nom && "border-err placeholder:text-destructives"
              } text-md py-5 placeholder:opacity-40 rounded-sm border-[3px]`}
            />
          </div>
        );

      // Add more cases for other form steps

      default:
        return null;
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h2>Step {currentStep}</h2>
      {renderStep()}

      <div>
        {currentStep > 1 && (
          <button type="button" onClick={prevStep}>
            Previous
          </button>
        )}
        {currentStep < totalSteps && (
          <button type="button" onClick={nextStep}>
            Next
          </button>
        )}
        {currentStep === totalSteps && (
          <button type="submit">Submit</button>
        )}
      </div>
    </form>
  );
};

export default MultiStepForm;

import { useState } from 'react';
import { useForm } from 'react-hook-form';

const MultiStepForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const [currentStep, setCurrentStep] = useState(1);
  const [formData, setFormData] = useState({});

  const onSubmit = (data) => {
    // You can handle form submission here, e.g., send data to the server
    console.log('Form Data:', data);
  };

  const nextStep = () => {
    setCurrentStep(currentStep + 1);
  };

  const prevStep = () => {
    setCurrentStep(currentStep - 1);
  };

  const renderStep = () => {
    switch (currentStep) {
      case 1:
        return (
          <div>
            <label htmlFor="Nom">Nom</label>
            <input
              {...register('Nom')}
              type="text"
              id="Nom"
              placeholder="John"
              className={` ${
                errors.Nom && "border-err placeholder:text-destructives"
              } text-md py-5 placeholder:opacity-40 rounded-sm border-[3px]`}
            />
          </div>
        );

      // Add more cases for other form steps

      default:
        return null;
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h2>Step {currentStep}</h2>
      {renderStep()}

      <div>
        {currentStep > 1 && (
          <button type="button" onClick={prevStep}>
            Previous
          </button>
        )}
        {currentStep < totalSteps && (
          <button type="button" onClick={nextStep}>
            Next
          </button>
        )}
        {currentStep === totalSteps && (
          <button type="submit">Submit</button>
        )}
      </div>
    </form>
  );
};

export default MultiStepForm;

9 replies

TTCTheo's Typesafe Cult

•Created by Ayush Goyal on 9/1/2023 in #questions

React query Refetching on page change

what you're probably looking for is query invalidation https://tanstack.com/query/v4/docs/react/guides/query-invalidation you can also use the refetchOnMount: "always" so it will force a refetch on mount even if data is not stale (not marked as invalid)

3 replies

TTCTheo's Typesafe Cult

•Created by Omar-7ioo on 9/1/2023 in #questions

Zod overrides react-hook-form validation

And as you mentioned you can make it required based on api response, you can use a discriminated union to make things required depending on some data from the api https://zod.dev/?id=discriminated-unions

8 replies

TTCTheo's Typesafe Cult

•Created by Omar-7ioo on 9/1/2023 in #questions

Zod overrides react-hook-form validation

Zod is your validation, so if you want things to be required, they have to be done on the schema. Or at least you can create a required version of that schema by calling .required();

const requiredTrendyolFormScheme = trendyolFormScheme.required();

const requiredTrendyolFormScheme = trendyolFormScheme.required();

https://zod.dev/?id=required

8 replies

TtRPC

•Created by johste on 8/30/2023 in #❓-help

Need help identifying the generic client side type of procedures

I'm not sure what you're trying to do, but if you're trying to get the type for subscribe, you can use the inferRouterInputs

/**
 * Inference helper for inputs.
 *
 * @example type HelloInput = RouterInputs['example']['hello']
 */
export type RouterInputs = inferRouterInputs<AppRouter>;

/**
 * Inference helper for outputs.
 *
 * @example type HelloOutput = RouterOutputs['example']['hello']
 */
export type RouterOutputs = inferRouterOutputs<AppRouter>;

/**
 * Inference helper for inputs.
 *
 * @example type HelloInput = RouterInputs['example']['hello']
 */
export type RouterInputs = inferRouterInputs<AppRouter>;

/**
 * Inference helper for outputs.
 *
 * @example type HelloOutput = RouterOutputs['example']['hello']
 */
export type RouterOutputs = inferRouterOutputs<AppRouter>;

3 replies

TtRPC

•Created by xdxd#5555 / hanya on 8/17/2023 in #❓-help

Queries work but mutations do not

up! Just opened this issue on the t3 repo, have been struggling with this for days https://github.com/t3-oss/create-t3-app/issues/1549

5 replies

TTCTheo's Typesafe Cult

•Created by shvz on 8/28/2023 in #questions

mutateAsync()

I'm guessing is the way you're passing the input, here's how to do it by the docs using zod https://trpc.io/docs/server/validators

10 replies

TTCTheo's Typesafe Cult

•Created by shvz on 8/28/2023 in #questions

mutateAsync()

What's the error?

10 replies

TTCTheo's Typesafe Cult

•Created by fotoflo on 12/14/2022 in #questions

Building a design system?

Random question: In that second picture, why do you have that undefined selected variant? Wouldn’t that be solved with a defaultVariant?

124 replies

TTCTheo's Typesafe Cult

•Created by Kseikyo on 9/25/2022 in #questions

Prisma nexth-auth role based access control model

Fixed by updating next-auth.d.ts

declare module "next-auth" {
  /**
   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
   */
  interface Session {
    user?: {
      id: string;
      role: string;
    } & DefaultSession["user"];
  }
  interface User extends DefaultUser {
    role: string;
  }
}

declare module "next-auth" {
  /**
   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
   */
  interface Session {
    user?: {
      id: string;
      role: string;
    } & DefaultSession["user"];
  }
  interface User extends DefaultUser {
    role: string;
  }
}

4 replies

TTCTheo's Typesafe Cult

•Created by scatter on 9/23/2022 in #questions

change query params without rerender

I just joined and never used tRPC, but I see that it’s a wrapper to react query. Assuming you just want to manually trigger the refetch, you can get this function from the useQuery https://tanstack.com/query/v4/docs/reference/useQuery But your use case seems more like it depends on an input, so you can have that data as a param to the useQuery, as well as setting its key based on this value. It should still re-render, as I don’t think you can change the data in the UI without a re-render.

5 replies

Gaming

Programming