busypeoples

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import * as R from 'ramda'

// composition helper
const combine = R.curry((c, o) => x => (<div>{c(x)} {o(x)}</div>))
const combineComponents = (...args) => {
  const [first, ...rest] = args
  return R.reduce((acc, c) => combine(acc, c), first, rest)

busypeoples

// a basic example demonstrating the power of channels and generators
import React from 'react'
import { render } from 'react-dom'
import { chan, go, take, put, putAsync } from 'js-csp'
import { curry } from 'ramda'
import Counter from './Counter'

// helper
const createRender = curry((node, app) => render(app, node))
// create one channel for now

busypeoples

// A quick experiment with Channels and React
// this needs more thinking
// but might be useful as a starting point.

import React from 'react'
import { render } from 'react-dom'
import { chan, go, timeout, take, put, putAsync, buffers } from 'js-csp';
import { add, assoc, curry, compose, map, mapObjIndexed, max, pluck, prop, reduce } from 'ramda'

const initialState = {

busypeoples

module LoadUsers exposing (..)

import Html exposing (Html, div, h1, text)
import Http
import Json.Decode as Decode


main =
  Html.program
    { init = init

busypeoples

const R = require('ramda')

const colors = ['green', 'blue', 'red']
const notEmpty = R.compose(R.not, R.isEmpty)
const minLength = a => b => R.length(b) > a
const hasPresetColors = x => R.indexOf(x, colors) !== -1

const input = {
  id: 1,
  userName: 'Random',

busypeoples

import {
  ifElse,
  map,
  partial,
} from 'ramda'

const isObject = input => typeof input === 'object'

/**
 * Like map but for deeply nested objects

busypeoples

const enhancedForm = Component =>
  class HigherOrderComponent extends React.Component {

    constructor(props) {
      super(props)
      this.state = { form: props.initialState }
      this.handleSubmit = this.handleSubmit.bind(this)
      this.handleChange = this.handleChange.bind(this)
    }
    handleSubmit(e) {

busypeoples

import React from 'react'

const enhancedForm = Component => 
  class HigherOrderComponent extends React.Component {

  constructor(props) {
    super(props)
    this.state = { form: props.initialState }
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleChange = this.handleChange.bind(this)

busypeoples

SetState React HigherOrderComponent

Why?

If you want to write stateless functions in React and need to combine a number of setState functions to that stateless function. Enables to compose a number of functions expecting state and props. This enables to reuse functions when needed and eases testing those functions (as they are standalone and decoupled from React.

Example

busypeoples

import React from 'react'
import hoistNonReactStatics from 'hoist-non-react-statics'
import { assoc, assocPath, identity, is, map, prop } from 'ramda'
import isValid from './isValid'

// random helper function
// extract the needed information from the event
const getValueName = (e) => {
  const target = e.target
  const name = target.name