React-Router-Apple-Nav/apple-nav/src/App.js at 621aa4b3fcbe7cb869e6186abeed6b2e02668cba · bloominstituteoftechnology/React-Router-Apple-Nav · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import React, { Component } from 'react';
import Data from './data';
import styled, { createGlobalStyle } from '../node_modules/styled-components';
import PropTypes from 'prop-types';

import NavBar from './components/NavBar';

const GlobalStyle = createGlobalStyle`
html {
  font-size: 62.5%;
}
body{
  box-sizing: border-box;
  background: ${(props) => props.theme};
  margin: 0;
  }
`;

const AppContainer = styled.div`
	width: 100%;
`;

class App extends Component {
	constructor(props) {
		super(props);
		this.state = {
			data: [],
			color: 'bisque',
			colorOptions: [
				'coral',
				'orchid',
				'yellow',
				'yellowgreen',
				'paleturquoise',
				'slateblue',
				'plum',
				'lightpink',
				'sandybrown'
			]
		};
	}

	componentDidMount() {
		this.setState({
			data: Data
		});
	}

	handleClick = () => {
		return this.state.color === 'bisque'
			? this.setState({
					color: this.state.colorOptions[0]
			  })
			: this.state.color === this.state.colorOptions[0]
			? this.setState({
					color: this.state.colorOptions[1]
			  })
			: this.state.color === this.state.colorOptions[1]
			? this.setState({
					color: this.state.colorOptions[2]
			  })
			: this.state.color === this.state.colorOptions[2]
			? this.setState({
					color: this.state.colorOptions[3]
			  })
			: this.state.color === this.state.colorOptions[3]
			? this.setState({
					color: this.state.colorOptions[4]
			  })
			: this.state.color === this.state.colorOptions[4]
			? this.setState({
					color: this.state.colorOptions[5]
			  })
			: this.state.color === this.state.colorOptions[5]
			? this.setState({
					color: this.state.colorOptions[6]
			  })
			: this.state.color === this.state.colorOptions[6]
			? this.setState({
					color: this.state.colorOptions[7]
			  })
			: this.state.color === this.state.colorOptions[7]
			? this.setState({
					color: this.state.colorOptions[8]
			  })
			: this.state.color === this.state.colorOptions[8]
			? this.setState({
					color: this.state.colorOptions[0]
			  })
			: null;
	};

	render() {
		return (
			<React.Fragment>
				<GlobalStyle theme={this.state.color} />
				<AppContainer>
					<NavBar list={this.state.data} handleClick={this.handleClick} />
				</AppContainer>
			</React.Fragment>
		);
	}
}

export default App;

App.propTypes = {
	data: PropTypes.array
};