Skip to content

Commit 18b3736

Browse files
alexloberaalexlobera
committed
removes deconstractings
1 parent 7f47276 commit 18b3736

4 files changed

Lines changed: 161 additions & 161 deletions

File tree

‎src/components/App.js‎

Lines changed: 147 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -5,173 +5,173 @@ import Header from './Header'
55
import books from '../mocks/books'
66

77
class App extends React.Component {
8-
constructor () {
9-
super()
10-
this.state = {
11-
books: books,
12-
selectedFilter: 'All',
13-
menu: { open : false }
8+
constructor() {
9+
super()
10+
this.state = {
11+
books: books,
12+
selectedFilter: 'All',
13+
menu: { open: false }
14+
}
1415
}
15-
}
1616

17-
toggleMenu = () => {
18-
this.setState({ menu : { open: !this.state.menu.open } })
19-
}
17+
toggleMenu = () => {
18+
this.setState({ menu: { open: !this.state.menu.open } })
19+
}
2020

21-
selectFilter = ( filter ) => {
22-
this.setState({
23-
selectedFilter: filter,
24-
books: filter === 'All'? books : books.filter( book => (book.category === filter) )
25-
})
26-
}
21+
selectFilter = (filter) => {
22+
this.setState({
23+
selectedFilter: filter,
24+
books: filter === 'All' ? books : books.filter(book => (book.category === filter))
25+
})
26+
}
2727

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

38-
const tabItems = filters.map(filter => (
39-
<li className={ filter === selectedFilter ? 'active': '' } key={ filter } onClick={() => this.selectFilter(filter) }>
40-
<a href="#0">{ filter }</a>
41-
</li>
42-
))
38+
const tabItems = filters.map(filter => (
39+
<li className={filter === this.state.selectedFilter ? 'active' : ''} key={filter} onClick={() => this.selectFilter(filter)}>
40+
<a href="#0">{filter}</a>
41+
</li>
42+
))
4343

44-
return (
45-
<div id="page-wrap">
44+
return (
45+
<div id="page-wrap">
4646

47-
<Menu
48-
pageWrapId="page-wrap"
49-
isOpen={ menu.open }
50-
toggleMenu={ this.toggleMenu }
51-
/>
47+
<Menu
48+
pageWrapId="page-wrap"
49+
isOpen={this.state.menu.open}
50+
toggleMenu={this.toggleMenu}
51+
/>
5252

53-
<nav className="navbar navbar-default navbar-fixed-top navbar-custom">
54-
<div className="container">
55-
<div className="navbar-header">
56-
<a className="navbar-brand">ReactJS Academy</a>
57-
</div>
58-
<ul className="nav navbar-nav pull-right">
59-
<li className="hidden-xs">
60-
<a href="#about">About us</a>
61-
</li>
62-
<li>
63-
<button onClick={ this.toggleMenu } className="btn btn-lg btn-outline">
64-
<i className="fa fa-graduation-cap"></i> <span>Training</span>
65-
</button>
66-
</li>
67-
</ul>
68-
</div>
69-
</nav>
53+
<nav className="navbar navbar-default navbar-fixed-top navbar-custom">
54+
<div className="container">
55+
<div className="navbar-header">
56+
<a className="navbar-brand">ReactJS Academy</a>
57+
</div>
58+
<ul className="nav navbar-nav pull-right">
59+
<li className="hidden-xs">
60+
<a href="#about">About us</a>
61+
</li>
62+
<li>
63+
<button onClick={this.toggleMenu} className="btn btn-lg btn-outline">
64+
<i className="fa fa-graduation-cap"></i> <span>Training</span>
65+
</button>
66+
</li>
67+
</ul>
68+
</div>
69+
</nav>
7070

71-
<Header title="Library" />
71+
<Header title="Library" />
7272

73-
<section id="books">
74-
<div className="container">
75-
<div className="row">
76-
<div className="col-lg-12 text-center">
77-
<h2>Books</h2>
78-
<hr className="star-primary" />
79-
</div>
80-
</div>
81-
<div className="row">
82-
<div className="col-lg-12">
83-
<ul className="nav nav-pills text-center">
84-
{ tabItems }
85-
</ul>
86-
</div>
87-
</div>
88-
<div className="row book-list">
89-
{ books.map( book => (
90-
<div className="col-xs-6 col-sm-3" key={ book.id }>
91-
<div className="thumbnail">
92-
<img alt="" className="img-responsive" src={ book.cover }/>
93-
</div>
94-
</div>
95-
)) }
96-
</div>
97-
</div>
98-
</section>
99-
100-
<section id="about" className="success">
101-
<div className="container">
102-
<div className="row">
103-
<div className="col-lg-12 text-center">
104-
<h2>About The Library</h2>
105-
<hr className="star-light" />
106-
</div>
107-
</div>
108-
<div className="row">
109-
<div className="col-lg-4 col-lg-offset-2">
110-
<p>This library is an exercise for building UI in a <strong style={{textDecoration: 'underline'}}>declarative way</strong>. This web site will help you understand the fundamental piece of ReactJS, components. You'll learn how to break an app in components (AKA componentization) and flow data accross them.</p>
111-
</div>
112-
<div className="col-lg-4">
113-
<p>This ReactJS web site works, but it's not well implemented. The problem, the developer didn't think in React and there aren't many components. We challenge you to fork the repo an componentizise the app to unleash the power of ReactJS.</p>
114-
</div>
115-
<div className="col-lg-8 col-lg-offset-2 text-center">
116-
<a target="_blank" rel="noopener noreferrer" href="https://github.com/leanjscom/thinking-in-react" className="btn btn-lg btn-outline">
117-
<i className="fa fa-code-fork"></i> Fork me on Github
118-
</a>
73+
<section id="books">
74+
<div className="container">
75+
<div className="row">
76+
<div className="col-lg-12 text-center">
77+
<h2>Books</h2>
78+
<hr className="star-primary" />
79+
</div>
80+
</div>
81+
<div className="row">
82+
<div className="col-lg-12">
83+
<ul className="nav nav-pills text-center">
84+
{tabItems}
85+
</ul>
86+
</div>
87+
</div>
88+
<div className="row book-list">
89+
{this.state.books.map(book => (
90+
<div className="col-xs-6 col-sm-3" key={book.id}>
91+
<div className="thumbnail">
92+
<img alt="" className="img-responsive" src={book.cover} />
93+
</div>
94+
</div>
95+
))}
96+
</div>
11997
</div>
120-
</div>
121-
</div>
122-
</section>
98+
</section>
12399

124-
<footer className="text-center">
125-
<div className="footer-above">
126-
<div className="container">
127-
<div className="row">
128-
<div className="footer-col col-md-4">
129-
<h3>Main Location</h3>
130-
<p>
131-
<span>1 St. Katharine's Way</span>
132-
<br />
133-
<span>London, E1W 1UN</span>
134-
</p>
100+
<section id="about" className="success">
101+
<div className="container">
102+
<div className="row">
103+
<div className="col-lg-12 text-center">
104+
<h2>About The Library</h2>
105+
<hr className="star-light" />
106+
</div>
135107
</div>
136-
<div className="footer-col col-md-4">
137-
<h3>Around the Web</h3>
138-
<ul className="list-inline">
139-
<li>
140-
<a target="_blank" rel="noopener noreferrer" href="https://github.com/leanjscom" className="btn-social btn-outline"><i className="fa fa-fw fa-github"></i></a>
141-
</li>
142-
<li>
143-
<a target="_blank" rel="noopener noreferrer" href="https://twitter.com/leanjscom" className="btn-social btn-outline"><i className="fa fa-fw fa-twitter"></i></a>
144-
</li>
145-
<li>
146-
<a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/leanjscom/" className="btn-social btn-outline"><i className="fa fa-fw fa-instagram"></i></a>
147-
</li>
148-
</ul>
108+
<div className="row">
109+
<div className="col-lg-4 col-lg-offset-2">
110+
<p>This library is an exercise for building UI in a <strong style={{ textDecoration: 'underline' }}>declarative way</strong>. This web site will help you understand the fundamental piece of ReactJS, components. You'll learn how to break an app in components (AKA componentization) and flow data accross them.</p>
111+
</div>
112+
<div className="col-lg-4">
113+
<p>This ReactJS web site works, but it's not well implemented. The problem, the developer didn't think in React and there aren't many components. We challenge you to fork the repo an componentizise the app to unleash the power of ReactJS.</p>
114+
</div>
115+
<div className="col-lg-8 col-lg-offset-2 text-center">
116+
<a target="_blank" rel="noopener noreferrer" href="https://github.com/leanjscom/thinking-in-react" className="btn btn-lg btn-outline">
117+
<i className="fa fa-code-fork"></i> Fork me on Github
118+
</a>
119+
</div>
149120
</div>
150-
<div className="footer-col col-md-4">
151-
<h3>About ReactJS Academy</h3>
152-
<p>
153-
<a href="https://reactjs.academy/">ReactJS Academy</a>
154-
<span>
155-
ReactJS Academy is Europes longest running dedicated React, Redux, and GraphQL training.
121+
</div>
122+
</section>
123+
124+
<footer className="text-center">
125+
<div className="footer-above">
126+
<div className="container">
127+
<div className="row">
128+
<div className="footer-col col-md-4">
129+
<h3>Main Location</h3>
130+
<p>
131+
<span>1 St. Katharine's Way</span>
132+
<br />
133+
<span>London, E1W 1UN</span>
134+
</p>
135+
</div>
136+
<div className="footer-col col-md-4">
137+
<h3>Around the Web</h3>
138+
<ul className="list-inline">
139+
<li>
140+
<a target="_blank" rel="noopener noreferrer" href="https://github.com/leanjscom" className="btn-social btn-outline"><i className="fa fa-fw fa-github"></i></a>
141+
</li>
142+
<li>
143+
<a target="_blank" rel="noopener noreferrer" href="https://twitter.com/leanjscom" className="btn-social btn-outline"><i className="fa fa-fw fa-twitter"></i></a>
144+
</li>
145+
<li>
146+
<a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/leanjscom/" className="btn-social btn-outline"><i className="fa fa-fw fa-instagram"></i></a>
147+
</li>
148+
</ul>
149+
</div>
150+
<div className="footer-col col-md-4">
151+
<h3>About ReactJS Academy</h3>
152+
<p>
153+
<a href="https://reactjs.academy/">ReactJS Academy</a>
154+
<span>
155+
ReactJS Academy is Europes longest running dedicated React, Redux, and GraphQL training.
156156
</span>
157-
</p>
157+
</p>
158+
</div>
159+
</div>
158160
</div>
159161
</div>
160-
</div>
161-
</div>
162-
<div className="footer-below">
163-
<div className="container">
164-
<div className="row">
165-
<div className="col-lg-12">
166-
<span>Copyright &copy;</span> <a href="https://leanjs.com/" target="_blank" rel="noopener noreferrer">LeanJS</a>
162+
<div className="footer-below">
163+
<div className="container">
164+
<div className="row">
165+
<div className="col-lg-12">
166+
<span>Copyright &copy;</span> <a href="https://leanjs.com/" target="_blank" rel="noopener noreferrer">LeanJS</a>
167+
</div>
168+
</div>
167169
</div>
168170
</div>
169-
</div>
171+
</footer>
170172
</div>
171-
</footer>
172-
</div>
173-
)
174-
}
173+
)
174+
}
175175
}
176176

