Add : get github token from .env (#164)

* add : functionality to get github token from .env

* Update README.md

.gitignore

@@ -12,6 +12,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

README.md

@@ -75,26 +75,30 @@ $ npm start
 
 Generate a Github personal access token using these [Instructions](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line) `Make sure you don't select any scope just generate a simple token`
 
-Copy the token and open Chrome Developer Console to convert your token to base64 so github do not revert your token when you push your token to git
+1. Create a file called .env in the root directory of your project.
 
 ```bash
-# Open your Chrome Developer Console console paste the token inside btoa
-$ btoa("YOUR GITHUB TOKEN")
+- DeveloperFolio
+  - node_modules
+  - public
+  - src
+  - .env         <-- create it here
+  - .gitignore
+  - package-lock.json
+  - package.json
 ```
 
-Copy your converted token and paste it in `/src/portfolio.js`
+2. Inside the .env file, add key `REACT_APP_GITHUB_TOKEN` and assign your github token like this.
 
 ```javascript
-  const openSource = {
-  /* Your Open Source Section to View Your Github Pinned Projects */
-  /* To know how to get github key look at readme.md */
-
-  githubConvertedToken: "Your Github Converted Token",
-  githubUserName: "Your Github Username"
-  showGithubProfile :"true" // Set true or false to show Contact profile using Github, defaults to false 
+ // .env
+
+  REACT_APP_GITHUB_TOKEN = "YOUR GITHUB TOKEN HERE"
+
 };
 ```
-For the GitHub profile, set true or false to show Contact profile using Github, defaults to false.
+
+Set `showGithubProfile` to true or false to show Contact Profile using Github, defaults to false.
 
 ## Change and customize every section according to your need.
 

src/containers/projects/Projects.js

@@ -17,13 +17,13 @@ export default function Projects() {
   function getRepoData() {
     const client = new ApolloClient({
       uri: "https://api.github.com/graphql",
-      request: operation => {
+      request: (operation) => {
         operation.setContext({
           headers: {
-            authorization: `Bearer ${atob(openSource.githubConvertedToken)}`
-          }
+            authorization: `Bearer ${openSource.githubConvertedToken}`,
+          },
         });
-      }
+      },
     });
 
     client
@@ -55,9 +55,9 @@ export default function Projects() {
           }
         }
       }
-        `
+        `,
       })
-      .then(result => {
+      .then((result) => {
         setrepoFunction(result.data.user.pinnedItems.edges);
         console.log(result);
       });
@@ -69,15 +69,15 @@ export default function Projects() {
 
   return (
     <Fade bottom duration={1000} distance="20px">
-    <div className="main" id="opensource">
-      <h1 className="project-title">Open Source Projects</h1>
-      <div className="repo-cards-div-main">
-        {repo.map((v, i) => {
-          return <GithubRepoCard repo={v} key={v.node.id} />;
-        })}
+      <div className="main" id="opensource">
+        <h1 className="project-title">Open Source Projects</h1>
+        <div className="repo-cards-div-main">
+          {repo.map((v, i) => {
+            return <GithubRepoCard repo={v} key={v.node.id} />;
+          })}
+        </div>
+        <Button text={"More Projects"} className="project-button" href={socialMediaLinks.github} newTab={true} />
       </div>
-      <Button text={"More Projects"} className="project-button" href={socialMediaLinks.github} newTab={true} />
-    </div>
     </Fade>
   );
 }

src/portfolio.js

@@ -153,7 +153,7 @@ const workExperiences = {
 To know how to get github key look at readme.md */
 
 const openSource = {
-  githubConvertedToken: "Your Github Converted Token",
+  githubConvertedToken: process.env.REACT_APP_GITHUB_TOKEN,
   githubUserName: "saadpasta", // Change to your github username to view your profile in Contact Section.
   showGithubProfile :"true" // Set true or false to show Contact profile using Github, defaults to false 
 };