Skip to content

Commit e71e012

Browse files
MetaCorpMetaCorp
committed
Update useCallback 2
1 parent 51eef7b commit e71e012

File tree

5 files changed

+76
-74
lines changed

5 files changed

+76
-74
lines changed

‎frontend/src/components/post/Drafts.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React, { useCallback } from 'react'
22
import { useQuery } from 'react-apollo-hooks'
33

44
import Button from '@material-ui/core/Button'
@@ -43,7 +43,7 @@ interface DraftsQueryResponse {
4343
const Drafts: React.FC = () => {
4444
const draftsQuery = useQuery<DraftsQueryResponse>(DRAFTS_QUERY)
4545

46-
const handleLoadMore = () => {
46+
const handleLoadMore = useCallback(() => {
4747
if (!draftsQuery || !draftsQuery.data || !draftsQuery.data.drafts) return
4848
draftsQuery.fetchMore({
4949
variables: {
@@ -66,7 +66,7 @@ const Drafts: React.FC = () => {
6666
}
6767
},
6868
})
69-
}
69+
}, [draftsQuery])
7070

7171
return (
7272
<div>

‎frontend/src/components/post/Feed.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React, { useCallback } from 'react'
22
import { useQuery } from 'react-apollo-hooks'
33

44
import Button from '@material-ui/core/Button'
@@ -28,7 +28,7 @@ interface FeedQueryResponse {
2828
const Feed: React.FC = () => {
2929
const feedQuery = useQuery<FeedQueryResponse>(FEED_QUERY)
3030

31-
const handleLoadMore = () => {
31+
const handleLoadMore = useCallback(() => {
3232
if (!feedQuery || !feedQuery.data || !feedQuery.data.feed) return
3333
feedQuery.fetchMore({
3434
variables: {
@@ -51,7 +51,7 @@ const Feed: React.FC = () => {
5151
}
5252
},
5353
})
54-
}
54+
}, [feedQuery])
5555

5656
return (
5757
<div>

‎frontend/src/components/post/PostCreate.tsx‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useContext } from 'react'
1+
import React, { useState, useContext, useCallback } from 'react'
22
import { Formik, FormikActions } from 'formik'
33

44
import TextField from '@material-ui/core/TextField'
@@ -45,29 +45,29 @@ const Login: React.FC = () => {
4545
const meQuery = useContext(MeQueryContext)
4646
const client = useApolloClient()
4747

48-
const handleSubmit = (
49-
values: FormValues,
50-
{ setSubmitting }: FormikActions<FormValues>,
51-
) => {
52-
if (!meQuery || !meQuery.data) return
53-
54-
setError(undefined)
55-
createDraftMutation({
56-
variables: {
57-
title: values.title,
58-
authorId: meQuery.data.me.id,
59-
},
60-
})
61-
.then((res) => {
62-
if (!res.data) return
63-
client.resetStore().then(() => history.push('/drafts'))
64-
})
65-
.catch((e) => {
66-
console.error(e)
67-
setError(e.message)
68-
setSubmitting(false)
48+
const handleSubmit = useCallback(
49+
(values: FormValues, { setSubmitting }: FormikActions<FormValues>) => {
50+
if (!meQuery || !meQuery.data) return
51+
52+
setError(undefined)
53+
createDraftMutation({
54+
variables: {
55+
title: values.title,
56+
authorId: meQuery.data.me.id,
57+
},
6958
})
70-
}
59+
.then((res) => {
60+
if (!res.data) return
61+
client.resetStore().then(() => history.push('/drafts'))
62+
})
63+
.catch((e) => {
64+
console.error(e)
65+
setError(e.message)
66+
setSubmitting(false)
67+
})
68+
},
69+
[client, createDraftMutation, history, meQuery],
70+
)
7171

7272
return (
7373
<Box p={3} clone>

‎frontend/src/components/post/PostDetail.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useContext } from 'react'
1+
import React, { useState, useContext, useCallback } from 'react'
22

33
import PostType from './../../types/Post'
44

@@ -30,8 +30,8 @@ interface MatchParam {
3030
}
3131

3232
const PostDetail: React.FC = () => {
33-
const [error, setError] = useState()
34-
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
33+
const [error, setError] = useState<string>()
34+
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState<boolean>(false)
3535
const { match, history } = useReactRouter<MatchParam>()
3636
const client = useApolloClient()
3737
const meQuery = useContext(MeQueryContext)
@@ -46,7 +46,7 @@ const PostDetail: React.FC = () => {
4646

4747
const deleteMutation = useMutation<DeleteMutationResponse>(DELETE_MUTATION)
4848

49-
const handlePublish = () => {
49+
const handlePublish = useCallback(() => {
5050
if (!postQuery.data) return
5151

5252
publishMutation({
@@ -60,9 +60,13 @@ const PostDetail: React.FC = () => {
6060
.catch((e) => {
6161
setError(e.message)
6262
})
63-
}
63+
}, [client, history, postQuery.data, publishMutation])
64+
65+
const handleDeleteDialogClose = useCallback(() => {
66+
setIsDeleteDialogOpen(false)
67+
}, [])
6468

65-
const handleDelete = () => {
69+
const handleDelete = useCallback(() => {
6670
if (!postQuery.data) return
6771

6872
deleteMutation({
@@ -81,15 +85,11 @@ const PostDetail: React.FC = () => {
8185
.catch((e) => {
8286
setError(e.message)
8387
})
84-
}
88+
}, [client, deleteMutation, handleDeleteDialogClose, history, postQuery.data])
8589

86-
const handleDeleteDialogClose = () => {
87-
setIsDeleteDialogOpen(false)
88-
}
89-
90-
const handleDeleteDialogOpen = () => {
90+
const handleDeleteDialogOpen = useCallback(() => {
9191
setIsDeleteDialogOpen(true)
92-
}
92+
}, [])
9393

9494
if (!meQuery || !meQuery.data || !postQuery || !postQuery.data)
9595
return <div>ERROR</div>

‎frontend/src/components/post/PostEdit.tsx‎

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react'
1+
import React, { useState, useCallback } from 'react'
22
import { Formik, FormikActions } from 'formik'
33

44
import TextField from '@material-ui/core/TextField'
@@ -57,39 +57,41 @@ const PostEdit: React.FC = () => {
5757
},
5858
})
5959

60-
const handleSubmit = (
61-
values: FormValues,
62-
{ setSubmitting }: FormikActions<FormValues>,
63-
) => {
64-
if (!postQuery || !postQuery.data || !postQuery.data.post) return
65-
66-
setError(undefined)
67-
createDraftMutation({
68-
variables: {
69-
data: {
70-
title: values.title,
60+
const handleSubmit = useCallback(
61+
(values: FormValues, { setSubmitting }: FormikActions<FormValues>) => {
62+
if (!postQuery || !postQuery.data || !postQuery.data.post) return
63+
64+
setError(undefined)
65+
createDraftMutation({
66+
variables: {
67+
data: {
68+
title: values.title,
69+
},
70+
where: {
71+
id: postQuery.data.post.id,
72+
},
7173
},
72-
where: {
73-
id: postQuery.data.post.id,
74-
},
75-
},
76-
})
77-
.then((res) => {
78-
if (!res.data) return
79-
client
80-
.resetStore()
81-
.then(() =>
82-
history.push(
83-
postQuery.data && postQuery.data.post.published ? '/' : '/drafts',
84-
),
85-
) // TODO wtf typescript
86-
})
87-
.catch((e) => {
88-
console.error(e)
89-
setError(e.message)
90-
setSubmitting(false)
9174
})
92-
}
75+
.then((res) => {
76+
if (!res.data) return
77+
client
78+
.resetStore()
79+
.then(() =>
80+
history.push(
81+
postQuery.data && postQuery.data.post.published
82+
? '/'
83+
: '/drafts',
84+
),
85+
) // TODO wtf typescript
86+
})
87+
.catch((e) => {
88+
console.error(e)
89+
setError(e.message)
90+
setSubmitting(false)
91+
})
92+
},
93+
[client, createDraftMutation, history, postQuery],
94+
)
9395

9496
if (!postQuery || !postQuery.data) return <div>ERROR</div>
9597
if (postQuery.loading) return <div>Loading</div>

0 commit comments

Comments
 (0)