Dep Upgrade: change module exports to mjs export bc the application w…

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.4.0",
+    "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",

src/components/forms/commentForm.jsx

@@ -0,0 +1,37 @@
+import { useForm } from "react-hook-form";
+import {
+  Form,
+  Button,
+  FormControl,
+  Input,
+  FormField,
+  FormMessage,
+  FormItem,
+} from "../ui";
+import { createComment } from "@/lib/validation";
+
+export function CommentForm() {
+  const form = useForm({resolver: createComment}, );
+
+  form.handleSubmit(data => {
+    console.log(data);
+  });
+
+  return <Form {...form}>
+    <form>
+      <FormField
+        control={form.control}
+        name="content"
+        render={({ field }) => (
+          <FormItem>
+            <FormControl>
+              <Input placeholder="Comment on this post" {...field} />
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        )}
+      />
+      <Button type="submit">Comment</Button>
+    </form>
+  </Form>;
+}

src/components/shared/PostStats.jsx

@@ -7,6 +7,8 @@ import { useGetUserFromDb } from "@/lib/tanstack-query/account";
 import { useToast, ToastAction } from "../ui";
 import { Button } from "../ui";
 import { inArray } from "@/lib/utils";
+import { Dialog, DialogHeader, DialogContent, DialogTrigger, DialogTitle } from "../ui/dialog";
+import { CommentContainer } from "./comments";
 
 const PostStats = ({ post, toHide=[] }) => {
   const navigate = useNavigate();
@@ -103,10 +105,23 @@ const PostStats = ({ post, toHide=[] }) => {
         <span className="ml-1.5 text-xl">{postLikers.length}</span>
       </Button>
 
-      <Button variant="ghost" className={`shad-btn_ghost ${inArray(toHide, 2) ===2 && 'hidden'}`}>
+{/* // comment button */}
+      <Dialog>
+        <DialogTrigger className={`${inArray(toHide, 2) ===2 && 'hidden'}`} asChild >
+      <Button variant="ghost" className={`shad-btn_ghost `}>
         <MessageCircleMore />
         <span className="ml-1.5 text-xl">{post.comment?.length}</span>
       </Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[525px]" >
+          <DialogHeader>
+            <DialogTitle>
+              Comments
+            </DialogTitle>
+          </DialogHeader>
+        <CommentContainer post={post} />
+        </DialogContent>
+      </Dialog>
 
       <Button variant="ghost" className={`shad-btn_ghost ${inArray(toHide, 3) === 3 && 'hidden'}`} onClick={handleSavePost}>
         <img

src/components/shared/comments/EachComment.jsx

@@ -0,0 +1,7 @@
+
+export function EachComment({cmtDoc}){
+
+    return <div >
+        each comment
+    </div>
+}

src/components/shared/comments/commentContainer.jsx

@@ -0,0 +1,12 @@
+import { CommentForm } from "@/components/forms/commentForm";
+import { Comments } from "./comments";
+
+export function CommentContainer({post}){
+    console.log(post)
+    return <div>
+        {/* comments */}
+        <Comments commentId={post.comment} />
+        {/* commenting form */}
+        <CommentForm  />
+    </div>
+}

src/components/shared/comments/comments.jsx

@@ -0,0 +1,18 @@
+import { useGetCommentsByPostId } from "@/lib/tanstack-query/comment";
+import { EachComment } from "./EachComment";
+import { useEffect, useState } from "react";
+
+export function Comments({commentId, asChild=false}){
+    const {refetch, data, error, isError} = useGetCommentsByPostId();
+    const [comments, setComments] = useState([]);
+
+    useEffect(() => {
+        console.log({refetch, data, error, isError});
+    }, [data, error, refetch, isError])
+
+    return <div>
+        i am comments
+
+        <EachComment cmtDoc={"helo vi kaise ho thik ho na"} />
+    </div>
+}

src/components/shared/comments/index.js

@@ -0,0 +1,3 @@
+export * from "./EachComment"
+export * from "./commentContainer"
+export * from "./comments"

src/components/ui/dialog.jsx

@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props} />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}>
+      {children}
+      <DialogPrimitive.Close
+        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+    {...props} />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props} />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props} />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

src/global.css

@@ -348,6 +348,11 @@
   .shad-button_ghost {
     @apply flex gap-4 px-0 ml-20 items-center justify-start hover:bg-transparent hover:text-white !important;
   }
+
+  /* application components */
+  .each_comment{
+    @apply w-full flex;
+  }
 }
 
 @layer base {

src/lib/appwrite/api.js

@@ -1,7 +1,7 @@
 import { account, database, avatar, ID, appwriteConfig, storage} from "./config.appwrite";
 import { Query } from 'appwrite';
 
-const {databaseId, usersCollectionID, postsCollectionID, bucketID, savesCollectionID} = appwriteConfig;
+const {databaseId, usersCollectionID, postsCollectionID, bucketID, savesCollectionID, commentsCollectionID} = appwriteConfig;
 
 export async function createUserAccount ( data ){
     const { name, username, email, password } = data;
@@ -341,4 +341,10 @@ export async function getUserById(userId){
 //     } catch (error) {
 
 //     }
-// }
+// }
+
+export async function getCommentsByPostId(postId, offSet){
+    if(!postId || !offSet) throw new Error("Unknown post, -application error");
+    const query = [ Query.and([Query.equal("post", postId), Query.isNull("parentCommentId")])];
+    return await database.listDocuments(databaseId, commentsCollectionID, query);
+}

src/lib/tanstack-query/comment.js

@@ -0,0 +1,18 @@
+import { useInfiniteQuery, useQuery, useQueryClient } from "@tanstack/react-query";
+import { getCommentsByPostId } from "../appwrite/api";
+import { QUERY_KEYS } from "./queryKeys";
+
+export const useGetCommentsByPostId = () => {
+    return useInfiniteQuery({
+        queryFn: (data) => getCommentsByPostId(data),
+        getNextPageParam: (lastpage, allPages, lastPageParam) => {
+            console.log(lastpage, allPages, lastPageParam);
+            return null;
+        },
+        initialPageParam: null,
+        queryKey: [postId, QUERY_KEYS.GET_POST_COMMENT],
+        enabled: false,
+        retry: 3,
+        staleTime: 1 * 60 * 1000
+    });
+}

src/lib/tanstack-query/posts.js

@@ -49,7 +49,6 @@ export const useSavePost = () =>{
     const queryClient = useQueryClient();
     return useMutation({
         mutationFn: ({postId, userId, operation}) => {
-            console.log(postId, userId, operation);
             return savePost(postId, userId, operation);
         }, 
         onSuccess: (data) =>{

src/lib/tanstack-query/queryKeys.js

@@ -17,5 +17,8 @@ export const QUERY_KEYS ={
   GET_SAVED_POST: "getSavedPost",
 
   //  SEARCH KEYS
-  SEARCH_POSTS :"getSearchPosts"
+  SEARCH_POSTS :"getSearchPosts",
+
+  // COMMENTS KEYS
+  GET_POST_COMMENT: "getCommentsByPostId"
 }

src/lib/validation/index.js

@@ -36,3 +36,7 @@ export const createPostSchema = z.object({
   tags: z.string().min(3, { message: "Tags must be at least 3 characters long" }),
   location: z.string(),
 });
+
+export const createComment = z.object({
+  content: z.string().min(1, {message: "comment should be atleast 1 character long"})
+})