Load next batch and group headings

7 files changed, 47 insertions, 13 deletions

diff --git a/public/img/galaxy.svg b/public/img/galaxy.svg
deleted file mode 100644
index 5afc146..0000000
--- a/public/img/galaxy.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><style>.cls-1{fill:#1d1d1b;}.cls-2{fill:#fab900;}.cls-3{fill:#e6e4da;}.cls-4{fill:#cbe7f5;}.cls-5{fill:#ddc07c;}.cls-6{fill:#85bfe9;}.cls-7{fill:#92a0d1;}.cls-8{fill:#ffe19b;}</style></defs><title>galaxy</title><g id="galaxy"><path class="cls-1" d="M6.06,25.5c.21,0,1,.29,1.46-.08s.17-.37.25-1.54A26.49,26.49,0,0,1,9.6,17.25c1-2.13,4.92-6.79,10.38-9.33S31.9,5.29,37.81,6.75,49.9,13.37,53,18.41s.46,14.92-1.29,18.87S42,45.87,36,46.12a16.46,16.46,0,0,1-13.08-6c-2-2.71-3.83-9.46-1.33-14a9.94,9.94,0,0,1,8.63-5c1.75-.12,3.17,1.54,3.54,1.67a1.17,1.17,0,0,0,1.13-1.42c-.21-.92-3.62-3.58-10.71-.21S18,31.41,18.4,34.46s2.08,11.21,12.5,13.13a21.87,21.87,0,0,0,20-6.46c2.25-2.58,5.58-7,5.46-15.62S53.52,14.25,46.6,8.75s-18-5.87-24-3.79S9,12.33,7.19,17.33,5.85,25.5,6.06,25.5ZM56.19,47.29c-.37,0-.67.71-1,1.21s-3.75,5.42-7.62,7.58-11,2.88-17.79,1.17-13.37-9.54-16-17.42S14.44,27.08,16.1,24s5.58-7.21,10.13-7.62S38,15.62,41.31,20.62A12.94,12.94,0,0,1,42,34.79c-2.37,4.54-8.51,3.76-8.75,4s-.21,1.67.25,1.79a16,16,0,0,0,7.21-1.71c2.58-1.5,5.75-5.42,4.63-13.54s-8-10.87-14.25-11-12.42,1.58-16.62,8.25A20.62,20.62,0,0,0,11.9,40.25c1.46,5.25,5.21,13.54,13.33,17.63s17,2,22.71,0,9.71-9.46,9.67-9.71A2.4,2.4,0,0,0,56.19,47.29Zm-19.33-16c.79-5.71-4.59-5.9-6.79-5.37-5.42,1.29-4.79,6.58-2.71,8.63S36.06,37,36.85,31.25ZM24.56,35.5c-1.46.71-1.21,2.33-.33,3.79s4.08-.08,3.67-1.87S26,34.8,24.56,35.5ZM8.94,34.12C8.52,32.33,7,31.51,5.6,32.21S4.4,34.54,5.27,36,9.35,35.91,8.94,34.12ZM49.56,20.46c0-1.87-2-3.15-3.17-2.29a2.24,2.24,0,0,0-.54,3.25C46.73,22.62,49.6,22.33,49.56,20.46ZM15.32,28.31a1.7,1.7,0,0,0-.41,2.47c.67.92,2.85.7,2.82-.73S16.19,27.66,15.32,28.31ZM32.81,7.54a2.9,2.9,0,0,0-.5,3.92c1,1.75,4.79,1.54,4.58-1.5S34,6.4,32.81,7.54Zm25.46,2.79c-.21-3-2.9-3.55-4.08-2.42a2.9,2.9,0,0,0-.5,3.92C54.69,13.58,58.48,13.37,58.27,10.33ZM9.35,50.46C7.94,51.29,7.48,53,8.23,55s5.17,2.42,5.79-.75A3.36,3.36,0,0,0,9.35,50.46Zm47-12.92c-1.25.54-1.54,2.54-.92,3.88s3.92,1,4-1.46S57.52,37.05,56.4,37.54Z"/><path class="cls-2" d="M30.4,27.41c.93-.37,3.38-.12,4.21,1s.38,3.29.38,3.29-.5-.87-.62-.87-.67.17-.62.33.63,1.38.54,1.58-.62.83-.75.67-1.08-2.79-1.33-2.83-.79,0-.75.21,1.42,2.88,1.21,3.08-.75.38-.88.08-1-2.67-1.12-2.71-.92.21-.83.5.92,2,.75,2.08a3,3,0,0,1-2.42-2.71A3.08,3.08,0,0,1,30.4,27.41Z"/><path class="cls-3" d="M25.13,36.51a1.2,1.2,0,0,1,1.7,1c.21.92-1.43,1.7-1.87,1S24.39,36.87,25.13,36.51Z"/><path class="cls-4" d="M6.17,33.21a1.2,1.2,0,0,1,1.7,1c.21.92-1.43,1.7-1.87,1S5.43,33.58,6.17,33.21Z"/><path class="cls-4" d="M46.94,19.09c.57-.43,1.56.21,1.58,1.14s-1.41,1.08-1.85.48A1.12,1.12,0,0,1,46.94,19.09Z"/><path class="cls-5" d="M15.73,29c.44-.33,1.18.16,1.2.87s-1.07.82-1.41.36A.85.85,0,0,1,15.73,29Z"/><path class="cls-6" d="M33.51,8.55c.65-.62,2.12-.34,2.23,1.32a1.36,1.36,0,0,1-2.51.82A1.59,1.59,0,0,1,33.51,8.55Z"/><path class="cls-7" d="M54.88,8.93c.65-.62,2.12-.34,2.23,1.32a1.36,1.36,0,0,1-2.51.82A1.59,1.59,0,0,1,54.88,8.93Z"/><path class="cls-8" d="M9.94,51.49a2.15,2.15,0,0,1,3,2.43c-.4,2-3.23,1.79-3.71.48S9,52,9.94,51.49Z"/><path class="cls-1" d="M36.4,50.16A3.36,3.36,0,0,1,41.06,54c-.62,3.17-5,2.79-5.79.75S35,51,36.4,50.16Z"/><path class="cls-5" d="M37,51.2a2.15,2.15,0,0,1,3,2.43c-.4,2-3.23,1.79-3.71.48S36.07,51.74,37,51.2Z"/><path class="cls-3" d="M56.8,38.54c.62-.27,1.7,0,1.68,1.33s-1.84,1.54-2.18.8A1.66,1.66,0,0,1,56.8,38.54Z"/></g></svg>
\ No newline at end of file
diff --git a/src/components/group-heading/index.js b/src/components/group-heading/index.js
index 762d36d..2ba89a2 100644
--- a/src/components/group-heading/index.js
+++ b/src/components/group-heading/index.js
@@ -10,7 +10,7 @@ class GroupHeading extends React.Component {
     const currentMoment = moment();
     const yesterdayMoment = moment().subtract(1, 'day');
 
-    // For "day" jumps show the day name
+    // For "day" jumps return the day name
     if (this.props.dateJump === 'day') {
       if (startMoment.isSame(currentMoment, 'day')) {
         return 'Today';
@@ -21,14 +21,20 @@ class GroupHeading extends React.Component {
       return startMoment.format('dddd');
     }
 
-    return startMoment.fromNow();
+    // Return the relative date
+    const formattedDate = startMoment.fromNow();
+    if (formattedDate === 'a year ago') {
+      return 'Last Year';
+    }
+
+    return formattedDate;
   }
 
   getSubtitle() {
     const startMoment = moment(this.props.start);
     const endMoment = moment(this.props.end);
 
-    if (startMoment.isSame(endMoment, 'day')) {
+    if (startMoment.isSame(endMoment, 'day') || this.props.dateJump === 'day') {
       return startMoment.format('MMMM D, YYYY');
     }
 
diff --git a/src/components/repository-grid/index.js b/src/components/repository-grid/index.js
index d99a38f..8413a8e 100644
--- a/src/components/repository-grid/index.js
+++ b/src/components/repository-grid/index.js
@@ -13,7 +13,11 @@ class RepositoryGrid extends React.Component {
     if (counter !== 0) {
       groupHeading = (
         <div className="row row-group">
-          <GroupHeading/>
+          <GroupHeading
+            start={ repositoryGroup.start }
+            end={ repositoryGroup.end }
+            dateJump={ this.props.dateJump }
+          />
         </div>
       );
     }
@@ -45,7 +49,8 @@ class RepositoryGrid extends React.Component {
 }
 
 RepositoryGrid.propTypes = {
-  repositories: PropTypes.array.isRequired
+  repositories: PropTypes.array.isRequired,
+  dateJump: PropTypes.string.isRequired
 };
 
 export default RepositoryGrid;
diff --git a/src/components/repository-list/index.js b/src/components/repository-list/index.js
index be6cc76..862df11 100644
--- a/src/components/repository-list/index.js
+++ b/src/components/repository-list/index.js
@@ -15,7 +15,11 @@ class RepositoryList extends React.Component {
     if (counter !== 0) {
       groupHeading = (
         <div className="row row-group">
-          <GroupHeading/>
+          <GroupHeading
+            start={ repositoryGroup.start }
+            end={ repositoryGroup.end }
+            dateJump={ this.props.dateJump }
+          />
         </div>
       );
     }
@@ -47,7 +51,8 @@ class RepositoryList extends React.Component {
 }
 
 RepositoryGrid.propTypes = {
-  repositories: PropTypes.array.isRequired
+  repositories: PropTypes.array.isRequired,
+  dateJump: PropTypes.string.isRequired
 };
 
 export default RepositoryList;
diff --git a/src/containers/feed/index.js b/src/containers/feed/index.js
index 6121ec5..d39da28 100644
--- a/src/containers/feed/index.js
+++ b/src/containers/feed/index.js
@@ -107,11 +107,21 @@ class FeedContainer extends React.Component {
           <div className="body-row">
             {
               this.props.preference.viewType === 'grid'
-                ? <RepositoryGrid repositories={ this.props.github.repositories || [] }/>
-                : <RepositoryList repositories={ this.props.github.repositories || [] }/>
+                ? <RepositoryGrid repositories={ this.props.github.repositories || [] } dateJump={ this.props.preference.dateJump }/>
+                : <RepositoryList repositories={ this.props.github.repositories || [] } dateJump={ this.props.preference.dateJump }/>
             }
 
             { this.props.github.processing && <Loader/> }
+
+            {
+              !this.props.github.processing && (
+                <button className="btn btn-primary shadow load-next-date"
+                        onClick={ () => this.fetchNextRepositories() }>
+                  <i className="fa fa-refresh mr-2"></i>
+                  Load next { this.props.preference.dateJump }
+                </button>
+              )
+            }
           </div>
         </div>
       </div>
diff --git a/src/containers/feed/styles.css b/src/containers/feed/styles.css
index 9d43a7b..8ab4795 100644
--- a/src/containers/feed/styles.css
+++ b/src/containers/feed/styles.css
@@ -29,3 +29,9 @@
 .row-group .group-heading {
   margin: auto;
 }
+
+.load-next-date {
+  padding: 10px 20px;
+  display: block;
+  margin: 25px auto auto;
+}
diff --git a/src/redux/github/actions.js b/src/redux/github/actions.js
index c61fd50..5474144 100644
--- a/src/redux/github/actions.js
+++ b/src/redux/github/actions.js
@@ -1,4 +1,5 @@
 import axios from 'axios';
+import moment from 'moment';
 
 import {
   FETCH_TRENDING_FAILED,
@@ -12,7 +13,9 @@ const API_URL = 'https://api.github.com/search/repositories';
 const transformFilters = (filters) => {
   const transformedFilters = {};
 
-  const reposDate = `created:${filters.dateRange.start.format('YYYY-MM-DD')}..${filters.dateRange.end.format('YYYY-MM-DD')}`;
+  const startMoment = moment(filters.dateRange.start);
+  const endMoment = moment(filters.dateRange.end);
+  const reposDate = `created:${startMoment.format('YYYY-MM-DD')}..${endMoment.format('YYYY-MM-DD')}`;
   const reposLanguage = filters.language ? `language:${filters.language} ` : '';
 
   if (filters.token) {
@@ -40,8 +43,8 @@ export const fetchTrending = function (filters) {
       dispatch({
         type: FETCH_TRENDING_SUCCESS,
         payload: {
-          start: filters.dateRange.start.format(),
-          end: filters.dateRange.end.format(),
+          start: moment(filters.dateRange.start).format(),
+          end: moment(filters.dateRange.end).format(),
           data: response.data
         }
       });