delete is working

apps/X/app/api/post/route.ts

@@ -3,6 +3,7 @@ import { authOptions } from "app/lib/auth";
 import { getServerSession } from "next-auth";
 //? https://github.com/code100x/cms/blob/main/src/app/api/admin/content/route.ts
 import { NextRequest, NextResponse } from "next/server";
+import { AiOutlineConsoleSql } from "react-icons/ai";
 
 const prisma = new PrismaClient();
 
@@ -21,6 +22,7 @@ export async function GET() {
           },
         },
       },
+      where: { IsDelete: false },
     });
     return NextResponse.json({ data: posts }, { status: 200 });
   } catch (error) {
@@ -70,3 +72,59 @@ export const POST = async (req: NextRequest) => {
     console.log("Getting error in Creating", error);
   }
 };
+interface RouteContext {
+  params: {
+    id: string;
+  };
+}
+// export const DELETE = async (
+//   req: NextRequest,
+//   params: { param: { id: string } }
+// ) => {
+//   console.log(params.param.id);
+
+//   try {
+//     console.log("Hitting the Delete");
+//     const tweetId = Number(params.param.id);
+//     const deleteTweet = await prisma.tweet.delete({
+//       where: {
+//         id: tweetId,
+//       },
+//     });
+//     console.log("Deleting the Tweet", deleteTweet);
+//     return NextResponse.json({ mess: "Done with Delete", status: 200 });
+//   } catch (error) {
+//     console.log("Getting this error while deleting", error);
+//     return NextResponse.json(
+//       { error: "Failed to delete tweet" },
+//       { status: 500 }
+//     );
+//   }
+// };
+
+export async function DELETE(req: NextRequest) {
+  try {
+    console.log("Hitting the delete");
+    const id = req.nextUrl.searchParams.get("id");
+    if (!id) {
+      return NextResponse.json(
+        { message: "Todi ID is required" },
+        { status: 400 }
+      );
+    }
+    const deleteTweet = await prisma.tweet.delete({
+      where: { id: Number(id) },
+    });
+    if (!deleteTweet) {
+      return NextResponse.json({ message: "Tweet not found" }, { status: 404 });
+    }
+
+    return NextResponse.json({ message: "Done with delete" }, { status: 200 });
+  } catch (error) {
+    console.log("Getting error in Delete", error);
+    return NextResponse.json(
+      { message: "An unexpected error" },
+      { status: 500 }
+    );
+  }
+}

apps/X/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-slot": "^1.1.1",
     "@repo/ui": "*",
     "axios": "^1.7.9",

apps/X/src/components/ui/TweetComp.tsx

@@ -1,9 +1,16 @@
 "use client";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import axios from "axios";
+import { NextResponse } from "next/server";
 import { BiRepost } from "react-icons/bi";
 import { FaRegBookmark, FaRegComment } from "react-icons/fa6";
 import { FiHeart } from "react-icons/fi";
 import { IoIosStats } from "react-icons/io";
