gatsby-browser.js

/* eslint-disable react/prop-types */
/* globals window CustomEvent */
import React, { createElement } from 'react';
import { Transition } from 'react-transition-group';
import createHistory from 'history/createBrowserHistory';

import getTransitionStyle from './src/utils/getTransitionStyle';

const timeout = 500;
const historyExitingEventType = `history::exiting`;

const getUserConfirmation = (message, callback) => {
  const event = new CustomEvent(historyExitingEventType, {
    detail: { message },
  });
  window.dispatchEvent(event);
  setTimeout(() => {
    callback(true);
  }, timeout);
};
const history = createHistory({ getUserConfirmation });
// block must return a string to conform
history.block((location, action) => location.key);
exports.replaceHistory = () => history;

class ReplaceComponentRenderer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { exiting: false };
    this.listenerHandler = this.listenerHandler.bind(this);
  }

  listenerHandler(event) {
    this.setState({ exiting: true });
  }

  componentDidMount() {
    window.addEventListener(historyExitingEventType, this.listenerHandler);
  }

  componentWillUnmount() {
    window.removeEventListener(historyExitingEventType, this.listenerHandler);
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.location.key !== nextProps.location.key) {
      this.setState({ exiting: false });
    }
  }

  render() {
    const transitionProps = {
      timeout: {
        enter: 0,
        exit: timeout,
      },
      appear: true,
      in: !this.state.exiting,
      key: this.props.location.key,
    };
    return (
      <Transition {...transitionProps}>
        {status =>
          createElement(this.props.pageResources.component, {
            ...this.props,
            ...this.props.pageResources.json,
            transition: {
              status,
              timeout,
              style: getTransitionStyle({ status, timeout }),
            },
          })}
      </Transition>
    );
  }
}

// eslint-disable-next-line react/display-name
exports.replaceComponentRenderer = ({ props }) => {
  if (props.layout) {
    return undefined;
  }
  return createElement(ReplaceComponentRenderer, props);
};