Use of HOCs to isolate behavior.

PostHOCApp.js

import React, { Component } from "react";
import styled from "styled-components";
import SwipeableViews from "react-swipeable-views";
import Nav from "./components/Nav";
import Player from "./components/Player";
import Mensajes from "./components/Mensajes";

const AppContainer = styled.div`
  height: 100vh;

  display: flex;
  flex-direction: column;
`;

const PageContainer = styled.div`
  flex: 1;
`;

class App extends Component {
  render() {
    const { nav, player } = this.props;
    return (
      <AppContainer>
        <Nav index={nav.index} setIndex={nav.setIndex} />
        <PageContainer>
          <SwipeableViews
            style={{ height: "100%" }}
            containerStyle={{ height: "100%" }}
            index={nav.index}
            onChangeIndex={nav.setIndex}
          >
            <Player
              audio={player.audio}
              playing={player.playing}
              onToggle={player.toggle}
            />
            <Mensajes />
          </SwipeableViews>
        </PageContainer>
      </AppContainer>
    );
  }
}

// Provides an audio player through the prop player with:
// audio: reference to the HTMLAudioElement
// playing: boolean
// toggle: function that toggles the playing state
const withPlayer = WrappedComponent =>
  class extends Component {
    constructor(props) {
      super(props);
      this.state = {
        playing: false
      };
      this.audio = new Audio();
      this.audio.crossOrigin = "anonymous";
      this.audio.src = "http://streaming308.radionomy.com/80sPlanet";
    }

    toggle = () => {
      if (!this.state.playing) {
        this.audio.play();
        this.setState({ playing: true });
      } else {
        this.audio.pause();
        this.setState({ playing: false });
      }
    };

    render() {
      return (
        <WrappedComponent
          player={{
            audio: this.audio,
            playing: this.state.playing,
            toggle: this.toggle
          }}
          {...this.props}
        />
      );
    }
  };

// Provides really simple navigation capabilities through
// a nav prop that has:
// index: index of selected view
// setIndex: function to change the selected view
const withNavigation = WrappedComponent =>
  class extends Component {
    constructor(props) {
      super(props);
      this.state = {
        index: 0
      };
    }

    setIndex = index => this.setState({ index });

    render() {
      return (
        <WrappedComponent
          nav={{ index: this.state.index, setIndex: this.setIndex }}
          {...this.props}
        />
      );
    }
  };

export default withPlayer(withNavigation(App));

PreHOCApp.js

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import styled from "styled-components";
import SwipeableViews from "react-swipeable-views";
import Nav from "./components/Nav";
import Player from "./components/Player";
import Mensajes from "./components/Mensajes";

const AppContainer = styled.div`
  height: 100vh;

  display: flex;
  flex-direction: column;
`;

const PageContainer = styled.div`
  flex: 1;
`;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      playing: false,
      loading: false,
      index: 0
    };
    this.audio = new Audio();
    this.audio.crossOrigin = "anonymous";
    this.audio.src = "http://streaming308.radionomy.com/80sPlanet";
  }

  toggle = () => {
    if (!this.state.playing) {
      this.audio.play();
      this.setState({ playing: true });
    } else {
      this.audio.pause();
      this.setState({ playing: false });
    }
  };

  setIndex = i => {
    this.setState({ index: i });
  };

  render() {
    return (
      <AppContainer>
        <Nav index={this.state.index} setIndex={this.setIndex} />
        <PageContainer>
          <SwipeableViews
            style={{ height: "100%" }}
            containerStyle={{ height: "100%" }}
            index={this.state.index}
            onChangeIndex={this.setIndex}
          >
            <Player
              audio={this.audio}
              playing={this.state.playing}
              onToggle={this.toggle}
            />
            <Mensajes />
          </SwipeableViews>
        </PageContainer>
      </AppContainer>
    );
  }
}

export default App;