Reply functionality added

Author: burakorkmez

frontend/src/components/Actions.jsx

@@ -1,4 +1,19 @@
-import { Box, Flex, Text } from "@chakra-ui/react";
+import {
+	Box,
+	Button,
+	Flex,
+	FormControl,
+	Input,
+	Modal,
+	ModalBody,
+	ModalCloseButton,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+	ModalOverlay,
+	Text,
+	useDisclosure,
+} from "@chakra-ui/react";
 import { useState } from "react";
 import { useRecoilValue } from "recoil";
 import userAtom from "../atoms/userAtom";
@@ -7,9 +22,13 @@ import useShowToast from "../hooks/useShowToast";
 const Actions = ({ post: post_ }) => {
 	const user = useRecoilValue(userAtom);
 	const [liked, setLiked] = useState(post_.likes.includes(user?._id));
-	const showToast = useShowToast();
 	const [post, setPost] = useState(post_);
 	const [isLiking, setIsLiking] = useState(false);
+	const [isReplying, setIsReplying] = useState(false);
+	const [reply, setReply] = useState("");
+
+	const showToast = useShowToast();
+	const { isOpen, onOpen, onClose } = useDisclosure();
 
 	const handleLikeAndUnlike = async () => {
 		if (!user) return showToast("Error", "You must be logged in to like a post", "error");
@@ -41,6 +60,32 @@ const Actions = ({ post: post_ }) => {
 		}
 	};
 
+	const handleReply = async () => {
+		if (!user) return showToast("Error", "You must be logged in to reply to a post", "error");
+		if (isReplying) return;
+		setIsReplying(true);
+		try {
+			const res = await fetch("/api/posts/reply/" + post._id, {
+				method: "PUT",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({ text: reply }),
+			});
+			const data = await res.json();
+			if (data.error) return showToast("Error", data.error, "error");
+
+			setPost({ ...post, replies: [...post.replies, data.reply] });
+			showToast("Success", "Reply posted successfully", "success");
+			onClose();
+			setReply("");
+		} catch (error) {
+			showToast("Error", error.message, "error");
+		} finally {
+			setIsReplying(false);
+		}
+	};
+
 	return (
 		<Flex flexDirection='column'>
 			<Flex gap={3} my={2} onClick={(e) => e.preventDefault()}>
@@ -61,61 +106,28 @@ const Actions = ({ post: post_ }) => {
 					></path>
 				</svg>
 
-				<svg aria-label='Comment' color='' fill='' height='20' role='img' viewBox='0 0 24 24' width='20'>
-					<title>Comment</title>
-					<path
-						d='M20.656 17.008a9.993 9.993 0 1 0-3.59 3.615L22 22Z'
-						fill='none'
-						stroke='currentColor'
-						strokeLinejoin='round'
-						strokeWidth='2'
-					></path>
-				</svg>
-
 				<svg
-					aria-label='Repost'
-					color='currentColor'
-					fill='currentColor'
-					height='20'
-					role='img'
-					viewBox='0 0 24 24'
-					width='20'
-				>
-					<title>Repost</title>
-					<path
-						fill=''
-						d='M19.998 9.497a1 1 0 0 0-1 1v4.228a3.274 3.274 0 0 1-3.27 3.27h-5.313l1.791-1.787a1 1 0 0 0-1.412-1.416L7.29 18.287a1.004 1.004 0 0 0-.294.707v.001c0 .023.012.042.013.065a.923.923 0 0 0 .281.643l3.502 3.504a1 1 0 0 0 1.414-1.414l-1.797-1.798h5.318a5.276 5.276 0 0 0 5.27-5.27v-4.228a1 1 0 0 0-1-1Zm-6.41-3.496-1.795 1.795a1 1 0 1 0 1.414 1.414l3.5-3.5a1.003 1.003 0 0 0 0-1.417l-3.5-3.5a1 1 0 0 0-1.414 1.414l1.794 1.794H8.27A5.277 5.277 0 0 0 3 9.271V13.5a1 1 0 0 0 2 0V9.271a3.275 3.275 0 0 1 3.271-3.27Z'
-					></path>
-				</svg>
-
-				<svg
-					aria-label='Share'
+					aria-label='Comment'
 					color=''
-					fill='rgb(243, 245, 247)'
+					fill=''
 					height='20'
 					role='img'
 					viewBox='0 0 24 24'
 					width='20'
+					onClick={onOpen}
 				>
-					<title>Share</title>
-					<line
-						fill='none'
-						stroke='currentColor'
-						strokeLinejoin='round'
-						strokeWidth='2'
-						x1='22'
-						x2='9.218'
-						y1='3'
-						y2='10.083'
-					></line>
-					<polygon
+					<title>Comment</title>
+					<path
+						d='M20.656 17.008a9.993 9.993 0 1 0-3.59 3.615L22 22Z'
 						fill='none'
-						points='11.698 20.334 22 3.001 2 3.001 9.218 10.084 11.698 20.334'
 						stroke='currentColor'
 						strokeLinejoin='round'
 						strokeWidth='2'
-					></polygon>
+					></path>
 				</svg>
+
+				<RepostSVG />
+				<ShareSVG />
 			</Flex>
 
 			<Flex gap={2} alignItems={"center"}>
@@ -127,8 +139,84 @@ const Actions = ({ post: post_ }) => {
 					{post.likes.length} likes
 				</Text>
 			</Flex>
+
+			<Modal isOpen={isOpen} onClose={onClose}>
+				<ModalOverlay />
+				<ModalContent>
+					<ModalHeader></ModalHeader>
+					<ModalCloseButton />
+					<ModalBody pb={6}>
+						<FormControl>
+							<Input
+								placeholder='Reply goes here..'
+								value={reply}
+								onChange={(e) => setReply(e.target.value)}
+							/>
+						</FormControl>
+					</ModalBody>
+
+					<ModalFooter>
+						<Button colorScheme='blue' size={"sm"} mr={3} isLoading={isReplying} onClick={handleReply}>
+							Reply
+						</Button>
+					</ModalFooter>
+				</ModalContent>
+			</Modal>
 		</Flex>
 	);
 };
 
 export default Actions;
+
+const RepostSVG = () => {
+	return (
+		<svg
+			aria-label='Repost'
+			color='currentColor'
+			fill='currentColor'
+			height='20'
+			role='img'
+			viewBox='0 0 24 24'
+			width='20'
+		>
+			<title>Repost</title>
+			<path
+				fill=''
+				d='M19.998 9.497a1 1 0 0 0-1 1v4.228a3.274 3.274 0 0 1-3.27 3.27h-5.313l1.791-1.787a1 1 0 0 0-1.412-1.416L7.29 18.287a1.004 1.004 0 0 0-.294.707v.001c0 .023.012.042.013.065a.923.923 0 0 0 .281.643l3.502 3.504a1 1 0 0 0 1.414-1.414l-1.797-1.798h5.318a5.276 5.276 0 0 0 5.27-5.27v-4.228a1 1 0 0 0-1-1Zm-6.41-3.496-1.795 1.795a1 1 0 1 0 1.414 1.414l3.5-3.5a1.003 1.003 0 0 0 0-1.417l-3.5-3.5a1 1 0 0 0-1.414 1.414l1.794 1.794H8.27A5.277 5.277 0 0 0 3 9.271V13.5a1 1 0 0 0 2 0V9.271a3.275 3.275 0 0 1 3.271-3.27Z'
+			></path>
+		</svg>
+	);
+};
+
+const ShareSVG = () => {
+	return (
+		<svg
+			aria-label='Share'
+			color=''
+			fill='rgb(243, 245, 247)'
+			height='20'
+			role='img'
+			viewBox='0 0 24 24'
+			width='20'
+		>
+			<title>Share</title>
+			<line
+				fill='none'
+				stroke='currentColor'
+				strokeLinejoin='round'
+				strokeWidth='2'
+				x1='22'
+				x2='9.218'
+				y1='3'
+				y2='10.083'
+			></line>
+			<polygon
+				fill='none'
+				points='11.698 20.334 22 3.001 2 3.001 9.218 10.084 11.698 20.334'
+				stroke='currentColor'
+				strokeLinejoin='round'
+				strokeWidth='2'
+			></polygon>
+		</svg>
+	);
+};