-
Notifications
You must be signed in to change notification settings - Fork 18
/
App.jsx
61 lines (54 loc) · 1.48 KB
/
App.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
import React, {Component} from 'react'
import Search from '../../components/Search/Search'
import Header from '../../components/Header/Header'
import Project from '../../components/Project/Project'
import styles from './App.css'
import lib from '../../lib/utils'
import projects from '../../data/projects'
import store from '../../lib/state'
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
projects: projects
};
this.inputChange = this.inputChange.bind(this);
}
componentDidMount() {
// use query param
let searchText = this.props.location.search.substring(1);
if (searchText) { // optimize, only needed when search has something
lib.setSearch(searchText);
return;
}
// use internal state
let st = store.getState();
if (st.search !== undefined && st.search){
lib.setSearch(st.search);
}
}
inputChange(event) {
this.setState({
projects: lib.filterProjects(projects, event.target.value)
});
}
render() {
let projectDOM = this.state.projects.map((p) =>
<Project key={p.id} {...p}/>
);
return (
<div className={styles.app}>
<header className={styles.headerDiv}>
<Header/>
<Search changeHandler={this.inputChange}/>
</header>
<div className={styles.content}>
{projectDOM}
</div>
<footer className={styles.footerDiv}>
<div>Icons made by <a href="https://www.flaticon.com/authors/dave-gandy" title="Dave Gandy">Dave Gandy</a></div>
</footer>
</div>
)
}
}