[BUG]: data.map() throws an error while scrolling down on the home page
Avineesh28 opened this issue · 2 comments
Component
lib - Scripts used to generate content
Please describe the issue
Trying to run the project on my device, I came across this situation where once the web page was loaded all elements were directing fine and functionalities looked good but while scrolling down to look at the contributers part an error is thrown up as shown below:
This is in theContributors.astro file where we are trying to get access to the names of the people who have starred the repository (stargazzers) and put a star next to their names on the page.
This arises because the data variable doesnt have an attribute called .map(), in simpler words, .map() is a function available for arrays only while the data variable is an object and hence an error is thrown.
How this can be solved is by finding out the parameters of the data Object variables and providing those as an input to the .map() function after accessing them.
for eg: data.keys().map(...)
Pre-Submission Checklist
- I have checked this issue has not already been raised
- I've searched the docs for an answer
- I agree to follow thr Code of Conduct
Thanks @Avineesh28 for the clear ticket :)
I think I see the issue. Probably caused by an auth error from GitHub, meaning the expected response isn't returned, and this isn't being properly handled by my code...
This can be fixed by replacing this block (in Contributors.astro
) with this:
const fetchStargazers = async (): Promise<string[]> => {
const headers = GITHUB_TOKEN ? { 'Authorization': `token ${GITHUB_TOKEN}` } : undefined;
let url = `https://api.github.com/repos/${repo}/stargazers?per_page=100`;
let stargazers = [];
const getNextLink = (linkHeader) => {
if (!linkHeader) return null;
const links = linkHeader.split(',');
const nextLink = links.find(link => link.includes('rel="next"'));
if (!nextLink) return null;
const match = nextLink.match(/<(.*)>/);
return match ? match[1] : null;
};
while (url) {
const response = await fetch(url, { headers });
const data = await response.json();
if (Array.isArray(data)) {
stargazers = stargazers.concat(data.map(stargazer => stargazer.login.toLowerCase()));
} else if (data.message && data.message.includes('API rate limit exceeded')) {
console.warn("GitHub API rate limit exceeded");
break;
}
url = getNextLink(response.headers.get('Link'));
}
return stargazers;
};
... I can do this when I get home this evening, unless anyone else would like to submit a PR for this?
Alrighty!
I'll replace the code in and confirm its all good. I have some time on my hands right now, so once I;ve verified that it works Ill submit a PR for it if that's okay with you