Movatterモバイル変換

[0]ホーム
URL:

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

Commit48b245c

Browse files
committed
style: Pagination + searchtodo + todo components memoized
1 parent03b00d0 commit48b245c

File tree

5 files changed

+35
-21
lines changed

5 files changed

+35
-21
lines changed

‎server/db.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
"notificationIds": [
33
{
44
"id":"e3M5RBEspfs:APA91bFEL0gXfliY5QUkP6MwVr-0_tCbgaMgAWBMjJeSkF0n_yPi7_-cCefXYqO_J8uEch4d1-bWzGq9W7_WjBXxDLfyISWOODBAuHK7jumnOOMtZN6wHRaLz5j-RIEhN9VJgI5b0OR2"
5+
},
6+
{
7+
"id":"cBvtd2MKSgA:APA91bG203ClUaAIrOz0Ru3X7kTksOODEqj9apTUoEKi6Y28FYzGDeWvxgT7PaDquHb_1adPGRl6VaAsRuJFFYnFNcn4gef6i_16mnFDyvQF-xayFiU8V0_1LMd0vFIBNP1rCZLuh4q_"
58
}
69
],
710
"todos": [
@@ -108,7 +111,7 @@
108111
{
109112
"id":11,
110113
"text":"task11",
111-
"dueDate":"2019-05-15T13:36:33.749Z",
114+
"dueDate":"2019-05-12T16:45:00.000Z",
112115
"completed":true,
113116
"length":1234,
114117
"reminder":123,

‎src/components/atoms/Link/Link.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
importReact,{MouseEvent,ReactNode}from'react'
1+
importReact,{memo,MouseEvent,ReactNode}from'react'
22
import{Button}from'reactstrap'
33

44
typePropsType={
@@ -17,4 +17,4 @@ const Link = ({ active, children, onClickFilter }: PropsType) => (
1717
</Button>
1818
)
1919

20-
exportdefaultLink
20+
exportdefaultmemo(Link)

‎src/components/atoms/Pagination/Pagination.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
importReact,{MouseEvent}from'react'
1+
importReact,{memo,MouseEvent}from'react'
22
import{Pagination,PaginationItem,PaginationLink}from'reactstrap'
33

44
typePropsType={
@@ -40,4 +40,4 @@ const PaginationWrapper = ({ onClickPagination, page, todosLength }: PropsType)
4040
)
4141
}
4242

43-
exportdefaultPaginationWrapper
43+
exportdefaultmemo(PaginationWrapper)

‎src/components/atoms/SearchTodo/SearchTodo.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
importReact,{ChangeEvent,FormEvent,useState}from'react'
1+
importReact,{ChangeEvent,FormEvent,memo,useState}from'react'
22
import{Button,Col,Form,FormGroup,Input,Row}from'reactstrap'
33

44
typePropsType={
@@ -18,6 +18,17 @@ const SearchTodo = ({ onClickFilterByKeyword }: PropsType) => {
1818
onClickFilterByKeyword(keywordSearch)
1919
}
2020

21+
constSubmitButtonWrapper=memo(()=>
22+
<Colxs='12'sm='3'lg='2'>
23+
<Button
24+
className='w-100'
25+
color='primary'
26+
type='submit'>
27+
Procurar
28+
</Button>
29+
</Col>
30+
)
31+
2132
return(
2233
<FormonSubmit={onSubmit}autoComplete='off'>
2334
<Row>
@@ -31,16 +42,7 @@ const SearchTodo = ({ onClickFilterByKeyword }: PropsType) => {
3142
value={keywordSearch}/>
3243
</FormGroup>
3344
</Col>
34-
<Colxs='12'sm='3'lg='2'>
35-
<divclassName='d-flex justify-content-end'>
36-
<Button
37-
className='w-100'
38-
color='primary'
39-
type='submit'>
40-
Procurar
41-
</Button>
42-
</div>
43-
</Col>
45+
<SubmitButtonWrapper/>
4446
</Row>
4547
</Form>
4648
)

‎src/components/atoms/Todo/Todo.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
importReact,{MouseEvent,useState}from'react'
1+
importReact,{MouseEvent,memo,useState}from'react'
22
import{FaEllipsisV}from'react-icons/fa'
33
importdayjsfrom'dayjs'
44
import{
@@ -35,17 +35,26 @@ const Todo = ({ onClickToggleVisibility, onClickRemoveTodo, todo }: PropsType) =
3535
constdueDate=newDate(todo.dueDate)
3636
constdueDateFormatted=dayjs(dueDate).format('DD/MM/YYYY HH:mm')
3737

38+
constDropdownToggleWrapper=memo(()=>
39+
<DropdownTogglearia-label='options'>
40+
<FaEllipsisV/>
41+
</DropdownToggle>
42+
)
43+
44+
constTodoDescriptionWrapper=memo(()=>
45+
<Buttoncolor='link'className='btn-todo d-flex align-items-center'onClick={onClickToggleVisibility}>{todo.text} |{dueDateFormatted}</Button>
46+
)
47+
3848
return(
3949
<ListGroupItem
50+
key={todo.id}
4051
action
4152
active={todo.completed}
4253
>
4354
<divclassName='d-flex justify-content-between'>
44-
<Buttoncolor='link'className='btn-todo d-flex align-items-center'onClick={onClickToggleVisibility}>{todo.text} |{dueDateFormatted}</Button>
55+
<TodoDescriptionWrapper/>
4556
<DropdownisOpen={dropdownOpen}toggle={onToggleDropdownOpen}>
46-
<DropdownTogglearia-label='options'>
47-
<FaEllipsisV/>
48-
</DropdownToggle>
57+
<DropdownToggleWrapper/>
4958
<DropdownMenuright>
5059
<DropdownItemheader>Options</DropdownItem>
5160
<DropdownItemonClick={onClickToggleModal}>Edit</DropdownItem>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp