Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit dd66a92

Browse files
pbteja1998pbteja1998
committed
Fix the bug where see who liked is not updating when the like button is toggled by the logged in user
1 parent c913beb commit dd66a92

File tree

4 files changed

+178
-109
lines changed

4 files changed

+178
-109
lines changed

‎src/components/Hero.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ export default function Hero() {
1212
</span>
1313
</h1>
1414
<p className="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
15-
Achieve your goals with a community of passionate self-learners by
16-
joining the Coderplex Community.
15+
Want to progress in your career? Achieve your goals with a community
16+
of passionate self-learners by joining the Coderplex Community.
1717
</p>
1818
<div className="mt-5 max-w-xl mx-auto sm:flex sm:justify-center md:mt-8">
1919
<div className="rounded-md shadow">

‎src/components/HomePageFeed.tsx‎

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Avatar, Button, Menu } from '@/ui'
22
import {
33
ChatCenteredDots,
44
DotsThreeOutlineVertical,
5+
Eye,
56
Gear,
67
Pencil,
78
RocketLaunch,
@@ -121,6 +122,8 @@ export function HomePageFeedUpdate({
121122
const { count: likesCount, hasLiked, toggleLike } = useLikes({
122123
initialCount: update.likes.data.length,
123124
initialHasLiked: update.hasLiked,
125+
updateId: update.id,
126+
type: 'UPDATE_LIKE',
124127
mutation: {
125128
endpoint: '/api/fauna/toggle-update-like',
126129
body: {
@@ -176,44 +179,52 @@ export function HomePageFeedUpdate({
176179
</p>
177180
</div>
178181

179-
{session && (session.user as User).id === update.postedBy.id && (
180-
<div className="flex-shrink-0 self-center flex">
181-
<div className="relative inline-block text-left">
182-
<Menu
183-
trigger={
184-
<button className="-m-2 p-2 rounded-full flex items-center text-gray-400 hover:text-gray-600">
185-
<span className="sr-only">
186-
Open quick actions
187-
</span>
188-
<DotsThreeOutlineVertical
189-
className="h-5 w-5"
190-
aria-hidden={true}
191-
/>
192-
</button>
193-
}
182+
<div className="flex-shrink-0 self-center flex">
183+
<div className="relative inline-block text-left">
184+
<Menu
185+
trigger={
186+
<button className="-m-2 p-2 rounded-full flex items-center text-gray-400 hover:text-gray-600">
187+
<span className="sr-only">Open quick actions</span>
188+
<DotsThreeOutlineVertical
189+
className="h-5 w-5"
190+
aria-hidden={true}
191+
/>
192+
</button>
193+
}
194+
>
195+
{session &&
196+
(session.user as User).id === update.postedBy.id && (
197+
<>
198+
<Menu.Item
199+
icon={Pencil}
200+
onClick={() => setIsInEditMode(true)}
201+
>
202+
Edit
203+
</Menu.Item>
204+
<Menu.Item
205+
icon={Trash}
206+
onClick={() => {
207+
deleteUpdate()
208+
const id = toast.loading(
209+
'Deleting your update...'
210+
)
211+
toastId.current = id
212+
}}
213+
>
214+
Delete
215+
</Menu.Item>
216+
</>
217+
)}
218+
219+
<Menu.Item
220+
icon={ThumbsUp}
221+
onClick={() => setIsOpen(true)}
194222
>
195-
<Menu.Item
196-
icon={Pencil}
197-
onClick={() => setIsInEditMode(true)}
198-
>
199-
Edit
200-
</Menu.Item>
201-
<Menu.Item
202-
icon={Trash}
203-
onClick={() => {
204-
deleteUpdate()
205-
const id = toast.loading(
206-
'Deleting your update...'
207-
)
208-
toastId.current = id
209-
}}
210-
>
211-
Delete
212-
</Menu.Item>
213-
</Menu>
214-
</div>
223+
See who liked
224+
</Menu.Item>
225+
</Menu>
215226
</div>
216-
)}
227+
</div>
217228
</div>
218229
<div className="mt-4 flex">
219230
<button
@@ -282,15 +293,6 @@ export function HomePageFeedUpdate({
282293
<span className="sr-only">replies</span>
283294
</button>
284295
</span>
285-
{likesCount > 0 && (
286-
<Button
287-
variant="link"
288-
onClick={() => setIsOpen(true)}
289-
variantColor="brand"
290-
>
291-
See who liked
292-
</Button>
293-
)}
294296
</div>
295297
</div>
296298
</article>

‎src/components/goals/UpdateComment.tsx‎

Lines changed: 50 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ export default function UpdateComment({
3939
const { count: likesCount, hasLiked, toggleLike } = useLikes({
4040
initialCount: comment.likes.data.length,
4141
initialHasLiked: comment.hasLiked,
42+
updateId: comment.updateId,
43+
commentId: comment.id,
44+
type: 'COMMENT_LIKE',
4245
mutation: {
4346
endpoint: '/api/fauna/toggle-comment-like',
4447
body: {
@@ -124,45 +127,53 @@ export default function UpdateComment({
124127
</time>
125128
</p>
126129
</div>
127-
{session &&
128-
(session.user as User).id === comment.postedBy.id && (
129-
<div className="flex-shrink-0 self-center flex">
130-
<div className="relative inline-block text-left">
131-
<Menu
132-
trigger={
133-
<button className="-m-2 p-2 rounded-full flex items-center text-gray-400 hover:text-gray-600">
134-
<span className="sr-only">
135-
Open quick actions
136-
</span>
137-
<DotsThreeOutlineVertical
138-
className="h-5 w-5"
139-
aria-hidden={true}
140-
/>
141-
</button>
142-
}
143-
>
144-
<Menu.Item
145-
icon={Pencil}
146-
onClick={() => setIsInEditMode(true)}
147-
>
148-
Edit
149-
</Menu.Item>
150-
<Menu.Item
151-
icon={Trash}
152-
onClick={() => {
153-
deleteComment()
154-
const id = toast.loading(
155-
'Deleting your comment...'
156-
)
157-
toastId.current = id
158-
}}
159-
>
160-
Delete
161-
</Menu.Item>
162-
</Menu>
163-
</div>
164-
</div>
165-
)}
130+
131+
<div className="flex-shrink-0 self-center flex">
132+
<div className="relative inline-block text-left">
133+
<Menu
134+
trigger={
135+
<button className="-m-2 p-2 rounded-full flex items-center text-gray-400 hover:text-gray-600">
136+
<span className="sr-only">Open quick actions</span>
137+
<DotsThreeOutlineVertical
138+
className="h-5 w-5"
139+
aria-hidden={true}
140+
/>
141+
</button>
142+
}
143+
>
144+
{session &&
145+
(session.user as User).id === comment.postedBy.id && (
146+
<>
147+
<Menu.Item
148+
icon={Pencil}
149+
onClick={() => setIsInEditMode(true)}
150+
>
151+
Edit
152+
</Menu.Item>
153+
<Menu.Item
154+
icon={Trash}
155+
onClick={() => {
156+
deleteComment()
157+
const id = toast.loading(
158+
'Deleting your comment...'
159+
)
160+
toastId.current = id
161+
}}
162+
>
163+
Delete
164+
</Menu.Item>
165+
</>
166+
)}
167+
168+
<Menu.Item
169+
icon={ThumbsUp}
170+
onClick={() => setIsOpen(true)}
171+
>
172+
See who liked
173+
</Menu.Item>
174+
</Menu>
175+
</div>
176+
</div>
166177
</div>
167178
<div className="mt-2 text-sm text-gray-700">
168179
<div className="prose prose-sm max-w-none">
@@ -201,15 +212,6 @@ export default function UpdateComment({
201212
setIsOpen={setIsLikeModalOpen}
202213
/>
203214
</span>
204-
{likesCount > 0 && (
205-
<Button
206-
variant="link"
207-
onClick={() => setIsOpen(true)}
208-
variantColor="brand"
209-
>
210-
See who liked
211-
</Button>
212-
)}
213215
</div>
214216
</div>
215217
</div>

‎src/components/useLikes.ts‎

Lines changed: 79 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
import { useSession } from 'next-auth/client'
12
import { useReducer } from 'react'
2-
import { useMutation } from 'react-query'
3+
import { useMutation, useQueryClient } from 'react-query'
4+
import { HomePageFeedUpdateType } from 'src/pages'
5+
import { User } from 'src/pages/members'
36

47
type LikeData = {
58
count: number
@@ -25,34 +28,96 @@ function reducer(state: LikeData, action: { type: string; payload?: any }) {
2528
export function useLikes({
2629
initialCount,
2730
initialHasLiked,
31+
updateId,
32+
commentId,
33+
type,
2834
mutation,
2935
}: {
3036
initialCount: number
3137
initialHasLiked: boolean
38+
updateId?: string
39+
commentId?: string
40+
type: 'UPDATE_LIKE' | 'COMMENT_LIKE'
3241
mutation: {
3342
endpoint: string
3443
body: any
3544
}
3645
}) {
46+
const [session] = useSession()
47+
const queryClient = useQueryClient()
48+
3749
const initialState: LikeData = {
3850
count: initialCount,
3951
hasLiked: initialHasLiked,
4052
}
4153

42-
const { mutate } = useMutation(() => {
43-
return fetch(mutation.endpoint, {
44-
method: 'POST',
45-
headers: {
46-
'Content-Type': 'application/json',
54+
const { mutate } = useMutation(
55+
() => {
56+
return fetch(mutation.endpoint, {
57+
method: 'POST',
58+
headers: {
59+
'Content-Type': 'application/json',
60+
},
61+
body: JSON.stringify(mutation.body),
62+
}).then((res) => {
63+
if (!res.ok) {
64+
throw new Error('something went wrong!!!')
65+
}
66+
return res.json()
67+
})
68+
},
69+
{
70+
onSuccess: (data, variables, context) => {
71+
if (type === 'UPDATE_LIKE') {
72+
queryClient.setQueryData<{ updates: HomePageFeedUpdateType[] }>(
73+
'/api/fauna/all-updates',
74+
(oldData) => ({
75+
updates: oldData.updates.filter((_update) => {
76+
if (_update.id === updateId) {
77+
if (data.response.data.liked) {
78+
_update.likes.data = [session.user, ..._update.likes.data]
79+
} else {
80+
_update.likes.data = _update.likes.data.filter(
81+
(u) => u.id !== (session.user as User).id
82+
)
83+
}
84+
}
85+
return _update
86+
}),
87+
})
88+
)
89+
}
90+
91+
if (type === 'COMMENT_LIKE') {
92+
queryClient.setQueryData<{ updates: HomePageFeedUpdateType[] }>(
93+
'/api/fauna/all-updates',
94+
(oldData) => ({
95+
updates: oldData.updates.filter((_update) => {
96+
if (_update.id === updateId) {
97+
return _update.comments.data.map((_comment) => {
98+
if (_comment.id === commentId) {
99+
if (data.response.data.liked) {
100+
_comment.likes.data = [
101+
session.user,
102+
..._comment.likes.data,
103+
]
104+
} else {
105+
_comment.likes.data = _comment.likes.data.filter(
106+
(u) => u.id !== (session.user as User).id
107+
)
108+
}
109+
}
110+
return _comment
111+
})
112+
}
113+
return _update
114+
}),
115+
})
116+
)
117+
}
47118
},
48-
body: JSON.stringify(mutation.body),
49-
}).then((res) => {
50-
if (!res.ok) {
51-
throw new Error('something went wrong!!!')
52-
}
53-
return res.json()
54-
})
55-
})
119+
}
120+
)
56121

57122
const [{ count, hasLiked }, dispatch] = useReducer(reducer, initialState)
58123

0 commit comments

Comments
 (0)