Open Source Project section is missing

[FlyingBackdoor]

I am facing problem with Open source project section and github user data, might be related with #101
Issue is present in both development and final build
check the live page (here)

I am getting the below warnings in log

./src/containers/projects/Projects.js
  Line 18:6:  React Hook useEffect has a missing dependency: 'getRepoData'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

./src/containers/profile/Profile.js
  Line 54:6:  React Hook useEffect has a missing dependency: 'getProfileData'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

When I deployed for the first time Github revoked my access token even after adding .env file in gitignore. So I used the old method, converting it and directly assigning to variable which worked. But it is still not fetching any details.

Code Preview👇

[kartikcho]

Users seem to be facing multiple issues related to fetching data from Github (like the CORS issue in #219). Do you wanna look into this @naveen521kk @saadpasta ?

[naveen521kk]

AFAIK, it raises CORS issue when the access tokens are invalid. So, checking the access tokens would fix the issue.
Maybe we should fix the documentation for it.

[jelonmusk]

same here....
the open source section isn't rendering.

Also the github profile card isn't showing up despite the value being set to true

[kartikcho]

Also the github profile card isn't showing up despite the value being set to true

That would be because of not having a valid token which would fetch your GitHub data.

I've never tested these components with my token locally, I might take a look at this soon if it's still an issue.

[naveen521kk]

If there is an issue how does this work in https://developerfolio.js.org .
Maybe we are lacking documentation for helping users to set this up. I will make a wiki page on this maybe later this week.

Quick questions: Does setting an environment variable named REACT_APP_GITHUB_TOKEN with the value as the GitHub token work instead of the .env file?
For example, in bash it would be

export REACT_APP_GITHUB_TOKEN="GitHub token here"

After, that does using npm run build, shows the profile and repos?

[FlyingBackdoor]

If there is an issue how does this work in https://developerfolio.js.org .

The issue might be on recent commit because one of the user also contacted me personally.

Maybe we are lacking documentation for helping users to set this up. I will make a wiki page on this maybe later this week.

Quick questions: Does setting an environment variable named REACT_APP_GITHUB_TOKEN with the value as the GitHub token work instead of the .env file?
For example, in bash it would be

export REACT_APP_GITHUB_TOKEN="GitHub token here"

After, that does using npm run build, shows the profile and repos?

I tried with 3 different tokens, both methods but nothing worked.

So I tried same tokens with masterportfolio (which is similar to this project) and they worked perfectly.

[saadpasta]

@FlyingBackdoor can you show us your developerFolio repo.
We have changed the logic from Github Converted Token to .env file.
I am using the same logic for my portfolio saadpasta.github.io. It works perfectly.
Make sure you generate a token without selecting any scope.

[saadpasta]

@FlyingBackdoor Master Portfolio is using our previous that is converting the token and then using it which is not safe. So we have come up with solution.

[naveen521kk]

@FlyingBackdoor It works perfectly for me.
I will explain what I did.

1. I cloned the master branch and ran npm install
2. I open PowerShell and type the below one.

$env:REACT_APP_GITHUB_TOKEN = "My GitHub secret access token"

3. Then I ran npm run build without closing the terminal.
4. After the profile section and GitHub section worked perfectly. PS. I cd into build folder and run python -m http.server and opened http://localhost:8000/#contact in my browser. It worked perfectly.

Please try this and check whether this works for you. If this works then it needs to be documented.

[FlyingBackdoor]

@naveen521kk Yes It worked, fetched profile and repo and render it for a second or two and after everything disappeared. Check below ss with console log

[FlyingBackdoor]

@FlyingBackdoor can you show us your developerFolio repo.

working on it locally. I will upload it soon.

We have changed the logic from Github Converted Token to .env file.
I am using the same logic for my portfolio saadpasta.github.io. It works perfectly.
Make sure you generate a token without selecting any scope.

whenever I followed readme, github revoked my token after deployment but the method @naveen521kk shows somehow worked but it is throwing errors.

edit: token is still exposed :(

[naveen521kk]

So, Idk of what happened in the webpage. Maybe try a force refresh(CTRL+F5) and try again it may work. Or maybe your extension is malfunctioning. Try the same in a private tab.

I think the base64 option was the best. I mean we can ask the user to enter it in base64 format, that btoa() thing. So that GitHub doesn't revoke the commit. I need your suggestions @saadpasta

Also, I will be making a documentation on what I had done in that comment maybe a Github Wiki Page.

[FlyingBackdoor]

@naveen521kk can you please check if https://flyingbackdoor.github.io/ working on your end or not.

I already tried different browsers, devices and private tabs.

[naveen521kk]

No, it isn't can you try the same in-development version so that it says what is actually the error? by running npm start.

Also, did you change any other thing in the code? It works perfectly for me.

[saadpasta]

So, Idk of what happened in the webpage. Maybe try a force refresh(CTRL+F5) and try again it may work. Or maybe your extension is malfunctioning. Try the same in a private tab.

I think the base64 option was the best. I mean we can ask the user to enter it in base64 format, that btoa() thing. So that GitHub doesn't revoke the commit. I need your suggestions @saadpasta

Also, I will be making a documentation on what I had done in that comment maybe a Github Wiki Page.

@naveen521kk I don't think so. It was still very confusing. Let's try to solve this.

[FlyingBackdoor]

No, it isn't can you try the same in-development version so that it says what is actually the error? by running `npm start.

Also, did you change any other thing in the code? It works perfectly for me.

In development i got this error:

TypeError: repo.node.primaryLanguage is null
GithubRepoCard
E:/Projects/developerFolio/src/components/githubRepoCard/GithubRepoCard.js:28

  25 | <div className="repo-stats">
  26 |   <div className="repo-left-stat">
  27 |     <span>
> 28 |       <div className="language-color" style={{ backgroundColor: repo.node.primaryLanguage.color }}></div>
     | ^  29 |       <p>{repo.node.primaryLanguage.name}</p>
  30 |     </span>
  31 |     <span>

Tested with completely clean code, only thing changed is git username in portfolio.js
now the only way to revert this by typing $env:REACT_APP_GITHUB_TOKEN = "" in powershell.

I guess this is happening because of different node/npm version, maybe some library used in this project is changed as I am using the most recent versions of everything. For now I am just disabling opensource section.

Hope you guys will able fix this.

[naveen521kk]

@FlyingBackdoor The problem was because of your profile. ON going through your profile I found it. See this. This repo has no content and been kept in profile. So Github can't get what the primaryLanguage for the repo is. And while requesting it is returned null. Please make a new issue on this and can be fixed very easily. :)

[naveen521kk]

So, now @saadpasta I am working a wiki page for this and I am going to recommend using environment variables instead of env files. If that is ok, please react with 👍 .
Also, I will soon make a PR, on changing all with base64 string to prevent Github from Revoking the token.

[FlyingBackdoor]

@FlyingBackdoor The problem was because of your profile. ON going through your profile I found it. See this. This repo has no content and been kept in profile. So Github can't get what the primaryLanguage for the repo is. And while requesting it is returned null. Please make a new issue on this and can be fixed very easily. :)

Finally!!
Updated my repo and now data is loading as expected. Thank you so much Naveen.

[rasam-hossain]

I am trying to understand what's the correct way of getting your github profile into the portfolio now? Should we use .env file or use the powershell technique to save the token? Powershell technique works as of now, but building it and deploying it creates a privacy issue with the token exposure on github.