177177
export default App

‎src/components/Navigations/Menu.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@ import React from 'react'
33
import SideMenu from './Menus/SideMenu'
44
import SideMenuItem from './Menus/SideMenuItem'
55

6-
const Menu = ({ isOpen, pageWrapId, toggleMenu}) => (
6+
const Menu = (props) => (
77
<SideMenu
8-
isOpen={ isOpen }
9-
toggleMenu={ toggleMenu }
8+
isOpen={props.isOpen}
9+
toggleMenu={props.toggleMenu}
1010
>
1111
<h4>
12-
Next Courses <a onClick={() => toggleMenu() } style={{ cursor: 'pointer' }}><i className="fa fa-close pull-right"></i></a>
12+
Next Courses <a onClick={() => props.toggleMenu()} style={{ cursor: 'pointer' }}><i className="fa fa-close pull-right"></i></a>
1313
</h4>
14-
<SideMenuItem link="https://leanjs.com/training/react-redux-graphql-london">London</SideMenuItem>
15-
<SideMenuItem link="https://leanjs.com/training/react-redux-graphql-london#redux-training-day">Redux Day</SideMenuItem>
16-
<SideMenuItem link="https://leanjs.com/training/react-redux-graphql-london#advanced-react-training-day">Advanced React</SideMenuItem>
14+
<SideMenuItem link="https://reactjs.academy/react-redux-training-london/">London part-time course</SideMenuItem>
15+
<SideMenuItem link="https://reactjs.academy/react-redux-graphql-bootcamp-london/">London Bootcamp</SideMenuItem>
16+
<SideMenuItem link="https://reactjs.academy/react-redux-graphql-bootcamp-lisbon/">Lisbon Bootcamp</SideMenuItem>
1717
<SideMenuItem>GraphQL (comming soon)</SideMenuItem>
1818

1919
</SideMenu>

‎src/components/Navigations/Menus/SideMenu.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React from 'react'
22
import * as BurgerMenu from 'react-burger-menu'
33

4-
const SideMenu = ({ isOpen, children, pageWrapId }) => (
4+
const SideMenu = (props) => (
55
<div>
66
<BurgerMenu.slide
7-
isOpen={ isOpen }
8-
pageWrapId={ pageWrapId || 'page-wrap' }
7+
isOpen={props.isOpen}
8+
pageWrapId={props.pageWrapId || 'page-wrap'}
99
>
10-
{ children }
10+
{props.children}
1111
</BurgerMenu.slide>
1212
</div>
1313
)

‎src/components/Navigations/Menus/SideMenuItem.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react'
22

3-
const SideMenuItem = ({ children, link }) => (
3+
const SideMenuItem = (props) => (
44
<p>
5-
<a href={ link } target="_blank" rel="noopener noreferrer" style={{ cursor: 'pointer' }}>
6-
{ children }
5+
<a href={props.link} target="_blank" rel="noopener noreferrer" style={{ cursor: 'pointer' }}>
6+
{props.children}
77
</a>
88
</p>
99
)

0 commit comments

Comments
 (0)