Added Github Page Sort Options

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({

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;

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";
 
@@ -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 (
           <div className="repo-list">
+            <div className="sort-menu">
+              <p>Sort By:&ensp;</p>
+              <select className="dropdown-list" onChange={v=>{
+                this.props.setSortValue({
+                  ...this.props.sortedValue,
+                  value: v.target.value
+                });
+                }}>
+                {
+                  this.sortOptions.map(option=>{
+                    return <option value={option.value} key={option.value}>{option.text}</option>;
+                  })
+                }
+              </select>
+              &ensp;
+              <div className="btn btn-compact-left" onClick={()=>{
+                this.props.setSortValue({
+                  ...this.props.sortedValue,
+                  asc: true
+                });
+              }}>
+                Ascend
+              </div>
+              <div className="btn btn-compact-right" onClick={()=>{
+                this.props.setSortValue({
+                  ...this.props.sortedValue,
+                  asc: false
+                });
+              }}>
+                Descend
+              </div>
+            </div>
+
             {render}
+            
             {this.props.page < pages ?
-              <div className="btn" onClick={()=>this.props.nextPage()}>Load More ({this.props.page}/{pages})</div>
+              <div className="btn mar-la mar-ra" onClick={()=>this.props.nextPage()}>Load More ({this.props.page}/{pages})</div>
               : ""
             }
           </div>
@@ -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);
+export default connect(mapStateToProps, {
+  getRepos,
+  getRepoLanguages,
+  getUser,
+  nextPage,
+  setSortValue
+})(GithubRepos);

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;
     }