historypp-react-router

react-router for History Plus Plus (with fancy animations)

Demo

There is no explanation or documentatio yet

I will put a demo link and some more docs on the future

index.js

import './css/app.css'
import ReactDOM from 'react-dom'
import React from 'react'
import Router from './router'
// import { createHistory } from 'historypp'
import { createHistory } from 'historypp'

window.history2 = createHistory(window.history, {autoRestore:true}) //Restore history from local when a complete reload ocures

router.js

import React, { Component } from 'react'
import Router, { Route, Link } from './modules/historypp-react-router'
import Home from './pages/home/home'
import Timezones from './pages/timezones/timezones'
import Timezone from './pages/timezone/timezone'
import Random from './pages/random/random'

export default class RouterComponent extends Component{
  constructor(props){
    super(props)
    this.state = {}
  }

  render(){
    //This router requires a HistoryPlusPlus instance to work
    //Transition duration in seconds (default: 0.3)
    return <Router history={this.props.history} transition={0.5}>
      <Route path="/" helmet={<title>HOME - React: HistoryPP - Router - Dialogs</title>}>
        <Home/>
      </Route>
      <Route path="/timezones" background="pink" helmet={<title>TIMEZONES - React: HistoryPP - Router - Dialogs</title>}>
        <Timezones/>
      </Route>
      <Route path="/timezone/:id" helmet={<title>ZONE - React: HistoryPP - Router - Dialogs</title>}>
        <Timezone/>
      </Route>
      <Route path="/random"
        helmet={<title>RANDOM - React: HistoryPP - Router - Dialogs</title>}
        defaultStyle={elem => {
          return {
            background:"yellow",
            transition: '0.5s',
          }
        }}
        closeStyle={elem => {
          return {
            top: '103%',
            border: '10px solid red',
          }
        }}
        openStyle={elem => {
          return {
            top: '0',
            transition: '2s',
            border: '10px solid green',
          }
        }}
        hiddenStyle={elem => {
          return {
            top: '-60%',
            border: '10px solid blue'
          }
      }}>
        Multiple childs supported on the router, every child has access to route data
        <Random/>
        <Random/>
        <Random/>
        <Random/>
        <Random/>
        <Random/>
      </Route>
      <Route path="/" exact={false} helmet={<title>404 - React: HistoryPP - Router - Dialogs</title>}>
        404 [sad face]
      </Route>
    </Router>
  }
}

pages/home/home.js

import React, { Component } from 'react'
import { Link, LinkPopOnBack, LinkReplace } from '../../modules/historypp-react-router'
import axios from 'axios'

export default class Home extends Component{
  constructor(props){
    super(props)
    this.state = {
      ...this.props.state,
    }
  }

  //Loads initial data for page (is static to be used on server side rendering)
  static async initialData(){
    try {
      return {
        ...(await axios.get('http://worldtimeapi.org/api/timezone/America/Argentina/Salta')).data,
        initialDataLoaded: true
      }
    } catch (e) {
      return {
        initialDataError: true,
      }
    }
  }

  //data could be received from saved state managed from router
  async componentDidMount(){
    if(!this.state.initialDataLoaded){ //initialDataLoaded is used to know if the data is loaded
      const initialData = await Home.initialData()
      this.setState({...initialData})
    }
    const asyncModule = await import(/* webpackPrefetch: true */'./asyncHeavyModule.js')
    this.setState({
      asyncModule
    })
  }

  componentDidUpdate(){
    //Saves data to router state manager
    this.props.saveState(this.state)
  }

  render(){
    const AsyncLoadedComponent = this.state.asyncModule && this.state.asyncModule.default
    return (<div>
      Actual time:
      <br/>
      {this.state.initialDataLoaded && this.state.datetime}
      {this.state.initialDataError && "Error loading data"}
      <br/>
      <Link to="/timezones">Timezones</Link>
      <br/>
      <LinkPopOnBack to="/random">Random #1</LinkPopOnBack> Cannot return to it going forward
      <br/>
      <LinkReplace to="/random">Random #2</LinkReplace> Replace actual page
      <br/>
      <Link to="/404error">404 fallback</Link>
      <br/>
      {AsyncLoadedComponent && <AsyncLoadedComponent/>}
    </div>)
  }
}

pages/timezones/timezones.js

import React, { Component } from 'react'
import { Link } from '../../modules/historypp-react-router'
import axios from 'axios'

export default class Home extends Component{
  constructor(props){
    super(props)
    this.state = {
      ...this.props.state,
    }
  }

  //Loads initial data for page (is static to be used on server side rendering)
  static async initialData(){
    try {
      return {
        timezones: (await axios.get('http://worldtimeapi.org/api/timezone')).data,
        initialDataLoaded: true
      }
    } catch (e) {
      return {
        initialDataError: true,
      }
    }
  }

  //data could be received from saved state managed from router
  async componentDidMount(){
    if(!this.state.initialDataLoaded){ //initialDataLoaded is used to know if the data is loaded
      const initialData = await Home.initialData()
      this.setState({...initialData})
    }
  }

  componentDidUpdate(){
    //Saves data to router state manager
    this.props.saveState(this.state)
  }

  render(){
    const loading = !this.state.initialDataLoaded && !this.state.initialDataError
    return (<div>
      <Link to="/">Home /</Link>
      <br/>
      <br/>
      {loading && "Loading timezones..."}
      {this.state.initialDataLoaded && this.state.timezones.map((timezone,i) => {
        return <div key={i}>
          <Link to={"/timezone/"+encodeURIComponent(timezone)}>{timezone}</Link>
        </div>
      })}
    </div>)
  }
}