Component Reusability

behavior-with-state-and-structure.js

document
  .querySelector('.btn-save')
  .addEventListener(
    'click',
    handleSave
  );

let isSaving = false;

const handleSave = () => {
  if (isSaving) {
    return;
  }
  
  isSaving = true;
  showLoader();
  saveForm();
};

behavior-with-state.js

document
  .querySelector('.btn-save')
  .addEventListener(
    'click',
    handleSave
  );

let isSaving = false;

const handleSave = () => {
  if (isSaving) {
    return;
  }
  
  isSaving = true;
  saveForm();
};

behavior.js

document
  .querySelector('.btn-save')
  .addEventListener(
    'click',
    handleSave
  );

const handleSave = () => { 
  saveForm();
};

composition.jsx

const composed = () => outer(inner());

const Composed = () => (
  <Outer>
    <Inner />
  </Outer>
);

const Composed = () => (
  <Outer children={<Inner />} />
);

Dropdown.jsx

type DropdownProps = {
  expanded: boolean,
  value: string | number,
  onChange: (string | number) => void,
  onExpand: () => void,
  onCollapse: () => void,
  options: {
    [optionValue: string | number]: string | React$Element
  },
};

const Dropdown = props => (
  <div>
    <button
      aria-haspopup="true"
      aria-expanded={props.expanded}
      onClick={props.expanded ? props.onCollapse : props.onExpand}
    >
      {props.options[props.value]}
    </button>
    <ul aria-hidden={!props.expanded}>
      {Object.keys(props.options).map(value => (
        <li key={value}>
          <button onClick={() => props.onChange(value)}>
            {props.options[value]}
          </button>
        </li>
      ))}
    </ul>
  </div>
);

higher-order-function.jsx

const withLog = wrappedFn => (...args) => {
  console.log('called with args:', args);
  return wrappedFn(...args);
}

const increment = num => num + 1;

const incrementWithLog = withLog(increment);

const withLog = WrappedComponent => (props) => {
  console.log('rendered with props:', props);
  return <WrappedComponent {...props} />;
}

const Button = props => <button {...props} />;

const ButtonWithLog = withLog(Button);

layout-content.jsx

const Article = (props) => (
  <article>
    <header>{props.header}</header>
    <main>{props.content}</main>
    <footer>{props.footer}</footer>
  </article>
);

const Strong = (props) => (
  <strong>{props.children}</strong>
);

OriginalDropdownProps.jsx

type DropdownProps = {
  className: string,
  options: Array<string>
    | Array<number>
    | Array<{ label: React$Element, value: string | number }>
  onChange: Function,
  placeholder: string | Element,
  value: string | number,
  defaultValue: string | number,
  readOnly: boolean,
  optionsMaxHeight: number,
  calculateWidth: boolean,
};

presentation.css

.btn-save {
  background: #1ab7ea;
  color: #ffffff;
}

redux-recompose.js

const withCounter = connect(
  selectCounterState,
  counterActions
);

const withCounter = compose(
  withState('value', 'setValue', 0),
  withHandlers({
    onIncrement: ({ setValue, value }) => () => {
      setValue(value + 1);
    },
    onDecrement: ({ setValue, value }) => () => {
      setValue(value - 1);
    },
  })
);

semantic-structure.html

<form>
  <button class=”btn-save”>
    Save
  </button>
</form>

withDropdownHandlers.jsx

const withDropdownHandlers = WrappedComponent => {
  return props => (
    <WrappedComponent
      {...props}
      onExpand={() => props.setExpanded(true)}
      onCollapse={() => props.setExpanded(false)}
      onChange={value => {
        props.setValue(value);
        props.setExpanded(false);
      }
    />
  );
};

withDropdownState.jsx

const withDropdownState = WrappedComponent => {
  return class extends Component {
    // Initialize state in constructor
    render() {
      return (
        <WrappedComponent
          {...this.props}
          expanded={this.state.expanded}
          value={this.state.value}
          setExpanded={expanded => this.setState({ expanded })}
          setValue={value => this.setState({ value })}
        />
      );
    }
};