push lagih

package-lock.json

@@ -2382,6 +2382,15 @@
         "normalize-path": "^2.1.1"
       }
     },
+    "apisauce": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/apisauce/-/apisauce-1.1.2.tgz",
+      "integrity": "sha512-AqOrOVk71JPSqugA6PdrkE2S0w1GC/f3xPZPMHJ1O+Z73pwT2uoGnr8JbfmB/gvO2cnygYzlBOnkD/mN6W1FMQ==",
+      "requires": {
+        "axios": "^0.19.0",
+        "ramda": "^0.25.0"
+      }
+    },
     "aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -2586,6 +2595,37 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz",
       "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA=="
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -10583,6 +10623,11 @@
         "performance-now": "^2.1.0"
       }
     },
+    "ramda": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.25.0.tgz",
+      "integrity": "sha512-GXpfrYVPwx3K7RQ6aYT8KPS8XViSXUVJT1ONhoKPE9VAleW42YE+U+8VEyGWt41EnEQW7gwecYJriTI0pKoecQ=="
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",

package.json

@@ -8,6 +8,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "apisauce": "^1.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",

src/api/index.js

+// a library to wrap and simplify api calls
+import apisauce from 'apisauce'
+
+// our "constructor"
+const create = (baseURL = '') => {
+  // ------
+  // STEP 1
+  // ------
+  //
+  // Create and configure an apisauce-based api object.
+  //
+  const api = apisauce.create({
+    // base URL is read from the "constructor"
+    baseURL,
+    // here are some default headers
+    headers: {
+      'Cache-Control': 'no-cache',
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+    // 10 second timeout...
+    timeout: 10000
+  })
+
+  api.addAsyncRequestTransform(request => async () => {
+    var token
+    try {
+    //   const res = await AsyncStorage.getItem("TOKEN")
+      if (res != null) {
+        token = res
+        // alert(url)
+        // api.setBaseURL(`${url}/api/`)
+      } else {
+        token = null
+        // url = Constant.BASE_URL.MASTER + '/api/'
+        // alert(url)
+        // api.setBaseURL(`${url}/api/`)
+      }
+    } catch (error) {
+      // console.tron.log(error)
+    }
+    // console.log(token)
+    request.headers['token'] = token
+    // console.tron.log(url)
+  })
+
+  // ------
+  // STEP 2
+  // ------
+  //
+  // Define some functions that call the api.  The goal is to provide
+  // a thin wrapper of the api layer providing nicer feeling functions
+  // rather than "get", "post" and friends.
+  //
+  // I generally don't like wrapping the output at this level because
+  // sometimes specific actions need to be take on `403` or `401`, etc.
+  //
+  // Since we can't hide from that, we embrace it by getting out of the
+  // way at this level.
+  //
+  const getRoot = () => api.get('')
+  // ------
+  // STEP 3
+  // ------
+  //
+  // Return back a collection of functions that we would consider our
+  // interface.  Most of the time it'll be just the list of all the
+  // methods in step 2.
+  //
+  // Notice we're not returning back the `api` created in step 1?  That's
+  // because it is scoped privately.  This is one way to create truly
+  // private scoped goodies in JavaScript.
+  //
+  return {
+    // a list of the API functions from step 2
+    getRoot,
+  }
+}
+
+// let's return back our create method as the default.
+export default {
+  create
+}
\ No newline at end of file

src/Register.js → src/container/Register.js

 import React from 'react';
 
 function Register() {
+
   return (
     <div>
       <h2>Register</h2>

src/router/index.js

@@ -3,11 +3,12 @@ import {
   BrowserRouter as Router,
   Switch,
   Route,
-  Link
+  Link,
+  useLocation
 } from "react-router-dom";
-import Home from '../Home'
-import Login from '../Login'
-import Register from '../Register'
+import Home from '../container/Home'
+import Login from '../container/Login'
+import Register from '../container/Register'
 // This site has 3 pages, all of which are rendered
 // dynamically in the browser (not server rendered).
 //
@@ -52,6 +53,9 @@ export default function BasicExample() {
           <Route path="/register">
             <Register />
           </Route>
+          <Route path="*">
+            <NoMatch />
+          </Route>
         </Switch>
       {/* </div> */}
     </Router>
@@ -68,3 +72,15 @@ export default function BasicExample() {
 //     </div>
 //   );
 // }
+
+function NoMatch() {
+  let location = useLocation();
+
+  return (
+    <div>
+      <h3>
+        Link '<code>{location.pathname}</code>' engga ada euy
+      </h3>
+    </div>
+  );
+}
\ No newline at end of file