Cacher is the code snippet organizer for pro developers

Usages

import React, { Component } from 'react';
import styled from 'styled-components';
import SwipeableRoutes from 'react-swipeable-routes';
import { BrowserRouter as Route, NavLink } from 'react-router-dom';
import GasUsage from './GasUsage';
import ElectricityUsage from './ElectricityUsage';

class Usages extends Component {
  render() {
    return (
      <Wrap>
        <Menu>
          <NavLink to="/usage/gas" activeClassName="active">gas</NavLink>
          <NavLink to="/usage/electricity" activeClassName="active">electricity</NavLink>
        </Menu>
        <SwipeableRoutes replace>
          <Route path="/usage/gas" component={GasUsage} {...this.props} />
          <Route path="/usage/electricity" component={ElectricityUsage} />
        </SwipeableRoutes>
      </Wrap>
    );
  }
}

const Wrap = styled.div``;

const Menu = styled.ul`
  box-sizing: border-box;
  padding: 0 1em;
  display: flex;
  justify-content: space-between;

  a {
    color: #999;
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    width: 50%;
    align-items: center;
    justify-content: center;
    height: 5vh;
    &:first-of-type {
      border-right: 1px solid #999;
    }
    &.active {
      color: blue;
      font-weight: bold;
    }
  }
`;

export default Usages;

GasUsage.js

import React, { Component } from 'react';
import styled from 'styled-components';
import Graph from './Graph';

class GasUsage extends Component {
  state = {
    action: false
  };

  shouldComponentUpdate(nextProps) {
    return this.props.match.type !== nextProps.match.type;
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      action: nextProps.match.type === 'full'
    });
  }

  render() {
    return (
      <Wrap>
        <Signal>{this.state.action ? 'GAS ON' : 'GAS OFF'}</Signal>
        <Graph
          animation={this.state.action}
          classname="js--gas"
          label="Gas"
          color="green" />
      </Wrap>
    );
  }
}

const Wrap = styled.div`
  width: 100vw;
  height: 50vh;
  background: gold;
`;

const Signal = styled.span`
  padding: 0.5em;
  color: #999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;

export default GasUsage;

ElectricityUsage.js

import React, { Component } from 'react';
import styled from 'styled-components';
import Graph from './Graph';

class ElectricityUsage extends Component {
  state = {
    action: false
  };

  shouldComponentUpdate(nextProps) {
    return this.props.match.type !== nextProps.match.type;
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      action: nextProps.match.type === 'full'
    });
  }

  render() {
    return (
      <Wrap>
        <Signal>
        {this.state.action ? 'ELE ON' : 'ELE OFF'}
        </Signal>
        <Graph
          animation={this.state.action}
          classname="js--electricity"
          label="Electricity"
          color="hotpink"
        />
      </Wrap>
    );
  }
}

const Wrap = styled.div`
  width: 100vw;
  height: 50vh;
  background: deepskyblue;
`;

const Signal = styled.span`
  padding: 0.5em;
  color: #999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;

export default ElectricityUsage;

Graph.js

import React, { Component } from 'react';
import styled from 'styled-components';
import anime from 'animejs';

class Graph extends Component {
  state = {
    action: false,
    count: 0,
    graph: null
  };

  componentDidMount() {
    const animationDOM = anime({
      autoplay: false,
      targets: `.${this.props.classname}`,
      translateX: [{ value: 100, duration: 1200 }],
      rotate: '1turn',
      backgroundColor: '#3c00ff',
      duration: 1000,
      delay: 300
    });
    this.setState({
      action: this.props.animation,
      graph: animationDOM
    });
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      action: nextProps.animation
    });
  }

  componentDidUpdate(prevProps, prevState) {
    this.state.graph.reset();
    if (this.props.animation) {
      return this.state.graph.play();
    }
  }

  render() {
    return (
      <Wrap>
        <h1>{`HELLO ${this.props.label}`}</h1>
        <Circle ref={this.circleRef} {...this.props}>
          <CountText>{this.state.action ? 'ON' : 'OFF'}</CountText>
        </Circle>
      </Wrap>
    );
  }
}

const Wrap = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;

const Circle = styled.div.attrs({
  className: props => (props.classname ? props.classname : '')
})`
  margin-top: 1em;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: ${props => (props.color ? props.color : 'hotpink')};
`;

const CountText = styled.h2`
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
`;

export default Graph;