Skip to content

Commit b8fe8a6

Browse files
terrysahaidakterrysahaidak
committed
Add code
1 parent 0379c56 commit b8fe8a6

File tree

13 files changed

+15134
-220
lines changed

13 files changed

+15134
-220
lines changed

‎.prettierrc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"arrowParens": "always",
3+
"singleQuote": true,
4+
"trailingComma": "all"
5+
}

‎package-lock.json‎

Lines changed: 14505 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,15 @@
66
"@testing-library/jest-dom": "^4.2.4",
77
"@testing-library/react": "^9.3.2",
88
"@testing-library/user-event": "^7.1.2",
9+
"mobx": "^5.15.4",
10+
"mobx-react-lite": "^2.0.6",
11+
"mobx-state-tree": "^3.16.0",
912
"react": "^16.13.1",
1013
"react-dom": "^16.13.1",
11-
"react-scripts": "3.4.1"
14+
"react-redux": "^7.2.0",
15+
"react-scripts": "3.4.1",
16+
"redux": "^4.0.5",
17+
"redux-actions": "^2.6.5"
1218
},
1319
"scripts": {
1420
"start": "react-scripts start",

‎src/App.css‎

Lines changed: 48 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,63 @@
11
.App {
2+
font-family: sans-serif;
23
text-align: center;
34
}
45

5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
6+
header {
7+
background-color: #ccc;
8+
height: 58px;
9+
padding-left: 16px;
10+
display: flex;
11+
align-items: center;
812
}
913

10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
14+
ul {
15+
display: flex;
16+
flex-wrap: wrap;
17+
}
18+
li {
19+
flex: 4;
20+
position: relative;
21+
list-style-type: none;
22+
margin-bottom: 16px;
1423
}
1524

16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
25+
img {
26+
transition: transform 0.5s;
27+
}
28+
.isSelected {
29+
transform: scale(0.6);
2530
}
2631

27-
.App-link {
28-
color: #61dafb;
32+
.checkbox-round {
33+
width: 1.3em;
34+
height: 1.3em;
35+
cursor: pointer;
36+
position: absolute;
37+
left: 48px;
38+
top: 34px;
39+
border-radius: 50%;
40+
background-color: white;
41+
/* left: 40px; */
42+
43+
animation: checkboxOpacity 0.5s;
2944
}
45+
@keyframes checkboxOpacity {
46+
0% {
47+
opacity: 0;
48+
left: 0;
49+
top: 0;
50+
}
3051

31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
52+
50% {
53+
opacity: 0;
54+
left: 16px;
55+
top: 8px;
3456
}
35-
to {
36-
transform: rotate(360deg);
57+
58+
100% {
59+
opacity: 1;
60+
left: 48px;
61+
top: 34px;
3762
}
3863
}

‎src/App.js‎

Lines changed: 125 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,130 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
1+
import React, { useCallback } from 'react';
32
import './App.css';
3+
import { createStore, combineReducers } from 'redux';
4+
import { createAction, handleActions } from 'redux-actions';
5+
import { Provider, useSelector, useDispatch } from 'react-redux';
6+
7+
const images = Array.from({ length: 100 }, (_, i) => ({
8+
id: i + 1,
9+
src: `https://picsum.photos/id/${i + 1}/200/200`,
10+
isSelected: false,
11+
}));
12+
13+
const toggleSelect = createAction('toggleSelect');
14+
15+
const imagesReducer = handleActions(
16+
{
17+
[toggleSelect]: (state, { payload: { id } }) => ({
18+
items: state.items.map((item) => {
19+
if (item.id === id) {
20+
return {
21+
...item,
22+
isSelected: !item.isSelected,
23+
};
24+
}
25+
26+
return item;
27+
}),
28+
}),
29+
},
30+
{
31+
items: images,
32+
},
33+
);
34+
35+
const store = createStore(
36+
combineReducers({
37+
images: imagesReducer,
38+
}),
39+
);
40+
41+
const Checkbox = ({ item }) => {
42+
console.log(`Checkbox ${item.id}`);
43+
if (!item.isSelected) {
44+
return null;
45+
}
446

5-
function App() {
647
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.js</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
22-
</div>
48+
<img
49+
className="checkbox-round"
50+
alt="alt"
51+
src="https://cdn1.iconfinder.com/data/icons/social-messaging-ui-color-round-1/254000/42-512.png"
52+
/>
2353
);
24-
}
54+
};
55+
56+
const Image = React.memo(({ item }) => {
57+
console.log(`Image ${item.id}`);
58+
59+
return (
60+
<img
61+
alt="Dog"
62+
className={item.isSelected ? 'isSelected' : ''}
63+
src={item.src}
64+
loading="lazy"
65+
/>
66+
);
67+
});
68+
69+
const ListItem = React.memo(({ item, onSelect }) => {
70+
console.log(`Render list item ${item.id}`);
71+
72+
return (
73+
<li onClick={() => onSelect(item.id)}>
74+
<Image item={item} />
75+
<Checkbox item={item} />
76+
</li>
77+
);
78+
});
2579

26-
export default App;
80+
const SelectedTitle = ({ count }) => {
81+
console.log('Render title');
82+
83+
return <span>Selected: {count}</span>;
84+
};
85+
86+
const Header = ({ count }) => {
87+
console.log('Render header');
88+
89+
return (
90+
<header>
91+
<SelectedTitle count={count} />
92+
</header>
93+
);
94+
};
95+
96+
const List = () => {
97+
console.log('Render list');
98+
const dispatch = useDispatch();
99+
const images = useSelector((state) => state.images.items);
100+
const selectedCount = useSelector(
101+
(state) => state.images.items.filter((i) => i.isSelected).length,
102+
);
103+
const onSelect = useCallback(
104+
(id) => {
105+
dispatch(toggleSelect({ id }));
106+
},
107+
[dispatch],
108+
);
109+
110+
return (
111+
<>
112+
<Header count={selectedCount} />
113+
<ul>
114+
{images.map((item) => (
115+
<ListItem onSelect={onSelect} key={item.id} item={item} />
116+
))}
117+
</ul>
118+
</>
119+
);
120+
};
121+
122+
export default function App() {
123+
return (
124+
<Provider store={store}>
125+
<div className="App">
126+
<List />
127+
</div>
128+
</Provider>
129+
);
130+
}

‎src/App.test.js‎

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

0 commit comments

Comments
 (0)