#Recompose Workshop
##Stateless Function Components
Review stateless function components
- best way to code markup
- they take an object props, as their first arg, and context as second
- they return jsx
- they have no state...
require('babel-polyfill'); | |
var uuid = require('uuid'); | |
var faker = require('faker'); | |
var Benchmark = require('benchmark'); | |
var suite = new Benchmark.Suite; | |
var chunkify = require('chunkify'); | |
const createFakeArray = range => { | |
const arr = []; | |
for (let i = 0; i < range; i ++) { |
import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../constants/ActionTypes'; | |
export default (state = 0, action) => ({ | |
[actions.increment]: (state )=> state + 1, | |
[actions.decrement]: (state) => state - 1, | |
default: state => state | |
}[action.type || 'default'](state, action.payload)) |
#Recompose Workshop
##Stateless Function Components
Review stateless function components
var durations = ["12:38", "6:36", "9:03", "8:34", "5:02", "6:54", "13:22", "4:41", "8:36", "21:58", "3:06", "10:46", "10:13", "12:54", "14:00", "11:03", "16:03", "10:52", "24:53", "10:03", "11:49", "15:47", "3:19", "2:06", "5:47", "1:03", "5:29", "5:47", "26:39"]; | |
// write a function that will take the above array of string durations and convert it hours/mins/seconds | |
// You can use any JS you want - loops/map/reduce/etc... | |
function addDurations(acc, curr) { | |
const [ seconds = 0, minutes = 0, hours = 0] = curr.split(':') | |
.reverse().map((x) => parseInt(x, 10)); | |
return acc += hours * 3600 + minutes * 60 + seconds; | |
} |
const check = (char, ind, word) => ~word.slice(0, ind).indexOf(char) | |
|| ~word.slice(ind + 1).indexOf(char) ? ')' : '('; | |
function duplicateEncode(word) { | |
return word | |
.toLowerCase() | |
.split('') | |
.map(check) | |
.join(''); | |
} |
function isInt(x) { | |
return (typeof x === 'number') && (x % 1 === 0); | |
} | |
function flatten(ar) { | |
return ar.reduce(function(prev, curr) { | |
return prev.concat((Array.isArray(curr) ? flatten(curr) : curr)); | |
}, []); | |
} |
function biggestGap(values) { | |
function diff(curr, before) { | |
return curr - Math.min.apply(null, before); | |
} | |
function diffs(values) { | |
return values.map(function(x, i, ar) { | |
return diff(x, ar.slice(0, i)); | |
}); |
String.prototype.repeatify = function(x) { | |
// Array.apply(null, {length: x}) creates an array of undefined values with length x | |
return Array.apply(null, {length: x}).map(() => this).join(''); | |
}; | |
// or a better but less fun solution | |
String.prototype.repeatify = function(x) { | |
return Array(x + 1).join(this); | |
}; | |
console.log('hi'.repeatify(10)); |
function fakePromise(id) { | |
var deferred = $.Deferred(); | |
setTimeout(function() { | |
console.log(id + ' is done'); | |
deferred.resolve(id); | |
}, Math.random() * (1000 - 500) + 500); | |
return deferred.promise(); | |
} | |
module.exports = function checkBal(input) { | |
function match(left, right) { | |
return left === '(' && right === ')'; | |
} | |
function removeLast(ar) { | |
return ar.slice(0, ar.length - 1); | |
} | |
var result = input.split('').reduce(function(prev, curr, index, array) { | |
if (!prev.length) return [curr]; | |
if (match(prev[prev.length -1], curr)) return removeLast(prev); |