-
Notifications
You must be signed in to change notification settings - Fork 83
Optimizing API calls and adding cache #94
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
Conversation
Reviewer's GuideThis PR enhances performance of GitHub data fetching by introducing a client-side cache with persistence and TTL, debouncing and queuing of API calls to prevent bursts, and parallelizing data fetches; it also modernizes the codebase with native fetch, ES6 syntax, debug logging, and UI styling improvements. Class Diagram of the New Caching System in
|
Change | Details | Files |
---|---|---|
Introduce a persistent TTL cache for GitHub data |
|
src/scripts/scrumHelper.js |
Debounce and queue concurrent API requests |
|
src/scripts/scrumHelper.js |
Parallelize data fetching with async/await and Promise.all |
|
src/scripts/scrumHelper.js |
Migrate from jQuery AJAX to native fetch and modernize syntax |
|
src/scripts/scrumHelper.js src/scripts/main.js |
Add configurable debug logging and error handling |
|
src/scripts/scrumHelper.js |
Enhance UI toggle styling and configuration behavior |
|
src/index.css src/scripts/main.js |
Tips and commands
Interacting with Sourcery
- Trigger a new review: Comment
@sourcery-ai review
on the pull request. - Continue discussions: Reply directly to Sourcery's review comments.
- Generate a GitHub issue from a review comment: Ask Sourcery to create an
issue from a review comment by replying to it. You can also reply to a
review comment with@sourcery-ai issue
to create an issue from it. - Generate a pull request title: Write
@sourcery-ai
anywhere in the pull
request title to generate a title at any time. You can also comment
@sourcery-ai title
on the pull request to (re-)generate the title at any time. - Generate a pull request summary: Write
@sourcery-ai summary
anywhere in
the pull request body to generate a PR summary at any time exactly where you
want it. You can also comment@sourcery-ai summary
on the pull request to
(re-)generate the summary at any time. - Generate reviewer's guide: Comment
@sourcery-ai guide
on the pull
request to (re-)generate the reviewer's guide at any time. - Resolve all Sourcery comments: Comment
@sourcery-ai resolve
on the
pull request to resolve all Sourcery comments. Useful if you've already
addressed all the comments and don't want to see them anymore. - Dismiss all Sourcery reviews: Comment
@sourcery-ai dismiss
on the pull
request to dismiss all existing Sourcery reviews. Especially useful if you
want to start fresh with a new review - don't forget to comment
@sourcery-ai review
to trigger a new review!
Customizing Your Experience
Access your dashboard to:
- Enable or disable review features such as the Sourcery-generated pull request
summary, the reviewer's guide, and others. - Change the review language.
- Add, remove or edit custom review instructions.
- Adjust other review settings.
Getting Help
- Contact our support team for questions or feedback.
- Visit our documentation for detailed guides and information.
- Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey @vedansh-5 - I've reviewed your changes and found some issues that need to be addressed.
Blocking issues:
- Incorrect storage API method and undefined variable (link)
General comments:
- Replace the call to chrome.storage.local.setAttribute with chrome.storage.local.set, since setAttribute is not a valid API and will prevent your cache from persisting.
- Remove the duplicated declaration of
let refreshButton_Placed
inside allIncluded which shadows the global variable and may lead to unexpected behavior. - Make the DEBUG flag configurable (e.g. via environment or options) so you can disable verbose logging in production and avoid performance overhead.
Here's what I looked at during the review
- 🔴 General issues: 1 blocking issue, 5 other issues
- 🟢 Security: all looks good
- 🟢 Testing: all looks good
- 🟢 Documentation: all looks good
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
caching.mp4
|
@sourcery-ai review |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey @vedansh-5 - I've reviewed your changes - here's some feedback:
- Extract the duplicated date‐formatting logic and cache/fetch utilities into shared modules to DRY up both main.js and scrumHelper.js.
- Clean up leftover commented-out code and debug scaffolding (e.g. remove console.log blocks and fix the
console.wanr
typo) before merging. - Consider moving the GitHub cache/debounce/queue logic into its own service layer to simplify error handling and make the core script more maintainable.
Here's what I looked at during the review
- 🟢 General issues: all looks good
- 🟢 Security: all looks good
- 🟢 Testing: all looks good
- 🟢 Documentation: all looks good
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
src/scripts/main.js
Outdated
chrome.storage.local.set({ enableToggle: value }); | ||
} | ||
function handleStartingDateChange() { | ||
var value = startingDateElement.value; | ||
let value = startingDateElement.value; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
suggestion (code-quality): Prefer object destructuring when accessing and using properties. (use-object-destructuring
)
let value = startingDateElement.value; | |
let {value} = startingDateElement; |
Explanation
Object destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.From the Airbnb Javascript Style Guide
src/scripts/main.js
Outdated
chrome.storage.local.set({ startingDate: value }); | ||
} | ||
function handleEndingDateChange() { | ||
var value = endingDateElement.value; | ||
let value = endingDateElement.value; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
suggestion (code-quality): Prefer object destructuring when accessing and using properties. (use-object-destructuring
)
let value = endingDateElement.value; | |
let {value} = endingDateElement; |
Explanation
Object destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.From the Airbnb Javascript Style Guide
src/scripts/main.js
Outdated
@@ -136,20 +142,30 @@ function getToday() { | |||
} | |||
|
|||
function handleGithubUsernameChange() { | |||
var value = githubUsernameElement.value; | |||
let value = githubUsernameElement.value; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
suggestion (code-quality): Prefer object destructuring when accessing and using properties. (use-object-destructuring
)
let value = githubUsernameElement.value; | |
let {value} = githubUsernameElement; |
Explanation
Object destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.From the Airbnb Javascript Style Guide
src/scripts/main.js
Outdated
chrome.storage.local.set({ githubUsername: value }); | ||
} | ||
function handleProjectNameChange() { | ||
var value = projectNameElement.value; | ||
let value = projectNameElement.value; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
suggestion (code-quality): Prefer object destructuring when accessing and using properties. (use-object-destructuring
)
let value = projectNameElement.value; | |
let {value} = projectNameElement; |
Explanation
Object destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.From the Airbnb Javascript Style Guide
src/scripts/main.js
Outdated
function handleUserReasonChange() { | ||
var value = userReasonElement.value; | ||
let value = userReasonElement.value; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
suggestion (code-quality): Prefer object destructuring when accessing and using properties. (use-object-destructuring
)
let value = userReasonElement.value; | |
let {value} = userReasonElement; |
Explanation
Object destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.From the Airbnb Javascript Style Guide
src/scripts/scrumHelper.js
Outdated
var title = item.title; | ||
var number = item.number; | ||
var li = ''; | ||
let items = githubIssuesData.items; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
suggestion (code-quality): Prefer object destructuring when accessing and using properties. (use-object-destructuring
)
let items = githubIssuesData.items; | |
let {items} = githubIssuesData; |
Explanation
Object destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.From the Airbnb Javascript Style Guide
src/scripts/scrumHelper.js
Outdated
} | ||
for (let i = 0; i < items.length; i++) { | ||
let item = items[i]; | ||
let html_url = item.html_url; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
suggestion (code-quality): Prefer object destructuring when accessing and using properties. (use-object-destructuring
)
let html_url = item.html_url; | |
let {html_url} = item; |
Explanation
Object destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.From the Airbnb Javascript Style Guide
src/scripts/scrumHelper.js
Outdated
for (let i = 0; i < items.length; i++) { | ||
let item = items[i]; | ||
let html_url = item.html_url; | ||
let repository_url = item.repository_url; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
suggestion (code-quality): Prefer object destructuring when accessing and using properties. (use-object-destructuring
)
let repository_url = item.repository_url; | |
let {repository_url} = item; |
Explanation
Object destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.From the Airbnb Javascript Style Guide
src/scripts/scrumHelper.js
Outdated
let html_url = item.html_url; | ||
let repository_url = item.repository_url; | ||
let project = repository_url.substr(repository_url.lastIndexOf('/') + 1); | ||
let title = item.title; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
suggestion (code-quality): Prefer object destructuring when accessing and using properties. (use-object-destructuring
)
let title = item.title; | |
let {title} = item; |
Explanation
Object destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.From the Airbnb Javascript Style Guide
src/scripts/scrumHelper.js
Outdated
let repository_url = item.repository_url; | ||
let project = repository_url.substr(repository_url.lastIndexOf('/') + 1); | ||
let title = item.title; | ||
let number = item.number; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
suggestion (code-quality): Prefer object destructuring when accessing and using properties. (use-object-destructuring
)
let number = item.number; | |
let {number} = item; |
Explanation
Object destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.From the Airbnb Javascript Style Guide
when testing this PR locally, I get the following error in the console: popup.html:1 Error handling response: ReferenceError: labelElement is not defined |
Thanks for pointing this out, this is a rebase discrepancy, I've fixed the labelElement definition, will commit along with other enhancements in the pr. |
@hpdang @mariobehling Please take a look whenever you have some time, with the latest changes optimization of API requests and content caching along with API debouncing is successfully implemented. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could you please confirm if the 'Refresh Data (bypass cache)' button is successfully clearing the cached GitHub data and triggering fresh API calls? Also, is the cache properly repopulated after the reload?
Yes it clears the data, and populates it after reload. |
I have checked it extensively. Did you locally try the extension, there's a |
@Preeti9764 Does the PR looks good to merge? |
Yes , i locally tested it but i could not find the reviewed pr in scrum generated. can you please check this once. Other things are working fine as far i have checked. |
I generated this rn. |
|
Thanks for pointing this out, I'll look for the cause and fix it. |
@Preeti9764 I made changes in the code and its now injecting the reviewed PRs, can you check if its working for you or not. |
yes, i checked it the issue of reviewed pr is not there any more...but i found the code currently performs repetitive DOM queries without any caching mechanism. Can you look at that . |
Caching is implemented, could you please tell what observations of yours make you say this? |
caching.mp4As can be seen in this video, fetch requests are made only for the first time and not after that. It would be better if you share your network logs for the same to confirm the issue. Thanks! |
The Dom queries are repeative, which are not good for performance optimisation . |
Your previous comment was misleading, stating caching is not implemented. Also could you please share your logs for the repetitive DOM queries, given the behavior of extension, they should be justified :) |
I apologize if my comment about caching wasn't clear enough. Let me clarify my observation: |
Appreciate your point, although it has minimal effect on the speed but this might cause memory leaks in some cases. I will push changes for it soon. |
Hello @Preeti9764 after the rebase content is not being injected in popup, Could you please take a look what's wrong? Thanks |
@hpdang |
Hey , I have checked this ,the issue which i found is every line of scrum is coming twice . |
I found that- writeGithubIssuesPrs(),writeGithubPrsReviews() are called twice, which causes this issue firstly in the function processGithubData() and in intervals also, which mostly causes this issue. I have made changes in the scrumHelper.js file that resolve this. Have and look for a reference and edit that file. I have sent you personally. |
Yes I know the calls which resulted in the error, for me it was behaving
weirdly earlier, maybe something with github servers and my IP, i removed
the lines and made changes for correct indentation. I'll push it as soon as
github loads. Thanks!
…On Tue, Jun 10, 2025 at 6:34 PM Preeti Yadav ***@***.***> wrote:
*Preeti9764* left a comment (fossasia/scrum_helper#94)
<#94 (comment)>
I found that- writeGithubIssuesPrs(),writeGithubPrsReviews() are called
twice, which causes this issue firstly in the function processGithubData()
and in intervals also, which mostly causes this issue. I have made changes
in the scrumHelper.js file that resolve this. Have and look for reference
and edit that file.
—
Reply to this email directly, view it on GitHub
<#94 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ASRZUKWQAVAL45XFKAA767T3C3JW7AVCNFSM6AAAAAB6DO66ROVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDSNJZGE2DGNJYGY>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
@hpdang @Preeti9764 I have rebased this PR and made changes in the UI accordingly, please take a look whenever you can. |
@vedansh-5 Why do you want to put the Refresh Data (bypass cache) on the UI? What kind of behavior you expect from the user? |
I have added the |
I am not sure if that is a good idea, it is too dominant while is not a core feature. When I clicked on it, it shows Fail to Refresh. And it will raise unnecessary question to a new user. They will ask themselves, what it is for. |
I can remove the button and decrease the TTL to 5 mins. How does it sound to you? |
I see a scoping error, let me fix it, maybe then we can keep it. Thanks. |
@hpdang |
I have resolved the conflicts. |
@hpdang could you please take a look whenever you have some time? Thanks! |
Description
Optimized GitHub data fetching by implementing persistent caching, debouncing bursts of API calls, and enabling parallel API requests. These improvements significantly reduce redundant network traffic and enhance performance. The codebase has also been modernized with native fetch, async/await, and cleaner variable declarations, along with minor UI enhancements.
Fixes #104
Key Features
Persistent Caching: Added a client-side cache layer with TTL and state restoration to avoid redundant API calls.
Debouncing & Queuing: Prevents API spamming by intelligently delaying burst requests.
Parallel Fetching: Fetches issues, PR reviews, and user data concurrently to reduce wait times.
Enhancements
Migrated from jQuery AJAX to native fetch using Promise.all and async/await.
Refactored variable declarations using let and const for cleaner, safer code.
Introduced debug logging for cache and network operations.
Summary by Sourcery
Optimize GitHub data fetching by adding a persistent cache layer, debouncing burst requests, and parallelizing API calls, while modernizing code with fetch, async/await, and variable declaration refactoring plus UI toggle styling enhancements.
New Features:
Enhancements: