Merge pull request #37 from seeliang/feat-loading-gate

Feat loading gate

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;

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;

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;

webpack.dev.js

@@ -1,3 +1,5 @@
 const base = require('./webpack.base.js');
 
-module.exports = base;
+module.exports = Object.assign(base , {devServer: {
+  historyApiFallback: true
+}});