JuanMa juanmaguitar

Using Recompose to write clean HOCs

In Javascript, we have a special type of functions, called Higher Order Functions that is those functions that work with other functions, either because they receive them as parameters (to execute them at some point of the body's functions) or because they return a new function when they're called

const sum = (a, b) => a + b
const multiplication = (a, b) => a * b

// Our Higher-Order Function
const getResultOperation = op =&gt; (a, b) =&gt; `The ${op.name} of ${a} and ${b} is ${op(a, b)}`

	import React from "react";
	import { compose, setDisplayName } from "recompose";

	const withDisplayMessages = WrappedComponent => props => {
	const { children, messages, loading, ..._props } = props;
	return (
	<WrappedComponent {..._props}>
	{children}
	{loading ? (
	<span className="fas fa-spinner fa-pulse"> </span>

	# Demos
	- name: react-movies-app
	repo: https://github.com/trainings-juanmaguitar/react-movies-app
	online: http://react-movies.surge.sh/
	description: demo created w/ create-react-app that shows th use of react w/ react-router and react-bootstrap, results with pagination
	snapshot: https://raw.githubusercontent.com/trainings-juanmaguitar/react-movies-app/master/md-img/movie-finder-snapshot.png
	tags: react, demo, online, surge react-router
	- name: socket-react-example-simple
	repo: https://github.com/trainings-juanmaguitar/socket-react-example-simple
	description: Demo that shows the use of socket.io with a react app

	npm i -D babel-preset-es2015 babel-preset-stage-2 babel-preset-react
	npm i -D babel-eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard prettier-eslint

	curl -fsSL https://gist.githubusercontent.com/juanmaguitar/f8f09d9eda71d8bd77b88c8bfac32cda/raw/e8322eb79ade613996ed503cd962040cbbfffe06/.babelrc > .babelrc
	curl -fsSL https://gist.githubusercontent.com/juanmaguitar/f8f09d9eda71d8bd77b88c8bfac32cda/raw/e8322eb79ade613996ed503cd962040cbbfffe06/.eslintrc > .eslintrc

	const ERROR_METHODS_AS_STRINGS = 'Interface constructor expects method names to be passed in as a string'
	const ERROR_PROPERTIES_AS_STRINGS = 'Interface constructor expects property names to be passed in as a string'
	const ERROR_NO_OBJECT = 'No Object to check'

	const ERROR_METHOD_NOT_IMPLEMENTED = (interface, method) => `The object does not implement the interface ${interface}. Method ${method} not found.`
	const ERROR_PROPERTY_NOT_IMPLEMENTED = (interface, property) => `The object does not implement the interface ${interface}. Property ${property} not found.`

	const isString = text => typeof text === 'string'
	const isFunction = fn => typeof fn === 'function'

	EventEmitter = {
	_events: {},
	publish: function (event, data) {
	if (!this._events[event]) return; // no one is listening to this event
	this._events[event].forEach( callback => callback(data) )
	},
	subscribe: function (event, callback) {
	if (!this._events[event]) this._events[event] = []; // new event
	this._events[event].push(callback);
	}

JuanMa juanmaguitar

Using Recompose to write clean HOCs

Recompose notes

Python Notes

Resources

First Steps

	const sum = (a,b) => a+b
	const multiplication = (a,b) => a*b

	const showResult = msg => fn => (a,b) => `${msg} ${fn(a,b)}`

	showResult("sum is ")(sum)(2,4) // sum is 6
	showResult("result = ")(multiplication)(2,4) // result = 8

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Hello World</title>
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
	</head>
	<body>