From 14d8612737f8e8985b27ac11eef87a9e21fb9658 Mon Sep 17 00:00:00 2001 From: Camerin Figueroa Date: Thu, 9 Jun 2022 21:27:36 -0400 Subject: [PATCH] Added Github Page Sort Options --- src/actions/index.js | 9 ++ src/components/css/Github.css | 21 ++++ src/components/subcomponents/GithubRepos.js | 103 ++++++++++++++++++-- src/reducers/githubReducer.js | 4 +- 4 files changed, 128 insertions(+), 9 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index f1b36fe..7d62553 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -3,6 +3,8 @@ import api from '../apis/api'; import * as tf from '@tensorflow/tfjs'; import _ from 'lodash'; +// Github Actions + export const getUser = (username) => async (dispatch, getState) => { const response = await github.get(`/users/${username}`); @@ -70,6 +72,13 @@ export const getRepoLanguages = (username, repoName) => async (dispatch, getStat } } +export const setSortValue = (value) => async (dispatch, getState) => { + dispatch({ + type: 'SET_SORT_VALUE', + payload: value + }) +} + export const setIntro = (start=true) => async (dispatch, getState) => { dispatch({ diff --git a/src/components/css/Github.css b/src/components/css/Github.css index 6b30029..da2f4d1 100644 --- a/src/components/css/Github.css +++ b/src/components/css/Github.css @@ -3,6 +3,27 @@ color: #AA9AA0; } +.Github .dropdown-list { + width: fit-content; + background-color: #3F3F4A; + color: #DAD4DF; + border-radius: 4px; + border: solid #5F5F6A 1px; + text-align: center; + padding: 2px; + font-size: inherit; +} + +.Github .sort-menu { + display: flex; + flex-direction: row; + font-size: medium; +} + +.Github .dropdown-menu option { + background-color: #5F5F6A; +} + .repo-list { display:flex; flex-direction: column; diff --git a/src/components/subcomponents/GithubRepos.js b/src/components/subcomponents/GithubRepos.js index 4b6baaf..f6a0e0d 100644 --- a/src/components/subcomponents/GithubRepos.js +++ b/src/components/subcomponents/GithubRepos.js @@ -1,11 +1,21 @@ import React from 'react'; import { connect } from 'react-redux'; -import {getRepos, getUser, getRepoLanguages, nextPage} from '../../actions'; +import {getRepos, getUser, getRepoLanguages, nextPage, setSortValue} from '../../actions'; class GithubRepos extends React.Component { - perPage = 5; - componentDidMount() { + perPage = 5; + sortOptions = [ + // text: displayed text, value: value used for sorting + {text: "Created Date", value: "created_at"}, + {text: "Last Pushed", value: "pushed_at"}, + {text: "Name", value: "name"}, + {text: "Number of Forks", value: "forks"}, + {text: "Size", value: "size"}, + {text: "Last Updated", value: "updated_at"}, + ]; + + componentDidMount() { document.title = "Github Repos"; @@ -15,7 +25,7 @@ class GithubRepos extends React.Component { this.props.getRepos(this.props.username); // Receive the repos at start } - + } renderLanguages(name) { @@ -38,6 +48,36 @@ class GithubRepos extends React.Component { return num%1 === 0? num : num-(num%1)+1 } + objArrayBubbleSort(arr, value) { + /** + * arrayBubbleSort + */ + let unsorted; + let tmp; + + do { + unsorted = false; + + for (let i = 0; i < arr.length-1; i++) { + if ( + (value.asc && arr[i][value.value] > arr[i+1][value.value]) // Ascending + || (!value.asc && arr[i][value.value] < arr[i+1][value.value]) // Descending + ) { + tmp = arr[i+1]; + arr[i+1] = arr[i]; + arr[i] = tmp; + + unsorted = true; + } + } + + + } while (unsorted); + + return arr; + + } + renderRepos() { if (this.props.repos) { // If the repos have been received @@ -48,7 +88,9 @@ class GithubRepos extends React.Component { let pages = this.roundUp(repos.length/this.perPage); - const render = repos.slice(0, this.props.page*this.perPage).map((repo) =>{ + let sortedRepos = this.objArrayBubbleSort([...repos], this.props.sortedValue); + console.log(sortedRepos); + const render = sortedRepos.slice(0, this.props.page*this.perPage).map((repo) =>{ let updated = (new Date (repo.updated_at)).toLocaleString(); let created = (new Date (repo.created_at)).toLocaleString(); @@ -87,9 +129,43 @@ class GithubRepos extends React.Component { return (
+
+

Sort By: 

+ +   +
{ + this.props.setSortValue({ + ...this.props.sortedValue, + asc: true + }); + }}> + Ascend +
+
{ + this.props.setSortValue({ + ...this.props.sortedValue, + asc: false + }); + }}> + Descend +
+
+ {render} + {this.props.page < pages ? -
this.props.nextPage()}>Load More ({this.props.page}/{pages})
+
this.props.nextPage()}>Load More ({this.props.page}/{pages})
: "" }
@@ -116,7 +192,18 @@ class GithubRepos extends React.Component { const mapStateToProps = (state) => { - return { repos: state.github.repos, repoLanguages: state.github.repoLanguages, page: state.github.page}; + return { + repos: state.github.repos, + repoLanguages: state.github.repoLanguages, + page: state.github.page, + sortedValue: state.github.sortedValue + }; } -export default connect(mapStateToProps, { getRepos, getRepoLanguages, getUser, nextPage})(GithubRepos); \ No newline at end of file +export default connect(mapStateToProps, { + getRepos, + getRepoLanguages, + getUser, + nextPage, + setSortValue +})(GithubRepos); \ No newline at end of file diff --git a/src/reducers/githubReducer.js b/src/reducers/githubReducer.js index e92c9c6..7712b8a 100644 --- a/src/reducers/githubReducer.js +++ b/src/reducers/githubReducer.js @@ -1,4 +1,4 @@ -let githubReducer = (state={repoLanguages: {}, page: 1}, action) => { +let githubReducer = (state={repoLanguages: {}, page: 1, sortedValue: {value:'updated_at', asc:false}}, action) => { switch(action.type) { case 'GET_REPOS': return { ...state, repos: action.payload }; @@ -8,6 +8,8 @@ let githubReducer = (state={repoLanguages: {}, page: 1}, action) => { return {...state, user: action.payload}; case 'SET_PAGE': return {...state, page: action.payload}; + case 'SET_SORT_VALUE': + return {...state, sortedValue: action.payload}; default: return state; }