context-styled-16.7.js

import React, { Component } from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { modularScale, hiDPI } from 'polished';
import Grid from 'styled-components-grid';

import defaultState from './context';

const extraWrestler = {
	id: 3,
	name: 'Shawn Michaels'
};

const Title = styled.h1`
	text-transform: uppercase;
	font-size: ${modularScale(2)};
	color: red;

	${hiDPI(1.5)} {
		font-size: ${modularScale(2.5)};
	}
`;

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0.5em 1em;
  padding: 0.25em 1em;
`;


const theme = {
	breakpoints: {
		xs: 0,
		sm: 576,
		md: 768,
		lg: 1200
	}
};

const GameContext = React.createContext();

class App extends Component {
	constructor(props) {
		super(props);
		this.state = defaultState;
	}
	render() {
		return (
			<ThemeProvider theme={theme}>
				<GameContext.Provider
					value={{
						state: this.state,
						actions: {
							onAddWrestler: () => this.setState({ roster: this.state.roster.concat(extraWrestler) }),
							onShuffleWrestlers: () => this.setState({ roster: this.state.roster.splice(0, this.state.roster.length - 1) })
						}
					}}
				>
					<Grid>
						<Grid.Unit size={{ xs: 1, sm: 1 / 2, md: 1 / 3, lg: 1 / 4 }}>
							<GameContext.Consumer>
								{({ state: { brands } }) => <Title>{brands.map((brand) => brand.name)}</Title>}
							</GameContext.Consumer>
						</Grid.Unit>
						<GameContext.Consumer>
							{({ actions: { onAddWrestler } }) => <Button onClick={onAddWrestler}>Add</Button>}
						</GameContext.Consumer>
						<GameContext.Consumer>
							{({ actions: { onShuffleWrestlers } }) => <Button onClick={onShuffleWrestlers}>Remove</Button>}
						</GameContext.Consumer>
						<Grid.Unit size={{ xs: 1, sm: 1 / 2, md: 1 / 3, lg: 1 / 4 }}>
							<GameContext.Consumer>
								{({ state: { roster } }) => roster.map((wrestler) => <Title>{wrestler.name}</Title>)}
							</GameContext.Consumer>
						</Grid.Unit>
					</Grid>
				</GameContext.Provider>
			</ThemeProvider>
		);
	}
}

export default App;