From a435b4d0e7e84ea1698dab7fc7b4058c6a005b59 Mon Sep 17 00:00:00 2001 From: Camerin Date: Wed, 22 Sep 2021 13:59:01 -0400 Subject: [PATCH] Add programming languages to github page --- package-lock.json | 33 ++++++++++++++++ package.json | 1 + src/actions/index.js | 17 ++++++++- src/components/Github.js | 63 +++++++++++++++++++++++++++---- src/components/css/Github.css | 14 +++++++ src/components/css/Navigation.css | 2 +- src/reducers/githubReducer.js | 4 +- 7 files changed, 124 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 63043ad..b834f7c 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 5fe6704..28d1e40 100644 --- a/package.json +++ b/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", diff --git a/src/actions/index.js b/src/actions/index.js index 352ca97..f866607 100644 --- a/src/actions/index.js +++ b/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', }); -}; \ No newline at end of file +}; + +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, + }); +} \ No newline at end of file diff --git a/src/components/Github.js b/src/components/Github.js index bbc1354..3fc971e 100644 --- a/src/components/Github.js +++ b/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
{language}
; // 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 (
{repo.name}

{repo.description ? repo.description : "No Description"}

{ - repo.homepage ? + repo.homepage ? // If the repo has a homepage, render a button Project Website : "" }
+
+ Languages: + + { + this.renderLanguages(repo.name) // Render each language for the repo + } +
); }); return
{render}
; } + + // Return nothing if repos haven't been received + return
; } 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 (
+ +
{this.renderRepos()}
+
); } } const mapStateToProps = (state) => { - return { repos: state.github.repos}; + return { repos: state.github.repos, repoLanguages: state.github.repoLanguages}; } -export default connect(mapStateToProps, { getRepos })(Github); \ No newline at end of file +export default connect(mapStateToProps, { getRepos, getRepoLanguages })(Github); \ No newline at end of file diff --git a/src/components/css/Github.css b/src/components/css/Github.css index 2cf56ee..c92efca 100644 --- a/src/components/css/Github.css +++ b/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; } \ No newline at end of file diff --git a/src/components/css/Navigation.css b/src/components/css/Navigation.css index 54d541e..000eff2 100644 --- a/src/components/css/Navigation.css +++ b/src/components/css/Navigation.css @@ -1,6 +1,6 @@ .Navigation { - height: 65px; + height: 63px; display: flex; flex-direction: row; background-color: #3F3F4A; diff --git a/src/reducers/githubReducer.js b/src/reducers/githubReducer.js index f5df2d0..36653a4 100644 --- a/src/reducers/githubReducer.js +++ b/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; }