feat: post share button on card

client/src/components/Comment.jsx

@@ -158,7 +158,6 @@ const EditComment = ({ initialState, setEditing }) => {
 
 const Comment = ({ comment }) => {
 	const { user } = useUser()
-	const handleLike = () => {}
 	const [editing, setEditing] = useState(false)
 	const navigate = useNavigate()
 	return (

client/src/components/PostCard.jsx

@@ -15,7 +15,9 @@ import {
 	TextField,
 	Autocomplete,
 	Input,
-	Tooltip
+	Tooltip,
+	Menu,
+	MenuItem
 } from '@mui/material'
 import {
 	Delete,
@@ -25,13 +27,15 @@ import {
 	Refresh,
 	VisibilityOff,
 	Visibility,
-	Lock
+	Lock,
+	MoreVert
 } from '@mui/icons-material'
-import { UserAvatar, ReactButton, DeletePostDialog } from '.'
+import { UserAvatar, ReactButton, DeletePostDialog, ShareButton } from '.'
 import moment from 'moment'
 import { convertToBase64, getThumbnail } from '@/lib/utils'
 import { useUser } from '@clerk/clerk-react'
 import { useDeletePost, useUpdatePost } from '@/hooks'
+import { useStore } from '@/store'
 
 const truncate = (text, wordLimit) => {
 	const words = text.split(' ')
@@ -40,6 +44,73 @@ const truncate = (text, wordLimit) => {
 		: text
 }
 
+const MoreButton = ({ setEditing, post }) => {
+	const { openSnackbar } = useStore()
+	const [anchorEl, setAnchorEl] = useState(null)
+	const open = Boolean(anchorEl)
+	const handleClick = (event) => setAnchorEl(event.currentTarget)
+	const handleClose = () => setAnchorEl(null)
+	const { mutate: deletePost } = useDeletePost()
+	const [showDialog, setShowDialog] = useState(false)
+	const handleDelete = () => {
+		deletePost(post.id)
+		setShowDialog(false)
+		handleClose()
+		openSnackbar('Post Deleted Sucessfully')
+	}
+
+	const handleEdit = () => {
+		setEditing(true)
+		handleClose()
+	}
+
+	return (
+		<Box>
+			<IconButton size="small" onClick={handleClick} aria-label="more">
+				<MoreVert />
+			</IconButton>
+			<Menu
+				elevation={0}
+				open={open}
+				anchorEl={anchorEl}
+				onClose={handleClose}
+				anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+				transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+			>
+				<MenuItem
+					sx={{
+						display: 'flex',
+						alignItems: 'center',
+						fontSize: 'small',
+						gap: 1
+					}}
+					onClick={handleEdit}
+				>
+					<Edit color="info" fontSize="small" />
+					Edit
+				</MenuItem>
+				<MenuItem
+					sx={{
+						display: 'flex',
+						alignItems: 'center',
+						fontSize: 'small',
+						gap: 1
+					}}
+					onClick={() => setShowDialog(true)}
+				>
+					<Delete color="error" fontSize="small" />
+					Delete
+				</MenuItem>
+			</Menu>
+			<DeletePostDialog
+				onDelete={handleDelete}
+				open={showDialog}
+				setOpen={setShowDialog}
+			/>
+		</Box>
+	)
+}
+
 const EditCard = ({ post, setEditing }) => {
 	const [editedPost, setEditedPost] = useState(post)
 	const [imagePreview, setImagePreview] = useState(post.imageUrl)
@@ -309,10 +380,6 @@ const EditCard = ({ post, setEditing }) => {
 
 const StaticCard = ({ post, setEditing }) => {
 	const { user } = useUser()
-	const [showDialog, setShowDialog] = useState(false)
-
-	const { mutate: deletePost } = useDeletePost()
-
 	const navigate = useNavigate()
 
 	return (
@@ -346,14 +413,8 @@ const StaticCard = ({ post, setEditing }) => {
 					}
 				}}
 				action={
-					user?.id === post.authorId && (
-						<IconButton
-							aria-label="edit"
-							onClick={() => setEditing(true)}
-							sx={{ color: 'white' }}
-						>
-							<Edit />
-						</IconButton>
+					post.authorId === user?.id && (
+						<MoreButton setEditing={setEditing} post={post} />
 					)
 				}
 			/>
@@ -439,22 +500,7 @@ const StaticCard = ({ post, setEditing }) => {
 					width="100%"
 				>
 					<ReactButton post={post} />
-
-					{user?.id === post.authorId && (
-						<Button
-							color="error"
-							size="small"
-							startIcon={<Delete />}
-							onClick={() => setShowDialog(true)}
-						>
-							Delete
-						</Button>
-					)}
-					<DeletePostDialog
-						onDelete={() => deletePost(post.id)}
-						open={showDialog}
-						setOpen={setShowDialog}
-					/>
+					<ShareButton url={`${window.location.href}/${post.id}`} />
 				</Stack>
 			</CardActions>
 		</Card>

client/src/components/ShareButton.jsx

@@ -0,0 +1,23 @@
+import { Share } from '@mui/icons-material'
+import { IconButton } from '@mui/material'
+import { useState } from 'react'
+import { SharePostDialog } from './dialogues'
+
+const ShareButton = ({ url }) => {
+	const [showDialog, setShowDialog] = useState(false)
+
+	return (
+		<>
+			<IconButton onClick={() => setShowDialog(true)} color="primary">
+				<Share />
+			</IconButton>
+			<SharePostDialog
+				url={url}
+				open={showDialog}
+				setOpen={setShowDialog}
+			/>
+		</>
+	)
+}
+
+export default ShareButton

client/src/components/dialogues/SharePost.jsx

@@ -0,0 +1,116 @@
+import {
+	Button,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogContentText,
+	DialogTitle,
+	IconButton,
+	Stack,
+	TextField
+} from '@mui/material'
+import {
+	ContentCopy,
+	Facebook,
+	LinkedIn,
+	X,
+	WhatsApp
+} from '@mui/icons-material'
+import { useStore } from '@/store'
+
+const SharePostDialog = ({ url, open, setOpen }) => {
+	const handleClose = () => setOpen(false)
+
+	const shareUrls = {
+		facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
+		twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}`,
+		linkedin: `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(url)}`,
+		whatsapp: `https://api.whatsapp.com/send?text=${encodeURIComponent(url)}`
+	}
+	const { openSnackbar } = useStore()
+	const handleCopy = () =>
+		navigator.clipboard.writeText(url).then(() => {
+			openSnackbar('Link copied to clipboard', 'info')
+		})
+
+	return (
+		<Dialog
+			open={open}
+			onClose={handleClose}
+			aria-labelledby="share-post-dialog-title"
+			fullWidth
+			aria-describedby="share-post-dialog-description"
+			PaperProps={{ elevation: 0 }}
+		>
+			<DialogTitle id="share-dialog-title">Share this post</DialogTitle>
+
+			<DialogContent>
+				<DialogContentText
+					id="share-post-dialog-description"
+					color="textDisabled"
+					gutterBottom
+				>
+					Share this post to your favourite social media platforms
+				</DialogContentText>
+				<Stack gap={1}>
+					<TextField
+						fullWidth
+						value={url}
+						slotProps={{
+							input: {
+								readOnly: true,
+								endAdornment: (
+									<IconButton
+										onClick={handleCopy}
+										aria-label="Copy link"
+									>
+										<ContentCopy />
+									</IconButton>
+								)
+							}
+						}}
+					/>
+					<Stack direction="row" spacing={2} justifyContent="center">
+						<IconButton
+							onClick={() =>
+								window.open(shareUrls.facebook, '_blank')
+							}
+							aria-label="Share on Facebook"
+						>
+							<Facebook color="primary" />
+						</IconButton>
+						<IconButton
+							onClick={() =>
+								window.open(shareUrls.twitter, '_blank')
+							}
+							aria-label="Share on Twitter"
+						>
+							<X />
+						</IconButton>
+						<IconButton
+							onClick={() =>
+								window.open(shareUrls.linkedin, '_blank')
+							}
+							aria-label="Share on LinkedIn"
+						>
+							<LinkedIn color="info" />
+						</IconButton>
+						<IconButton
+							onClick={() =>
+								window.open(shareUrls.whatsapp, '_blank')
+							}
+							aria-label="Share on WhatsApp"
+						>
+							<WhatsApp color="success" />
+						</IconButton>
+					</Stack>
+				</Stack>
+			</DialogContent>
+			<DialogActions>
+				<Button onClick={handleClose}>Close</Button>
+			</DialogActions>
+		</Dialog>
+	)
+}
+
+export default SharePostDialog

client/src/components/dialogues/index.js

@@ -1,3 +1,4 @@
 export { default as DeleteCommentDialogue } from './DeleteComment'
 export { default as CreatePostDialog } from './CreatePost'
 export { default as DeletePostDialog } from './DeletePost'
+export { default as SharePostDialog } from './SharePost'

client/src/components/index.js

@@ -15,6 +15,7 @@ export { default as OAuthButtons } from './OAuthButtons'
 export { default as Image } from './Image'
 export { default as ReactButton } from './ReactButton'
 export { default as LikeButton } from './LikeButton'
+export { default as ShareButton } from './ShareButton'
 export * from './skeletons'
 export * from './forms'
 export * from './dialogues'

client/src/pages/Post.jsx

@@ -36,6 +36,7 @@ import {
 	AvatarGroupSkeleton,
 	PostSkeleton,
 	ReactButton,
+	ShareButton,
 	UserAvatar
 } from '@/components'
 import { useGetPost, useGetPostReactions } from '@/hooks'
@@ -111,9 +112,7 @@ const PostCard = () => {
 			<Divider />
 			<CardActions>
 				<ReactButton post={post} />
-				<IconButton onClick={handleShareClick} color="primary">
-					<Share />
-				</IconButton>
+				<ShareButton url={window.location.href} />
 				<Stack
 					direction="row"
 					alignItems="center"
@@ -124,11 +123,6 @@ const PostCard = () => {
 					<Top3Reactions post={post} />
 				</Stack>
 			</CardActions>
-			<ShareDialog
-				open={shareDialogOpen}
-				onClose={() => setShareDialogOpen(false)}
-				url={window.location.href}
-			/>
 		</Card>
 	)
 }
@@ -257,6 +251,7 @@ const ShareDialog = ({ open, onClose, url }) => {
 		</Dialog>
 	)
 }
+
 const Post = () => {
 	return (
 		<Container sx={{ py: { xs: 2, md: 4 }, mb: 10 }} maxWidth="xl">