Skip to content

Commit a165d20

Browse files
alexloberaalexlobera
committed
refactores filters and class properties
1 parent 33db9cc commit a165d20

3 files changed

Lines changed: 37 additions & 47 deletions

File tree

‎src/components/App.js‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,42 @@ import React from 'react'
22

33
import Menu from './Navigations/Menu'
44
import Header from './Header'
5-
6-
import filters from '../mocks/filters'
75
import books from '../mocks/books'
86

97
class App extends React.Component {
108
constructor () {
119
super()
12-
this.selectTab = this.selectTab.bind(this)
13-
this.toggleMenu = this.toggleMenu.bind(this)
1410
this.state = {
15-
books,
16-
filters,
11+
books: books,
12+
selectedFilter: 'All',
1713
menu: { open : false }
1814
}
1915
}
2016

21-
toggleMenu () {
17+
toggleMenu = () => {
2218
this.setState({ menu : { open: !this.state.menu.open } })
2319
}
2420

25-
selectTab ( category ) {
21+
selectFilter = ( filter ) => {
2622
this.setState({
27-
filters: filters.map(filter => ({
28-
...filter, selected: filter.category === category
29-
})),
30-
books: category === 'All'? books : books.filter( book => (book.category === category) ),
23+
selectedFilter: filter,
24+
books: filter === 'All'? books : books.filter( book => (book.category === filter) )
3125
})
3226
}
3327

3428
render() {
35-
const { books, filters, menu } = this.state
29+
const { books, menu, selectedFilter } = this.state
30+
const filters = [
31+
'All',
32+
'Web',
33+
'Mobile',
34+
'DevOps',
35+
'Essentials',
36+
]
3637

3738
const tabItems = filters.map(filter => (
38-
<li className={ filter.selected? 'active': '' } key={ filter.category } onClick={ this.selectTab.bind(null, filter.category) }>
39-
<a href="#0">{ filter.category }</a>
39+
<li className={ filter === selectedFilter ? 'active': '' } key={ filter } onClick={() => this.selectFilter(filter) }>
40+
<a href="#0">{ filter }</a>
4041
</li>
4142
))
4243

@@ -86,7 +87,7 @@ class App extends React.Component {
8687
</div>
8788
<div className="row book-list">
8889
{ books.map( book => (
89-
<div className="col-xs-6 col-sm-3" key={ book.title }>
90+
<div className="col-xs-6 col-sm-3" key={ book.id }>
9091
<div className="thumbnail">
9192
<img alt="" className="img-responsive" src={ book.cover }/>
9293
</div>

‎src/mocks/books.js‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
const images = '/img/books'
22

33
const books = [
4-
{ title: 'Learning React', cover: `${images}/learning-react.jpg`, category: 'Web' },
5-
{ title: 'Learn design pattern', cover: `${images}/designpattern.jpg`, category: 'Essentials'},
6-
{ title: 'React Up and Running', cover: `${images}/react-up.jpg`, category: 'Web' },
7-
{ title: 'Learning React Native', cover: `${images}/reactnative.jpg`, category: 'Mobile' },
8-
{ title: 'React Native CookBook', cover: `${images}/react-native-cookbook.jpg`, category: 'Mobile' },
9-
{ title: 'Bootstrap 4 Blueprints', cover: `${images}/bootstrap4-blue.jpg`, category: 'Ux' },
10-
{ title: 'AWS System Administration', cover: `${images}/aws-admin.jpg`, category: 'DevOps' },
11-
{ title: 'Effective DevOps', cover: `${images}/effective-devops.jpg`, category: 'DevOps' },
12-
{ title: 'Kubernetes Up & Running', cover: `${images}/kubernetes.jpg`, category: 'DevOps' },
13-
{ title: 'Using Docker', cover: `${images}/using-docker.jpg`, category: 'DevOps' },
14-
{ title: 'Learning Angular JS', cover: `${images}/learning-angularjs.jpg`, category: 'Web' },
15-
{ title: 'Angular JS', cover: `${images}/angularjs.jpg`, category: 'Web' },
16-
{ title: 'Angular JS 2', cover: `${images}/angular2-ninja.jpg`, category: 'Web' },
17-
{ title: 'Getting Better in JavaScript', cover: `${images}/javascript.jpg`, category: 'Outdated' },
18-
{ title: 'Javascript Testing Jasmine', cover: `${images}/test-jasmine.jpg`, category: 'Test' },
19-
{ title: 'Eloquent Javascript', cover: `${images}/eloquent-js.jpg`, category: 'Essentials'},
20-
{ title: 'Building Microservices', cover: `${images}/microservices.jpg`, category: 'DevOps'},
21-
{ title: 'DevOps Handbook', cover: `${images}/devops-handbook.jpg`, category: 'DevOps' },
22-
{ title: 'Setting up nginx', cover: `${images}/nginx.jpg`, category: 'DevOps'},
23-
{ title: 'Getting started React Native', cover: `${images}/get-start-react-native.jpg`, category: 'Mobile' },
4+
{ id: 1, title: 'Learning React', cover: `${images}/learning-react.jpg`, category: 'Web' },
5+
{ id: 2, title: 'Learn design pattern', cover: `${images}/designpattern.jpg`, category: 'Essentials'},
6+
{ id: 3, title: 'React Up and Running', cover: `${images}/react-up.jpg`, category: 'Web' },
7+
{ id: 4, title: 'Learning React Native', cover: `${images}/reactnative.jpg`, category: 'Mobile' },
8+
{ id: 5, title: 'React Native CookBook', cover: `${images}/react-native-cookbook.jpg`, category: 'Mobile' },
9+
{ id: 6, title: 'Bootstrap 4 Blueprints', cover: `${images}/bootstrap4-blue.jpg`, category: 'Ux' },
10+
{ id: 7, title: 'AWS System Administration', cover: `${images}/aws-admin.jpg`, category: 'DevOps' },
11+
{ id: 8, title: 'Effective DevOps', cover: `${images}/effective-devops.jpg`, category: 'DevOps' },
12+
{ id: 9, title: 'Kubernetes Up & Running', cover: `${images}/kubernetes.jpg`, category: 'DevOps' },
13+
{ id: 11, title: 'Using Docker', cover: `${images}/using-docker.jpg`, category: 'DevOps' },
14+
{ id: 12, title: 'Learning Angular JS', cover: `${images}/learning-angularjs.jpg`, category: 'Web' },
15+
{ id: 13, title: 'Angular JS', cover: `${images}/angularjs.jpg`, category: 'Web' },
16+
{ id: 14, title: 'Angular JS 2', cover: `${images}/angular2-ninja.jpg`, category: 'Web' },
17+
{ id: 15, title: 'Getting Better in JavaScript', cover: `${images}/javascript.jpg`, category: 'Outdated' },
18+
{ id: 16, title: 'Javascript Testing Jasmine', cover: `${images}/test-jasmine.jpg`, category: 'Test' },
19+
{ id: 17, title: 'Eloquent Javascript', cover: `${images}/eloquent-js.jpg`, category: 'Essentials'},
20+
{ id: 18, title: 'Building Microservices', cover: `${images}/microservices.jpg`, category: 'DevOps'},
21+
{ id: 19, title: 'DevOps Handbook', cover: `${images}/devops-handbook.jpg`, category: 'DevOps' },
22+
{ id: 20, title: 'Setting up nginx', cover: `${images}/nginx.jpg`, category: 'DevOps'},
23+
{ id: 21, title: 'Getting started React Native', cover: `${images}/get-start-react-native.jpg`, category: 'Mobile' },
2424
]
2525

2626
export default books

‎src/mocks/filters.js‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

0 commit comments

Comments
 (0)