feat(route): simple route with react-async eg

.gitignore

@@ -1,3 +1,6 @@
+# dev files
+public/dev-lib
+
 # Logs
 logs
 *.log

jsconfig.json

@@ -0,0 +1,6 @@
+{
+    "compilerOptions": {
+        "baseUrl": "src"
+    },
+    "include": ["src"]
+}

package.json

@@ -3,11 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@bit/guya-ltd.gcss.atoms.button": "^0.0.4",
+    "@bit/guya-ltd.gcss.molecules.field": "^0.0.2",
+    "@bit/guya-ltd.gcss.organisms.card": "^0.0.2",
+    "@bit/guya-ltd.gcss.organisms.formcontrol": "^0.0.1",
+    "@bit/guya-ltd.gcss.templates.landing.login": "^0.0.6",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",
+    "react-async": "^10.0.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
+    "react-router-i18n": "^0.3.0",
     "react-scripts": "3.4.1"
   },
   "devDependencies": {

src/hocs/Authorization.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+// Authorization HOC
+const Authorization = (WrappedComponent) => 
+    class WithAuthorization extends React.Component {
+        render() {
+            return <WrappedComponent {...this.props} />
+        }
+    }
+
+
+export default Authorization;

src/index.js

@@ -1,17 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import Route from 'routes/ServiceRoute';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Route />
   </React.StrictMode>,
   document.getElementById('root')
-);
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+);

src/pages/Error404/Error404.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Error404 = () => {
+    return (
+        <div>
+            404 Error
+        </div>
+    );
+}
+
+
+export default Error404;

src/pages/Error404/index.js

@@ -0,0 +1 @@
+export { default } from './Error404';

src/pages/Index/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Redirect } from "react-router-dom";
+
+class Index extends React.Component {
+    render() {
+        return (
+            <Redirect to="/login" />
+        )
+    }
+}
+
+
+export default Index;

src/pages/Login/Login.js

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { useAsync } from 'react-async';
+
+
+import Authorization from 'hocs/Authorization';
+
+const Login = () => {
+    /* Rest API Authenticator function */
+    const auth = ([email, password], { signal }) => {
+        // setEmail("");
+
+    }
+
+    /* Async api call */
+    const { isPending, error, run } = useAsync({ deferFn: auth })
+
+    /* State hooks */
+    const [email, setEmail] = useState("");
+
+    /* State hooks */
+    const [password, setPassword] = useState("");
+
+    const handleLogin = event => {
+        event.preventDefault();
+        run(email, password);
+    }
+
+    return (
+        <form onSubmit={handleLogin}>
+            <input type='text' value={email} onChange={event => setEmail(event.target.value)} />
+            <br />
+            <input type='password' value={password} onChange={event => setPassword(event.target.value)} />
+            <br />
+            <button type='submit' disabled={isPending}>Login</button>
+        </form>
+    )
+}
+
+
+export default Authorization(Login);

src/pages/Login/index.js

@@ -0,0 +1 @@
+export { default } from './Login';

src/routes/ServiceRoute.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import {
+    BrowserRouter as Router,
+    Switch,
+    Route
+} from 'react-router-dom';
+
+import IndexPage from 'pages/Index';
+import LoginPage from 'pages/Login';
+import Error404Page from 'pages/Error404';
+
+// <Route path='/home/dashboards/support' component={LoginPage} />
+const ServiceRoute = () => (
+    <Router>
+        <Switch>
+          <Route exact path="/" component={IndexPage} />
+          <Route path="/login" component={LoginPage} />
+          <Route path="*" component={Error404Page} />
+        </Switch>
+    </Router>
+);
+
+
+export default ServiceRoute;