Add programming languages to github page

package-lock.json

@@ -13,6 +13,7 @@
         "@testing-library/user-event": "^12.8.3",
         "axios": "^0.21.4",
         "history": "^5.0.1",
+        "memoize": "^0.1.1",
         "react": "^17.0.2",
         "react-bootstrap-icons": "^1.5.0",
         "react-dom": "^17.0.2",
@@ -12635,6 +12636,17 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/memoize": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/memoize/-/memoize-0.1.1.tgz",
+      "integrity": "sha1-0mWjRYvlzjvyVJmLMKmVq5FmiiQ=",
+      "dependencies": {
+        "tosource": ">=0.1.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -18916,6 +18928,14 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/tosource": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/tosource/-/tosource-1.0.0.tgz",
+      "integrity": "sha1-QtiN0RZhi88A1hBt1URvNCeQL/E=",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/tough-cookie": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz",
@@ -31031,6 +31051,14 @@
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
     },
+    "memoize": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/memoize/-/memoize-0.1.1.tgz",
+      "integrity": "sha1-0mWjRYvlzjvyVJmLMKmVq5FmiiQ=",
+      "requires": {
+        "tosource": ">=0.1.1"
+      }
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -36034,6 +36062,11 @@
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
     },
+    "tosource": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/tosource/-/tosource-1.0.0.tgz",
+      "integrity": "sha1-QtiN0RZhi88A1hBt1URvNCeQL/E="
+    },
     "tough-cookie": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz",

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.4",
     "history": "^5.0.1",
+    "memoize": "^0.1.1",
     "react": "^17.0.2",
     "react-bootstrap-icons": "^1.5.0",
     "react-dom": "^17.0.2",

src/actions/index.js

@@ -17,7 +17,22 @@ export const updateEmailBody = (event) => async (dispatch, getState) => {
 };
 
 export const toggleContactModal = () => async (dispatch, getState) => {
+
   dispatch({
     type: 'TOGGLE_CONTACT_MODAL',
   });
-};
+};
+
+export const getRepoLanguages = (repoName) => async (dispatch, getState) => {
+
+  const response = await github.get(`/repos/RaspberryProgramming/${repoName}/languages`); // Request languages for the repo
+
+  // Each repo will have it's own object with it's languages
+  let payload = {};
+  payload[repoName] = response.data;
+
+  dispatch({
+    type: 'GET_LANGUAGES',
+    payload: payload,
+  });
+}

src/components/Github.js

@@ -1,47 +1,94 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import './css/Github.css';
-import {getRepos} from '../actions';
+import {getRepos, getRepoLanguages} from '../actions';
 import Theater from './Theater';
 import space from '../img/space.webp';
-
+import _ from 'lodash';
 class Github extends React.Component {
 
   componentDidMount() {
+
     document.title = "Github Repos";
+
     if (!this.props.repos) {
-      this.props.getRepos();
+
+      this.props.getRepos(); // Receive the repos at start
     }
     
   }
 
+  renderLanguages(name) {
+
+    // Given that we've already received the repo's languages
+    if (this.props.repoLanguages && this.props.repoLanguages[name]) {
+
+      // Create a bubble for each language
+      return Object.keys(this.props.repoLanguages[name]).map(language=>{
+
+        return <div className="language" key={language}>{language}</div>; // Language bubble JSX
+
+      });
+    }
+
+  }
+
   renderRepos() {
 
-    if (this.props.repos) {
+    if (this.props.repos) { // If the repos have been received
+
+      // Render each repo
       const render = this.props.repos.map((repo) =>{
+
         return (
           <div className="repo" key={repo.id}>
             <a href={repo.html_url} target="_blank" rel="noreferrer" className="title">{repo.name}</a>
             <div className="content">
               <p className="description">{repo.description ? repo.description : "No Description"}</p>
               { 
-                repo.homepage ?
+                repo.homepage ? // If the repo has a homepage, render a button
                   <a href={repo.homepage} target="_blank" rel="noreferrer" className="website"> Project Website </a>:
                   ""
               }
             </div>
+            <div className="languages">
+              Languages:
+                
+                {
+                  this.renderLanguages(repo.name) // Render each language for the repo
+                }
+            </div>
           </div>
           
         );
       });
       return <div className="repo-list">{render}</div>;
     }
+
+    // Return nothing if repos haven't been received
+
     return <div></div>;
   }
 
   render() {
+    
+    if (_.isEmpty(this.props.repoLanguages) && this.props.repos) {
+      
+
+      // Attempt to request languages for all repos once the list of repos is received
+      this.props.repos.map((repo) => {
+
+        this.props.getRepoLanguages(repo.name);
+  
+        return true;
+  
+      });
+
+    }
+
     return (
       <div className="Github">
+
         <Theater
           title="Github"
           description="This is a list of projects that I've uploaded to github. 
@@ -51,16 +98,18 @@ class Github extends React.Component {
           background={space}
           extraClasses="peak"
         />
+
         <div>
           {this.renderRepos()}
         </div>
+
       </div>
     );
   }
 }
 
 const mapStateToProps = (state) => {
-  return { repos: state.github.repos};
+  return { repos: state.github.repos, repoLanguages: state.github.repoLanguages};
 }
 
-export default connect(mapStateToProps, { getRepos })(Github);
+export default connect(mapStateToProps, { getRepos, getRepoLanguages })(Github);

src/components/css/Github.css

@@ -52,4 +52,18 @@
 .repo .description {
     flex-grow: 1;
     padding:10px;
+}
+
+.repo .languages {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    padding: 10px;
+}
+
+.repo .language {
+    padding: 5px;
+    margin-left: 5px;
+    border-radius: 10px;
+    background-color: #AAAAAA;
 }

src/components/css/Navigation.css

@@ -1,6 +1,6 @@
 .Navigation {
 
-    height: 65px;
+    height: 63px;
     display: flex;
     flex-direction: row;
     background-color: #3F3F4A;

src/reducers/githubReducer.js

@@ -1,7 +1,9 @@
-let githubReducer = (state={}, action) => {
+let githubReducer = (state={repoLanguages: {}}, action) => {
     switch(action.type) {
       case 'GET_REPOS':
         return { ...state, repos: action.payload };
+      case 'GET_LANGUAGES':
+        return {...state, repoLanguages: {...state.repoLanguages, ...action.payload}}
       default:
         return state;
     }