-import { RiShare2Line } from "react-icons/ri";
+import { RiDeleteBinLine, RiShare2Line } from "react-icons/ri";
 import { UserAvatar } from "./usrAvatar";
 
 interface TweetProps {
@@ -18,36 +25,68 @@ interface TweetProps {
 }
 
 export const TweetComp = ({ tweet }: TweetProps) => {
+  const handleDelete = async () => {
+    try {
+      console.log("Deleting the Tweet", tweet.id);
+      const response = await axios.delete(`/api/post?id=${tweet.id}`);
+      console.log("Tweet Deleted", response);
+      return NextResponse.json({ status: 200 });
+    } catch (error) {
+      console.log("Error while Deleting Tweet", error);
+    }
+  };
   return (
     <div>
       <div>
         <div className="border border-slate-800 border-spacing-x-0.5">
           <div className="flex p-3 gap-2">
-            <div className="mt-1">
+            <div className="mt-1 cursor-pointer">
               <UserAvatar />
             </div>
             <div className="">
               <div className="grid grid-cols-6">
                 <div className="flex col-span-5">
-                  <p>{tweet.user.name}</p>
+                  <p className="font-bold cursor-pointer">{tweet.user.name}</p>
                   {/* <p> @tweet.content</p> */}
-                  <p> · {new Date(tweet.createdDate).toLocaleDateString()}</p>
+                  <span className="px-1 ">.</span>
+                  <p className="text-slate-500">
+                    {" "}
+                    {new Date(tweet.createdDate).toLocaleDateString()}
+                  </p>
+                </div>
+                {/* <p className="text-end">...</p> */}
+                <div className="ml-auto cursor-pointer hover:bg-black hover:rounded-2xl">
+                  <Popover>
+                    <PopoverTrigger className="font-bold text-slate-500">
+                      ...
+                    </PopoverTrigger>
+                    <PopoverContent>
+                      <div className="text-red-700 flex items-center gap-2 cursor-pointer">
+                        <div
+                          className="flex items-center gap-1 cursor-pointer"
+                          onClick={handleDelete}
+                        >
+                          <RiDeleteBinLine />
+                          Delete
+                        </div>
+                      </div>
+                    </PopoverContent>
+                  </Popover>
                 </div>
-                <p className="text-end">...</p>
               </div>
               <div className="flex flex-col">
                 <div className="list-inside">{tweet.content}</div>
-                <div className="">Image Part</div>
+                <div className="cursor-pointer">Image Part</div>
               </div>
               <div className="flex space-x-24 text-slate-600">
-                <FaRegComment />
-                <BiRepost />
-                <FiHeart />
+                <FaRegComment className="cursor-pointer" />
+                <BiRepost className="cursor-pointer" />
+                <FiHeart className="cursor-pointer" />
                 {/* <span>{tweet.likes} </span> */}
-                <IoIosStats />
+                <IoIosStats className="cursor-pointer" />
                 <div className="flex">
-                  <FaRegBookmark />
-                  <RiShare2Line />
+                  <FaRegBookmark className="cursor-pointer" />
+                  <RiShare2Line className="cursor-pointer" />
                 </div>
               </div>
             </div>

apps/X/src/components/ui/home/HomeComp.tsx

@@ -10,9 +10,9 @@ export const HomeComp = () => {
         <div className="border border-y-0 custom:w-5/12 w-">
           <CenterComp />
         </div>
-        <div className="h-screen sticky top-0 flex-shrink-0">
+        {/* <div className="invisible h-screen sticky top-0">
           <HomeRight />
-        </div>
+        </div> */}
       </div>
     </div>
   );

apps/X/src/components/ui/popover.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50  rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

packages/db/prisma/migrations/20250224021944_adding_is_delete/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Tweet" ADD COLUMN     "IsDelete" BOOLEAN NOT NULL DEFAULT false;

packages/db/prisma/migrations/migration_lock.toml

@@ -1,3 +1,3 @@
 # Please do not edit this file manually
-# It should be added in your version-control system (i.e. Git)
+# It should be added in your version-control system (e.g., Git)
 provider = "postgresql"

packages/db/prisma/schema.prisma

@@ -13,23 +13,24 @@ datasource db {
   url      = env("DATABASE_URL")
 }
 
-model User{
-  id Int @id @default(autoincrement())
-  name String
-  email String @unique
-  username String @unique
-  password String
-  bio String?
-  image String?
-  tweets Tweet[]
+model User {
+  id          Int      @id @default(autoincrement())
+  name        String
+  email       String   @unique
+  username    String   @unique
+  password    String
+  bio         String?
+  image       String?
+  tweets      Tweet[]
   createdDate DateTime @default(now())
 }
 
-model Tweet{
-  id Int @id @default(autoincrement())
-  content String
-  userID Int
-  user User @relation(fields: [userID],references: [id])
-  likes Int @default(0)
+model Tweet {
+  id          Int      @id @default(autoincrement())
+  content     String
+  userID      Int
+  user        User     @relation(fields: [userID], references: [id])
+  likes       Int      @default(0)
   createdDate DateTime @default(now())
-}
+  IsDelete    Boolean  @default(false)
+}