From 7eb95b8ce02793083f89e0272e5d790768750563 Mon Sep 17 00:00:00 2001 From: Ategon Date: Mon, 27 Jan 2025 21:40:12 -0500 Subject: [PATCH] Add comments --- src/app/p/[slug]/page.tsx | 882 +++++++++++++++------------ src/components/posts/CommentCard.tsx | 162 +++++ src/components/posts/LikeButton.tsx | 47 +- src/components/posts/PostCard.tsx | 20 +- src/types/CommentType.ts | 11 + src/types/PostType.ts | 2 + 6 files changed, 695 insertions(+), 429 deletions(-) create mode 100644 src/components/posts/CommentCard.tsx create mode 100644 src/types/CommentType.ts diff --git a/src/app/p/[slug]/page.tsx b/src/app/p/[slug]/page.tsx index cb8f110..fff860e 100644 --- a/src/app/p/[slug]/page.tsx +++ b/src/app/p/[slug]/page.tsx @@ -1,7 +1,7 @@ "use client"; import LikeButton from "@/components/posts/LikeButton"; -import { getCookie } from "@/helpers/cookie"; +import { getCookie, hasCookie } from "@/helpers/cookie"; import { PostType } from "@/types/PostType"; import { TagType } from "@/types/TagType"; import { UserType } from "@/types/UserType"; @@ -36,6 +36,9 @@ import { import { redirect, useParams } from "next/navigation"; import { useEffect, useState } from "react"; import { toast } from "react-toastify"; +import Editor from "@/components/editor"; +import sanitizeHtml from "sanitize-html"; +import CommentCard from "@/components/posts/CommentCard"; export default function PostPage() { const [post, setPost] = useState(); @@ -43,6 +46,8 @@ export default function PostPage() { const [reduceMotion, setReduceMotion] = useState(false); const [user, setUser] = useState(); const [loading, setLoading] = useState(true); + const [content, setContent] = useState(""); + const [waitingPost, setWaitingPost] = useState(false); useEffect(() => { const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)"); @@ -110,210 +115,136 @@ export default function PostPage() { /> ) : ( - - -
- {post && ( -
- -

{post.title}

- - -
-

By

- - -

{post.author.name}

+ <> + + +
+ {post && ( +
+ +

{post.title}

-

- {formatDistance(new Date(post.createdAt), new Date(), { - addSuffix: true, - })} -

-
- - -
- - - - {post.tags.filter((tag) => tag.name != "D2Jam").length > 0 ? ( -
- {post.tags - .filter((tag) => tag.name != "D2Jam") - .map((tag: TagType) => ( - - - ) - } - > - {tag.name} - - - ))} +
+

By

+ + +

{post.author.name}

+ +

+ {formatDistance(new Date(post.createdAt), new Date(), { + addSuffix: true, + })} +

- ) : ( - <> - )} - {post.tags.length > 0 && } + -
- - - - - - - - - } - description="Report this post to moderators to handle" - onPress={() => { - toast.warning("Report functionality coming soon"); - }} + + + + + + + - Create Report - - {user?.slug == post.author.slug ? ( } - description="Delete your post" - onPress={async () => { - const response = await fetch( - process.env.NEXT_PUBLIC_MODE === "PROD" - ? "https://d2jam.com/api/v1/post" - : "http://localhost:3005/api/v1/post", - { - body: JSON.stringify({ - postId: post.id, - username: getCookie("user"), - }), - method: "DELETE", - headers: { - "Content-Type": "application/json", - authorization: `Bearer ${getCookie( - "token" - )}`, - }, - credentials: "include", - } + key="report" + startContent={} + description="Report this post to moderators to handle" + onPress={() => { + toast.warning( + "Report functionality coming soon" ); - - if (response.ok) { - toast.success("Deleted post"); - redirect("/"); - } else { - toast.error("Error while deleting post"); - } }} > - Delete + Create Report - ) : ( - <> - )} - - {user?.mod ? ( - - } - description="Remove this post" - onPress={async () => { - const response = await fetch( - process.env.NEXT_PUBLIC_MODE === "PROD" - ? "https://d2jam.com/api/v1/post" - : "http://localhost:3005/api/v1/post", - { - body: JSON.stringify({ - postId: post.id, - username: getCookie("user"), - }), - method: "DELETE", - headers: { - "Content-Type": "application/json", - authorization: `Bearer ${getCookie( - "token" - )}`, - }, - credentials: "include", - } - ); - - if (response.ok) { - toast.success("Removed post"); - redirect("/"); - } else { - toast.error("Error while removing post"); - } - }} - > - Remove - - {post.sticky ? ( + {user?.slug == post.author.slug ? ( } - description="Unsticky post" + key="delete" + startContent={} + description="Delete your post" onPress={async () => { const response = await fetch( process.env.NEXT_PUBLIC_MODE === "PROD" - ? "https://d2jam.com/api/v1/post/sticky" - : "http://localhost:3005/api/v1/post/sticky", + ? "https://d2jam.com/api/v1/post" + : "http://localhost:3005/api/v1/post", { body: JSON.stringify({ postId: post.id, - sticky: false, username: getCookie("user"), }), - method: "POST", + method: "DELETE", headers: { "Content-Type": "application/json", authorization: `Bearer ${getCookie( @@ -325,234 +256,383 @@ export default function PostPage() { ); if (response.ok) { - toast.success("Unsticked post"); + toast.success("Deleted post"); redirect("/"); } else { - toast.error("Error while removing post"); + toast.error("Error while deleting post"); } }} > - Unsticky - - ) : ( - } - description="Sticky post" - onPress={async () => { - const response = await fetch( - process.env.NEXT_PUBLIC_MODE === "PROD" - ? "https://d2jam.com/api/v1/post/sticky" - : "http://localhost:3005/api/v1/post/sticky", - { - body: JSON.stringify({ - postId: post.id, - sticky: true, - username: getCookie("user"), - }), - method: "POST", - headers: { - "Content-Type": "application/json", - authorization: `Bearer ${getCookie( - "token" - )}`, - }, - credentials: "include", - } - ); - - if (response.ok) { - toast.success("Unsticked post"); - redirect("/"); - } else { - toast.error("Error while removing post"); - } - }} - > - Sticky - - )} - {user?.admin && !post.author.mod ? ( - } - description="Promote user to Mod" - onPress={async () => { - const response = await fetch( - process.env.NEXT_PUBLIC_MODE === "PROD" - ? "https://d2jam.com/api/v1/mod" - : "http://localhost:3005/api/v1/mod", - { - body: JSON.stringify({ - targetname: post.author.slug, - mod: true, - username: getCookie("user"), - }), - method: "POST", - headers: { - "Content-Type": "application/json", - authorization: `Bearer ${getCookie( - "token" - )}`, - }, - credentials: "include", - } - ); - - if (response.ok) { - toast.success("Promoted User to Mod"); - window.location.reload(); - } else { - toast.error( - "Error while promoting user to Mod" - ); - } - }} - > - Appoint as mod - - ) : ( - <> - )} - {user?.admin && - post.author.mod && - !post.author.admin ? ( - } - description="Demote user from Mod" - onPress={async () => { - const response = await fetch( - process.env.NEXT_PUBLIC_MODE === "PROD" - ? "https://d2jam.com/api/v1/mod" - : "http://localhost:3005/api/v1/mod", - { - body: JSON.stringify({ - targetname: post.author.slug, - username: getCookie("user"), - }), - method: "POST", - headers: { - "Content-Type": "application/json", - authorization: `Bearer ${getCookie( - "token" - )}`, - }, - credentials: "include", - } - ); - - if (response.ok) { - toast.success("Demoted User"); - window.location.reload(); - } else { - toast.error("Error while demoting user"); - } - }} - > - Remove as mod - - ) : ( - <> - )} - {user?.admin && !post.author.admin ? ( - } - description="Promote user to Admin" - onPress={async () => { - const response = await fetch( - process.env.NEXT_PUBLIC_MODE === "PROD" - ? "https://d2jam.com/api/v1/mod" - : "http://localhost:3005/api/v1/mod", - { - body: JSON.stringify({ - targetname: post.author.slug, - admin: true, - username: getCookie("user"), - }), - method: "POST", - headers: { - "Content-Type": "application/json", - authorization: `Bearer ${getCookie( - "token" - )}`, - }, - credentials: "include", - } - ); - - if (response.ok) { - toast.success("Promoted User to Admin"); - window.location.reload(); - } else { - toast.error( - "Error while promoting user to Admin" - ); - } - }} - > - Appoint as admin - - ) : ( - <> - )} - {user?.admin && - post.author.admin && - post.author.id !== user.id ? ( - } - description="Demote user to mod" - onPress={async () => { - const response = await fetch( - process.env.NEXT_PUBLIC_MODE === "PROD" - ? "https://d2jam.com/api/v1/mod" - : "http://localhost:3005/api/v1/mod", - { - body: JSON.stringify({ - targetname: post.author.slug, - mod: true, - username: getCookie("user"), - }), - method: "POST", - headers: { - "Content-Type": "application/json", - authorization: `Bearer ${getCookie( - "token" - )}`, - }, - credentials: "include", - } - ); - - if (response.ok) { - toast.success("Demoted User to Mod"); - window.location.reload(); - } else { - toast.error( - "Error while demoting user to mod" - ); - } - }} - > - Remove as admin + Delete ) : ( <> )} - ) : ( - <> - )} - - + {user?.mod ? ( + + } + description="Remove this post" + onPress={async () => { + const response = await fetch( + process.env.NEXT_PUBLIC_MODE === "PROD" + ? "https://d2jam.com/api/v1/post" + : "http://localhost:3005/api/v1/post", + { + body: JSON.stringify({ + postId: post.id, + username: getCookie("user"), + }), + method: "DELETE", + headers: { + "Content-Type": "application/json", + authorization: `Bearer ${getCookie( + "token" + )}`, + }, + credentials: "include", + } + ); + + if (response.ok) { + toast.success("Removed post"); + redirect("/"); + } else { + toast.error("Error while removing post"); + } + }} + > + Remove + + {post.sticky ? ( + } + description="Unsticky post" + onPress={async () => { + const response = await fetch( + process.env.NEXT_PUBLIC_MODE === "PROD" + ? "https://d2jam.com/api/v1/post/sticky" + : "http://localhost:3005/api/v1/post/sticky", + { + body: JSON.stringify({ + postId: post.id, + sticky: false, + username: getCookie("user"), + }), + method: "POST", + headers: { + "Content-Type": "application/json", + authorization: `Bearer ${getCookie( + "token" + )}`, + }, + credentials: "include", + } + ); + + if (response.ok) { + toast.success("Unsticked post"); + redirect("/"); + } else { + toast.error("Error while removing post"); + } + }} + > + Unsticky + + ) : ( + } + description="Sticky post" + onPress={async () => { + const response = await fetch( + process.env.NEXT_PUBLIC_MODE === "PROD" + ? "https://d2jam.com/api/v1/post/sticky" + : "http://localhost:3005/api/v1/post/sticky", + { + body: JSON.stringify({ + postId: post.id, + sticky: true, + username: getCookie("user"), + }), + method: "POST", + headers: { + "Content-Type": "application/json", + authorization: `Bearer ${getCookie( + "token" + )}`, + }, + credentials: "include", + } + ); + + if (response.ok) { + toast.success("Unsticked post"); + redirect("/"); + } else { + toast.error("Error while removing post"); + } + }} + > + Sticky + + )} + {user?.admin && !post.author.mod ? ( + } + description="Promote user to Mod" + onPress={async () => { + const response = await fetch( + process.env.NEXT_PUBLIC_MODE === "PROD" + ? "https://d2jam.com/api/v1/mod" + : "http://localhost:3005/api/v1/mod", + { + body: JSON.stringify({ + targetname: post.author.slug, + mod: true, + username: getCookie("user"), + }), + method: "POST", + headers: { + "Content-Type": "application/json", + authorization: `Bearer ${getCookie( + "token" + )}`, + }, + credentials: "include", + } + ); + + if (response.ok) { + toast.success("Promoted User to Mod"); + window.location.reload(); + } else { + toast.error( + "Error while promoting user to Mod" + ); + } + }} + > + Appoint as mod + + ) : ( + <> + )} + {user?.admin && + post.author.mod && + !post.author.admin ? ( + } + description="Demote user from Mod" + onPress={async () => { + const response = await fetch( + process.env.NEXT_PUBLIC_MODE === "PROD" + ? "https://d2jam.com/api/v1/mod" + : "http://localhost:3005/api/v1/mod", + { + body: JSON.stringify({ + targetname: post.author.slug, + username: getCookie("user"), + }), + method: "POST", + headers: { + "Content-Type": "application/json", + authorization: `Bearer ${getCookie( + "token" + )}`, + }, + credentials: "include", + } + ); + + if (response.ok) { + toast.success("Demoted User"); + window.location.reload(); + } else { + toast.error("Error while demoting user"); + } + }} + > + Remove as mod + + ) : ( + <> + )} + {user?.admin && !post.author.admin ? ( + } + description="Promote user to Admin" + onPress={async () => { + const response = await fetch( + process.env.NEXT_PUBLIC_MODE === "PROD" + ? "https://d2jam.com/api/v1/mod" + : "http://localhost:3005/api/v1/mod", + { + body: JSON.stringify({ + targetname: post.author.slug, + admin: true, + username: getCookie("user"), + }), + method: "POST", + headers: { + "Content-Type": "application/json", + authorization: `Bearer ${getCookie( + "token" + )}`, + }, + credentials: "include", + } + ); + + if (response.ok) { + toast.success("Promoted User to Admin"); + window.location.reload(); + } else { + toast.error( + "Error while promoting user to Admin" + ); + } + }} + > + Appoint as admin + + ) : ( + <> + )} + {user?.admin && + post.author.admin && + post.author.id !== user.id ? ( + } + description="Demote user to mod" + onPress={async () => { + const response = await fetch( + process.env.NEXT_PUBLIC_MODE === "PROD" + ? "https://d2jam.com/api/v1/mod" + : "http://localhost:3005/api/v1/mod", + { + body: JSON.stringify({ + targetname: post.author.slug, + mod: true, + username: getCookie("user"), + }), + method: "POST", + headers: { + "Content-Type": "application/json", + authorization: `Bearer ${getCookie( + "token" + )}`, + }, + credentials: "include", + } + ); + + if (response.ok) { + toast.success("Demoted User to Mod"); + window.location.reload(); + } else { + toast.error( + "Error while demoting user to mod" + ); + } + }} + > + Remove as admin + + ) : ( + <> + )} + + ) : ( + <> + )} + + +
-
- )} -
- - + )} +
+ + +
+ + + + + + +
+ {post?.comments.map((comment) => ( +
+ +
+ ))} +
+ )} ); diff --git a/src/components/posts/CommentCard.tsx b/src/components/posts/CommentCard.tsx new file mode 100644 index 0000000..ff6b469 --- /dev/null +++ b/src/components/posts/CommentCard.tsx @@ -0,0 +1,162 @@ +import { CommentType } from "@/types/CommentType"; +import { Avatar, Button, Card, CardBody, Spacer } from "@nextui-org/react"; +import { formatDistance } from "date-fns"; +import { LoaderCircle, Reply } from "lucide-react"; +import Link from "next/link"; +import { useState } from "react"; +import Editor from "../editor"; +import { toast } from "react-toastify"; +import { getCookie, hasCookie } from "@/helpers/cookie"; +import sanitizeHtml from "sanitize-html"; +import LikeButton from "./LikeButton"; + +export default function CommentCard({ comment }: { comment: CommentType }) { + const [creatingReply, setCreatingReply] = useState(false); + const [content, setContent] = useState(""); + const [waitingPost, setWaitingPost] = useState(false); + + return ( + + +
+
+

By

+ + +

{comment.author.name}

+ +

+ {formatDistance(new Date(comment.createdAt), new Date(), { + addSuffix: true, + })} +

+
+ + + +
+ + + +
+ + + +
+ + + + {creatingReply && ( + <> + +
+ + + + + )} + + {comment.children.length > 0 && + (comment.children[0].author ? ( +
+ {comment.children.map((comment) => ( + + ))} +
+ ) : ( + + ))} +
+ + + ); +} diff --git a/src/components/posts/LikeButton.tsx b/src/components/posts/LikeButton.tsx index be88e03..6106fa9 100644 --- a/src/components/posts/LikeButton.tsx +++ b/src/components/posts/LikeButton.tsx @@ -1,7 +1,6 @@ "use client"; import { Button } from "@nextui-org/react"; -import { PostType } from "@/types/PostType"; import { Heart } from "lucide-react"; import { toast } from "react-toastify"; import { getCookie } from "@/helpers/cookie"; @@ -9,11 +8,22 @@ import { redirect } from "next/navigation"; import { useState, useEffect } from "react"; import { useTheme } from "next-themes"; -export default function LikeButton({ post }: { post: PostType }) { - const [likes, setLikes] = useState(post.likes.length); - const [liked, setLiked] = useState(false); +export default function LikeButton({ + likes, + liked, + parentId, + isComment = false, +}: { + likes: number; + liked: boolean; + parentId: number; + isComment?: boolean; +}) { const { theme } = useTheme(); const [reduceMotion, setReduceMotion] = useState(false); + const [likeEffect, setLikeEffect] = useState(false); + const [updatedLikes, setUpdatedLikes] = useState(likes); + const [updatedLiked, setUpdatedLiked] = useState(liked); useEffect(() => { const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)"); @@ -34,8 +44,8 @@ export default function LikeButton({ post }: { post: PostType }) { size="sm" variant="bordered" style={{ - color: post.hasLiked ? (theme == "dark" ? "#5ed4f7" : "#05b7eb") : "", - borderColor: post.hasLiked + color: updatedLiked ? (theme == "dark" ? "#5ed4f7" : "#05b7eb") : "", + borderColor: updatedLiked ? theme == "dark" ? "#5ed4f744" : "#05b7eb44" @@ -59,27 +69,28 @@ export default function LikeButton({ post }: { post: PostType }) { credentials: "include", body: JSON.stringify({ username: getCookie("user"), - postId: post.id, + postId: !isComment ? parentId : 0, + commentId: isComment ? parentId : 0, }), } ); - post.hasLiked = !post.hasLiked; - - if (post.hasLiked) { - setLiked(true); - setTimeout(() => setLiked(false), 1000); - setLikes(likes + 1); + if (!updatedLiked) { + setLikeEffect(true); + setTimeout(() => setLikeEffect(false), 1000); + setUpdatedLikes(updatedLikes + 1); } else { - setLiked(false); - setLikes(likes - 1); + setLikeEffect(false); + setUpdatedLikes(updatedLikes - 1); } + setUpdatedLiked(!updatedLiked); + if (!response.ok) { if (response.status == 401) { redirect("/login"); } else { - post.hasLiked = !post.hasLiked; + setUpdatedLiked(!updatedLiked); toast.error("An error occurred"); return; } @@ -91,7 +102,7 @@ export default function LikeButton({ post }: { post: PostType }) { -

{likes}

+

{updatedLikes}

); diff --git a/src/components/posts/PostCard.tsx b/src/components/posts/PostCard.tsx index ef7ba1f..e439bdc 100644 --- a/src/components/posts/PostCard.tsx +++ b/src/components/posts/PostCard.tsx @@ -197,16 +197,16 @@ export default function PostCard({ {post.tags.length > 0 && }
- - + + + +