From 0e140f71bced95af20ff21babeea91a25e0c1026 Mon Sep 17 00:00:00 2001
From: seeliang <me@sihuiliang.com>
Date: Fri, 10 Jan 2020 21:55:32 +1100
Subject: [PATCH 1/3] webpack support for browser refresh

---
 webpack.dev.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/webpack.dev.js b/webpack.dev.js
index 2c76cfe..a477ff6 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -1,3 +1,5 @@
 const base = require('./webpack.base.js');
 
-module.exports = base;
+module.exports = Object.assign(base , {devServer: {
+  historyApiFallback: true
+}});

From 791008b23a507717cb05228e3bf88a6a8bc3629d Mon Sep 17 00:00:00 2001
From: seeliang <me@sihuiliang.com>
Date: Fri, 10 Jan 2020 21:57:10 +1100
Subject: [PATCH 2/3] the fetch gate

---
 src/atomic/pages/loading.js |  9 ++++++---
 src/js/routes.js            | 34 ++++++++++++++++++++++++++++------
 2 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/atomic/pages/loading.js b/src/atomic/pages/loading.js
index 9a95087..0e072e5 100644
--- a/src/atomic/pages/loading.js
+++ b/src/atomic/pages/loading.js
@@ -1,12 +1,15 @@
 import React from 'react';
 import {useSelector, useDispatch} from 'react-redux';
 import Button from '../atoms/button';
