redux-devtools/packages/redux-devtools-inspector/demo/src/js/DemoApp.jsx

import React from 'react';
import PageHeader from 'react-bootstrap/lib/PageHeader';
import { connect } from 'react-redux';
import pkg from '../../../package.json';
import Button from 'react-bootstrap/lib/Button';
import FormGroup from 'react-bootstrap/lib/FormGroup';
import FormControl from 'react-bootstrap/lib/FormControl';
import ControlLabel from 'react-bootstrap/lib/ControlLabel';
import Form from 'react-bootstrap/lib/Form';
import Col from 'react-bootstrap/lib/Col';
import InputGroup from 'react-bootstrap/lib/InputGroup';
import * as base16 from 'base16';
import * as inspectorThemes from '../../../src/themes';
import getOptions from './getOptions';
import { push as pushRoute } from 'connected-react-router';

const styles = {
  wrapper: {
    height: '100vh',
    width: '80%',
    margin: '0 auto',
    paddingTop: '1px',
  },
  header: {},
  content: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: '50%',
  },
  buttons: {
    display: 'flex',
    width: '40rem',
    justifyContent: 'center',
    flexWrap: 'wrap',
  },
  muted: {
    color: '#CCCCCC',
  },
  button: {
    margin: '0.5rem',
  },
  links: {
    textAlign: 'center',
  },
  link: {
    margin: '0 0.5rem',
    cursor: 'pointer',
    display: 'block',
  },
  input: {
    display: 'inline-block',
    textAlign: 'left',
    width: '30rem',
  },
};

const themeOptions = [
  ...Object.keys(inspectorThemes).map((value) => ({
    value,
    label: inspectorThemes[value].scheme,
  })),
  null,
  ...Object.keys(base16)
    .map((value) => ({ value, label: base16[value].scheme }))
    .filter((opt) => opt.label),
];

const ROOT =
  process.env.NODE_ENV === 'production' ? '/redux-devtools-inspector/' : '/';

function buildUrl(options) {
  return (
    `${ROOT}?` +
    [
      options.useExtension ? 'ext' : '',
      options.supportImmutable ? 'immutable' : '',
      options.theme ? 'theme=' + options.theme : '',
      options.dark ? 'dark' : '',
    ]
      .filter((s) => s)
      .join('&')
  );
}

class DemoApp extends React.Component {
  render() {
    const options = getOptions(this.props.router.location);

    return (
      <div style={styles.wrapper}>
        <PageHeader style={styles.header}>
          {pkg.name || <span style={styles.muted}>Package Name</span>}
        </PageHeader>
        <h5>
          {pkg.description || (
            <span style={styles.muted}>Package Description</span>
          )}
        </h5>
        <div style={styles.links}>
          <div style={styles.input}>
            <Form horizontal>
              <FormGroup>
                <Col componentClass={ControlLabel} sm={3}>
                  Theme:
                </Col>
                <Col sm={9}>
                  <InputGroup>
                    <FormControl
                      componentClass="select"
                      onChange={(event) =>
                        this.setTheme(options, event.currentTarget.value)
                      }
                    >
                      {themeOptions.map((theme) => (
                        <option
                          key={(theme && theme.label) || 'empty'}
                          label={(theme && theme.label) || '──────────'}
                          value={theme && theme.value}
                          disabled={!theme}
                        />
                      ))}
                    </FormControl>
                    <InputGroup.Addon>
                      <a onClick={this.toggleTheme} style={styles.link}>
                        {options.dark ? 'Light theme' : 'Dark theme'}
                      </a>
                    </InputGroup.Addon>
                  </InputGroup>
                </Col>
              </FormGroup>
            </Form>
          </div>
        </div>
        <div style={styles.content}>
          <div style={styles.buttons}>
            <Button onClick={this.props.increment} style={styles.button}>
              Increment
            </Button>
            <Button onClick={this.props.push} style={styles.button}>
              Push
            </Button>
            <Button onClick={this.props.pop} style={styles.button}>
              Pop
            </Button>
            <Button onClick={this.props.replace} style={styles.button}>
              Replace
            </Button>
            <Button onClick={this.props.changeNested} style={styles.button}>
              Change Nested
            </Button>
            <Button onClick={this.props.pushHugeArray} style={styles.button}>
              Push Huge Array
            </Button>
            <Button onClick={this.props.addHugeObect} style={styles.button}>
              Add Huge Object
            </Button>
            <Button onClick={this.props.addIterator} style={styles.button}>
              Add Iterator
            </Button>
            <Button onClick={this.props.addRecursive} style={styles.button}>
              Add Recursive
            </Button>
            <Button onClick={this.props.addNativeMap} style={styles.button}>
              Add Native Map
            </Button>
            <Button onClick={this.props.addImmutableMap} style={styles.button}>
              Add Immutable Map
            </Button>
            <Button
              onClick={this.props.changeImmutableNested}
              style={styles.button}
            >
              Change Immutable Nested
            </Button>
            <Button onClick={this.props.hugePayload} style={styles.button}>
              Huge Payload
            </Button>
            <Button onClick={this.props.addFunction} style={styles.button}>
              Add Function
            </Button>
            <Button onClick={this.props.addSymbol} style={styles.button}>
              Add Symbol
            </Button>
            <Button onClick={this.toggleTimeoutUpdate} style={styles.button}>
              Timeout Update {this.props.timeoutUpdateEnabled ? 'On' : 'Off'}
            </Button>
            <Button onClick={this.props.shuffleArray} style={styles.button}>
              Shuffle Array
            </Button>
          </div>
        </div>
        <div style={styles.links}>
          <a onClick={this.toggleExtension} style={styles.link}>
            {(options.useExtension ? 'Disable' : 'Enable') +
              ' Chrome Extension (will reload this page)'}
          </a>
          <a onClick={this.toggleImmutableSupport} style={styles.link}>
            {(options.supportImmutable ? 'Disable' : 'Enable') +
              ' Full Immutable Support'}
          </a>
        </div>
      </div>
    );
  }

