sunny-green

multiple toast messages

Hello, anyone can review this code, and tell me why the toast.success is being rendered 4-5 times? As you can see I am using query

const Success: React.FC = () => {
  const { venueId, billId } = useParams()
  const location = useLocation()

  const specialPaymentData = location.state as any

  const [searchParams] = useSearchParams()
  const paymentIntentId = searchParams.get('payment_intent')
  const paymentMethod = searchParams.get('payment_method')
  const paymentId = searchParams.get('paymentId')

  const { modalState, openModal, closeModal } = useModal()

  const {
    data: payment,
    isLoading,
    isError,
    error,
    isSuccess,
  } = useQuery({
    queryKey: ['paymentIntent', venueId],
    queryFn: async () => {
      if (paymentMethod === 'specialPayment') {
        return {
          id: specialPaymentData.data.id,
          total: specialPaymentData.amount,
          created: Math.floor(Date.now() / 1000),
          metadata: {
            amount: specialPaymentData.metadata.amount,
            userFee: specialPaymentData.userFee,
            tipPercentage: specialPaymentData.metadata.tipPercentage ?? 0,
          },
          payment_method_details: {
            card: {
              brand: specialPaymentData.data.dataResponse.binInformation.brand.toLowerCase(),
              last4: specialPaymentData.data.dataResponse.lastFour,
            },
          },
        }
      }
      const response = await api.get(`/v1/stripe/payment-intent/${paymentIntentId}`)
      // NOTE: The response from API comes named amount, but is total in the frontend
      localStorage.setItem('customerId', response.data.customer)

      const data = { ...response.data, total: response.data.amount }

      return data
    },
  })
  const payment_id = payment?.id

  const {
    data: venue,
    isLoading: isLoadingVenue,
    isError: venueIsError,
    error: venueError,
    isSuccess: venueIsSuccess,
  } = useQuery({
    queryKey: ['venue_details', venueId],
    queryFn: async () => {
      const response = await api.get(`/v1/dashboard/${venueId}/get-venue`)
      return response.data
    },
    enabled: !!payment_id,
  })


  useEffect(() => {
    const paymentIntentId = searchParams.get('payment_intent')
    // const paymentIntents = JSON.parse(localStorage.getItem('paymentIntents') || '[]')
    const paymentIntent = localStorage.getItem('paymentIntent')

    toast.success(getRandomPaymentMsg())
    if (isSuccess && !isError && !paymentIntent) {
      localStorage.setItem('paymentIntent', paymentIntentId)
      openModal('review')

      // localStorage.setItem('customerId', payment?.customer)
    }
  }, [venueIsSuccess])

  if (isLoading) return <Loading message="Cargando el pago..." />
  if (isError) return <ErrorMessage responseError={error.message} />
  if (isLoadingVenue) return <Loading message="Cargando el restaurante..." />
  if (venueIsError) return <ErrorMessage responseError={venueError.message} />

  const card = payment?.payment_method_details?.card

  return (<div></div>)

const Success: React.FC = () => {
  const { venueId, billId } = useParams()
  const location = useLocation()

  const specialPaymentData = location.state as any

  const [searchParams] = useSearchParams()
  const paymentIntentId = searchParams.get('payment_intent')
  const paymentMethod = searchParams.get('payment_method')
  const paymentId = searchParams.get('paymentId')

  const { modalState, openModal, closeModal } = useModal()

  const {
    data: payment,
    isLoading,
    isError,
    error,
    isSuccess,
  } = useQuery({
    queryKey: ['paymentIntent', venueId],
    queryFn: async () => {
      if (paymentMethod === 'specialPayment') {
        return {
          id: specialPaymentData.data.id,
          total: specialPaymentData.amount,
          created: Math.floor(Date.now() / 1000),
          metadata: {
            amount: specialPaymentData.metadata.amount,
            userFee: specialPaymentData.userFee,
            tipPercentage: specialPaymentData.metadata.tipPercentage ?? 0,
          },
          payment_method_details: {
            card: {
              brand: specialPaymentData.data.dataResponse.binInformation.brand.toLowerCase(),
              last4: specialPaymentData.data.dataResponse.lastFour,
            },
          },
        }
      }
      const response = await api.get(`/v1/stripe/payment-intent/${paymentIntentId}`)
      // NOTE: The response from API comes named amount, but is total in the frontend
      localStorage.setItem('customerId', response.data.customer)

      const data = { ...response.data, total: response.data.amount }

      return data
    },
  })
  const payment_id = payment?.id

  const {
    data: venue,
    isLoading: isLoadingVenue,
    isError: venueIsError,
    error: venueError,
    isSuccess: venueIsSuccess,
  } = useQuery({
    queryKey: ['venue_details', venueId],
    queryFn: async () => {
      const response = await api.get(`/v1/dashboard/${venueId}/get-venue`)
      return response.data
    },
    enabled: !!payment_id,
  })


  useEffect(() => {
    const paymentIntentId = searchParams.get('payment_intent')
    // const paymentIntents = JSON.parse(localStorage.getItem('paymentIntents') || '[]')
    const paymentIntent = localStorage.getItem('paymentIntent')

    toast.success(getRandomPaymentMsg())
    if (isSuccess && !isError && !paymentIntent) {
      localStorage.setItem('paymentIntent', paymentIntentId)
      openModal('review')

      // localStorage.setItem('customerId', payment?.customer)
    }
  }, [venueIsSuccess])

  if (isLoading) return <Loading message="Cargando el pago..." />
  if (isError) return <ErrorMessage responseError={error.message} />
  if (isLoadingVenue) return <Loading message="Cargando el restaurante..." />
  if (venueIsError) return <ErrorMessage responseError={venueError.message} />

  const card = payment?.payment_method_details?.card

  return (<div></div>)

1 Reply

robust-apricot•13mo ago

Copied from #query channel: I'm not a pro but there are couple things that stand out to me: The component seems to be that it has a lot of re-rendering going on. You have the two queries plus the modal states from the useModal hook. The re-rendering plus the useEffect having the dependency of just the isSuccess (venueIsSuccess) could be causing multiple truthy fires of the toast Few things I would try based on what you are trying to accomplish: Play around with the dependencies of the useEffect to include: data (to make sure there is actual data from the query which can be checked in the hook) isFetched (sometimes it helps to log these out to see when isSuccess is true and isFetched is true and if they are the same In general it feels like you should refactor this component out into smaller components to get to the bottom of the issue. To have dependent queries like this that also have a useEffect depending on the end of this waterfall could be an issue. I could see the toast creation being it's own hook which checks to make sure there is a new venue to display before opening another toast and modal review. Especially because you are opening a modal on every new venue it seems like this could almost be a mutation call when a new payment comes through Hope this helps!

Gaming

Programming

multiple toast messages

Did you find this page helpful?