-
Notifications
You must be signed in to change notification settings - Fork 7
/
home.jsx
152 lines (135 loc) · 4 KB
/
home.jsx
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
import React, {PropTypes} from "react";
import {connect} from "react-redux";
import {createFilter} from "react-search-input";
import {AboveTheFoldOnlyServerRender} from "above-the-fold-only-server-render";
import SearchIcon from "material-ui/svg-icons/action/search";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import {Card, CardMedia, CardTitle} from "material-ui/Card";
import TextField from "material-ui/TextField";
import Header from "./header";
import BeerList from "./beer-list";
import Footer from "./footer";
import beerMapImage from "../images/beer-map.png";
import {fetchBeers} from "../actions";
const KEYS_TO_FILTERS = ["name"];
const styles = {
beerList: {
minHeight: "800px",
textAlign: "-webkit-center"
},
header: {
fontSize: "40px",
paddingTop: "360px",
paddingBottom: "3%",
textAlign: "center"
},
subText: {
margin: "0 auto",
fontSize: "20px",
width: "90%",
textAlign: "justify",
lineHeight: "40px",
paddingBottom: "2%"
},
search: {
textAlign: "center",
paddingBottom: "3%"
},
overlayContentStyle: {
fontFamily: "'Gabriela', serif",
textAlign: "center",
height: "50%",
backgroundColor: "rgba(0,0,0,0)"
}
};
/*eslint no-class-assign: 0*/
/*eslint react/no-did-mount-set-state: 0*/
export class Home extends React.Component {
constructor(...args) {
super(...args);
this.state = {searchTerm: ""};
this.handleSearchUpdate = this.handleSearchUpdate.bind(this);
}
componentDidMount() {
const {dispatch, location} = this.props;
dispatch(fetchBeers(location.query.prefetch_cards));
}
handleSearchUpdate(term) {
this.setState({searchTerm: term.target.value});
}
render() {
const filteredStyles = this.props.data.filter(
createFilter(this.state.searchTerm, KEYS_TO_FILTERS)
);
return (
<MuiThemeProvider>
<div>
<Header
image="header"
title="Progressive Beer"
subtitle="Life, Liberty, and the Pursuit of Beer"
phone={this.props.phone}
/>
<h1 style={styles.header}>Explore</h1>
<p style={styles.subText}>There are so many great beers around the world.
Sometimes it can be hard to keep track of all the different kinds!
Progressive Beer is a handy web app that is designed to help you learn
everything there is to know about beers! Explore the many beer styles in
list below for more information.</p>
<div style={styles.search}>
<TextField
className="search-input"
floatingLabelText="Filter Beer Styles"
value={this.state.searchTerm}
onChange={this.handleSearchUpdate}
/>
<SearchIcon/>
</div>
<div style={styles.beerList}>
<BeerList beers={filteredStyles} phone={this.props.phone}/>
</div>
<AboveTheFoldOnlyServerRender skip={true}>
<div>
<Card>
<CardMedia
overlay={<CardTitle title="Beer from around the world!" />}
overlayContentStyle={styles.overlayContentStyle}
>
<img src={beerMapImage} alt="Beer Map" />
</CardMedia>
</Card>
<br />
<Footer />
</div>
</AboveTheFoldOnlyServerRender>
</div>
</MuiThemeProvider>
);
}
}
// Adds dispatch to props
Home = connect()(Home);
Home.propTypes = {
data: PropTypes.arrayOf(PropTypes.object),
phone: PropTypes.bool,
location: PropTypes.object,
dispatch: PropTypes.func
};
class HomeWrapper extends React.Component {
render() {
return (
<Home {...this.props} />
);
}
}
HomeWrapper.propTypes = {
data: PropTypes.arrayOf(PropTypes.object),
phone: PropTypes.bool
};
const mapStateToProps = (state) => ({
data: state && state.data,
phone: state.phone
});
export default connect(
mapStateToProps
)(HomeWrapper);