display dynamic counts with star and fork button in header about github-profile-readme-generator

[rahuldkjain]

@ankurchaudhary627 showing stars count in star this repo button and forks count in fork on github button

[ankurchaudhary627]

I was looking into this, can you assign this to me it might be worth saving time to convert the file to class component. I am going to use useEffect.

[rahuldkjain]

@rahuldkjain I'm having some issues using useEffect as I'm not experienced in it. Can I convert the src/components/header.js to a stateful class component and use componentDidMount instead?

P.S. I need to make an API call to GitHub API.

@ankurchaudhary627 is working on this. You can pick some other issues.

[ankurchaudhary627]

@rahuldkjain I explored github buttons. There are 2 issues in using that, first github button's UI is different from what is already there in the code right now. Secondly, the github button provides static count of stars and forks, and we don't have control to update those.
Right now I'm fetching from github api, and the update is happening dynamically, but there is delay which I'm trying to reduce.
The UI is like this after my changes:

There is some css needs to be updated though!

[rahuldkjain]

I've used the buttons before, but removed it to make UI clean. You can go with your approach

[ankurchaudhary627]

I've checked in the code and raised a PR. @rahuldkjain Thanks.

[abhijit-hota]

Can I work on this?

[ankurchaudhary627]

Can you please elaborate on this issue? I didn't get this one. @rahuldkjain

[abhijit-hota]

@rahuldkjain I'm having some issues using useEffect as I'm not experienced in it. Can I convert the src/components/header.js to a stateful class component and use componentDidMount instead?

P.S. I need to make an API call to GitHub API.

[rahuldkjain]

You can use buttons from https://buttons.github.io/

[ankurchaudhary627]

I see it takes around 40-45 seconds to update the count state, after it's been updated on Github. If that's fine? @rahuldkjain

[rahuldkjain]

@ankurchaudhary627 40-45 seconds is too much. If it doesn't work then we will have to use the buttons mentioned above

[ankurchaudhary627]

Okay, I will see how I can reduce it, and let you know! @rahuldkjain

[rahuldkjain]

@ankurchaudhary627 any update?

[ankurchaudhary627]

Hi @rahuldkjain , so the issue is with the github api. There's limit on the api calls that we can make with github api. For, getting more number of requests we need to make Oauth get requests.
Right now, i am fetching every 15 seconds to get the updated count for stars and forks.

[ankurchaudhary627]

Any idea how to do the same with the buttons that you mentioned earlier, its giving static count, right? Plus the UI is different from what is there currently

[rahuldkjain]

I've used them here https://rahuldkjain.github.io

Its pretty straightforward and I think it won't affect the UI much

[ankurchaudhary627]

Isn't the button used there different from this

Plus the update isn't real time here - https://rahuldkjain.github.io, update happens when the page reloads.
I was thinking of real time update, instead of reloading.
Right now I am making call after every 15 seconds, but need to use oauth because of the limit. What do you think?

[abhijit-hota]

Have been looking at this issue for a while.
My two cents:

The counts don't necessarily have to be "real-time". They are just counts and I think a single API fetch after the first render is enough. Making them real-time, in my opinion, is just overkill.

A simple solution would be to make the API call and just display the count like @ankurchaudhary627 did here and just style them to fix their layouts.

[prakashchokalingam]

We can use https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event to refresh the counts. I can help you with a PR. @rahuldkjain

When user clicks the fork button, he will be taken to the github in a new tab, after forking when he returns back to the page we can update the counts using the visibility Api.

And we can have a long interval updates as well which shouldn't create a problem.

[rahuldkjain]

I've checked in the code and raised a PR. @rahuldkjain Thanks.

I think there is no need to update the count every 15 seconds. The average usage time per user on the page is 59 seconds.

[rahuldkjain]

We can use https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event to refresh the counts. I can help you with a PR. @rahuldkjain

When user clicks the fork button, he will be taken to the github in a new tab, after forking when he returns back to the page we can update the counts using the visibility Api.

And we can have a long interval updates as well which shouldn't create a problem.

Thanks @prakashchokalingam for your efforts.
P.S: Please put a comment to assign the issue before start working.

[prakashchokalingam]

Thanks @rahuldkjain

It's just a reference PR @rahuldkjain, It is not created with an intent to merge. will be closing the PR.

[rahuldkjain]

fixed