From 3b4f1f0476d426c32514bbe78fc62509e524f6b9 Mon Sep 17 00:00:00 2001 From: Ategon Date: Wed, 22 Jan 2025 19:50:08 -0500 Subject: [PATCH] Add post get route --- src/app/p/[slug]/page.tsx | 348 ++++++++++++++++++++++++++++++ src/components/posts/PostCard.tsx | 16 +- src/types/PostType.ts | 1 + 3 files changed, 361 insertions(+), 4 deletions(-) create mode 100644 src/app/p/[slug]/page.tsx diff --git a/src/app/p/[slug]/page.tsx b/src/app/p/[slug]/page.tsx new file mode 100644 index 0000000..24b54f3 --- /dev/null +++ b/src/app/p/[slug]/page.tsx @@ -0,0 +1,348 @@ +"use client"; + +import LikeButton from "@/components/posts/LikeButton"; +import { getCookie } from "@/helpers/cookie"; +import { PostType } from "@/types/PostType"; +import { TagType } from "@/types/TagType"; +import { UserType } from "@/types/UserType"; +import Link from "next/link"; +import { + Avatar, + Button, + Card, + CardBody, + Chip, + Dropdown, + DropdownItem, + DropdownMenu, + DropdownSection, + DropdownTrigger, + Spacer, +} from "@nextui-org/react"; +import { formatDistance } from "date-fns"; +import { + Flag, + LoaderCircle, + MessageCircle, + MoreVertical, + Shield, + ShieldAlert, + ShieldX, + Trash, + X, +} from "lucide-react"; +import { redirect, useParams } from "next/navigation"; +import { useEffect, useState } from "react"; +import { toast } from "react-toastify"; + +export default function PostPage() { + const [post, setPost] = useState(); + const { slug } = useParams(); + const [reduceMotion, setReduceMotion] = useState(false); + const [user, setUser] = useState(); + const [loading, setLoading] = useState(true); + + useEffect(() => { + const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)"); + setReduceMotion(mediaQuery.matches); + + const handleChange = (event: MediaQueryListEvent) => { + setReduceMotion(event.matches); + }; + mediaQuery.addEventListener("change", handleChange); + + return () => { + mediaQuery.removeEventListener("change", handleChange); + }; + }, []); + + useEffect(() => { + const loadUserAndPosts = async () => { + setLoading(true); + + // Fetch the user + const userResponse = await fetch( + process.env.NEXT_PUBLIC_MODE === "PROD" + ? `https://d2jam.com/api/v1/self?username=${getCookie("user")}` + : `http://localhost:3005/api/v1/self?username=${getCookie("user")}`, + { + headers: { authorization: `Bearer ${getCookie("token")}` }, + credentials: "include", + } + ); + + if (userResponse.ok) { + const userData = await userResponse.json(); + setUser(userData); + + const postResponse = await fetch( + process.env.NEXT_PUBLIC_MODE === "PROD" + ? `https://d2jam.com/api/v1/post?slug=${slug}&user=${userData.slug}` + : `http://localhost:3005/api/v1/post?slug=${slug}&user=${userData.slug}` + ); + setPost(await postResponse.json()); + setLoading(false); + } else { + setUser(undefined); + + const postResponse = await fetch( + process.env.NEXT_PUBLIC_MODE === "PROD" + ? `https://d2jam.com/api/v1/post?slug=${slug}` + : `http://localhost:3005/api/v1/post?slug=${slug}` + ); + setPost(await postResponse.json()); + setLoading(false); + } + }; + + loadUserAndPosts(); + }, [slug]); + + return ( + <> + {loading ? ( +
+ +
+ ) : ( + + +
+ {post && ( +
+ +

{post.title}

+ + +
+

By

+ + +

{post.author.name}

+ +

+ {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} + + + ))} +
+ ) : ( + <> + )} + + {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", + } + ); + + if (response.ok) { + toast.success("Deleted post"); + redirect("/"); + } else { + toast.error("Error while deleting post"); + } + }} + > + 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 + + {user?.admin && !post.author.mod ? ( + } + description="Promote user to Mod" + > + Appoint as mod + + ) : ( + <> + )} + {user?.admin && + post.author.mod && + post.author.id !== user.id ? ( + } + description="Demote user from Mod" + > + Remove as mod + + ) : ( + <> + )} + {user?.admin && !post.author.admin ? ( + } + description="Promote user to Admin" + > + Appoint as admin + + ) : ( + <> + )} + + ) : ( + <> + )} + + +
+
+ )} +
+ + + )} + + ); +} diff --git a/src/components/posts/PostCard.tsx b/src/components/posts/PostCard.tsx index ac04e85..f0daae4 100644 --- a/src/components/posts/PostCard.tsx +++ b/src/components/posts/PostCard.tsx @@ -73,7 +73,9 @@ export default function PostCard({ (minimized ? (
-

{post.title}

+ +

{post.title}

+

By

@@ -110,7 +112,9 @@ export default function PostCard({ ) : (
-

{post.title}

+ +

{post.title}

+