busypeoples

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

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

/**
 * Like map but for deeply nested objects

busypeoples

// Why the Hipsters Reduce Everything!

// Map implementation

import R from 'ramda'

const map = (f, data) =>
  R.reduce((xs, x) => {
    return [...xs, f(x)]
  }, [], data)

busypeoples

Back To The Basics

Chapter 2: Using Flow

Introduction

Why does it make sense to use FlowType or TypeScript when working with JavaScript? To give an appropriate answer, the best idea would be to build a small game or application to make the benefits clear.

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

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

const fakeFetch = () =>
  new Promise((res, rej) => {
    setTimeout(
      () =>
        res([
	  { id: 1, name: 'foo' },
	  { id: 2, name: 'bar' },
	  { id: 3, name: 'baz' }
	]),
	1000

busypeoples

import React from 'react';
import daggy from 'daggy';

// Inspired by:

// "Slaying a UI Antipattern in Fantasyland" @thinkfunctional
// https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-fantasyland-907cbc322d2a

// "Use a Render Prop!"
// https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce @mjackson

busypeoples

{
  "name": "example-karma-jasmine-webapck-test-setup",
  "description": "React Test Setup with Karma/Jasmine/Webpack",
  "scripts": {
    "test": "karma start --single-run --browsers PhantomJS"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.5.2",
    "babel-eslint": "^5.0.0",

busypeoples

type field =
  | O
  | X;

type position = (field, field, field, field);

type unit = (position, position, position, position);

type units = list(unit);

busypeoples

// @flow
import React from 'react';
import { render } from 'react-dom';

type Field = 0 | 1;

type Position = [Field, Field, Field, Field];

type Unit = [Position, Position, Position, Position];