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
{repo.description ? repo.description : "No Description"}
{ - repo.homepage ? + repo.homepage ? // If the repo has a homepage, render a button Project Website : "" }