  toggleExtension = () => {
    const options = getOptions(this.props.router.location);

    window.location.href = buildUrl({
      ...options,
      useExtension: !options.useExtension,
    });
  };

  toggleImmutableSupport = () => {
    const options = getOptions(this.props.router.location);

    this.props.pushRoute(
      buildUrl({ ...options, supportImmutable: !options.supportImmutable })
    );
  };

  toggleTheme = () => {
    const options = getOptions(this.props.router.location);

    this.props.pushRoute(buildUrl({ ...options, dark: !options.dark }));
  };

  setTheme = (options, theme) => {
    this.props.pushRoute(buildUrl({ ...options, theme }));
  };

  toggleTimeoutUpdate = () => {
    const enabled = !this.props.timeoutUpdateEnabled;
    this.props.toggleTimeoutUpdate(enabled);

    if (enabled) {
      this.timeout = setInterval(this.props.timeoutUpdate, 1000);
    } else {
      clearTimeout(this.timeout);
    }
  };
}

export default connect((state) => state, {
  toggleTimeoutUpdate: (timeoutUpdateEnabled) => ({
    type: 'TOGGLE_TIMEOUT_UPDATE',
    timeoutUpdateEnabled,
  }),
  timeoutUpdate: () => ({ type: 'TIMEOUT_UPDATE' }),
  increment: () => ({ type: 'INCREMENT' }),
  push: () => ({ type: 'PUSH' }),
  pop: () => ({ type: 'POP' }),
  replace: () => ({ type: 'REPLACE' }),
  changeNested: () => ({ type: 'CHANGE_NESTED' }),
  pushHugeArray: () => ({ type: 'PUSH_HUGE_ARRAY' }),
  addIterator: () => ({ type: 'ADD_ITERATOR' }),
  addHugeObect: () => ({ type: 'ADD_HUGE_OBJECT' }),
  addRecursive: () => ({ type: 'ADD_RECURSIVE' }),
  addNativeMap: () => ({ type: 'ADD_NATIVE_MAP' }),
  addImmutableMap: () => ({ type: 'ADD_IMMUTABLE_MAP' }),
  changeImmutableNested: () => ({ type: 'CHANGE_IMMUTABLE_NESTED' }),
  hugePayload: () => ({
    type: 'HUGE_PAYLOAD',
    payload: Array.from({ length: 10000 }).map((_, i) => i),
  }),
  addFunction: () => ({ type: 'ADD_FUNCTION' }),
  addSymbol: () => ({ type: 'ADD_SYMBOL' }),
  shuffleArray: () => ({ type: 'SHUFFLE_ARRAY' }),
  pushRoute,
})(DemoApp);