Skip to content

Instantly share code, notes, and snippets.

@meshenka
Forked from amcdnl/Actions.js
Created February 28, 2016 21:22
Show Gist options
  • Save meshenka/30891a062a21e96dfa53 to your computer and use it in GitHub Desktop.
Save meshenka/30891a062a21e96dfa53 to your computer and use it in GitHub Desktop.
import { action } from 'common/utils/redux/redux';
@action
export class Actions {
static types = {
set3d: Symbol('set3d')
};
static set3d(val) {
return {
type: Actions.types.set3d,
val
};
}
}
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { configureStore } from 'common/utils/redux/redux';
import { Viz } from './Viz';
import { Reducer } from './Reducer';
const store = configureStore(Reducer, {
options: {
layout: {
type: 'radialTree',
is3d: false
}
},
model: {}
});
export class Container extends Component {
render() {
return (
<Provider store={store}>
<Viz />
</Provider>
)
}
}
// THIS ISNT REALLY RELEVANT BUT WANTED TO DISCLOSE ANYWAY
// http://raganwald.com/2015/06/26/decorators-in-es7.html
export function mixin (behaviour) {
const staticKeys = Reflect.ownKeys(behaviour.prototype ? behaviour : {});
const instanceKeys = Reflect.ownKeys(behaviour.prototype || behaviour);
const typeTag = Symbol('isa');
function _mixin (clazz) {
for (let property of staticKeys) {
Object.defineProperty(clazz, property, {
value: behaviour[property],
writable: true,
static: true
});
}
for (let property of instanceKeys) {
Object.defineProperty(clazz.prototype, property, {
value: behaviour[property],
writable: true
});
}
Object.defineProperty(clazz.prototype, typeTag, { value: true });
return clazz;
}
Object.defineProperty(_mixin, Symbol.hasInstance, {
value: (i) => !!i[typeTag]
});
return _mixin;
}
import { Actions } from './Actions';
import { reduce } from 'common/utils/redux/redux';
@reduce
export class Reducer {
static [Actions.types.set3d](state, { val }) {
state.options.layout.is3d = val;
return state;
}
}
import { bindActionCreators as reduxBinder, applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import { mixin } from '../decorators/mixin';
export const action = mixin(class {
static actors (clazz) {
return Object.keys(clazz.types).reduce((newObj, k) => {
newObj[k] = clazz[k];
return newObj;
}, {});
}
});
export function bindActionCreators(act, dispatch) {
return reduxBinder(act.actors(act), dispatch);
};
export function configureStore(reducers, initialState = {}) {
return createStore(
reducers.invoke(),
initialState,
applyMiddleware(thunk)
);
}
export const reduce = mixin(class {
static invoke (initalState = {}) {
return (state = initalState, action) => {
const handler = this[action.type];
return handler ?
handler(state, action) :
state;
};
}
});
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'common/utils/redux/redux';
import { Actions } from './Actions';
import { VizMenu } from './vizMenu/VizMenu';
@connect(state => state)
export class Viz extends Component {
static propTypes = {
model: PropTypes.object,
options: PropTypes.object
};
// componentWillMount() {
// this.unsubscribe = store.subscribe(() => {
// return this.updateState();
// });
// }
// componentWillUnmount() {
// this.unsubscribe();
// }
// updateState() {
// this.setState(store.getState());
// }
render() {
const { dispatch, options, model } = this.props;
const actions = bindActionCreators(Actions, dispatch);
return (
<div>
<VizMenu
options={options}
{...actions}
/>
<Graph
options={options}
model={model}
/>
</div>
)
}
}
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import './vizNav.css!';
export class VizMenu extends Component {
static propTypes = {
options: PropTypes.object
};
help(){
alert('meow')
}
render() {
const { set3d, options } = this.props;
const { is3d, type } = options.layout;
const className = classNames({ 'active': is3d }) + 'btn btn-link';
const buttonTxt = is3d ? '3d' : '2d';
return (
<nav className='viz-menu'>
<ul>
<li>
<button
type="button"
className={className}
onClick={ () => set3d(!is3d) }>
{buttonTxt}
</button>
</li>
<li>
{type}
</li>
<li>
<button
className='btn btn-link'
type="button"
onClick={ () => this.help() }>
Help
</button>
</li>
</ul>
</nav>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment