Handle same date jumps

2 files changed, 64 insertions, 52 deletions

diff --git a/src/components/top-nav/index.js b/src/components/top-nav/index.js
index 365e481..50f7e86 100644
--- a/src/components/top-nav/index.js
+++ b/src/components/top-nav/index.js
@@ -6,57 +6,69 @@ import { Link } from 'react-router-dom';
 import './styles.css';
 import Logo from '../icons/logo';
 
-const TopNav = (props) => (
-  <div className='top-nav'>
-    <div className="container clearfix">
-      <Link to="/" className="logo clearfix float-left">
-        <Logo/>
-        <div className="logo-text">
-          <h4>GitHunt</h4>
-          <p className="text-muted">Most starred projects on GitHub</p>
+class TopNav extends React.Component {
+  updateDateJump = (dateJump) => {
+    if (dateJump === this.props.selectedDateJump) {
+      return;
+    }
+
+    this.props.updateDateJump(dateJump);
+  };
+
+  render() {
+    return (
+      <div className='top-nav'>
+        <div className="container clearfix">
+          <Link to="/" className="logo clearfix float-left">
+            <Logo/>
+            <div className="logo-text">
+              <h4>GitHunt</h4>
+              <p className="text-muted">Most starred projects on GitHub</p>
+            </div>
+          </Link>
+          <div className="float-right duration-btns">
+            <button onClick={ () => this.updateDateJump('year') }
+                    className={
+                      classNames('btn', {
+                        'btn-primary': this.props.selectedDateJump === 'year',
+                        'btn-light': this.props.selectedDateJump !== 'year',
+                      })
+                    }>
+              Yearly
+            </button>
+            <button onClick={ () => this.updateDateJump('month') }
+                    className={
+                      classNames('btn', {
+                        'btn-primary': this.props.selectedDateJump === 'month',
+                        'btn-light': this.props.selectedDateJump !== 'month',
+                      })
+                    }>
+              Monthly
+            </button>
+            <button onClick={ () => this.updateDateJump('week') }
+                    className={
+                      classNames('btn', {
+                        'btn-primary': this.props.selectedDateJump === 'week',
+                        'btn-light': this.props.selectedDateJump !== 'week',
+                      })
+                    }>
+              Weekly
+            </button>
+            <button onClick={ () => this.updateDateJump('day') }
+                    className={
+                      classNames('btn', {
+                        'btn-primary': this.props.selectedDateJump === 'day',
+                        'btn-light': this.props.selectedDateJump !== 'day',
+                      })
+                    }>
+              Daily
+            </button>
+          </div>
         </div>
-      </Link>
-      <div className="float-right duration-btns">
-        <button onClick={ () => props.updateDateJump('year') }
-                className={
-                  classNames('btn', {
-                    'btn-primary': props.selectedDateJump === 'year',
-                    'btn-light': props.selectedDateJump !== 'year',
-                  })
-                }>
-          Yearly
-        </button>
-        <button onClick={ () => props.updateDateJump('month') }
-                className={
-                  classNames('btn', {
-                    'btn-primary': props.selectedDateJump === 'month',
-                    'btn-light': props.selectedDateJump !== 'month',
-                  })
-                }>
-          Monthly
-        </button>
-        <button onClick={ () => props.updateDateJump('week') }
-                className={
-                  classNames('btn', {
-                    'btn-primary': props.selectedDateJump === 'week',
-                    'btn-light': props.selectedDateJump !== 'week',
-                  })
-                }>
-          Weekly
-        </button>
-        <button onClick={ () => props.updateDateJump('day') }
-                className={
-                  classNames('btn', {
-                    'btn-primary': props.selectedDateJump === 'day',
-                    'btn-light': props.selectedDateJump !== 'day',
-                  })
-                }>
-          Daily
-        </button>
       </div>
-    </div>
-  </div>
-);
+    );
+  }
+}
 
 TopNav.propTypes = {
   updateDateJump: PropTypes.func.isRequired,
diff --git a/src/containers/feed/index.js b/src/containers/feed/index.js
index 8ae5a9b..e1b112b 100644
--- a/src/containers/feed/index.js
+++ b/src/containers/feed/index.js
@@ -4,15 +4,15 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 import './styles.css';
+import Alert from '../../components/alert';
 import Loader from '../../components/loader';
 import TopNav from '../../components/top-nav';
 import Filters from '../../components/filters';
+import GroupHeading from '../../components/group-heading';
 import { fetchTrending } from '../../redux/github/actions';
-import RepositoryGrid from '../../components/repository-grid';
 import RepositoryList from '../../components/repository-list';
+import RepositoryGrid from '../../components/repository-grid';
 import { updateDateJump, updateLanguage, updateViewType } from '../../redux/preference/actions';
-import GroupHeading from '../../components/group-heading';
-import Alert from '../../components/alert';
 
 class FeedContainer extends React.Component {
   componentDidMount() {