Skip to content

Instantly share code, notes, and snippets.

View cellog's full-sized avatar

Gregory Beaver cellog

View GitHub Profile
@cellog
cellog / Toggle.js
Created January 14, 2017 08:17
rendering a component based on state, and whether that state is ready to be used or not
import React from 'react'
import { connect } from 'react-redux'
export default (isActive, loaded = () => true, componentLoadingMap = {}) =>
({ component = (props) => <div {...props} />, loading = () => null, ...props }) => {
const Component = component
const Loading = loading
if (componentLoadingMap.component) {
props.component = componentLoadingMap.component
props[componentLoadingMap.component] = undefined
@cellog
cellog / Inbox.js
Last active January 14, 2017 08:24
using Toggle
import React, { Component } from 'react'
import Toggle from './Toggle'
import Message from './Message'
export default class Inbox extends Component {
render() {
return (
<div>
<h2>Inbox</h2>
<Toggle loaded={state => state.inbox && state.inbox.messages[state.inbox.selectedMessage]}
@cellog
cellog / testHelpers.js
Created February 18, 2017 04:46
imports for testing React, Redux, Redux-saga and React-DnD
import { DragDropContext } from 'react-dnd'
import HTML5Backend from 'react-dnd-test-backend'
import React, { Component } from 'react'
import { Provider, connect } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import teaspoon from 'teaspoon'
@cellog
cellog / renderComponent.js
Last active February 18, 2017 05:06
First steps for renderComponent
function renderComponent(ComponentClass, props = {}) {
return teaspoon(
<ComponentClass {...props} />
).render()
}
export { renderComponent }
@cellog
cellog / renderComponent.js
Created February 18, 2017 05:07
renderComponent Second steps
import reducers from '../src/reducers'
function renderComponent(ComponentClass, props = {}, state = {}) {
const store = createStore(reducers, state)
return teaspoon(
<Provider store={store}>
<ComponentClass {...props} />
</Provider>
).render()
}
@cellog
cellog / MyComponent.js
Created February 18, 2017 05:20
Simple component test
import React, { Component, PropTypes } from 'react'
class MyComponent extends Component {
static propTypes = {
title: PropTypes.string.isRequired,
fancy: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
list: PropTypes.array.isRequired,
}
render() {
@cellog
cellog / renderComponent.js
Created February 18, 2017 05:26
renderComponent Third step
import reducers from '../src/reducers'
function renderComponent(ComponentClass, props = {}, state = {}) {
const store = createStore(reducers, state)
class Tester extends Component {
constructor(props) {
super(props)
this.state = props
}
@cellog
cellog / renderComponent.js
Created February 18, 2017 05:34
renderComponent: Fourth Step
import reducers from '../src/reducers'
function renderComponent(ComponentClass, props = {}, state = {}, returnStore = false) {
const store = createStore(reducers, state)
const log = []
const logger = store => next => action => {
log.push(action)
return next(action)
}
import React, { Component, PropTypes } from 'react'
class MyComponent extends Component {
static propTypes = {
title: PropTypes.string.isRequired,
fancy: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
list: PropTypes.array.isRequired,
doSomething: PropTypes.func.isRequired,
}
@cellog
cellog / wallaby.js
Created February 18, 2017 19:19
sample wallaby.js config
module.exports = function(wallaby) {
const next = require('postcss-cssnext')
const modules = require('postcss-modules')
const postcss = require('postcss')
const processCss = function(file, done) {
postcss([
next,
modules({
getJSON: function(filename, json) {