diff --git a/README.md b/README.md index 87d8b45..f1a86aa 100644 --- a/README.md +++ b/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 Go To Todos @@ -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. diff --git a/metro-components/getCookie.js b/metro-components/getCookie.js new file mode 100644 index 0000000..cd0971b --- /dev/null +++ b/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 { + 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) + }) + } +} diff --git a/metro-components/react_config.js b/metro-components/react_config.js new file mode 100644 index 0000000..48a5c5f --- /dev/null +++ b/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( + , + document.getElementById("react-root") + ) + +} + +export default reactRender; \ No newline at end of file diff --git a/metro-components/station.js b/metro-components/station.js index 5763731..a805db4 100644 --- a/metro-components/station.js +++ b/metro-components/station.js @@ -1,9 +1,11 @@ import React from 'react'; +import {makeTrip} from "./makeTrip"; export const MetroStation = (props) => { + return (
- {props.children} + {makeTrip(e,props.to, 'NEXT')}} href={props.to}>{props.children}
) -} \ No newline at end of file +} diff --git a/react_loader.js b/react_loader.js index 42e8609..f59d37d 100644 --- a/react_loader.js +++ b/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( - , - document.getElementById("react-root") - ) -} - -bootstrap(); +window.addEventListener('popstate', function(event) { + goBack(document.location.pathname); +});