Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 6848ba0

Browse files
authored
Merge pull request #50 from Alex-JS-team/vc/lesson8/hw
Homework 8
2 parents af32c99 + ab2edb9 commit 6848ba0

File tree

19 files changed

+10369
-0
lines changed

19 files changed

+10369
-0
lines changed
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "beetrot-hw8",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"bootstrap": "^4.3.1",
7+
"react": "^16.10.1",
8+
"react-dom": "^16.10.1",
9+
"react-scripts": "3.1.2"
10+
},
11+
"scripts": {
12+
"start": "react-scripts start",
13+
"build": "react-scripts build",
14+
"test": "react-scripts test",
15+
"eject": "react-scripts eject"
16+
},
17+
"eslintConfig": {
18+
"extends": "react-app"
19+
},
20+
"browserslist": {
21+
"production": [
22+
">0.2%",
23+
"not dead",
24+
"not op_mini all"
25+
],
26+
"development": [
27+
"last 1 chrome version",
28+
"last 1 firefox version",
29+
"last 1 safari version"
30+
]
31+
}
32+
}
21.9 KB
Binary file not shown.
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="logo192.png" />
13+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14+
<title>React App</title>
15+
</head>
16+
<body>
17+
<noscript>You need to enable JavaScript to run this app.</noscript>
18+
<div id="root"></div>
19+
</body>
20+
</html>
8.38 KB
Loading[フレーム]
22.4 KB
Loading[フレーム]
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "logo192.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo512.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
19+
}
20+
],
21+
"start_url": ".",
22+
"display": "standalone",
23+
"theme_color": "#000000",
24+
"background_color": "#ffffff"
25+
}
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react'
2+
import Header from './layouts/Header'
3+
import Footer from './layouts/Footer'
4+
import Content from './Content'
5+
6+
const App = () => (
7+
<>
8+
<Header text='Header'/>
9+
<Content />
10+
<Footer year={new Date().getFullYear()}/>
11+
</>
12+
)
13+
14+
export default App
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React, { useState, useEffect } from 'react'
2+
import users from '../static/users.json'
3+
import UsersList from './users-list/UsersList'
4+
import FilterSelect from './filter-select/FilterSelect'
5+
6+
const Content = () => {
7+
const [usersToRender, setUsersToRender] = useState(users)
8+
const [ageFilter, setAgeFilter] = useState(null)
9+
10+
useEffect(() => {
11+
if (ageFilter) {
12+
setUsersToRender(users.filter(({ age }) => age === ageFilter))
13+
} else {
14+
setUsersToRender(users)
15+
}
16+
}, [ageFilter])
17+
18+
return (
19+
<main className='container mt-5'>
20+
<FilterSelect
21+
ages={[...new Set(users.map(({ age }) => age))]}
22+
setAgeFilter={setAgeFilter}
23+
/>
24+
<UsersList usersToRender={usersToRender} />
25+
</main>
26+
)
27+
}
28+
29+
export default Content
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react'
2+
import { number } from 'prop-types'
3+
4+
const propTypes = {
5+
age: number,
6+
index: number
7+
}
8+
9+
const FilterOption = ({ age, index }) => <option key={index} value={age}>{age}</option>
10+
11+
FilterOption.propTypes = propTypes
12+
13+
export default FilterOption

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /