TechWitchTitan Comments - Answer Overflow

TechWitchTitan

Posts Comments

TTCTheo's Typesafe Cult

•Created by ippo on 1/1/2025 in #questions

Passing Handlers or Centralize them?

Let me think on that and i will get back to ya. I might try tinkering with it when I get back to my PC

108 replies

TTCTheo's Typesafe Cult

•Created by ippo on 1/1/2025 in #questions

Passing Handlers or Centralize them?

There are hundreds of ways it can be done. So take what I offer with grains of salt.

108 replies

TTCTheo's Typesafe Cult

•Created by ippo on 1/1/2025 in #questions

Passing Handlers or Centralize them?

And then if someone qualifies for a discount, then you can pop up that from this modal.

// Child Component (e.g., AddItemModal)
import { useFormContext } from 'react-hook-form';
import { useInvoiceStore } from './store';

const AddItemModal = () => {
  const { setValue } = useFormContext();
  const updateStatus = useInvoiceStore((state) => state.modalOne.updateStatus);
  const status = useInvoiceStore((state) => state.modalOne.status);
  const updateDiscountStatus = useInvoiceStore((state) => state.modalThree.updateStatus);

  const handleAddItem = (item) => {
    updateStatus(false);
    if (getsDiscount) {
      updateDiscountStatus(true);
    } else {
      setValue('items', [...(getValues('items') || []), item]); // Update RHF form state
    }
  };

return (
  <>
    {status ? (
      <div className="modal">
        {/* Modal UI */}
        <button onClick={() => handleAddItem({ name: 'New Item', price: 100 })}>
          Add Item
        </button>
      </div>
    ) : null}
  </>
);
};

export default AddItemModal;

// Child Component (e.g., AddItemModal)
import { useFormContext } from 'react-hook-form';
import { useInvoiceStore } from './store';

const AddItemModal = () => {
  const { setValue } = useFormContext();
  const updateStatus = useInvoiceStore((state) => state.modalOne.updateStatus);
  const status = useInvoiceStore((state) => state.modalOne.status);
  const updateDiscountStatus = useInvoiceStore((state) => state.modalThree.updateStatus);

  const handleAddItem = (item) => {
    updateStatus(false);
    if (getsDiscount) {
      updateDiscountStatus(true);
    } else {
      setValue('items', [...(getValues('items') || []), item]); // Update RHF form state
    }
  };

return (
  <>
    {status ? (
      <div className="modal">
        {/* Modal UI */}
        <button onClick={() => handleAddItem({ name: 'New Item', price: 100 })}>
          Add Item
        </button>
      </div>
    ) : null}
  </>
);
};

export default AddItemModal;

108 replies

TTCTheo's Typesafe Cult

•Created by ippo on 1/1/2025 in #questions

Passing Handlers or Centralize them?

// Child Component (e.g., AddItemModal)
import { useFormContext } from 'react-hook-form';
import { useInvoiceStore } from './store';

const AddItemModal = () => {
  const { setValue } = useFormContext();
  const updateStatus = useInvoiceStore((state) => state.modalOne.updateStatus);
  const status = useInvoiceStore((state) => state.modalOne.status);

  const handleAddItem = (item) => {
    updateStatus(false);
    setValue('items', [...(getValues('items') || []), item]); // Update RHF form state
  };

return (
  <>
    {status ? (
      <div className="modal">
        {/* Modal UI */}
        <button onClick={() => handleAddItem({ name: 'New Item', price: 100 })}>
          Add Item
        </button>
      </div>
    ) : null}
  </>
);
};

export default AddItemModal;

// Child Component (e.g., AddItemModal)
import { useFormContext } from 'react-hook-form';
import { useInvoiceStore } from './store';

const AddItemModal = () => {
  const { setValue } = useFormContext();
  const updateStatus = useInvoiceStore((state) => state.modalOne.updateStatus);
  const status = useInvoiceStore((state) => state.modalOne.status);

  const handleAddItem = (item) => {
    updateStatus(false);
    setValue('items', [...(getValues('items') || []), item]); // Update RHF form state
  };

return (
  <>
    {status ? (
      <div className="modal">
        {/* Modal UI */}
        <button onClick={() => handleAddItem({ name: 'New Item', price: 100 })}>
          Add Item
        </button>
      </div>
    ) : null}
  </>
);
};

export default AddItemModal;

Something along these lines.

108 replies

TTCTheo's Typesafe Cult

•Created by ippo on 1/1/2025 in #questions

Passing Handlers or Centralize them?

You can think of it as this: If you would pass it down as a prop, then you can store it in zustand to make a quick hook.

