use-action-feedback.tsx

Usage

Implemented in form.tsx

useActionFeedback(actionState, {
    onSuccess: ({ actionState }) => {
      if (actionState.message) {
        toast.success(actionState.message);
      }
    },
    onError: ({ actionState }) => {
      if (actionState.message) {
        toast.error(actionState.message);
      }
    },
  });

---

Implementation

src/components/form/hooks/use-action-feedback.ts

import { useEffect, useRef } from "react";
import { ActionState } from "@/components/form/utils/to-action-state";
 
type OnArgs = {
  actionState: ActionState;
};
 
type UseActionFeedbackOptions = {
  onSuccess?: (onArgs: OnArgs) => void;
  onError?: (onArgs: OnArgs) => void;
};
 
const useActionFeedback = (
  actionState: ActionState,
  options: UseActionFeedbackOptions,
) => {
  const prevTimestamp = useRef(actionState.timestamp);
 
  useEffect(() => {
    const isUpdate = prevTimestamp.current !== actionState.timestamp;
    if (!isUpdate) return;
 
    if (actionState.status === "SUCCESS") {
      options.onSuccess?.({ actionState });
    }
 
    if (actionState.status === "ERROR") {
      options.onError?.({ actionState });
    }
    prevTimestamp.current = actionState.timestamp;
  }, [actionState, options]);
};
 
export { useActionFeedback };