Merge pull request #39 from techdiary-dev/comment

Comment

Author: kingRayhan

package.json

@@ -9,7 +9,8 @@
     "lint": "next lint",
     "db:generate": "npx drizzle-kit generate",
     "db:push": "npx drizzle-kit push",
-    "db:studio": "npx drizzle-kit studio"
+    "db:studio": "npx drizzle-kit studio",
+    "play": "npx tsx ./src/backend/play.ts"
   },
   "dependencies": {
     "@cloudinary/react": "^1.14.1",

src/app/[username]/[articleHandle]/_components/ArticleReaction.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import ReactionStatus from "@/components/render-props/ReactionStatus";
+import { ResourceReactionable } from "@/components/render-props/ResourceReactionable";
 import clsx from "clsx";
 import React from "react";
 
@@ -10,7 +10,7 @@ interface Props {
 
 const ArticleReaction: React.FC<Props> = ({ article_id }) => {
   return (
-    <ReactionStatus
+    <ResourceReactionable
       resource_type="ARTICLE"
       resource_id={article_id}
       render={({ reactions, toggle }) => {

src/app/[username]/[articleHandle]/page.tsx

@@ -2,6 +2,7 @@ import HomeLeftSidebar from "@/app/(home)/_components/HomeLeftSidebar";
 import { persistenceRepository } from "@/backend/persistence/persistence-repositories";
 import * as articleActions from "@/backend/services/article.actions";
 import AppImage from "@/components/AppImage";
+import { CommentSection } from "@/components/comment-section";
 import HomepageLayout from "@/components/layout/HomepageLayout";
 import { readingTime, removeMarkdownSyntax } from "@/lib/utils";
 import getFileUrl from "@/utils/getFileUrl";
@@ -12,10 +13,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import type { Article, WithContext } from "schema-dts";
 import { eq } from "sqlkit";
-import ArticleSidebar from "./_components/ArticleSidebar";
-import ReactionStatus from "@/components/render-props/ReactionStatus";
-import clsx from "clsx";
 import ArticleReaction from "./_components/ArticleReaction";
+import ArticleSidebar from "./_components/ArticleSidebar";
+import ResourceReaction from "@/components/ResourceReaction";
 
 interface ArticlePageProps {
   params: Promise<{
@@ -153,10 +153,12 @@ const Page: NextPage<ArticlePageProps> = async ({ params }) => {
             <h1 className="text-2xl font-bold">{article?.title ?? ""}</h1>
           </div>
 
-          <ArticleReaction article_id={article.id} />
+          <ResourceReaction resource_type="ARTICLE" resource_id={article.id} />
 
           <div className="mx-auto content-typography">{parsedHTML}</div>
         </div>
+
+        <CommentSection resource_type="ARTICLE" resource_id={article.id} />
       </HomepageLayout>
     </>
   );

src/app/api/play/route.ts

@@ -1,11 +1,13 @@
+import { getComments } from "@/backend/services/comment.action";
 import { NextResponse } from "next/server";
-// import * as reactionActions from "@/backend/services/reaction.actions";
-import * as searchService from "@/backend/services/search.service";
 
 export async function GET() {
-  const response = await searchService.syncAllArticles();
+  const comments = await getComments({
+    resource_id: "16196e73-275a-4af5-9186-39a5fec4244e",
+    resource_type: "ARTICLE",
+  });
 
-  return NextResponse.json(response, {
+  return NextResponse.json(comments, {
     status: 200,
     headers: { "Content-Type": "application/json" },
   });

src/backend/models/domain-models.ts

@@ -139,6 +139,20 @@ export interface Comment {
   created_at: Date;
 }
 
+export interface CommentPresentation {
+  id: string;
+  body?: string;
+  level?: number;
+  created_at?: Date;
+  author?: {
+    id: string;
+    name: string;
+    username: string;
+    email: string;
+  };
+  replies?: CommentPresentation[];
+}
+
 export type REACTION_TYPE =
   | "LOVE"
   | "UNICORN"

src/backend/persistence/persistence-contracts.ts

@@ -5,6 +5,7 @@ export enum DatabaseTableName {
   user_sessions = "user_sessions",
   series = "series",
   series_items = "series_items",
+  comments = "comments",
   bookmarks = "bookmarks",
   reactions = "reactions",
   tags = "tags",

src/backend/persistence/persistence-repositories.ts

@@ -9,6 +9,7 @@ import {
   Tag,
   User,
   UserSession,
+  Comment,
   UserSocial,
 } from "../models/domain-models";
 import { pgClient } from "./clients";
@@ -73,12 +74,19 @@ const reactionRepository = new Repository<Reaction>(
   repositoryConfig
 );
 
+const commentRepository = new Repository<Comment>(
+  DatabaseTableName.comments,
+  pgClient,
+  repositoryConfig
+);
+
 export const persistenceRepository = {
   user: userRepository,
   userSocial: userSocialRepository,
   userSession: userSessionRepository,
   article: articleRepository,
   bookmark: bookmarkRepository,
+  comment: commentRepository,
   reaction: reactionRepository,
   articleTagPivot: articleTagRepository,
   tags: tagRepository,

src/backend/persistence/sql-functions/get_comments.sql

@@ -0,0 +1,74 @@
+-- Thanks claude 🥰 for the help with this function
+-- Function to recursively fetch comments and their replies up to a certain level
+-- This function retrieves comments for a given resource and organizes them in a nested structure
+-- It uses recursion to fetch replies to comments, limiting the depth to 3 levels
+-- Function: public.get_comments(p_resource_id uuid, p_resource_type character varying, p_parent_id uuid DEFAULT NULL::uuid, p_current_level integer DEFAULT 0)
+
+
+CREATE OR REPLACE FUNCTION public.get_comments(
+    p_resource_id uuid, 
+    p_resource_type character varying, 
+    p_parent_id uuid DEFAULT NULL::uuid, 
+    p_current_level integer DEFAULT 0
+)
+RETURNS json
+LANGUAGE plpgsql
+AS $function$
+DECLARE
+    result JSON;
+BEGIN
+    -- Base case: get comments for the given parent
+    IF p_parent_id IS NULL THEN
+        -- Get root comments
+        SELECT json_agg(
+            json_build_object(
+                'id', c.id,
+                'body', c.body,
+                'level', 0,
+                'created_at', c.created_at,
+                'parent_id', NULL,
+                'author', json_build_object(
+                    'id', u.id,
+                    'name', u.name,
+                    'email', u.email,
+                    'username', u.username
+                ),
+                'replies', get_comments(p_resource_id, p_resource_type, c.id, 1)
+            ) ORDER BY c.created_at DESC  -- Changed to DESC
+        ) INTO result
+        FROM comments c
+        JOIN users u ON c.user_id = u.id
+        WHERE c.resource_id = p_resource_id 
+          AND c.resource_type = p_resource_type;
+    ELSE
+        -- Get replies to a specific comment
+        IF p_current_level >= 3 THEN
+            -- Stop recursion at level 3
+            RETURN '[]'::json;
+        END IF;
+        
+        SELECT json_agg(
+            json_build_object(
+                'id', c.id,
+                'body', c.body,
+                'level', p_current_level,
+                'created_at', c.created_at,
+                'parent_id', p_parent_id,
+                'author', json_build_object(
+                    'id', u.id,
+                    'name', u.name,
+                    'email', u.email,
+                    'username', u.username
+                ),
+                'replies', get_comments(p_resource_id, p_resource_type, c.id, p_current_level + 1)
+            ) ORDER BY c.created_at DESC  -- Changed to DESC
+        ) INTO result
+        FROM comments c
+        JOIN users u ON c.user_id = u.id
+        WHERE c.resource_id = p_parent_id 
+          AND c.resource_type = 'COMMENT';
+    END IF;
+    
+    RETURN COALESCE(result, '[]'::json);
+END;
+$function$

src/backend/play.ts

@@ -0,0 +1,14 @@
+import * as commentActions from "./services/comment.action";
+
+async function main() {
+  // Comment on a resource
+  const newComment = await commentActions.createMyComment({
+    body: "This is a comment on a resource",
+    resource_id: "14fced36-31a7-42b3-9811-8887fc1331db",
+    resource_type: "ARTICLE",
+  });
+
+  console.log(newComment);
+}
+
+main();

src/backend/services/comment.action.ts

@@ -1,29 +1,77 @@
+"use server";
+
 import z from "zod";
 import { CommentActionInput } from "./inputs/comment.input";
+import { authID } from "./session.actions";
+import { ActionException } from "./RepositoryException";
+import { persistenceRepository } from "../persistence/persistence-repositories";
+import { eq } from "sqlkit";
+import { CommentPresentation } from "../models/domain-models";
+
+const sql = String.raw;
 
 export const getComments = async (
-  resourceId: string,
-  resourceType: "ARTICLE" | "COMMENT"
-) => {
-  // Fetch comments from the database based on resourceId and resourceType
-  // const comments = await db
-  //   .select()
-  //   .from(commentsTable)
-  //   .where(commentsTable.resource_id.eq(resourceId))
-  //   .and(commentsTable.resource_type.eq(resourceType))
-  //   .orderBy(commentsTable.created_at.desc());
-  // return comments;
-  return []; // Placeholder for actual database query
+  _input: z.infer<typeof CommentActionInput.getComments>
+): Promise<CommentPresentation[]> => {
+  const input = CommentActionInput.getComments.parse(_input);
+
+  const query = sql`
+    SELECT get_comments($1, $2) as comments
+  `;
+
+  const execution_response: any = await pgClient?.executeSQL(query, [
+    input.resource_id,
+    input.resource_type,
+  ]);
+  return execution_response?.rows?.[0]?.comments || [];
 };
 
-export const createComment = async (
+export const createMyComment = async (
   input: z.infer<typeof CommentActionInput.create>
 ) => {
+  const sessionId = await authID();
+  if (!sessionId) {
+    throw new ActionException("Unauthorized: No session ID found");
+  }
   const { resource_id, resource_type, body } = input;
 
-  // Create the comment in the database
+  switch (resource_type) {
+    case "ARTICLE":
+      // Validate that the resource exists
+      const [exists] = await persistenceRepository.article.find({
+        where: eq("id", resource_id),
+        limit: 1,
+        columns: ["id"],
+      });
+      if (!exists) {
+        throw new ActionException("Resource not found");
+      }
+      break;
+    case "COMMENT":
+      // Validate that the parent comment exists
+      const [parentExists] = await persistenceRepository.comment.find({
+        where: eq("id", resource_id),
+        limit: 1,
+        columns: ["id"],
+      });
+      if (!parentExists) {
+        throw new ActionException("Parent comment not found");
+      }
+      break;
+    default:
+      throw new ActionException("Invalid resource type");
+  }
+
+  const created = await persistenceRepository.comment.insert([
+    {
+      body,
+      resource_id,
+      resource_type,
+      user_id: sessionId,
+    },
+  ]);
 
-  // return newComment[0];
+  return created?.rows?.[0];
 };
 
 export const deleteComment = async (