108 replies

TTCTheo's Typesafe Cult

•Created by ippo on 1/1/2025 in #questions

Passing Handlers or Centralize them?

Nah, you would put things in the store that could/would reach into multiple components.

108 replies

TTCTheo's Typesafe Cult

•Created by ippo on 1/1/2025 in #questions

Passing Handlers or Centralize them?

But that is just me

108 replies

TTCTheo's Typesafe Cult

•Created by ippo on 1/1/2025 in #questions

Passing Handlers or Centralize them?

You could do that if you wanted. But useInvoiceUIStore implies that you would put someting like tab control in there, when that is not something i would use Zustand for

108 replies

TTCTheo's Typesafe Cult

•Created by ippo on 1/1/2025 in #questions

Passing Handlers or Centralize them?

That is what we are here for

108 replies

TTCTheo's Typesafe Cult

•Created by ippo on 1/1/2025 in #questions

Passing Handlers or Centralize them?

Then when you are ready to update the DB, put that handler in the submit

108 replies

TTCTheo's Typesafe Cult

•Created by ippo on 1/1/2025 in #questions

Passing Handlers or Centralize them?

You guess is right. UI control and middlware I would put in zustand, and then the end result values would be stored in RHF

108 replies

TTCTheo's Typesafe Cult

•Created by ippo on 1/1/2025 in #questions

Passing Handlers or Centralize them?

Here is a basic implementation of the modal store

108 replies

TTCTheo's Typesafe Cult

•Created by ippo on 1/1/2025 in #questions

Passing Handlers or Centralize them?

import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';

type ModalTypes = 'none' | 'cart' | 'checkout' | 'success' | 'discount';


interface Modal {
  type: ModalTypes;
  status: boolean;
  updateStatus: (status: boolean) => void;
}

interface ModalState {
  modalOne: Modal;
  modalTwo: Modal;
  modalThree: Modal;
}

const useModalStore = create<ModalState>()(
  devtools(
    persist(
      (set) => ({
        modalOne: {
          type: 'none',
          status: false,
          updateStatus: (status) => set((state) => ({ modalOne: { ...state.modalOne, status } })),
        },
        modalTwo: {
          type: 'cart',
          status: false,
          updateStatus: (status) => set((state) => ({ modalTwo: { ...state.modalTwo, status } })),
        },
        modalThree: {
          type: 'discount',
          status: false,
          updateStatus: (status) => {
            set((state) => ({ modalThree: { ...state.modalThree, status } }));
            // Update the react hook form with the discount
            if (status) {
              // Assuming you have a function to update the form from react hook form
              updateDiscountForm({
                discount: 10,
                itemId: '123',
              });
            }
            // Trigger a toast notification
            showToast('Discount for item has been applied');
          },
        },
      }),
      {
        name: 'modal-control',
      },
    ),
  ),
);

function updateDiscountForm({ discount, itemId }: { discount: number; itemId: string }) {
  // Implement the logic to update the react hook form with the discount
  // This is a placeholder function and should be replaced with actual implementation
  console.log('Updating discount form with new discount');
}

export default useModalStore;

import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';

type ModalTypes = 'none' | 'cart' | 'checkout' | 'success' | 'discount';


interface Modal {
  type: ModalTypes;
  status: boolean;
  updateStatus: (status: boolean) => void;
}

interface ModalState {
  modalOne: Modal;
  modalTwo: Modal;
  modalThree: Modal;
}

const useModalStore = create<ModalState>()(
  devtools(
    persist(
      (set) => ({
        modalOne: {
          type: 'none',
          status: false,
          updateStatus: (status) => set((state) => ({ modalOne: { ...state.modalOne, status } })),
        },
        modalTwo: {
          type: 'cart',
          status: false,
          updateStatus: (status) => set((state) => ({ modalTwo: { ...state.modalTwo, status } })),
        },
        modalThree: {
          type: 'discount',
          status: false,
          updateStatus: (status) => {
            set((state) => ({ modalThree: { ...state.modalThree, status } }));
            // Update the react hook form with the discount
            if (status) {
              // Assuming you have a function to update the form from react hook form
              updateDiscountForm({
                discount: 10,
                itemId: '123',
              });
            }
            // Trigger a toast notification
            showToast('Discount for item has been applied');
          },
        },
      }),
      {
        name: 'modal-control',
      },
    ),
  ),
);

function updateDiscountForm({ discount, itemId }: { discount: number; itemId: string }) {
  // Implement the logic to update the react hook form with the discount
  // This is a placeholder function and should be replaced with actual implementation
  console.log('Updating discount form with new discount');
}

export default useModalStore;