Created
July 28, 2016 20:36
-
-
Save marsch/bdd4160f03bfb951bf91d87efd015bb5 to your computer and use it in GitHub Desktop.
super dirty dynamic routing + static routes + oauth + fetch
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment