Add date jump filter

8 files changed, 167 insertions, 60 deletions

diff --git a/package.json b/package.json
index d305639..5e3ba64 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4",
+    "reactstrap": "^6.4.0",
     "redux": "^4.0.0",
     "redux-devtools-extension": "^2.13.5",
     "redux-persist": "^5.10.0",
diff --git a/src/components/filters/date-jump-filter/index.js b/src/components/filters/date-jump-filter/index.js
new file mode 100644
index 0000000..2d9a63e
--- /dev/null
+++ b/src/components/filters/date-jump-filter/index.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
+
+import './styles.css';
+
+class DateJumpFilter extends React.Component {
+  state = {
+    dropdownOpen: false
+  };
+
+  updateDateJump = (dateJump) => {
+    if (dateJump === this.props.selectedDateJump) {
+      return;
+    }
+
+    this.props.updateDateJump(dateJump);
+  };
+
+  toggle = () => {
+    this.setState(prevState => ({
+      dropdownOpen: !prevState.dropdownOpen
+    }));
+  };
+
+  getSelectedDateJump() {
+    switch (this.props.selectedDateJump) {
+      case 'day':
+        return 'Daily';
+      case 'month':
+        return 'Monthly';
+      case 'year':
+        return 'Yearly';
+      case 'week':
+        return 'Weekly';
+      default:
+        return 'Weekly';
+    }
+  }
+
+  render() {
+    return (
+      <Dropdown className='date-jump-wrap' isOpen={ this.state.dropdownOpen } toggle={ this.toggle }>
+        <DropdownToggle className='date-jump-type shadowed'>
+          <i className="fa fa-calendar mr-2"></i>
+          { this.getSelectedDateJump() }
+        </DropdownToggle>
+        <DropdownMenu>
+          <DropdownItem onClick={ () => this.updateDateJump('year') }>Yearly</DropdownItem>
+          <DropdownItem onClick={ () => this.updateDateJump('month') }>Monthly</DropdownItem>
+          <DropdownItem onClick={ () => this.updateDateJump('week') }>Weekly</DropdownItem>
+          <DropdownItem onClick={ () => this.updateDateJump('day') }>Daily</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+}
+
+DateJumpFilter.propTypes = {
+  updateDateJump: PropTypes.func.isRequired,
+  selectedDateJump: PropTypes.string
+};
+
+export default DateJumpFilter;
diff --git a/src/components/filters/date-jump-filter/styles.css b/src/components/filters/date-jump-filter/styles.css
new file mode 100644
index 0000000..34b0987
--- /dev/null
+++ b/src/components/filters/date-jump-filter/styles.css
@@ -0,0 +1,24 @@
+.date-jump-type,
+.date-jump-type:hover,
+.date-jump-type:active {
+  border-radius: 8px;
+  padding: 10px 20px;
+  background: white !important;
+  color: black !important;
+  border: 1px solid white !important;
+  cursor: default;
+}
+
+.date-jump-wrap .dropdown-menu {
+  border: 1px solid #e8e8e8;
+  box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);
+  font-size: 15px;
+  line-height: 30px;
+  top: 3px !important;
+}
+
+.date-jump-wrap .dropdown-menu button {
+  cursor: pointer;
+  box-shadow: none;
+  outline: none;
+}
diff --git a/src/components/filters/index.js b/src/components/filters/index.js
index 3515ead..3b746b5 100644
--- a/src/components/filters/index.js
+++ b/src/components/filters/index.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import LanguageFilter from './language-filter';
 import ViewFilter from './view-filter';
 import './styles.css';
+import DateJumpFilter from './date-jump-filter';
 
 const Filters = (props) => (
   <div className="filters-wrap">
@@ -14,6 +15,12 @@ const Filters = (props) => (
       />
     </div>
     <div className="filter-item">
+      <DateJumpFilter
+        updateDateJump={ props.updateDateJump }
+        selectedDateJump={ props.selectedDateJump }
+      />
+    </div>
+    <div className="filter-item">
       <ViewFilter
         selectedViewType={ props.selectedViewType }
         updateViewType={ props.updateViewType }
@@ -25,8 +32,10 @@ const Filters = (props) => (
 Filters.propTypes = {
   updateLanguage: PropTypes.func.isRequired,
   updateViewType: PropTypes.func.isRequired,
+  updateDateJump: PropTypes.func.isRequired,
   selectedLanguage: PropTypes.string,
-  selectedViewType: PropTypes.string
+  selectedViewType: PropTypes.string,
+  selectedDateJump: PropTypes.string
 };
 
 export default Filters;
diff --git a/src/components/top-nav/index.js b/src/components/top-nav/index.js
index 0212dab..7163845 100644
--- a/src/components/top-nav/index.js
+++ b/src/components/top-nav/index.js
@@ -1,19 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
 
 import './styles.css';
 import Logo from '../icons/logo';
 
 class TopNav extends React.Component {
-  updateDateJump = (dateJump) => {
-    if (dateJump === this.props.selectedDateJump) {
-      return;
-    }
-
-    this.props.updateDateJump(dateJump);
-  };
-
   render() {
     return (
       <div className='top-nav'>
@@ -28,43 +18,15 @@ class TopNav extends React.Component {
               <p className="text-muted">Most starred projects on GitHub</p>
             </div>
           </a>
-          <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 className="float-right external-btns">
+            <a href='http://github.com/kamranahmedse/githunt'
+               target='_blank'
+               rel="noopener noreferrer"
+               className="btn btn-dark"><i className="fa fa-github mr-1"></i> View Source</a>
+            <a href='http://github.com/kamranahmedse/githunt'
+               target='_blank'
+               rel="noopener noreferrer"
+               className="btn btn-danger"><i className="fa fa-chrome mr-1"></i> Use Extension</a>
           </div>
         </div>
       </div>
@@ -72,9 +34,4 @@ class TopNav extends React.Component {
   }
 }
 
-TopNav.propTypes = {
-  updateDateJump: PropTypes.func.isRequired,
-  selectedDateJump: PropTypes.string
-};
-
 export default TopNav;
diff --git a/src/components/top-nav/styles.css b/src/components/top-nav/styles.css
index 7217eb2..d3ccd3f 100644
--- a/src/components/top-nav/styles.css
+++ b/src/components/top-nav/styles.css
@@ -31,7 +31,7 @@
   margin-bottom: 0;
 }
 
-.top-nav .duration-btns .btn {
+.top-nav .external-btns .btn {
   margin-left: 10px;
   margin-top: 24px;
   box-shadow: none;
diff --git a/src/containers/feed/index.js b/src/containers/feed/index.js
index 7ed8808..354bb4c 100644
--- a/src/containers/feed/index.js
+++ b/src/containers/feed/index.js
@@ -152,10 +152,7 @@ class FeedContainer extends React.Component {
   render() {
     return (
       <div className="page-wrap">
-        <TopNav
-          updateDateJump={ this.props.updateDateJump }
-          selectedDateJump={ this.props.preference.dateJump }
-        />
+        <TopNav/>
 
         { this.renderAlerts() }
 
@@ -175,6 +172,8 @@ class FeedContainer extends React.Component {
                   selectedViewType={ this.props.preference.viewType }
                   updateLanguage={ this.props.updateLanguage }
                   updateViewType={ this.props.updateViewType }
+                  updateDateJump={ this.props.updateDateJump }
+                  selectedDateJump={ this.props.preference.dateJump }
                 />
               }
             </div>
diff --git a/yarn.lock b/yarn.lock
index 2d68504..34a0bbd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1440,7 +1440,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.6:
+classnames@^2.2.3, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
 
@@ -2080,6 +2080,10 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
+dom-helpers@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
+
 dom-serializer@0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -4276,6 +4280,14 @@ lodash.defaults@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
 
+lodash.isfunction@^3.0.9:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051"
+
+lodash.isobject@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/lodash.isobject/-/lodash.isobject-3.0.2.tgz#3c8fb8d5b5bf4bf90ae06e14f2a530a4ed935e1d"
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -4293,6 +4305,10 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
+lodash.tonumber@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/lodash.tonumber/-/lodash.tonumber-4.0.3.tgz#0b96b31b35672793eb7f5a63ee791f1b9e9025d9"
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -5096,6 +5112,10 @@ pluralize@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
 
+popper.js@^1.14.1:
+  version "1.14.4"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.4.tgz#8eec1d8ff02a5a3a152dd43414a15c7b79fd69b6"
+
 portfinder@^1.0.9:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.16.tgz#a6a68be9c352bc66c1a4c17a261f661f3facaf52"
@@ -5449,7 +5469,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   dependencies:
@@ -5613,6 +5633,17 @@ react-error-overlay@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
 
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+
+react-popper@^0.10.4:
+  version "0.10.4"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.10.4.tgz#af2a415ea22291edd504678d7afda8a6ee3295aa"
+  dependencies:
+    popper.js "^1.14.1"
+    prop-types "^15.6.1"
+
 react-redux@^5.0.7:
   version "5.0.7"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"
@@ -5692,6 +5723,15 @@ react-scripts@1.1.4:
   optionalDependencies:
     fsevents "^1.1.3"
 
+react-transition-group@^2.3.1:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.4.0.tgz#1d9391fabfd82e016f26fabd1eec329dbd922b5a"
+  dependencies:
+    dom-helpers "^3.3.1"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-lifecycles-compat "^3.0.4"
+
 react@^16.4.2:
   version "16.4.2"
   resolved "https://registry.yarnpkg.com/react/-/react-16.4.2.tgz#2cd90154e3a9d9dd8da2991149fdca3c260e129f"
@@ -5701,6 +5741,19 @@ react@^16.4.2:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+reactstrap@^6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-6.4.0.tgz#891252a284710180cd3d746dd236ee61d28a1c66"
+  dependencies:
+    classnames "^2.2.3"
+    lodash.isfunction "^3.0.9"
+    lodash.isobject "^3.0.2"
+    lodash.tonumber "^4.0.3"
+    prop-types "^15.5.8"
+    react-lifecycles-compat "^3.0.4"
+    react-popper "^0.10.4"
+    react-transition-group "^2.3.1"
+
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"