-import { Redirect } from 'react-router-dom';
+import { Redirect, useLocation } from 'react-router-dom';
 import {feedFetch} from '../../js/actions';
 
 const Loading = () => {
   const {feed} = useSelector(state => state),
-    dispatch = useDispatch();
+    dispatch = useDispatch(),
+    location = useLocation(),
+
+    { from } = location.state || { from: { pathname: '/page' } };
   if(typeof feed.status.fetchError === 'boolean' && feed.status.fetchError === true) {
     return (
       <div>
@@ -21,7 +24,7 @@ const Loading = () => {
     return  <h1> loading ... </h1>;
   }
 
-  return <Redirect to="/page"/>;
+  return <Redirect to={from} />;
 };
 
 export default Loading;
diff --git a/src/js/routes.js b/src/js/routes.js
index 868e705..6b56580 100644
--- a/src/js/routes.js
+++ b/src/js/routes.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/no-multi-comp */
 import React , {useEffect}from 'react';
 import {useSelector, useDispatch} from 'react-redux';
 import {feedFetch} from '../js/actions';
@@ -7,7 +8,26 @@ import Loading from '../atomic/pages/loading';
 import Page from '../atomic/pages/page';
 import People from '../atomic/pages/people';
 
-const
+const DataRoute = ({ children, ...rest }) => {
+    const {feed} = useSelector(state => state);
+    return (
+      <Route
+        {...rest}
+        render={({ location }) =>
+          feed.status.fetched ? (
+            children
+          ) : (
+            <Redirect
+              to={{
+                pathname: '/loading',
+                state: { from: location }
+              }}
+            />
+          )
+        }
+      />
+    );
+  },
   Routes = () => {
   //demo error fetch
     const {feed} = useSelector(state => state),
@@ -21,18 +41,20 @@ const
     return (
       <Router>
         <div>
-          <Route path="/" >
+          <Route exact
+            path="/"
+          >
             <Redirect to="/loading" />
           </Route>
           <Route path="/loading">
             <Loading />
           </Route>
-          <Route path="/people/:id">
+          <DataRoute path="/people/:id">
             <People />
-          </Route>
-          <Route path="/page">
+          </DataRoute>
+          <DataRoute path="/page">
             <Page/>
-          </Route>
+          </DataRoute>
         </div>
       </Router>
     );

From 37ec1a5f9532aaca2fc896add9d2d314d80b1a74 Mon Sep 17 00:00:00 2001
From: seeliang <me@sihuiliang.com>
Date: Sat, 11 Jan 2020 16:36:58 +1100
Subject: [PATCH 3/3] chore: eslint

---
 src/js/routes.js           | 64 --------------------------------------
 src/js/routes/dataRoute.js | 26 ++++++++++++++++
 src/js/routes/index.js     | 43 +++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 64 deletions(-)
 delete mode 100644 src/js/routes.js
 create mode 100644 src/js/routes/dataRoute.js
 create mode 100644 src/js/routes/index.js

diff --git a/src/js/routes.js b/src/js/routes.js
deleted file mode 100644
index 6b56580..0000000
--- a/src/js/routes.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React , {useEffect}from 'react';
-import {useSelector, useDispatch} from 'react-redux';
-import {feedFetch} from '../js/actions';
-import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom';
-
-import Loading from '../atomic/pages/loading';
-import Page from '../atomic/pages/page';
-import People from '../atomic/pages/people';
-
-const DataRoute = ({ children, ...rest }) => {
-    const {feed} = useSelector(state => state);
-    return (
-      <Route
-        {...rest}
-        render={({ location }) =>
-          feed.status.fetched ? (
-            children
-          ) : (
-            <Redirect
-              to={{
-                pathname: '/loading',
-                state: { from: location }
-              }}
-            />
-          )
-        }
-      />
-    );
-  },
-  Routes = () => {
-  //demo error fetch
-    const {feed} = useSelector(state => state),
-      dispatch = useDispatch();
-    useEffect(() => {
-      if(feed.status.fetched === false) {
-        dispatch(feedFetch('people.jso'));
-      }
-    },[]);
-
-    return (
-      <Router>
-        <div>
-          <Route exact
-            path="/"
-          >
-            <Redirect to="/loading" />
-          </Route>
-          <Route path="/loading">
-            <Loading />
-          </Route>
-          <DataRoute path="/people/:id">
-            <People />
-          </DataRoute>
-          <DataRoute path="/page">
-            <Page/>
-          </DataRoute>
-        </div>
-      </Router>
-    );
-  };
-
-
-export default Routes;
diff --git a/src/js/routes/dataRoute.js b/src/js/routes/dataRoute.js
new file mode 100644
index 0000000..4e95d46
--- /dev/null
+++ b/src/js/routes/dataRoute.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {useSelector} from 'react-redux';
+import { Route, Redirect} from 'react-router-dom';
+
+
+const DataRoute = ({ children, ...rest }) => {
+  const {feed} = useSelector(state => state);
+  return (
+    <Route
+      {...rest}
+      render={({ location }) =>
+        feed.status.fetched ? (
+          children
+        ) : (
+          <Redirect
+            to={{
+              pathname: '/loading',
+              state: { from: location }
+            }}
+          />
+        )
+      }
+    />
+  );
+};
+export default DataRoute;
diff --git a/src/js/routes/index.js b/src/js/routes/index.js
new file mode 100644
index 0000000..ac64198
--- /dev/null
+++ b/src/js/routes/index.js
@@ -0,0 +1,43 @@
+import React , {useEffect}from 'react';
+import {useSelector, useDispatch} from 'react-redux';
+import {feedFetch} from '../../js/actions';
+import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom';
+import DataRoute from './dataRoute';
+import Loading from '../../atomic/pages/loading';
+import Page from '../../atomic/pages/page';
+import People from '../../atomic/pages/people';
+
+const Routes = () => {
+  //demo error fetch
+  const {feed} = useSelector(state => state),
+    dispatch = useDispatch();
+  useEffect(() => {
+    if(feed.status.fetched === false) {
+      dispatch(feedFetch('people.jso'));
+    }
+  },[]);
+
+  return (
+    <Router>
+      <div>
+        <Route exact
+          path="/"
+        >
+          <Redirect to="/loading" />
+        </Route>
+        <Route path="/loading">
+          <Loading />
+        </Route>
+        <DataRoute path="/people/:id">
+          <People />
+        </DataRoute>
+        <DataRoute path="/page">
+          <Page/>
+        </DataRoute>
+      </div>
+    </Router>
+  );
+};
+
+
+export default Routes;