super dirty dynamic routing + static routes + oauth + fetch

index.js

import React from 'react'
import {render} from 'react-dom'
import { Link, Router, RouterContext, browserHistory } from 'react-router'
import superagent from 'superagent'
import superagentOauth from '@zalando/superagent-oauth2-client'
import deepFreeze from 'deep-freeze-strict'
import config from './config'

let OAuth = require('@zalando/oauth2-client-js')

class App extends React.Component {

    constructor() {
        super()
        this.state = {
          sites: {}
        }
    }

    componentDidMount() {
        request
            .get(config.API.ENDPOINT + '/site')
            .oauth(provider, oauthConfig)
            .exec()
            .then((response) => {
                console.log('got response', response)
                this.setState({
                    sites: response.body
                })
            })
            .catch(log)
    }

    render() {
        let sites = this.state.sites;
        let childs = this.props.childs;
        return (
          <div>
                <Link to="/testitout/here/view?siteId=adklfjasdf">click me</Link>
                {
                Object.keys(sites).map(function(k) {
                    let site = sites[k]
                    return <li key={site.id}>{site.url}</li>;
                })
                }
                react app lets go

                {this.props.children}
            </div>)
    }
}



class AnyChild extends React.Component {
    render() {
        log('render anychild here')
        return <div>any child is here: {this.props.children}</div>
    }
}
AnyChild.propTypes = {}

const componentsRegistred = {
  any: AnyChild,
  here: AnyChild,
  view: AnyChild,
  testitout: AnyChild
}

const staticRoutes = [
    {
        path: '/success',
        onEnter: function() {
            provider.parse(window.location.hash.substr(1));
        }
    }
]




/// ROUTER STUFF
const routes = {
  path: '/',
  component: mainComponent,
  getChildRoutes: function(partialNextState, callback) {
    // need to check the path against static routes like /login /logout /success, etc. than just return the route
    // all after goes to dynamic routing
    let staticRoute = self.staticRoutes.find(function(obj) {
      return obj.path == partialNextState.location.pathname
    })

    console.log('self try to route', self, partialNextState)

    if(staticRoute) {
      console.log('static route found')
      return callback(null, [staticRoute]);
    }

    console.log('looking registry', self)


    console.log('getting child routes here....', partialNextState);
    let parts = partialNextState.location.pathname.replace(/^\/|\/$/g, '').split('/')
    console.log('parts?', parts)
    let route = parts.reduceRight(function(prev, curr) {
      console.log('???reduc', parts)
      console.log('right reduce', prev, typeof prev)

      let currComponent = self.routeComponents[curr]
      if(!currComponent) throw new Error(`no component found for key: ${curr}`)

      if(typeof prev == 'string') {
        console.log('leave', prev)
        let prevComponent = self.routeComponents[prev]
        if(!prevComponent) throw new Error(`no component found for key: ${prev}`)
        prev = {
            path: prev,
            component: prevComponent
        }
      }

      return {
        path: curr,
        component: currComponent,
        childRoutes: [prev]
      }
    })

    if(parts.length == 1) {
      route = {
        path: route,
        component: self.routeComponents[route]
      }
      if(!route) throw new Error(`no component found for key: ${route}`)
    }

    callback(null, [route])
    console.log('route', route)
  }
}

function myCreateElement(Component, props) {
    // copy it
    let propsCopy = Object.assign({}, props)

    let routerPropTypes = Router.propTypes
    delete routerPropTypes['children']
    let routerContextPropTypes = RouterContext.propTypes

    Object.keys(routerPropTypes).forEach(propType => delete propsCopy[propType])
    Object.keys(routerContextPropTypes).forEach(propType => delete propsCopy[propType])

    // quite useful may be we should keep them in enables /site/:id/live/:otherid - queryParams are also missing - which can be done here too
    delete propsCopy['route']
    delete propsCopy['routeParams']

    // @d4 - freeze it so its read only - poormans immutable :D lol
    deepFreeze(propsCopy)

    return <Component {...propsCopy} />
}

const appElem = document.querySelector('#app')
render(<Router history={browserHistory} routes={routes} createElement={myCreateElement}/>, appElem)