second release

README.md

@@ -121,7 +121,7 @@ Todo Example
     ```
 ### Metro Station
 
-Metro Station is a nice binding between React and Turbolinks.
+Metro Station handle routes between your react pages.
 
 ```javascript
 <MetroStation to="/todos/">Go To Todos</MetroStation>
@@ -130,9 +130,13 @@ Metro Station is a nice binding between React and Turbolinks.
 ## External Dependencies
 
  - [ ] React 16+
- - [ ] Turbolinks 5.2
+ - [ ] ~~Turbolinks 5.2~~
  - [ ] Axios 0.19
 
+## Changes 1.0
+
+ - Removed external dependency on Turbolinks.
+
 ## Notes
 This is a initial version of the library. Use at your own risk in production.
 

metro-components/getCookie.js

@@ -0,0 +1,15 @@
+export const getCookie = (cname) => {
+  let name = cname + "=";
+  let decodedCookie = decodeURIComponent(document.cookie);
+  let ca = decodedCookie.split(';');
+  for(let i = 0; i <ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) == ' ') {
+      c = c.substring(1);
+    }
+    if (c.indexOf(name) == 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+  return "";
+}

metro-components/makeTrip.js

@@ -0,0 +1,38 @@
+import axios from "axios";
+import {getAjaxHeader} from "./getAjaxHeader";
+import reactRender from "./react_config";
+
+export const makeTrip = (e, to, action) => {
+    if (action === "NEXT") {
+        e.preventDefault();
+        axios.get(to, {headers: getAjaxHeader})
+            .then(res => {
+                let resHTML = new DOMParser().parseFromString(res.data, "text/html");
+                let newPageParams = resHTML.getElementById("page-params").innerHTML;
+                document.getElementById("page-params").innerHTML = newPageParams;
+                let newPageName = resHTML.getElementById("page-name").innerHTML;
+                document.getElementById("page-name").innerHTML = newPageName;
+                document.getElementById("page-title").innerHTML = newPageName;
+                window.history.pushState({}, "", to)
+                reactRender(newPageName, newPageParams);
+            })
+            .catch(err => {
+                console.log(err)
+            })
+    }
+    if (action === "BACK") {
+        axios.get(to, {headers: getAjaxHeader})
+            .then(res => {
+                let resHTML = new DOMParser().parseFromString(res.data, "text/html");
+                let newPageParams = resHTML.getElementById("page-params").innerHTML;
+                document.getElementById("page-params").innerHTML = newPageParams;
+                let newPageName = resHTML.getElementById("page-name").innerHTML;
+                document.getElementById("page-name").innerHTML = newPageName;
+                document.getElementById("page-title").innerHTML = newPageName;
+                reactRender(newPageName, newPageParams);
+            })
+            .catch(err => {
+                console.log(err)
+            })
+    }
+}

metro-components/react_config.js

@@ -0,0 +1,33 @@
+import {Home} from "../pages/Home";
+import {NotFound} from "../pages/NotFound";
+import ReactDOM from "react-dom";
+import React from "react";
+
+function assignPage(pageName) {
+
+    let PageComponent;
+
+    switch (pageName) {
+        case 'Home':
+            PageComponent = Home;
+            break;
+        default:
+            PageComponent = NotFound;
+            break;
+    }
+
+    return PageComponent;
+}
+
+function reactRender(pageName, pageParams) {
+
+    let PageComponent = assignPage(pageName);
+
+    ReactDOM.render(
+        <PageComponent params={JSON.parse(pageParams)}/>,
+        document.getElementById("react-root")
+    )
+
+}
+
+export default reactRender;

metro-components/station.js

@@ -1,9 +1,11 @@
 import React from 'react';
+import {makeTrip} from "./makeTrip";
 
 export const MetroStation = (props) => {
+
     return (
         <div>
-            <a href={props.to}>{props.children}</a>
+            <a onClick={(e)=>{makeTrip(e,props.to, 'NEXT')}} href={props.to}>{props.children}</a>
         </div>
     )
-}
+}

react_loader.js

@@ -1,36 +1,11 @@
-import React from "react"
-import ReactDOM from "react-dom"
-import {NotFound} from "./pages/notfound";
-import {Home} from "./pages/home";
-
+import Bootstrap from "./metro-components/react_config";
+import {goBack} from "./metro-components/goBack";
 
 const pageName = document.getElementById('page-name').innerHTML;
 const pageParams = document.getElementById('page-params').innerHTML;
 
+Bootstrap(pageName, pageParams);
 
-function assignPage(pageName) {
-    let PageComponent = NotFound;
-
-    switch (pageName) {
-        case 'home':
-            PageComponent = Home;
-            break;
-        default:
-            PageComponent = NotFound;
-            break;
-    }
-
-    return PageComponent;
-}
-
-function bootstrap() {
-
-    let PageComponent = assignPage(pageName);
-
-    ReactDOM.render(
-        <PageComponent params={JSON.parse(pageParams)}/>,
-        document.getElementById("react-root")
-    )
-}
-
-bootstrap();
+window.addEventListener('popstate', function(event) {
+  goBack(document.location.pathname);
+});