Skip to content

Commit ac20130

Browse files
alexloberaalexlobera
committed
update exercise
1 parent 8735c4a commit ac20130

File tree

8 files changed

+206
-257
lines changed

8 files changed

+206
-257
lines changed

‎src/components/About.js

-49
This file was deleted.

‎src/components/App.js

+192-8
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,215 @@
11
import React, { useState } from 'react'
22

33
import Menu from './Navigations/Menu'
4-
import Navbar from './Navigations/Navbar'
54
import Header from './Header'
6-
import Books from './Books'
7-
import Footer from './Footer'
8-
import About from './About'
5+
import booksMockData from '../mocks/books'
96

107
function App() {
8+
const [books, setBooks] = useState(booksMockData)
119
const [isMenuOpen, setIsMenuOpen] = useState(false)
10+
const [selectedFilter, setSelectedFilter] = useState('All')
1211

1312
const toggleMenu = () => {
1413
setIsMenuOpen(!isMenuOpen)
1514
}
1615

16+
const selectFilter = (filter) => {
17+
setSelectedFilter(filter)
18+
setBooks(
19+
filter === 'All'
20+
? booksMockData
21+
: booksMockData.filter((book) => book.category === filter)
22+
)
23+
}
24+
25+
const filters = ['All', 'Design', 'Mobile', 'DevOps', 'Essentials']
26+
27+
const tabItems = filters.map((filter) => (
28+
<li
29+
className={filter === selectedFilter ? 'active' : ''}
30+
key={filter}
31+
onClick={() => selectFilter(filter)}
32+
>
33+
<a href="#0">{filter}</a>
34+
</li>
35+
))
36+
1737
return (
1838
<div id="page-wrap">
1939
<Menu
2040
pageWrapId="page-wrap"
2141
isOpen={isMenuOpen}
2242
toggleMenu={toggleMenu}
2343
/>
24-
<Navbar toggleMenu={toggleMenu} />
44+
45+
<nav className="navbar navbar-default navbar-fixed-top navbar-custom">
46+
<div className="container">
47+
<div className="navbar-header">
48+
<a className="navbar-brand" href="/">
49+
Library
50+
</a>
51+
</div>
52+
<ul className="nav navbar-nav pull-right">
53+
<li className="hidden-xs">
54+
<a href="#about">About us</a>
55+
</li>
56+
<li>
57+
<button onClick={toggleMenu} className="btn btn-lg btn-outline">
58+
<i className="fa fa-graduation-cap" /> <span>Training</span>
59+
</button>
60+
</li>
61+
</ul>
62+
</div>
63+
</nav>
64+
2565
<Header title="By React GraphQL Academy" />
26-
<Books />
27-
<About />
28-
<Footer />
66+
67+
<section id="books">
68+
<div className="container">
69+
<div className="row">
70+
<div className="col-lg-12 text-center">
71+
<h2>Books</h2>
72+
<hr className="star-primary" />
73+
</div>
74+
</div>
75+
<div className="row">
76+
<div className="col-lg-12">
77+
<ul className="nav nav-pills text-center">{tabItems}</ul>
78+
</div>
79+
</div>
80+
<div className="row book-list">
81+
{books.map((book) => (
82+
<div className="col-xs-6 col-sm-3" key={book.id}>
83+
<div className="thumbnail">
84+
<img alt="" className="img-responsive" src={book.cover} />
85+
</div>
86+
</div>
87+
))}
88+
</div>
89+
</div>
90+
</section>
91+
92+
<section id="about" className="success">
93+
<div className="container">
94+
<div className="row">
95+
<div className="col-lg-12 text-center">
96+
<h2>About The Library</h2>
97+
<hr className="star-light" />
98+
</div>
99+
</div>
100+
<div className="row">
101+
<div className="col-lg-4 col-lg-offset-2">
102+
<p>
103+
This library is an exercise for building UI in a{' '}
104+
<strong style={{ textDecoration: 'underline' }}>
105+
declarative way
106+
</strong>
107+
. This web site will help you understand the fundamental piece
108+
of ReactJS, components. You'll learn how to break an app in
109+
components (AKA componentization) and flow data accross them.
110+
</p>
111+
</div>
112+
<div className="col-lg-4">
113+
<p>
114+
This ReactJS web site works, but it's not well implemented. The
115+
problem, the developer didn't think in React and there aren't
116+
many components. We challenge you to fork the repo an
117+
componentizise the app to unleash the power of ReactJS.
118+
</p>
119+
</div>
120+
<div className="col-lg-8 col-lg-offset-2 text-center">
121+
<a
122+
target="_blank"
123+
rel="noopener noreferrer"
124+
href="https://github.com/leanjscom/thinking-in-react"
125+
className="btn btn-lg btn-outline"
126+
>
127+
<i className="fa fa-code-fork" /> Fork me on Github
128+
</a>
129+
</div>
130+
</div>
131+
</div>
132+
</section>
133+
134+
<footer className="text-center">
135+
<div className="footer-above">
136+
<div className="container">
137+
<div className="row">
138+
<div className="footer-col col-md-4">
139+
<h3>Main Location</h3>
140+
<p>
141+
<span>1 St. Katharine's Way</span>
142+
<br />
143+
<span>London, E1W 1UN</span>
144+
</p>
145+
</div>
146+
<div className="footer-col col-md-4">
147+
<h3>Around the Web</h3>
148+
<ul className="list-inline">
149+
<li>
150+
<a
151+
target="_blank"
152+
rel="noopener noreferrer"
153+
href="https://github.com/leanjscom"
154+
className="btn-social btn-outline"
155+
>
156+
<i className="fa fa-fw fa-github" />
157+
</a>
158+
</li>
159+
<li>
160+
<a
161+
target="_blank"
162+
rel="noopener noreferrer"
163+
href="https://twitter.com/leanjscom"
164+
className="btn-social btn-outline"
165+
>
166+
<i className="fa fa-fw fa-twitter" />
167+
</a>
168+
</li>
169+
<li>
170+
<a
171+
target="_blank"
172+
rel="noopener noreferrer"
173+
href="https://www.instagram.com/leanjscom/"
174+
className="btn-social btn-outline"
175+
>
176+
<i className="fa fa-fw fa-instagram" />
177+
</a>
178+
</li>
179+
</ul>
180+
</div>
181+
<div className="footer-col col-md-4">
182+
<h3>About React GraphQL Academy</h3>
183+
<p>
184+
<a href="https://reactgraphql.academy/">
185+
React GraphQL Academy
186+
</a>
187+
<span>
188+
React GraphQL Academy is Europes longest running dedicated
189+
React, Redux, and GraphQL training.
190+
</span>
191+
</p>
192+
</div>
193+
</div>
194+
</div>
195+
</div>
196+
<div className="footer-below">
197+
<div className="container">
198+
<div className="row">
199+
<div className="col-lg-12">
200+
<span>Copyright &copy;</span>{' '}
201+
<a
202+
href="https://leanjs.com/"
203+
target="_blank"
204+
rel="noopener noreferrer"
205+
>
206+
LeanJS
207+
</a>
208+
</div>
209+
</div>
210+
</div>
211+
</div>
212+
</footer>
29213
</div>
30214
)
31215
}

‎src/components/Books/BookFilter.js

-18
This file was deleted.

‎src/components/Books/BookList.js

-17
This file was deleted.

‎src/components/Books/index.js

-43
This file was deleted.

0 commit comments

Comments
 (0)