Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Free Listings + Paid Ads: Fetch the number of syncable products for the product feed status section #1706

Conversation

eason9487
Copy link
Member

@eason9487 eason9487 commented Sep 29, 2022

Changes proposed in this Pull Request:

This PR implements an item of the 📌 Client states management and API integration in #1610.

  • Trigger the calculation of the number of syncable products in the Get Started page for later use during the onboarding flow.
  • Fetch and show the number of syncable products in the ProductFeedStatusSection component.

Screenshots:

Kapture 2022-09-30 at 11 37 11

Detailed test instructions:

  1. Go to the Get Started page to trigger the calculation.
  2. Proceed with the onboarding flow until step 4.
  3. Check if the number of syncable products is shown on the product feed status section.
  4. Testing the UI status of waiting for the calculation:

Changelog entry

@eason9487 eason9487 self-assigned this Sep 29, 2022
@github-actions github-actions bot added the changelog: update Big changes to something that wasn't broken. label Sep 29, 2022
@eason9487 eason9487 requested a review from a team September 30, 2022 03:44
@eason9487 eason9487 marked this pull request as ready for review September 30, 2022 03:44
* @typedef {Object} SyncableProductsCalculation
* @property {number|null} count The number of syncable products. `null` if it's still in the calculation.
* @property {()=>Promise} request The function requesting the start of a calculation.
* @property {()=>Promise} retrieve The function retrieving the result of a requested calculation by polling with 5-second timer.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure but I guess instead of by polling you mean by pulling?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just my 2 cents, to me polling is usually used when a request is periodically repeated (which seems to be the case here). Either one could be correct though.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the client side has no way of knowing when the needed data will be ready, it queries the data by asking periodically. The implementation here matches the scenario, so the term polling is used.

*
* If a shop has a large number of products, requesting the result with a single API may encounter
* a timeout or out-of-memory problem. Therefore, we use an API to schedule a batch for calculating,
* and another one to poll the result.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

}, [ fetch, startCountdown ] );

useEffect( () => {
if ( second === 0 && callCount > 0 && count === null ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ Why we need second === 0 && callCount > 0 and the dependency of second?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if callCount is each time we call startCountdown or it is each time the counter reset (after reaching 5)

Copy link
Member Author

@eason9487 eason9487 Oct 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why we need second === 0 && callCount > 0 and the dependency of second?

It's up to the hook's consumer to decide when to call retrieve, and then retrieve will request data and schedule a timer for the next call of retrieve triggered by this useEffect. But useEffect will always be called a time once the associated component is mounted, therefore, this condition is to skip the call when mounted.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if callCount is each time we call startCountdown or it is each time the counter reset (after reaching 5)

* @property {number} callCount The calling count of `startCountdown` function.

Copy link
Contributor

@puntope puntope left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM ✅

I place some comment in regards one potential typo and some curiosity question.

I tested locally with and without forcing null and it works fine :)

@eason9487 eason9487 merged commit ff26925 into feature/1610-streamlined-onboarding Oct 4, 2022
@eason9487 eason9487 deleted the update/1610-integrate-syncable-product-api branch October 4, 2022 04:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
changelog: update Big changes to something that wasn't broken.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants