fix: comment like button

warmachine028 · Dec 10, 2024 · ae8fed2 · ae8fed2
1 parent e10c853
commit ae8fed2
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 78 deletions.
diff --git a/client/bun.lockb b/client/bun.lockb
diff --git a/client/package.json b/client/package.json
@@ -22,21 +22,21 @@
 		"start": "bun x vite preview"
 	},
 	"dependencies": {
-		"@clerk/clerk-react": "^5.17.1",
-		"@emotion/react": "^11.13.5",
-		"@emotion/styled": "^11.13.5",
-		"@mui/icons-material": "^6.1.9",
+		"@clerk/clerk-react": "^5.19.2",
+		"@emotion/react": "^11.14.0",
+		"@emotion/styled": "^11.14.0",
+		"@mui/icons-material": "^6.1.10",
 		"@mui/lab": "^6.0.0-beta.12",
-		"@mui/material": "^6.1.9",
-		"@tanstack/react-query": "^5.62.0",
-		"@tanstack/react-query-devtools": "^5.62.0",
-		"axios": "^1.7.8",
+		"@mui/material": "^6.1.10",
+		"@tanstack/react-query": "^5.62.3",
+		"@tanstack/react-query-devtools": "^5.62.3",
+		"axios": "^1.7.9",
 		"moment": "^2.30.1",
-		"react": "^19.0.0-rc-7670501b-20241124",
-		"react-dom": "^19.0.0-rc-7670501b-20241124",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
 		"react-intersection-observer": "^9.13.1",
-		"react-router": "^7.0.1",
-		"zustand": "^5.0.1"
+		"react-router": "^7.0.2",
+		"zustand": "^5.0.2"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.16.0",
@@ -46,11 +46,11 @@
 		"eslint": "^9.16.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-react": "^7.37.2",
-		"eslint-plugin-react-hooks": "^5.1.0-rc-fb9a90fa48-20240614",
-		"eslint-plugin-react-refresh": "^0.4.14",
+		"eslint-plugin-react-hooks": "^5.1.0",
+		"eslint-plugin-react-refresh": "^0.4.16",
 		"globals": "^15.13.0",
-		"prettier": "^3.4.1",
-		"vite": "^6.0.1"
+		"prettier": "^3.4.2",
+		"vite": "^6.0.3"
 	},
 	"repository": {
 		"type": "git",
@@ -63,4 +63,4 @@
 		"diary",
 		"digital-diary"
 	]
-}
+}
diff --git a/client/src/components/LikeButton.jsx b/client/src/components/LikeButton.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import {
 	Stack,
 	IconButton,
@@ -10,17 +10,20 @@ import {
 	ListItem,
 	ListItemText,
 	ListItemAvatar,
-	Avatar
+	Avatar,
+	ClickAwayListener
 } from '@mui/material'
 import { ThumbUp, ThumbUpOffAlt } from '@mui/icons-material'
 import { useGetCommentLikes, useLikeComment, useGetLikedUsers } from '@/hooks'
 import { useUser } from '@clerk/clerk-react'
+import { UserAvatar } from '.'
 
 const LikeButton = ({ commentId }) => {
 	const { user } = useUser()
 	const { data, isFetching } = useGetCommentLikes(commentId)
 	const { mutate: likeComment } = useLikeComment()
 	const [anchorEl, setAnchorEl] = useState(null)
+	const [isOpen, setIsOpen] = useState(false)
 
 	const handleLike = () =>
 		likeComment({
@@ -30,91 +33,108 @@ const LikeButton = ({ commentId }) => {
 
 	const handleMouseEnter = (event) => {
 		setAnchorEl(event.currentTarget)
+		setIsOpen(true)
 	}
 
-	const handleMouseLeave = () => {
-		setAnchorEl(null)
+	const handleClose = () => {
+		setIsOpen(false)
 	}
 
 	if (isFetching) {
 		return <CircularProgress size={20} />
 	}
 
 	return (
-		<Stack direction="row" alignItems="center">
-			<IconButton size="small" onClick={handleLike} disabled={!user}>
-				{data.isLiked ? (
-					<ThumbUp fontSize="small" color="primary" />
-				) : (
-					<ThumbUpOffAlt fontSize="small" />
+		<ClickAwayListener onClickAway={handleClose}>
+			<Stack direction="row" alignItems="center">
+				<IconButton size="small" onClick={handleLike} disabled={!user}>
+					{data.isLiked ? (
+						<ThumbUp fontSize="small" color="primary" />
+					) : (
+						<ThumbUpOffAlt fontSize="small" />
+					)}
+				</IconButton>
+				<Typography
+					variant="caption"
+					onMouseEnter={handleMouseEnter}
+					sx={{
+						cursor: 'pointer',
+						'&:hover': { textDecoration: 'underline' }
+					}}
+				>
+					{data.likeCount} {data.likeCount === 1 ? 'like' : 'likes'}
+				</Typography>
+				{data.likeCount > 0 && (
+					<UserList
+						commentId={commentId}
+						anchorEl={anchorEl}
+						open={isOpen}
+						onClose={handleClose}
+						totalLikes={data.likeCount}
+					/>
 				)}
-			</IconButton>
-			<Typography
-				variant="caption"
-				onMouseEnter={handleMouseEnter}
-				onMouseLeave={handleMouseLeave}
-				sx={{
-					cursor: 'pointer',
-					'&:hover': { textDecoration: 'underline' }
-				}}
-			>
-				{data.likes} {data.likes === 1 ? 'like' : 'likes'}
-			</Typography>
-			{data.likes > 0 && (
-				<UserList
-					commentId={commentId}
-					anchorEl={anchorEl}
-					open={Boolean(anchorEl)}
-					onClose={() => setAnchorEl(null)}
-					totalLikes={data.likes}
-				/>
-			)}
-		</Stack>
+			</Stack>
+		</ClickAwayListener>
 	)
 }
 
 const UserList = ({ commentId, anchorEl, open, onClose, totalLikes }) => {
 	const { data, isFetching, fetchNextPage, hasNextPage } =
 		useGetLikedUsers(commentId)
+	const listRef = useRef(null)
 
-	const handleScroll = (event) => {
-		const { scrollTop, clientHeight, scrollHeight } = event.currentTarget
-		if (
-			scrollHeight - scrollTop <= clientHeight + 1 &&
-			hasNextPage &&
-			!isFetching
-		) {
-			fetchNextPage()
+	useEffect(() => {
+		const handleScroll = () => {
+			if (listRef.current) {
+				const { scrollTop, clientHeight, scrollHeight } =
+					listRef.current
+				if (
+					scrollHeight - scrollTop <= clientHeight + 1 &&
+					hasNextPage &&
+					!isFetching
+				) {
+					fetchNextPage()
+				}
+			}
 		}
-	}
 
-	if (!open) return null
+		const currentListRef = listRef.current
+		if (currentListRef) {
+			currentListRef.addEventListener('scroll', handleScroll)
+		}
+
+		return () => {
+			if (currentListRef) {
+				currentListRef.removeEventListener('scroll', handleScroll)
+			}
+		}
+	}, [fetchNextPage, hasNextPage, isFetching])
 
 	return (
 		<Popper
 			open={open}
 			anchorEl={anchorEl}
 			placement="bottom-start"
 			onClose={onClose}
+			modifiers={[
+				{
+					name: 'offset',
+					options: { offset: [0, 8] }
+				}
+			]}
 		>
 			<Paper elevation={0}>
 				<List
+					ref={listRef}
 					sx={{ width: 250, maxHeight: 300, overflow: 'auto' }}
-					onScroll={handleScroll}
 				>
 					{data?.pages.flatMap((page) =>
 						page.users.slice(0, totalLikes).map((user) => (
 							<ListItem key={user.id}>
 								<ListItemAvatar>
-									<Avatar
-										src={`/placeholder.svg?height=40&width=40`}
-										alt={user.name}
-										sx={{ bgcolor: user.avatarColor }}
-									>
-										{user.name.charAt(0)}
-									</Avatar>
+									<UserAvatar user={user} size={40} />
 								</ListItemAvatar>
-								<ListItemText primary={user.name} />
+								<ListItemText primary={user.fullName} />
 							</ListItem>
 						))
 					)}

diff --git a/client/src/components/dialogues/SharePost.jsx b/client/src/components/dialogues/SharePost.jsx
@@ -28,10 +28,12 @@ const SharePostDialog = ({ url, open, setOpen }) => {
 		whatsapp: `https://api.whatsapp.com/send?text=${encodeURIComponent(url)}`
 	}
 	const { openSnackbar } = useStore()
-	const handleCopy = () =>
+	const handleCopy = () =>{
 		navigator.clipboard.writeText(url).then(() => {
 			openSnackbar('Link copied to clipboard', 'info')
 		})
+		handleClose()
+	}
 
 	return (
 		<Dialog

diff --git a/client/src/hooks/reactions.js b/client/src/hooks/reactions.js
@@ -52,8 +52,8 @@ export const useLikeComment = () => {
 
 			const previousData = queryClient.getQueryData(queryKey)
 			queryClient.setQueryData(queryKey, () => ({
-				likes:
-					(previousData?.likes || 0) +
+				likeCount:
+					(previousData?.likeCount || 0) +
 					(previousData?.isLiked ? -1 : 1),
 				isLiked: !previousData?.isLiked
 			}))
@@ -115,8 +115,8 @@ export const useGetLikedUsers = (commentId) => {
 			const end = start + pageSize
 			const dummyUsers = Array.from({ length: pageSize }, (_, i) => ({
 				id: start + i + 1,
-				name: `User ${start + i + 1}`,
-				avatarColor: `hsl(${Math.random() * 360}, 70%, 50%)`
+				fullName: `John Doe ${start + i + 1}`,
+				imageUrl: `https://i.pravatar.cc?u=${start + i + 1}`
 			}))
 			return {
 				users: dummyUsers,

diff --git a/server/bun.lockb b/server/bun.lockb
diff --git a/server/package.json b/server/package.json
@@ -26,16 +26,16 @@
         "prisma:deploy": "prisma migrate deploy"
     },
     "dependencies": {
-        "@clerk/backend": "^1.18.0",
+        "@clerk/backend": "^1.20.2",
         "@elysiajs/cors": "^1.1.1",
         "@elysiajs/cron": "^1.1.1",
         "@elysiajs/swagger": "^1.1.6",
         "@neondatabase/serverless": "^0.10.4",
-        "@prisma/adapter-neon": "^6.0.0",
-        "@prisma/client": "^6.0.0",
+        "@prisma/adapter-neon": "^6.0.1",
+        "@prisma/client": "^6.0.1",
         "cloudinary": "^2.5.1",
         "elysia": "latest",
-        "svix": "^1.42.0"
+        "svix": "^1.43.0"
     },
     "peerDependencies": {
         "typescript": "^5.6.3"
@@ -57,4 +57,4 @@
         "cron",
         "render"
     ]
-}
+}