Add redux persist expire and update dependencies

6 files changed, 39 insertions, 37 deletions

diff --git a/package.json b/package.json
index d9c0a90..20e352b 100644
--- a/package.json
+++ b/package.json
@@ -14,11 +14,12 @@
     "react-redux": "^5.0.7",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "2.0.4",
+    "react-scripts": "2.0.5",
     "reactstrap": "^6.4.0",
     "redux": "^4.0.0",
     "redux-devtools-extension": "^2.13.5",
     "redux-persist": "^5.10.0",
+    "redux-persist-expire": "^1.0.1",
     "redux-thunk": "^2.3.0"
   },
   "scripts": {
@@ -32,5 +33,11 @@
   "devDependencies": {
     "cross-env": "^5.2.0",
     "gh-pages": "^2.0.1"
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }
diff --git a/src/components/repository-grid/grid-item/index.js b/src/components/repository-grid/grid-item/index.js
index ac7c9c2..582d348 100644
--- a/src/components/repository-grid/grid-item/index.js
+++ b/src/components/repository-grid/grid-item/index.js
@@ -13,7 +13,7 @@ class GridItem extends React.Component {
       <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
         <div className="grid-item-body">
           <div className="author-header clearfix">
-            <a href={ this.props.repository.owner.html_url } target="_blank">
+            <a href={ this.props.repository.owner.html_url } rel="noopener noreferrer" target="_blank">
               <div className="author-img">
                 <img src={ this.props.repository.owner.avatar_url }
                      onError={ (e) => {
@@ -29,12 +29,12 @@ class GridItem extends React.Component {
           </div>
           <div className="repo-header">
             <h5>
-              <a href={ this.props.repository.html_url } target="_blank">
+              <a href={ this.props.repository.html_url } rel="noopener noreferrer" target="_blank">
                 <span className="repo-name">{ this.props.repository.name }</span>
               </a>
             </h5>
             <p className="repo-meta text-muted small">
-              Built by &middot; <a target="_blank" href={ this.props.repository.owner.html_url }>{ this.props.repository.owner.login }</a> &middot; { moment(this.props.repository.created_at).format('MMMM D, YYYY') }
+              Built by &middot; <a target="_blank" rel="noopener noreferrer" href={ this.props.repository.owner.html_url }>{ this.props.repository.owner.login }</a> &middot; { moment(this.props.repository.created_at).format('MMMM D, YYYY') }
             </p>
           </div>
           <div className="repo-body">
@@ -53,18 +53,21 @@ class GridItem extends React.Component {
             }
             <a className="muted-link d-inline-block mr-3"
                href={ `${this.props.repository.html_url}/stargazers` }
+               rel="noopener noreferrer"
                target="_blank">
               <Star/>
               { this.props.repository.stargazers_count.toLocaleString() }
             </a>
             <a className="muted-link d-inline-block mr-3"
                href={ `${this.props.repository.html_url}/network/members` }
+               rel="noopener noreferrer"
                target="_blank">
               <Fork/>
               { this.props.repository.forks.toLocaleString() }
             </a>
             <a className="muted-link d-inline-block mr-3"
                href={ `${this.props.repository.html_url}/watchers` }
+               rel="noopener noreferrer"
                target="_blank">
               <Watcher/>
               { this.props.repository.watchers.toLocaleString() }
diff --git a/src/components/repository-list/list-item/index.js b/src/components/repository-list/list-item/index.js
index 1d9bcac..0a93ae6 100644
--- a/src/components/repository-list/list-item/index.js
+++ b/src/components/repository-list/list-item/index.js
@@ -14,12 +14,12 @@ class ListItem extends React.Component {
         <div className="list-item-body">
           <div className="repo-header">
             <h3>
-              <a href={ this.props.repository.html_url } target="_blank">
+              <a href={ this.props.repository.html_url } rel="noopener noreferrer" target="_blank">
                 <span className="text-normal">{ this.props.repository.owner.login } / </span>
                 { this.props.repository.name }
               </a>
             </h3>
-            <p className="repo-meta text-muted small">Built by &middot; <a href={ this.props.repository.owner.html_url } target="_blank">{ this.props.repository.owner.login }</a> &middot; { moment(this.props.repository.created_at).format('MMMM D YYYY') }</p>
+            <p className="repo-meta text-muted small">Built by &middot; <a href={ this.props.repository.owner.html_url } rel="noopener noreferrer" target="_blank">{ this.props.repository.owner.login }</a> &middot; { moment(this.props.repository.created_at).format('MMMM D YYYY') }</p>
           </div>
           <div className="repo-body">
             <p>{ this.props.repository.description || 'No description given.' }</p>
@@ -37,18 +37,21 @@ class ListItem extends React.Component {
             }
             <a className="muted-link d-inline-block mr-3"
                href={ `${this.props.repository.html_url}/stargazers` }
+               rel="noopener noreferrer"
                target="_blank">
               <Star/>
               { this.props.repository.stargazers_count.toLocaleString() }
             </a>
             <a className="muted-link d-inline-block mr-3"
                href={ `${this.props.repository.html_url}/network/members` }
+               rel="noopener noreferrer"
                target="_blank">
               <Fork/>
               { this.props.repository.forks.toLocaleString() }
             </a>
             <a className="muted-link d-inline-block mr-3"
                href={ `${this.props.repository.html_url}/watchers` }
+               rel="noopener noreferrer"
                target="_blank">
               <Watcher/>
               { this.props.repository.watchers.toLocaleString() }
@@ -58,6 +61,7 @@ class ListItem extends React.Component {
 
         <a href={ this.props.repository.owner.html_url }
            target="_blank"
+           rel="noopener noreferrer"
            className="author-link d-none d-lg-block d-xl-block d-md-block">
           <img className='author-img'
                src={ this.props.repository.owner.avatar_url }
diff --git a/src/redux/github/transform.js b/src/redux/github/transform.js
index ffae7f8..9a4f747 100644
--- a/src/redux/github/transform.js
+++ b/src/redux/github/transform.js
@@ -1,20 +1,10 @@
 import { createTransform } from 'redux-persist';
-import moment from 'moment';
-import { initialState } from './reducer';
 
 const GithubTransform = createTransform(
   // transform state on its way to being serialized and persisted.
   (inboundState, key) => {
     inboundState = inboundState || {};
 
-    // If given data does not have persistence configuration before
-    if (!inboundState.__persisted_at) {
-      inboundState = {
-        ...inboundState,
-        __persisted_at: moment()
-      };
-    }
-
     // Keep the first group only to avoid overflowing the storage
     if (inboundState.repositories && inboundState.repositories.length > 1) {
       inboundState = {
@@ -37,25 +27,7 @@ const GithubTransform = createTransform(
   },
   // transform state being rehydrated
   (outboundState, key) => {
-    outboundState = outboundState || {};
-
-    if (outboundState.__persisted_at) {
-      const startTime = moment(outboundState.__persisted_at);
-      const endTime = moment();
-
-      const duration = moment.duration(endTime.diff(startTime));
-      const seconds = duration.asSeconds();
-
-      // If the state is more than one hour old
-      // reset it to initial state
-      if (seconds > 3600) {
-        return {
-          ...initialState
-        };
-      }
-    }
-
-    return outboundState;
+    return { ...outboundState };
   },
   // define which reducers this transform gets called for.
   {
diff --git a/src/store.js b/src/store.js
index c8e72b1..cab211a 100644
--- a/src/store.js
+++ b/src/store.js
@@ -4,8 +4,10 @@ import { persistReducer, persistStore } from 'redux-persist';
 import { applyMiddleware, createStore } from 'redux';
 import storage from 'redux-persist/lib/storage';
 import thunk from 'redux-thunk';
+import expireReducer from 'redux-persist-expire';
 
 import GithubTransform from './redux/github/transform';
+import githubState from './redux/github/reducer';
 import rootReducer from './redux/reducers';
 
 const persistedReducers = persistReducer(
@@ -14,7 +16,12 @@ const persistedReducers = persistReducer(
     storage: storage,
     stateReconciler: autoMergeLevel2,
     transforms: [
-      GithubTransform
+      GithubTransform,
+      expireReducer('github', {
+        expireSeconds: 3600,
+        expiredState: { ...githubState },
+        autoExpire: true
+      })
     ]
   },
   rootReducer,
diff --git a/yarn.lock b/yarn.lock
index 28945c6..8aeb3e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8225,6 +8225,15 @@ redux-devtools-extension@^2.13.5:
   resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.5.tgz#3ff34f7227acfeef3964194f5f7fc2765e5c5a39"
   integrity sha512-QQ9BRy77oURHMdGys9rfQcCQDzXZ1T4oW+eUyE5Cg7DNVau69HJzc4YNDMOmpi0Dzpi1zOQgQ2rUpgJta4Lfqg==
 
+redux-persist-expire@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/redux-persist-expire/-/redux-persist-expire-1.0.1.tgz#3c5cacbf6d735ab60ac6de5ae47017d0bf4cad05"
+  integrity sha512-V8ra+OeHGKEBK78wo2vCcyEoTs0gWobzpXSVsO38szi3KjsxKxLJT4MC684RQ9hxFwtwvMzctw6zF2/F3luSow==
+  dependencies:
+    moment "^2.22.2"
+    redux "^4.0.0"
+    redux-persist "^5.10.0"
+
 redux-persist@^5.10.0:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-5.10.0.tgz#5d8d802c5571e55924efc1c3a9b23575283be62b"