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

Skip to content

Commit 05ec747

Browse files
pbteja1998pbteja1998
committed
Add a button to see who liked the updates and comments
1 parent 1d9509c commit 05ec747

File tree

8 files changed

+398
-116
lines changed

8 files changed

+398
-116
lines changed

‎src/components/HomePageFeed.tsx

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Avatar, Menu } from '@/ui'
1+
import { Avatar, Button, Menu } from '@/ui'
22
import {
33
ChatCenteredDots,
44
DotsThreeOutlineVertical,
@@ -41,6 +41,7 @@ import type { GoalResponse } from 'src/pages/[username]'
4141
import { scrollToContentWithId } from 'src/utils'
4242
import { IconBrandDiscord } from 'tabler-icons'
4343
import toast, { Toaster } from 'react-hot-toast'
44+
import ListModal from './modal/ListModal'
4445

4546
export function HomePageFeedUpdate({
4647
update,
@@ -93,7 +94,7 @@ export function HomePageFeedUpdate({
9394
)
9495

9596
const { count: likesCount, hasLiked, toggleLike } = useLikes({
96-
initialCount: update.likes.data,
97+
initialCount: update.likes.data.length,
9798
initialHasLiked: update.hasLiked,
9899
mutation: {
99100
endpoint: '/api/fauna/toggle-update-like',
@@ -103,8 +104,15 @@ export function HomePageFeedUpdate({
103104
},
104105
})
105106

107+
const [isOpen, setIsOpen] = useState(false)
108+
106109
return (
107110
<>
111+
<ListModal
112+
isOpen={isOpen}
113+
setIsOpen={setIsOpen}
114+
users={update.likes.data}
115+
/>
108116
<Toaster />
109117
<li
110118
className="bg-white px-4 py-6 shadow sm:p-6 sm:rounded-lg"
@@ -249,6 +257,15 @@ export function HomePageFeedUpdate({
249257
<span className="sr-only">replies</span>
250258
</button>
251259
</span>
260+
{likesCount > 0 && (
261+
<Button
262+
variant="link"
263+
onClick={() => setIsOpen(true)}
264+
variantColor="brand"
265+
>
266+
See who liked
267+
</Button>
268+
)}
252269
</div>
253270
</div>
254271
</article>

‎src/components/goals/UpdateComment.tsx

Lines changed: 133 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Avatar, Menu } from '@/ui'
1+
import { Avatar, Button, Menu } from '@/ui'
22
import React, { useRef, useState } from 'react'
33
import { Markdown, A, LikeModal, useLikes, EditComment } from '@/components'
44
import { DateTime } from 'luxon'
@@ -14,6 +14,7 @@ import {
1414
import { User } from 'src/pages/members'
1515
import { useMutation, useQueryClient } from 'react-query'
1616
import toast from 'react-hot-toast'
17+
import ListModal from '../modal/ListModal'
1718

1819
export type GoalUpdateType = {
1920
id: string
@@ -31,13 +32,14 @@ export default function UpdateComment({
3132
comment: UpdateCommentType
3233
}) {
3334
const queryClient = useQueryClient()
35+
const [isOpen, setIsOpen] = useState(false)
3436
const [isInEditMode, setIsInEditMode] = useState(false)
3537
const postedOn = DateTime.fromMillis(comment.createdAt)
3638
const [session] = useSession()
3739
const toastId = useRef('')
3840
const [isLikeModalOpen, setIsLikeModalOpen] = useState(false)
3941
const { count: likesCount, hasLiked, toggleLike } = useLikes({
40-
initialCount: comment.likes.data,
42+
initialCount: comment.likes.data.length,
4143
initialHasLiked: comment.hasLiked,
4244
mutation: {
4345
endpoint: '/api/fauna/toggle-comment-like',
@@ -79,121 +81,144 @@ export default function UpdateComment({
7981
}
8082
)
8183
return (
82-
<li>
83-
{isInEditMode ? (
84-
<EditComment
85-
updateId={updateId}
86-
comment={comment}
87-
cancelEditMode={() => setIsInEditMode(false)}
88-
/>
89-
) : (
90-
<div className="relative pb-6">
91-
<div className="relative flex items-start space-x-3">
92-
<div className="relative">
93-
<A href={`/${comment.postedBy.username}`}>
94-
<Avatar
95-
src={comment.postedBy.image}
96-
alt={comment.postedBy.account?.firstName}
97-
/>
98-
</A>
99-
</div>
100-
<div className="min-w-0 flex-1">
101-
<div className="flex space-x-3">
102-
<div className="flex-1">
103-
<div className="text-sm">
104-
<a
105-
href={`/${comment.postedBy.username}`}
106-
className="font-medium text-gray-900"
107-
>
108-
{comment.postedBy.account?.firstName ??
109-
comment.postedBy.name}
110-
</a>
111-
</div>
112-
<p className="mt-0.5 text-sm text-gray-500">
113-
Posted on{' '}
114-
<time dateTime={postedOn.toISO()}>
115-
{postedOn.toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY)}
116-
</time>
117-
</p>
118-
</div>
119-
{session && (session.user as User).id === comment.postedBy.id && (
120-
<div className="flex-shrink-0 self-center flex">
121-
<div className="relative inline-block text-left">
122-
<Menu
123-
trigger={
124-
<button className="-m-2 p-2 rounded-full flex items-center text-gray-400 hover:text-gray-600">
125-
<span className="sr-only">Open quick actions</span>
126-
<DotsThreeOutlineVertical
127-
className="h-5 w-5"
128-
aria-hidden={true}
129-
/>
130-
</button>
131-
}
84+
<>
85+
<ListModal
86+
isOpen={isOpen}
87+
setIsOpen={setIsOpen}
88+
users={comment.likes.data}
89+
/>
90+
<li>
91+
{isInEditMode ? (
92+
<EditComment
93+
updateId={updateId}
94+
comment={comment}
95+
cancelEditMode={() => setIsInEditMode(false)}
96+
/>
97+
) : (
98+
<div className="relative pb-6">
99+
<div className="relative flex items-start space-x-3">
100+
<div className="relative">
101+
<A href={`/${comment.postedBy.username}`}>
102+
<Avatar
103+
src={comment.postedBy.image}
104+
alt={comment.postedBy.account?.firstName}
105+
/>
106+
</A>
107+
</div>
108+
<div className="min-w-0 flex-1">
109+
<div className="flex space-x-3">
110+
<div className="flex-1">
111+
<div className="text-sm">
112+
<a
113+
href={`/${comment.postedBy.username}`}
114+
className="font-medium text-gray-900"
132115
>
133-
<Menu.Item
134-
icon={Pencil}
135-
onClick={() => setIsInEditMode(true)}
136-
>
137-
Edit
138-
</Menu.Item>
139-
<Menu.Item
140-
icon={Trash}
141-
onClick={() => {
142-
deleteComment()
143-
const id = toast.loading('Deleting your comment...')
144-
toastId.current = id
145-
}}
146-
>
147-
Delete
148-
</Menu.Item>
149-
</Menu>
116+
{comment.postedBy.account?.firstName ??
117+
comment.postedBy.name}
118+
</a>
150119
</div>
120+
<p className="mt-0.5 text-sm text-gray-500">
121+
Posted on{' '}
122+
<time dateTime={postedOn.toISO()}>
123+
{postedOn.toLocaleString(
124+
DateTime.DATE_MED_WITH_WEEKDAY
125+
)}
126+
</time>
127+
</p>
128+
</div>
129+
{session &&
130+
(session.user as User).id === comment.postedBy.id && (
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">
137+
Open quick actions
138+
</span>
139+
<DotsThreeOutlineVertical
140+
className="h-5 w-5"
141+
aria-hidden={true}
142+
/>
143+
</button>
144+
}
145+
>
146+
<Menu.Item
147+
icon={Pencil}
148+
onClick={() => setIsInEditMode(true)}
149+
>
150+
Edit
151+
</Menu.Item>
152+
<Menu.Item
153+
icon={Trash}
154+
onClick={() => {
155+
deleteComment()
156+
const id = toast.loading(
157+
'Deleting your comment...'
158+
)
159+
toastId.current = id
160+
}}
161+
>
162+
Delete
163+
</Menu.Item>
164+
</Menu>
165+
</div>
166+
</div>
167+
)}
168+
</div>
169+
<div className="mt-2 text-sm text-gray-700">
170+
<div className="prose prose-sm max-w-none">
171+
<Markdown>{children}</Markdown>
151172
</div>
152-
)}
153-
</div>
154-
<div className="mt-2 text-sm text-gray-700">
155-
<div className="prose prose-sm max-w-none">
156-
<Markdown>{children}</Markdown>
157173
</div>
158-
</div>
159174

160-
<div className="mt-3 flex justify-between space-x-8">
161-
<div className="flex space-x-6">
162-
<span className="inline-flex items-center text-sm">
163-
<button
164-
className="inline-flex space-x-2 text-gray-400 hover:text-gray-500"
165-
onClick={() => {
166-
if (!session) {
167-
setIsLikeModalOpen(true)
168-
return
169-
}
170-
toggleLike()
171-
}}
172-
>
173-
<ThumbsUp
174-
className={classNames(
175-
'h-5 w-5',
176-
hasLiked && 'text-brand-600'
177-
)}
178-
weight={hasLiked ? 'bold' : 'regular'}
175+
<div className="mt-3 flex justify-between space-x-8">
176+
<div className="flex space-x-6">
177+
<span className="inline-flex items-center text-sm">
178+
<button
179+
className="inline-flex space-x-2 text-gray-400 hover:text-gray-500"
180+
onClick={() => {
181+
if (!session) {
182+
setIsLikeModalOpen(true)
183+
return
184+
}
185+
toggleLike()
186+
}}
187+
>
188+
<ThumbsUp
189+
className={classNames(
190+
'h-5 w-5',
191+
hasLiked && 'text-brand-600'
192+
)}
193+
weight={hasLiked ? 'bold' : 'regular'}
194+
/>
195+
<span className="font-medium text-gray-900">
196+
{likesCount}
197+
</span>
198+
<span className="sr-only">likes</span>
199+
</button>
200+
<LikeModal
201+
user={comment.postedBy}
202+
isOpen={isLikeModalOpen}
203+
setIsOpen={setIsLikeModalOpen}
179204
/>
180-
<span className="font-medium text-gray-900">
181-
{likesCount}
182-
</span>
183-
<span className="sr-only">likes</span>
184-
</button>
185-
<LikeModal
186-
user={comment.postedBy}
187-
isOpen={isLikeModalOpen}
188-
setIsOpen={setIsLikeModalOpen}
189-
/>
190-
</span>
205+
</span>
206+
{likesCount > 0 && (
207+
<Button
208+
variant="link"
209+
onClick={() => setIsOpen(true)}
210+
variantColor="brand"
211+
>
212+
See who liked
213+
</Button>
214+
)}
215+
</div>
191216
</div>
192217
</div>
193218
</div>
194219
</div>
195-
</div>
196-
)}
197-
</li>
220+
)}
221+
</li>
222+
</>
198223
)
199224
}

0 commit comments

Comments
 (0)