smeijer

function CommentButtons({ user }) {
  const can = user ? user.can : {};

  return (
    <div>
      <Button disabled={can.edit}>edit</Button>
      <Button disabled={can.delete}>delete</Button>
      <Button disabled={can.reply}>reply</Button>
    </div>
  )

smeijer

function CommentButtons({ user }) {
  return (
    <div>
      <Button disabled={user?.can?.edit}>edit</Button>
      <Button disabled={user?.can?.delete}>delete</Button>
      <Button disabled={user?.can?.reply}>reply</Button>
    </div>
  )
}

smeijer

componentDidUpdate(prevProps) {
  if (
    this.props.image?.type !== prevProps.image?.type || 
    this.props.image?.orientation !== prevProps.image?.orientation
  ) {
    // ...
  }
}

smeijer

import bodyParser from 'body-parser';
import url from 'url';

const handleRequest = (method, path, cb) => {
  WebApp.rawConnectHandlers.use(path, (req, res, next) => {
    if (req.method !== method) {
      next();
      return;
    }

smeijer

/*
First run npm install topojson --save and then link "node_modules/topojson/build/topojson.min.js" 
above this snippet in your html.

Usage: http://leafletjs.com/reference.html#geojson
*/

L.TopoJSON = L.GeoJSON.extend({
    addData: function (data) {
        var geojson, key;

smeijer

import React, { PropTypes } from 'react';
import Lightbox from 'react-images';
import styled from 'styled-components';

const Container = styled.div`
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap;
  width: ${p => p.width}px;
`;

smeijer

function get(path, obj, fb = `$\{${path}}`) {
  return path.split('.').reduce((res, key) => res[key] || fb, obj);
}

function parseTpl(template, map, fallback) {
  return template.replace(/\$\{.+?}/g, (match) => {
    const path = match.substr(2, match.length - 3).trim();
    return get(path, map, fallback);
  });
}

smeijer

export function actionTypeBuilder(prefix) {
  return {
    type: actionType => `${prefix}/${actionType}`,
    loading: actionType => `${actionType}/loading`,
    ready: actionType => `${actionType}/ready`,
    stopped: actionType => `${actionType}/stopped`,
    changed: actionType => `${actionType}/changed`,
    error: actionType => `${actionType}/error`,
    success: actionType => `${actionType}/success`
  };

smeijer

test snippet