new nested comments section ui; implimented socket io
This commit is contained in:
parent
85ef7247ea
commit
4a67f1f94b
6
nodemon.json
Normal file
6
nodemon.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"watch": ["src/server/socket"],
|
||||
"ext": "ts,json",
|
||||
"ignore": ["src/**/*.spec.ts"],
|
||||
"exec": "pnpm tsx ./src/server/socket/server.ts"
|
||||
}
|
||||
14
package.json
14
package.json
@ -4,19 +4,21 @@
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev:socket": "pnpm nodemon ./src/server/socket/server.ts",
|
||||
"dev": "concurrently \"pnpm next dev --turbo\" \"pnpm dev:socket\"",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"start:socket": "node ./dist/src/server/socket/server.js",
|
||||
"check": "next lint && tsc --noEmit",
|
||||
"db:generate": "drizzle-kit generate",
|
||||
"db:migrate": "drizzle-kit migrate",
|
||||
"db:push": "drizzle-kit push",
|
||||
"db:studio": "drizzle-kit studio",
|
||||
"dev": "next dev --turbo",
|
||||
"format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
|
||||
"format:write": "prettier --write \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
|
||||
"lint": "next lint",
|
||||
"lint:fix": "next lint --fix",
|
||||
"preview": "next build && next start",
|
||||
"start": "next start",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
@ -46,16 +48,19 @@
|
||||
"@trpc/client": "^11.0.0-rc.446",
|
||||
"@trpc/react-query": "^11.0.0-rc.446",
|
||||
"@trpc/server": "^11.0.0-rc.446",
|
||||
"@types/express": "^5.0.1",
|
||||
"argon2": "^0.41.1",
|
||||
"cheerio": "^1.0.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "1.0.0",
|
||||
"drizzle-orm": "^0.33.0",
|
||||
"express": "^4.21.2",
|
||||
"geist": "^1.3.0",
|
||||
"lucide-react": "^0.477.0",
|
||||
"next": "^15.0.1",
|
||||
"next-auth": "5.0.0-beta.25",
|
||||
"next-safe-action": "^7.10.4",
|
||||
"next-themes": "^0.4.4",
|
||||
"novel": "^1.0.2",
|
||||
"postgres": "^3.4.4",
|
||||
@ -64,6 +69,8 @@
|
||||
"react-hook-form": "^7.54.2",
|
||||
"react-textarea-autosize": "^8.5.7",
|
||||
"server-only": "^0.0.1",
|
||||
"socket.io": "^4.8.1",
|
||||
"socket.io-client": "^4.8.1",
|
||||
"sonner": "^2.0.1",
|
||||
"superjson": "^2.2.1",
|
||||
"tailwind-merge": "^3.0.2",
|
||||
@ -80,16 +87,17 @@
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@typescript-eslint/eslint-plugin": "^8.1.0",
|
||||
"@typescript-eslint/parser": "^8.1.0",
|
||||
"concurrently": "^9.1.2",
|
||||
"dotenv": "^16.4.7",
|
||||
"drizzle-kit": "^0.24.0",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-next": "^15.0.1",
|
||||
"eslint-plugin-drizzle": "^0.2.3",
|
||||
"nodemon": "^3.1.9",
|
||||
"postcss": "^8.4.39",
|
||||
"prettier": "^3.3.2",
|
||||
"prettier-plugin-tailwindcss": "^0.6.5",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"ts-node": "^10.9.2",
|
||||
"tsx": "^4.19.3",
|
||||
"typescript": "^5.5.3"
|
||||
},
|
||||
|
||||
908
pnpm-lock.yaml
generated
908
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -11,12 +11,13 @@ import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Edit, MoreVertical } from "lucide-react";
|
||||
import CommentSection from "@/components/comment/comment-section";
|
||||
import { SocketProvider } from "@/components/socket-context";
|
||||
|
||||
async function Page({ params }: { params: Promise<{ slug: string }> }) {
|
||||
const { slug } = await params;
|
||||
const article = await api.article.get({
|
||||
slug: slug,
|
||||
with: { category: true, comments: { with: { author: true } } },
|
||||
with: { category: true },
|
||||
});
|
||||
if (!article) return notFound();
|
||||
const session = await auth();
|
||||
@ -24,39 +25,43 @@ async function Page({ params }: { params: Promise<{ slug: string }> }) {
|
||||
? hasPermission(session.user.role, Role.EDITOR)
|
||||
: false;
|
||||
return (
|
||||
<div className="max-w-reader w-full px-12">
|
||||
{isEditor && (
|
||||
<div className="flex w-full items-center">
|
||||
<Badge
|
||||
className="size-max"
|
||||
variant={article.published ? "outline" : "destructive"}
|
||||
>
|
||||
{article.published ? "Veröffentlicht" : "Draft"}
|
||||
</Badge>
|
||||
<SocketProvider>
|
||||
<div className="w-full max-w-reader px-12">
|
||||
{isEditor && (
|
||||
<div className="flex w-full items-center">
|
||||
<Badge
|
||||
className="size-max"
|
||||
variant={article.published ? "outline" : "destructive"}
|
||||
>
|
||||
{article.published ? "Veröffentlicht" : "Draft"}
|
||||
</Badge>
|
||||
|
||||
<div className="flex w-full justify-end gap-2">
|
||||
<Button asChild variant={"outline"}>
|
||||
<Link href={appRoutes.editArticle(article.slug)}>
|
||||
<Edit className="size-4" />
|
||||
<span>Bearbeiten</span>
|
||||
</Link>
|
||||
</Button>
|
||||
<Button size={"icon"} variant={"outline"}>
|
||||
<MoreVertical className="size-4" />
|
||||
</Button>
|
||||
<div className="flex w-full justify-end gap-2">
|
||||
<Button asChild variant={"outline"}>
|
||||
<Link href={appRoutes.editArticle(article.slug)}>
|
||||
<Edit className="size-4" />
|
||||
<span>Bearbeiten</span>
|
||||
</Link>
|
||||
</Button>
|
||||
<Button size={"icon"} variant={"outline"}>
|
||||
<MoreVertical className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<div className="w-full space-y-4">
|
||||
<h1 className="text-4xl font-bold">{article.title}</h1>
|
||||
<div className="w-full">
|
||||
{article.content && <RenderContent content={article.content} />}
|
||||
)}
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<div className="w-full space-y-4">
|
||||
<h1 className="text-4xl font-bold">{article.title}</h1>
|
||||
<div className="w-full">
|
||||
{article.content && <RenderContent content={article.content} />}
|
||||
</div>
|
||||
</div>
|
||||
<CommentSection articleId={article.id} />
|
||||
</div>
|
||||
<CommentSection articleId={article.id} comments={article.comments} />
|
||||
|
||||
<div className="flex h-64 items-center justify-center">empty</div>
|
||||
</div>
|
||||
</div>
|
||||
</SocketProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { AppSidebar } from "@/components/layout/app-sidebar";
|
||||
import Navbar from "@/components/layout/navbar";
|
||||
import { SessionProvider } from "@/components/session-provider";
|
||||
import { SidebarProvider } from "@/components/ui/sidebar";
|
||||
import { auth } from "@/server/auth";
|
||||
import { api, HydrateClient } from "@/trpc/server";
|
||||
@ -11,13 +12,15 @@ async function Layout({ children }: { children: React.ReactNode }) {
|
||||
|
||||
return (
|
||||
<HydrateClient>
|
||||
<SidebarProvider>
|
||||
<AppSidebar user={session?.user} />
|
||||
<div className="h-screen w-full bg-background">
|
||||
<Navbar />
|
||||
<main className="space-y-4 p-4">{children}</main>
|
||||
</div>
|
||||
</SidebarProvider>
|
||||
<SessionProvider session={session}>
|
||||
<SidebarProvider>
|
||||
<AppSidebar user={session?.user} />
|
||||
<div className="h-screen w-full bg-background">
|
||||
<Navbar />
|
||||
<main className="space-y-4 p-4">{children}</main>
|
||||
</div>
|
||||
</SidebarProvider>
|
||||
</SessionProvider>
|
||||
</HydrateClient>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ import { api } from "@/trpc/react";
|
||||
import React from "react";
|
||||
import { ARTICLE_GRID_CLASS } from "./article-grid";
|
||||
import ArticleCard from "../article-card";
|
||||
import { useInfiniteItemsObserver } from "@/lib/hooks/infinite-items-observer-hook";
|
||||
import { useInfiniteItemsObserver } from "@/lib/hooks/use-infinite-observer-hook";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import ArticleFilterBar, { ArticleFilter } from "../article-filter-bar";
|
||||
import { Article } from "@/server/db/schema";
|
||||
|
||||
@ -4,7 +4,7 @@ import { api } from "@/trpc/react";
|
||||
import React from "react";
|
||||
|
||||
import CategoryCard from "../category-card";
|
||||
import { useInfiniteItemsObserver } from "@/lib/hooks/infinite-items-observer-hook";
|
||||
import { useInfiniteItemsObserver } from "@/lib/hooks/use-infinite-observer-hook";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { CATEGORY_GRID_CLASS } from "./category-grid";
|
||||
import CategoryFilterBar, { CategoryFilter } from "../category-filter-bar";
|
||||
|
||||
40
src/components/comment/comment-delete-button.tsx
Normal file
40
src/components/comment/comment-delete-button.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import React from "react";
|
||||
import { Button } from "../ui/button";
|
||||
import { Trash } from "lucide-react";
|
||||
import { api } from "@/trpc/react";
|
||||
import { toast } from "sonner";
|
||||
import { DELETE_COMMENT_EVENT } from "@/server/socket/event-const";
|
||||
import { useSocket } from "../socket-context";
|
||||
|
||||
function CommentDeleteButton({ commentId }: { commentId: string }) {
|
||||
const { socket } = useSocket();
|
||||
const [loading, setLoading] = React.useState(false);
|
||||
const { mutate } = api.comment.delete.useMutation({
|
||||
onSuccess: (comment) => {
|
||||
setLoading(false);
|
||||
socket?.emit(DELETE_COMMENT_EVENT, comment?.id, comment?.articleId);
|
||||
|
||||
toast.success("Kommentar gelöscht.");
|
||||
},
|
||||
onError: () => {
|
||||
setLoading(false);
|
||||
toast.error("Etwas ist schief gelaufen.");
|
||||
},
|
||||
});
|
||||
const handleClick = () => {
|
||||
setLoading(true);
|
||||
mutate({ commentId });
|
||||
};
|
||||
return (
|
||||
<Button
|
||||
disabled={loading}
|
||||
onClick={handleClick}
|
||||
size={"tiny"}
|
||||
className="bg-destructive/20 text-destructive hover:bg-destructive hover:text-destructive-foreground"
|
||||
>
|
||||
<Trash className="size-4" />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export default CommentDeleteButton;
|
||||
@ -19,16 +19,35 @@ import { createComment } from "@/server/actions/comment";
|
||||
import { toast } from "sonner";
|
||||
import { EditorInstance } from "novel";
|
||||
import { XIcon } from "lucide-react";
|
||||
import { useSocket } from "../socket-context";
|
||||
import { ADD_COMMENT_EVENT } from "@/server/socket/event-const";
|
||||
import { api } from "@/trpc/react";
|
||||
|
||||
function CommentForm({
|
||||
articleId,
|
||||
parentComment,
|
||||
removeReplyComment,
|
||||
commentRefs,
|
||||
}: {
|
||||
articleId: string;
|
||||
parentComment?: Comment;
|
||||
commentRefs: React.MutableRefObject<Map<string, HTMLDivElement | null>>;
|
||||
removeReplyComment: () => void;
|
||||
}) {
|
||||
const [loading, setLoading] = React.useState(false);
|
||||
const { mutate } = api.comment.create.useMutation({
|
||||
onSuccess: (comment) => {
|
||||
setLoading(false);
|
||||
socket?.emit(ADD_COMMENT_EVENT, comment);
|
||||
|
||||
toast.success("Kommentar hinzugefügt.");
|
||||
},
|
||||
onError: () => {
|
||||
setLoading(false);
|
||||
toast.error("Etwas ist schief gelaufen.");
|
||||
},
|
||||
});
|
||||
const { socket } = useSocket();
|
||||
const form = useForm<z.infer<typeof commentSchema>>({
|
||||
resolver: zodResolver(commentSchema),
|
||||
defaultValues: {
|
||||
@ -38,19 +57,23 @@ function CommentForm({
|
||||
});
|
||||
const editorRef = React.useRef<EditorInstance | null>(null);
|
||||
const editor = editorRef.current;
|
||||
|
||||
async function onSubmit(values: z.infer<typeof commentSchema>) {
|
||||
const { success } = await createComment(
|
||||
{
|
||||
...values,
|
||||
parentId: parentComment?.id?.length ? parentComment.id : undefined,
|
||||
},
|
||||
articleId,
|
||||
);
|
||||
if (!success) toast.error("Etwas ist schief gelaufen.");
|
||||
else toast.success("Dein Kommentar wurde hinzugefügt.");
|
||||
setLoading(true);
|
||||
mutate({ comment: { ...values, parentId: parentComment?.id }, articleId });
|
||||
|
||||
form.reset();
|
||||
editor?.commands?.clearContent();
|
||||
removeReplyComment();
|
||||
// setTimeout(() => {
|
||||
// const el = commentRefs.current.get(res?.data?.data!);
|
||||
// console.log("el", el);
|
||||
// el?.scrollIntoView({
|
||||
// behavior: "smooth",
|
||||
// block: "start",
|
||||
// });
|
||||
// el?.classList.add("animate-fade-in");
|
||||
// }, 500);
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
|
||||
@ -2,26 +2,32 @@ import { CommentNode, Comment as CommentType } from "@/server/db/schema";
|
||||
import React from "react";
|
||||
import { buildCommentTree } from "@/lib/utils/comments";
|
||||
import Comment from "./comment";
|
||||
import { useSession } from "../session-provider";
|
||||
|
||||
function CommentList({
|
||||
comments,
|
||||
setReplyComment,
|
||||
commentRefs,
|
||||
}: {
|
||||
comments: Array<CommentType>;
|
||||
setReplyComment: (comment: CommentNode) => void;
|
||||
commentRefs: React.MutableRefObject<Map<string, HTMLDivElement | null>>;
|
||||
}) {
|
||||
const { session } = useSession();
|
||||
const commentTree = buildCommentTree(comments);
|
||||
|
||||
return (
|
||||
<ul>
|
||||
<ul className="flex flex-col gap-4">
|
||||
{commentTree.map((comment) => (
|
||||
<Comment
|
||||
key={comment.id}
|
||||
session={session}
|
||||
comment={comment}
|
||||
setReplyComment={setReplyComment}
|
||||
setRef={(el) => commentRefs.current.set(comment.id, el)}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default CommentList;
|
||||
|
||||
@ -1,21 +1,30 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import CommentForm from "@/components/comment/comment-form";
|
||||
import CommentList from "@/components/comment/comment-list";
|
||||
import { Comment, CommentNode } from "@/server/db/schema";
|
||||
import { Badge } from "../ui/badge";
|
||||
import { Button } from "../ui/button";
|
||||
import { useComments } from "@/lib/hooks/use-comments-hook";
|
||||
|
||||
import { SocketProvider, useSocket } from "../socket-context";
|
||||
import { JOIN_ROOM_EVENT } from "@/server/socket/event-const";
|
||||
|
||||
function CommentSection({ articleId }: { articleId: string }) {
|
||||
const { comments } = useComments(articleId);
|
||||
const [replyComment, setReplyComment] = useState<CommentNode | undefined>();
|
||||
const commentRefs = useRef<Map<string, HTMLDivElement | null>>(new Map());
|
||||
const { socket } = useSocket();
|
||||
useEffect(() => {
|
||||
if (!socket) return;
|
||||
console.log("RERUN COMMENT SECTION");
|
||||
|
||||
socket.emit(JOIN_ROOM_EVENT, articleId);
|
||||
return () => {
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [socket]);
|
||||
|
||||
function CommentSection({
|
||||
articleId,
|
||||
comments,
|
||||
}: {
|
||||
articleId: string;
|
||||
comments?: Array<Comment>;
|
||||
}) {
|
||||
const [replyComment, setReplyComment] = React.useState<
|
||||
CommentNode | undefined
|
||||
>();
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="sticky top-0 z-50 bg-background pt-4">
|
||||
@ -23,6 +32,7 @@ function CommentSection({
|
||||
articleId={articleId}
|
||||
parentComment={replyComment}
|
||||
removeReplyComment={() => setReplyComment(undefined)}
|
||||
commentRefs={commentRefs}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -37,7 +47,11 @@ function CommentSection({
|
||||
</div>
|
||||
|
||||
{comments && (
|
||||
<CommentList comments={comments} setReplyComment={setReplyComment} />
|
||||
<CommentList
|
||||
comments={comments}
|
||||
commentRefs={commentRefs}
|
||||
setReplyComment={setReplyComment}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,62 +1,123 @@
|
||||
import React from "react";
|
||||
import { CommentNode } from "@/server/db/schema";
|
||||
import Avatar from "../avatar";
|
||||
import { formatCommentDate } from "@/lib/utils/comments";
|
||||
import { ArrowDown, ArrowUp, ThumbsDown, ThumbsUp } from "lucide-react";
|
||||
import { formatCommentDate } from "@/lib/utils/format";
|
||||
import { Button } from "../ui/button";
|
||||
import CommentEditor from "../editor/comment-editor";
|
||||
import CommentVoteButton from "./comment-vote-button";
|
||||
import { Session } from "next-auth";
|
||||
import { Badge } from "../ui/badge";
|
||||
import CommentDeleteButton from "./comment-delete-button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Comment = ({
|
||||
comment,
|
||||
setReplyComment,
|
||||
}: {
|
||||
comment: CommentNode;
|
||||
setReplyComment: (comment: CommentNode) => void;
|
||||
}) => {
|
||||
return (
|
||||
<div className="">
|
||||
<div className="relative flex items-start gap-2 hover:bg-muted">
|
||||
<div className="absolute left-4 top-4 h-full w-4 border-l" />
|
||||
<Avatar
|
||||
src={comment.author?.image}
|
||||
fb={comment.author?.name}
|
||||
className="size-8"
|
||||
/>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h5 className="text-lg font-medium capitalize">
|
||||
{comment.author?.name}
|
||||
</h5>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatCommentDate(comment.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
<CommentEditor readOnly initialContent={comment.content!} />
|
||||
<div className="flex items-center gap-2 pb-6">
|
||||
<CommentVoteButton vote commentId={comment.id} />
|
||||
<CommentVoteButton vote={false} commentId={comment.id} />
|
||||
<Button
|
||||
size={"sm"}
|
||||
variant={"ghost"}
|
||||
onClick={() => setReplyComment(comment)}
|
||||
>
|
||||
Antworten
|
||||
</Button>
|
||||
const Comment = React.memo(
|
||||
(props: {
|
||||
comment: CommentNode;
|
||||
setReplyComment: (comment: CommentNode) => void;
|
||||
setRef: (el: HTMLDivElement | null) => void;
|
||||
session: Session | null;
|
||||
level?: number;
|
||||
}) => {
|
||||
const { comment, setReplyComment, setRef, session, level = 0 } = props;
|
||||
const isAuthor = session?.user?.id === comment.author?.id;
|
||||
|
||||
return (
|
||||
// <div className="">
|
||||
|
||||
// </div>
|
||||
// <div className="comment-replies" style={{ marginLeft: "20px" }}>
|
||||
// {comment.children.map((child) => (
|
||||
// <Comment
|
||||
// key={child.id}
|
||||
// comment={child}
|
||||
// setReplyComment={setReplyComment}
|
||||
// setRef={(el) => setRef(el)} // Ensure this is stable
|
||||
// session={session}
|
||||
// level={level + 1}
|
||||
// />
|
||||
// ))}
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
level > 0 && "ml-4 border-l",
|
||||
comment.children.length && "border-l",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="flex items-start gap-2 pl-2 hover:bg-muted"
|
||||
ref={setRef}
|
||||
>
|
||||
<Avatar
|
||||
src={comment.author?.image}
|
||||
fb={comment.author?.name}
|
||||
className="size-8"
|
||||
/>
|
||||
<div className="w-full">
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<h5 className="text-lg font-medium capitalize">
|
||||
{comment.author?.name} {level}
|
||||
</h5>
|
||||
{isAuthor && (
|
||||
<Badge variant={"outline"} className="text-xs">
|
||||
DU
|
||||
</Badge>
|
||||
)}
|
||||
<span className="ml-auto text-xs text-muted-foreground">
|
||||
{formatCommentDate(comment.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
<CommentEditor readOnly initialContent={comment.content!} />
|
||||
<div className="flex w-full items-center gap-2 pb-6">
|
||||
<CommentVoteButton vote commentId={comment.id} />
|
||||
<CommentVoteButton vote={false} commentId={comment.id} />
|
||||
<Button
|
||||
size={"sm"}
|
||||
variant={"ghost"}
|
||||
onClick={() => setReplyComment(comment)}
|
||||
>
|
||||
Antworten
|
||||
</Button>
|
||||
<div className="ml-auto">
|
||||
{isAuthor && <CommentDeleteButton commentId={comment.id} />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{comment.children && comment.children.length > 0 && (
|
||||
<div className="pl-4">
|
||||
{comment.children.map((child) => (
|
||||
<Comment
|
||||
key={child.id}
|
||||
{...props}
|
||||
comment={child}
|
||||
level={level + 1}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="comment-replies" style={{ marginLeft: "20px" }}>
|
||||
{comment.children.map((child) => (
|
||||
<Comment
|
||||
key={child.id}
|
||||
comment={child}
|
||||
setReplyComment={setReplyComment}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
// <div className={`flex ${level > 0 ? "ml-4" : ""} w-full`}>
|
||||
// <div
|
||||
// className={`${comment.children?.length || level > 0 ? "border-l" : ""} w-full pl-2`}
|
||||
// >
|
||||
|
||||
// {comment.children && comment.children.length > 0 && (
|
||||
// <div className="pl-4">
|
||||
// {comment.children.map((child) => (
|
||||
// <Comment
|
||||
// key={child.id}
|
||||
// {...props}
|
||||
// comment={child}
|
||||
// level={level + 1}
|
||||
// />
|
||||
// ))}
|
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
// </div>
|
||||
);
|
||||
},
|
||||
);
|
||||
export default Comment;
|
||||
|
||||
@ -22,7 +22,6 @@ const extentions = [
|
||||
codeBlock: false,
|
||||
horizontalRule: false,
|
||||
listItem: false,
|
||||
|
||||
heading: {
|
||||
levels: [4, 5],
|
||||
},
|
||||
@ -65,6 +64,7 @@ const CommentEditor = ({
|
||||
return (
|
||||
<EditorRoot>
|
||||
<EditorContent
|
||||
immediatelyRender={false}
|
||||
slotAfter={slotAfter}
|
||||
extensions={extentions}
|
||||
editorProps={{
|
||||
|
||||
@ -23,12 +23,13 @@ const Editor = ({
|
||||
return (
|
||||
<EditorRoot>
|
||||
<EditorContent
|
||||
immediatelyRender={false}
|
||||
className="editor"
|
||||
slotBefore={!readOnly && <MenuBar />}
|
||||
extensions={defaultExtensions}
|
||||
editorProps={{
|
||||
attributes: {
|
||||
class: "min-h-screen w-full",
|
||||
class: !readOnly ? "min-h-screen " : "",
|
||||
},
|
||||
handleDOMEvents: {
|
||||
keydown: (_view, event) => handleCommandNavigation(event),
|
||||
|
||||
25
src/components/session-provider.tsx
Normal file
25
src/components/session-provider.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
"use client";
|
||||
import {
|
||||
SessionProvider as NextAuthProvider,
|
||||
useSession as useNextAuthSession,
|
||||
} from "next-auth/react";
|
||||
import { Session } from "next-auth";
|
||||
|
||||
export function SessionProvider({
|
||||
children,
|
||||
session,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
session: Session | null;
|
||||
}) {
|
||||
return <NextAuthProvider session={session}>{children}</NextAuthProvider>;
|
||||
}
|
||||
|
||||
export const useSession = () => {
|
||||
const session = useNextAuthSession();
|
||||
return {
|
||||
session: session.data,
|
||||
status: session.status,
|
||||
update: session.update,
|
||||
};
|
||||
};
|
||||
41
src/components/socket-context.tsx
Normal file
41
src/components/socket-context.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
"use client";
|
||||
import { getSocket } from "@/lib/hooks/use-socket";
|
||||
import React from "react";
|
||||
import { Socket } from "socket.io-client";
|
||||
|
||||
type SocketContextValues = {
|
||||
socket?: Socket;
|
||||
};
|
||||
|
||||
export const SocketContext = React.createContext<
|
||||
SocketContextValues | undefined
|
||||
>(undefined);
|
||||
|
||||
export const SocketProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
const [socket, setSocket] = React.useState<Socket | undefined>();
|
||||
|
||||
React.useEffect(() => {
|
||||
// Initialize the socket when the provider mounts
|
||||
const newSocket = getSocket();
|
||||
setSocket(newSocket);
|
||||
console.log("Socket connected");
|
||||
|
||||
// Cleanup function to disconnect the socket when the provider unmounts
|
||||
return () => {
|
||||
newSocket.disconnect();
|
||||
console.log("Socket disconnected");
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<SocketContext.Provider value={{ socket }}>
|
||||
{children}
|
||||
</SocketContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useSocket = () => {
|
||||
const context = React.useContext(SocketContext);
|
||||
|
||||
return { socket: context?.socket };
|
||||
};
|
||||
@ -25,6 +25,7 @@ const buttonVariants = cva(
|
||||
sm: "h-8 rounded-md px-3 text-xs",
|
||||
lg: "h-10 rounded-md px-8",
|
||||
icon: "h-9 w-9",
|
||||
tiny: "size-max p-1",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@ -19,6 +19,8 @@ export const env = createEnv({
|
||||
NODE_ENV: z
|
||||
.enum(["development", "test", "production"])
|
||||
.default("development"),
|
||||
SOCKET_IO_PORT: z.number().default(4000),
|
||||
SOCKET_IO_CORS_ORIGIN: z.string().optional(),
|
||||
},
|
||||
|
||||
/**
|
||||
@ -42,6 +44,8 @@ export const env = createEnv({
|
||||
AUTH_GOOGLE_SECRET: process.env.AUTH_GOOGLE_SECRET,
|
||||
DATABASE_URL: process.env.DATABASE_URL,
|
||||
NODE_ENV: process.env.NODE_ENV,
|
||||
SOCKET_IO_CORS_ORIGIN: process.env.SOCKET_IO_CORS_ORIGIN,
|
||||
SOCKET_IO_PORT: process.env.SOCKET_IO_PORT,
|
||||
},
|
||||
/**
|
||||
* Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
|
||||
|
||||
39
src/lib/hooks/use-comments-hook.ts
Normal file
39
src/lib/hooks/use-comments-hook.ts
Normal file
@ -0,0 +1,39 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { api } from "@/trpc/react";
|
||||
import { Comment } from "@/server/db/schema";
|
||||
import {
|
||||
ADD_COMMENT_EVENT,
|
||||
DELETE_COMMENT_EVENT,
|
||||
} from "@/server/socket/event-const";
|
||||
import { useSocket } from "@/components/socket-context";
|
||||
|
||||
export function useComments(articleId: string) {
|
||||
const [comments, setComments] = useState<Array<Comment>>([]);
|
||||
const { data } = api.comment.list.useQuery({ articleId });
|
||||
const { socket } = useSocket();
|
||||
|
||||
useEffect(() => {
|
||||
if (!socket) return;
|
||||
console.log("useComments");
|
||||
socket.on(DELETE_COMMENT_EVENT, (deletedCommentId) => {
|
||||
console.log("DELETE_COMMENT_EVENT:::client", deletedCommentId);
|
||||
setComments((prev) => prev?.filter((c) => c.id !== deletedCommentId));
|
||||
});
|
||||
socket.on(ADD_COMMENT_EVENT, (newComment: Comment) => {
|
||||
setComments((prev) => [newComment, ...prev]);
|
||||
});
|
||||
return () => {
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [socket]);
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
setComments(data);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
return { comments };
|
||||
}
|
||||
12
src/lib/hooks/use-socket.ts
Normal file
12
src/lib/hooks/use-socket.ts
Normal file
@ -0,0 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import io, { Socket } from "socket.io-client";
|
||||
|
||||
let socket: Socket | null = null;
|
||||
|
||||
export const getSocket = () => {
|
||||
if (!socket) {
|
||||
socket = io("http://localhost:4000");
|
||||
}
|
||||
return socket;
|
||||
};
|
||||
@ -34,13 +34,3 @@ export function buildCommentTree(comments: Comment[]): Array<CommentNode> {
|
||||
});
|
||||
return rootComments;
|
||||
}
|
||||
|
||||
export const formatCommentDate = (date: Date) => {
|
||||
const options: Intl.DateTimeFormatOptions = {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
};
|
||||
|
||||
return new Intl.DateTimeFormat("de-DE", options).format(date);
|
||||
};
|
||||
|
||||
14
src/lib/utils/dom.ts
Normal file
14
src/lib/utils/dom.ts
Normal file
@ -0,0 +1,14 @@
|
||||
"use client";
|
||||
export function scrollToId(id: string) {
|
||||
if (typeof window === "undefined") return;
|
||||
console.log("Scroll to id", id, document);
|
||||
|
||||
const element = document.getElementById(id);
|
||||
console.log(element);
|
||||
if (!element) return;
|
||||
|
||||
element.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
});
|
||||
}
|
||||
51
src/lib/utils/format.ts
Normal file
51
src/lib/utils/format.ts
Normal file
@ -0,0 +1,51 @@
|
||||
export const formatCommentDate = (date: Date | number | string): string => {
|
||||
// Convert input to Date object if it's not already
|
||||
const inputDate = date instanceof Date ? date : new Date(date);
|
||||
const now = new Date();
|
||||
|
||||
// Get time difference in seconds
|
||||
const diffSeconds = Math.floor((now.getTime() - inputDate.getTime()) / 1000);
|
||||
|
||||
// Just now - less than a minute ago
|
||||
if (diffSeconds < 60) {
|
||||
return "just now";
|
||||
}
|
||||
|
||||
// Minutes ago - less than an hour
|
||||
const diffMinutes = Math.floor(diffSeconds / 60);
|
||||
if (diffMinutes < 60) {
|
||||
return `${diffMinutes} ${diffMinutes === 1 ? "min" : "mins"} ago`;
|
||||
}
|
||||
|
||||
// Hours ago - less than a day
|
||||
const diffHours = Math.floor(diffMinutes / 60);
|
||||
if (diffHours < 24) {
|
||||
return `${diffHours} ${diffHours === 1 ? "hour" : "hours"} ago`;
|
||||
}
|
||||
|
||||
// Days ago - less than a week
|
||||
const diffDays = Math.floor(diffHours / 24);
|
||||
if (diffDays < 7) {
|
||||
return `${diffDays} ${diffDays === 1 ? "day" : "days"} ago`;
|
||||
}
|
||||
|
||||
// Weeks ago - less than a month
|
||||
const diffWeeks = Math.floor(diffDays / 7);
|
||||
if (diffWeeks < 4) {
|
||||
return `${diffWeeks} ${diffWeeks === 1 ? "week" : "weeks"} ago`;
|
||||
}
|
||||
|
||||
// Months ago - less than a year
|
||||
const diffMonths = Math.floor(diffDays / 30);
|
||||
if (diffMonths < 12) {
|
||||
return `${diffMonths} ${diffMonths === 1 ? "month" : "months"} ago`;
|
||||
}
|
||||
|
||||
// More than a year ago - show full date
|
||||
const options: Intl.DateTimeFormatOptions = {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
};
|
||||
return inputDate.toLocaleDateString(undefined, options);
|
||||
};
|
||||
24
src/lib/utils/try-catch.ts
Normal file
24
src/lib/utils/try-catch.ts
Normal file
@ -0,0 +1,24 @@
|
||||
// Types for the result object with discriminated union
|
||||
type Success<T> = {
|
||||
data: T;
|
||||
error: null;
|
||||
};
|
||||
|
||||
type Failure<E> = {
|
||||
data: null;
|
||||
error: E;
|
||||
};
|
||||
|
||||
type Result<T, E = Error> = Success<T> | Failure<E>;
|
||||
|
||||
// Main wrapper function
|
||||
export async function tryCatch<T, E = Error>(
|
||||
promise: Promise<T>,
|
||||
): Promise<Result<T, E>> {
|
||||
try {
|
||||
const data = await promise;
|
||||
return { data, error: null };
|
||||
} catch (error) {
|
||||
return { data: null, error: error as E };
|
||||
}
|
||||
}
|
||||
@ -5,25 +5,30 @@ import { commentSchema } from "@/lib/validation/zod/comment";
|
||||
import { api } from "@/trpc/server";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { z } from "zod";
|
||||
import { actionClient } from ".";
|
||||
|
||||
export async function createComment(
|
||||
comment: z.infer<typeof commentSchema>,
|
||||
articleId: string,
|
||||
) {
|
||||
const commentId = await api.comment.create({
|
||||
comment,
|
||||
articleId,
|
||||
});
|
||||
if (!commentId)
|
||||
export const createComment = actionClient
|
||||
.schema(
|
||||
z.object({
|
||||
comment: commentSchema,
|
||||
articleId: z.string(),
|
||||
}),
|
||||
)
|
||||
.action(async ({ parsedInput: { comment, articleId } }) => {
|
||||
const commentId = await api.comment.create({
|
||||
comment,
|
||||
articleId,
|
||||
});
|
||||
if (!commentId)
|
||||
return {
|
||||
failure: "Incorrect credentials",
|
||||
};
|
||||
revalidatePath(appRoutes.article(articleId));
|
||||
return {
|
||||
success: false,
|
||||
message: "Error creating comment",
|
||||
data: commentId,
|
||||
success: true,
|
||||
};
|
||||
revalidatePath(appRoutes.article(articleId));
|
||||
return {
|
||||
success: true,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export async function deleteComment(commentId: string) {
|
||||
const articleId = (
|
||||
|
||||
3
src/server/actions/index.ts
Normal file
3
src/server/actions/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import { createSafeActionClient } from "next-safe-action";
|
||||
|
||||
export const actionClient = createSafeActionClient();
|
||||
@ -1,10 +1,35 @@
|
||||
import { and, eq } from "drizzle-orm";
|
||||
import { and, desc, eq } from "drizzle-orm";
|
||||
import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
|
||||
import { articles, comments } from "@/server/db/schema";
|
||||
import { comments, users } from "@/server/db/schema";
|
||||
import { z } from "zod";
|
||||
import { commentSchema } from "@/lib/validation/zod/comment";
|
||||
|
||||
export const commentRouter = createTRPCRouter({
|
||||
// queries
|
||||
list: publicProcedure
|
||||
.input(
|
||||
z.object({
|
||||
articleId: z.string(),
|
||||
}),
|
||||
)
|
||||
.query(
|
||||
async ({ ctx, input }) =>
|
||||
await ctx.db.query.comments.findMany({
|
||||
where: eq(comments.articleId, input.articleId),
|
||||
orderBy: desc(comments.createdAt),
|
||||
with: {
|
||||
author: {
|
||||
columns: {
|
||||
id: true,
|
||||
name: true,
|
||||
image: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
),
|
||||
|
||||
// mutations
|
||||
create: protectedProcedure
|
||||
.input(
|
||||
z.object({
|
||||
@ -20,10 +45,17 @@ export const commentRouter = createTRPCRouter({
|
||||
authorId: ctx.session.user.id,
|
||||
articleId: input.articleId,
|
||||
})
|
||||
.returning({
|
||||
id: comments.id,
|
||||
});
|
||||
return comment?.id;
|
||||
.returning();
|
||||
if (!comment) return;
|
||||
const author = await ctx.db.query.users.findFirst({
|
||||
where: eq(users.id, comment.authorId),
|
||||
columns: {
|
||||
id: true,
|
||||
name: true,
|
||||
image: true,
|
||||
},
|
||||
});
|
||||
return { ...comment, author };
|
||||
}),
|
||||
delete: protectedProcedure
|
||||
.input(
|
||||
@ -44,6 +76,7 @@ export const commentRouter = createTRPCRouter({
|
||||
id: comments.id,
|
||||
articleId: comments.articleId,
|
||||
});
|
||||
|
||||
return comment;
|
||||
}),
|
||||
});
|
||||
|
||||
@ -3,9 +3,9 @@ import { createId, createTable } from "./schema-utils";
|
||||
import { JSONContent } from "novel";
|
||||
import { relations, sql } from "drizzle-orm";
|
||||
import { categories, Category } from "./category";
|
||||
import { User } from "next-auth";
|
||||
import { users } from "./auth";
|
||||
import { Comment, comments } from "./comments";
|
||||
import { PublicUser } from ".";
|
||||
|
||||
export const articles = createTable(
|
||||
"article",
|
||||
@ -47,7 +47,7 @@ export const articleRelations = relations(articles, ({ one, many }) => ({
|
||||
}));
|
||||
|
||||
export type Article = typeof articles.$inferSelect & {
|
||||
author?: User;
|
||||
author?: PublicUser;
|
||||
category?: Category;
|
||||
comments?: Array<Comment>;
|
||||
};
|
||||
|
||||
@ -11,7 +11,7 @@ import { JSONContent } from "novel";
|
||||
import { relations, sql } from "drizzle-orm";
|
||||
import { createId, createTable } from "./schema-utils";
|
||||
import { users } from "./auth";
|
||||
import { User } from "next-auth";
|
||||
import { PublicUser } from ".";
|
||||
|
||||
export const comments = createTable(
|
||||
"comment",
|
||||
@ -56,7 +56,7 @@ export const commentsRelations = relations(comments, ({ many, one }) => ({
|
||||
|
||||
export type Comment = typeof comments.$inferSelect & {
|
||||
article?: Article;
|
||||
author?: User;
|
||||
author?: PublicUser;
|
||||
};
|
||||
|
||||
export type CommentNode = Comment & {
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
import { User } from "next-auth";
|
||||
|
||||
export * from "./auth";
|
||||
export * from "./article";
|
||||
export * from "./category";
|
||||
export * from "./comments";
|
||||
|
||||
export type PublicUser = Pick<User, "id" | "name" | "image">;
|
||||
|
||||
5
src/server/socket/event-const.ts
Normal file
5
src/server/socket/event-const.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export const JOIN_ROOM_EVENT = "joinRoom";
|
||||
export const LEAVE_ROOM_EVENT = "leaveRoom";
|
||||
|
||||
export const ADD_COMMENT_EVENT = "commentAdded";
|
||||
export const DELETE_COMMENT_EVENT = "commentDeleted";
|
||||
40
src/server/socket/events.ts
Normal file
40
src/server/socket/events.ts
Normal file
@ -0,0 +1,40 @@
|
||||
import { type Server as SocketIOServer } from "socket.io";
|
||||
import {
|
||||
ADD_COMMENT_EVENT,
|
||||
DELETE_COMMENT_EVENT,
|
||||
JOIN_ROOM_EVENT,
|
||||
} from "./event-const";
|
||||
import { env } from "@/env";
|
||||
import { Comment } from "../db/schema";
|
||||
|
||||
const log = (message?: any, ...optionalParams: any[]) => {
|
||||
if (env.NODE_ENV === "development") {
|
||||
console.log(message, ...optionalParams);
|
||||
}
|
||||
};
|
||||
|
||||
export const initSocketEvents = (io: SocketIOServer) => {
|
||||
io.on("connection", (socket) => {
|
||||
log("New client connected:", socket.id);
|
||||
|
||||
socket.on(JOIN_ROOM_EVENT, (articleId: string) => {
|
||||
socket.join(articleId);
|
||||
log(`Client ${socket.id} joined room: ${articleId}`);
|
||||
});
|
||||
|
||||
// Comments
|
||||
socket.on(DELETE_COMMENT_EVENT, (commentId: string, articleId: string) => {
|
||||
log(`Comment deleted: ${commentId} for article: ${articleId}`);
|
||||
io.to(articleId).emit(DELETE_COMMENT_EVENT, commentId);
|
||||
});
|
||||
|
||||
socket.on(ADD_COMMENT_EVENT, (comment: Comment) => {
|
||||
log(`Comment added: ${comment.id} for article: ${comment.articleId}`);
|
||||
io.to(comment.articleId).emit(ADD_COMMENT_EVENT, comment);
|
||||
});
|
||||
|
||||
socket.on("disconnect", () => {
|
||||
log("Client disconnected:", socket.id);
|
||||
});
|
||||
});
|
||||
};
|
||||
37
src/server/socket/server.ts
Normal file
37
src/server/socket/server.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import "dotenv/config";
|
||||
import express from "express";
|
||||
import http from "http";
|
||||
import { Server } from "socket.io";
|
||||
import { initSocketEvents } from "./events";
|
||||
import { env } from "@/env";
|
||||
|
||||
declare global {
|
||||
var io: Server | undefined;
|
||||
}
|
||||
|
||||
const createSocketServer = () => {
|
||||
const app = express();
|
||||
const server = http.createServer(app);
|
||||
|
||||
const PORT = env.SOCKET_IO_PORT || 4000;
|
||||
const origin = env.SOCKET_IO_CORS_ORIGIN || "http://localhost:" + PORT;
|
||||
|
||||
if (!global.io) {
|
||||
global.io = new Server(server, {
|
||||
cors: {
|
||||
origin,
|
||||
methods: ["GET", "POST"],
|
||||
},
|
||||
});
|
||||
|
||||
initSocketEvents(global.io);
|
||||
|
||||
server.listen(PORT, () => {
|
||||
console.log(`Socket.IO server running on port ${PORT}`);
|
||||
});
|
||||
}
|
||||
|
||||
return global.io;
|
||||
};
|
||||
|
||||
export const ioServer = createSocketServer();
|
||||
0
src/types.d.ts → src/types/index.d.ts
vendored
0
src/types.d.ts → src/types/index.d.ts
vendored
@ -70,6 +70,15 @@ export default {
|
||||
ring: "hsl(var(--sidebar-ring))",
|
||||
},
|
||||
},
|
||||
keyframes: {
|
||||
"fade-in": {
|
||||
"0%": { opacity: "0" },
|
||||
"100%": { opacity: "1" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"fade-in": "fade-in 0.5s ease-out",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user