joshwcomeau

class LetterDemo extends Component {
  constructor(props) { ... }

  componentWillMount() { ... }

  componentWillUnmount() { ... }

  renderLetters() { ... }

  render() {

joshwcomeau

import React, { Component } from 'react';
import random from 'lodash/random';
import sampleSize from 'lodash/sampleSize';
import FlipMove from 'react-flip-move';

const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

function getSubsetOfAlphabet() { ... }

class LetterDemo extends Component {

joshwcomeau

import React, { Component } from 'react';
import random from 'lodash/random';
import sampleSize from 'lodash/sampleSize';

const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

function getSubsetOfAlphabet() {
  const numToPick = random(1, 26);
  return sampleSize(alphabet, numToPick).sort();
}

joshwcomeau

app.post('/process-upload', upload.single('image'), async (req, res) => {
  // These helper methods aren't as necessary anymore, but they still
  // provide semantic value that makes the route easier to follow.
  const resizeAndConvert = buffer => (
    imConvertPromise({
      srcData: buffer,
      width: 32,
      height: 16,
      format: 'PNG'
    })

joshwcomeau

export const imConvertPromise = wrapWithPromise.bind(null, imageMagick.convert);

joshwcomeau

export const wrapWithPromise = wrappedFunction => (...args) => (
  new Promise((resolve, reject) => {
    wrappedFunction(...args, (err, result) => {
      return err ? reject(err) : resolve(result);
    });
  })
);


export const readFilePromise = wrapWithPromise(fs.readFile);

joshwcomeau

export function readFilePromise(filePath) {
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, (err, buffer) => {
      return err ? reject(err) : resolve(buffer);
    });
  });
}

export function writeFilePromise(filePath, data) {
  return new Promise((resolve, reject) => {

joshwcomeau

app.post('/process-upload', upload.single('image'), (req, res) => {
  // Start by reading the uploaded file
  fs.readFile(req.file.path, (err, originalFileBuffer) => {
    if (err) throw err;
  
    // Resize the image to 32x16, and convert to .png for consistency
    imageMagick.convert({
      srcData: originalFileBuffer,
      width: 32,
      height: 16,

joshwcomeau

@immutableProps(['prop1', 'prop2'])
class Thing extends Component {
  // Stuff
}

joshwcomeau

const immutableProps = propsToCheck => ComposedComponent => {
  return class immutablePropChecker extends Component {
    shouldComponentUpdate(nextProps) {
      return propsToCheck.some( p => this.props[p] !== nextProps[p] );
    }

    render() {
      return <ComposedComponent {...this.props} />;
    }
  }