fix: re-fetch campaign details after campaign is sent

[zwliew]

Problem

When a user first sends a campaign, sentAt remains undefined. This causes the file name of downloaded delivery reports to contain invalid_Date. This issue doesn't occur after refreshing the page since the refresh causes sentAt to be refetched from the backend.

Closes #1113

Solution

Improvements:

• Refactor the onModalConfirm handler to a common utilility function.

Bug Fixes:

• Set the sentAt field to the current Date when sending a campaign. This shouldn't be far off from the actual value in the backend, since the actual value is set when creating sending jobs as part of the API request handler for sending a campaign.
• Correct the type definitions for sentAt and statusUpdatedAt. These are should be of type string | undefined.

Before & After Screenshots

There are no visual changes.

Tests

1. Deploy the change on Amplify.
2. Send a campaign and wait for the delivery report to be generated without refreshing the page.
3. Download the delivery report. The filename should represent the same date as the one shown in the "Sent Date" column.
4. Repeat the test for every campaign type (SMS, Telegram, Email, Protected Email).

Deploy Notes

There are no deploy notes.

[zwliew]

I'm not sure if we should instead fetch the sent_at value from the backend instead. In practice, I don't think the disparity between the 2 values will be significant, since the sent_at value is set immediately in the backend anyway.

[lamkeewei]

Gave some thought to this, would prefer to refetch the campaign details and update campaign in CampaignContext. Would prefer not to sacrifice de-sync between local and backend state to save one network call. Was thinking we can make call to backend to refetch campaign once status changed to Status.Sent.

Maybe something like that?

useEffect(() => {
  let timeoutId: NodeJS.Timeout

  async function poll() {
    const { status } = await refreshCampaignStats(id)

    if (status !== Status.Sent) {
      timeoutId = setTimeout(poll, 2000)
    } else if (status === Status.Sent) {
      const updated = await getCampaignDetails(campaign.id)
      setCampaign(updated)
    }
  }

  if (stats.status !== Status.Sent) poll()
  return () => {
    timeoutId && clearTimeout(timeoutId)
  }
}, [id, stats.status, campaign, setCampaign])

To extend this further, can consider refactoring the stats fetching/polling logic in (Email|SMS|Telegram)Detail component into a custom hook.

[zwliew]

That sounds good. I was also a little irked by the implication of de-sync. I'll explore your solution as well as the refactor.

[zwliew]

Also, I also have some questions regarding possible de-sync of Campaign state between the frontend and backend at various steps during campaign creation. I'll look to message you during the weekdays about it :D

[zwliew]

This fallback doesn't seem necessary in practice, but I think it may be good as a form of defensive programming.

I think the only way !sentAt is true is if await exportCampaignStats(campaignId, campaignType) (1) returns before await getCampaignDetails(id) (2). This doesn't sound possible.

[lamkeewei]

lgtm! Tested the following for each channel and works as expected:

• Download delivery report without refresh on campaign details page
• Download delivery report without refresh on dashboard page