image upload and ui fixes and other fixes

app/(content)/(home)/home/page.tsx

-import { CreateGweet } from "@/components/create-gweet";
-import { Gweets } from "@/components/gweets";
-
+import { CreateGweet } from "@/components/create-gweet/components/create-gweet";
+import { Gweets } from "@/components/gweets/components/gweets";
 
 export default async function HomePage() {
   return (

app/(content)/(user)/[userid]/status/[id]/page.tsx

-import { GweetDetails } from "@/components/gweets";
+import { GweetDetails } from "@/components/gweets/components/gweet-details";
 import { GweetHeader } from "@/components/layout";
 
 export default async function GweetDetailPage() {

app/api/gweets/[id]/route.ts

@@ -58,7 +58,6 @@ export async function GET(request: Request, { params }: { params: { id: string }
             media: true,
           },
         },
-
         allQuotes: {
           include: {
             likes: true,
@@ -75,6 +74,7 @@ export async function GET(request: Request, { params }: { params: { id: string }
             createdAt: "desc",
           },
         },
+        allComments: true,
       },
     });
 

app/api/gweets/route.ts

@@ -2,6 +2,7 @@ import { NextResponse } from "next/server";
 import { z } from "zod";
 
 import { db } from "@/lib/db";
+import { utapi } from "uploadthing/server";
 
 // get gweets
 export async function GET(request: Request) {
@@ -87,7 +88,7 @@ export async function GET(request: Request) {
 // create gweet
 export async function POST(request: Request) {
   const gweet = await request.json();
-
+  console.log(gweet)
   const gweetSchema = z
     .object({
       content: z.string().min(1).max(280),
@@ -144,6 +145,16 @@ export async function DELETE(request: Request) {
   }
 
   try {
+    const checkMedia = await db.media.findMany({
+      where: {
+        gweetId: id,
+      },
+    });
+
+    if (checkMedia.length > 0) {
+      await utapi.deleteFiles(checkMedia.map((media) => media.key));
+    }
+
     await db.gweet.delete({
       where: {
         id,

app/api/media/route.ts

+import { NextResponse } from "next/server";
+import { z } from "zod";
+
+import { db } from "@/lib/db";
+
+export async function POST(request: Request) {
+  const { media } = await request.json();
+
+  const mediaSchema = z
+    .object({
+      gweetId: z.string().nullable().optional(),
+      url: z.string(),
+      key: z.string(),
+      type: z.string(),
+    })
+    .strict();
+
+  const zod = mediaSchema.safeParse(media);
+
+  if (!zod.success) {
+    return NextResponse.json({ error: zod.error }, { status: 400 });
+  }
+
+  try {
+    await db.media.create({
+      data: {
+        ...media,
+      },
+    });
+    return NextResponse.json({ message: "Media created successfully" }, { status: 200 });
+  } catch (error: any) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}
\ No newline at end of file

app/api/uploadthing/core.ts

+import { getCurrentUser } from "@/lib/session";
+import { createUploadthing, type FileRouter } from "uploadthing/next";
+
+const f = createUploadthing();
+
+export const ourFileRouter = {
+    imageUploader: f({ image: { maxFileSize: "4MB" } })
+        .middleware(async ({ req }) => {
+            const user = await getCurrentUser();
+
+            if (!user) throw new Error("Unauthorized");
+
+            return { userId: user.id };
+        })
+        .onUploadComplete(async ({ metadata, file }) => {
+            console.log("Upload complete for userId:", metadata.userId);
+
+            console.log("file url", file.url);
+        }),
+} satisfies FileRouter;
+
+export type OurFileRouter = typeof ourFileRouter;
\ No newline at end of file

app/api/uploadthing/route.ts

+import { createNextRouteHandler } from "uploadthing/next";
+
+import { ourFileRouter } from "./core";
+
+export const { GET, POST } = createNextRouteHandler({
+    router: ourFileRouter,
+});
\ No newline at end of file

components/create-gweet/api/post-gweet.ts

 import { postHashtags, retrieveHashtagsFromGweet } from "@/components/trends";
-import { postMedia } from "./post-media";
+import { uploadFiles } from "@/lib/uploadthing";
 
 export const postGweet = async ({
   content,
   files,
-  userId,
+  authorId,
   replyToGweetId,
   quoteGweetId,
 }: {
   content: string;
   files: File[];
-  userId: string;
+  authorId: string;
   replyToGweetId?: string | null;
   quoteGweetId?: string | null;
 }) => {
   const gweet = {
     content,
-    userId,
+    authorId,
     ...(replyToGweetId && { replyToGweetId }),
     ...(quoteGweetId && { quoteGweetId }),
   };
@@ -28,7 +28,22 @@ export const postGweet = async ({
     }).then((result) => result.json())
 
     if (files.length > 0) {
-      await postMedia({ files, gweet_id: data.id });
+      const gweet_id = data.id;
+      files.forEach(async (file) => {
+        const [res] = await uploadFiles({ files: [file], endpoint: 'imageUploader' })
+
+        const media = {
+          ...(gweet_id && { gweet_id }),
+          url: res.fileUrl,
+          key: res.fileKey,
+          type: "image",
+        };
+
+        await fetch('/api/media', {
+          method: 'POST',
+          body: JSON.stringify(media)
+        })
+      })
     }
 
     const hashtags = retrieveHashtagsFromGweet(content);

components/create-gweet/api/post-media.ts

-import dbmedia from "@/lib/db-media";
-import { createId } from '@paralleldrive/cuid2';
-
-export const postMedia = async ({
-  files,
-  gweet_id,
-}: {
-  files: File[];
-  gweet_id?: string;
-}) => {
-
-  try {
-    files.forEach(async (file) => {
-      const imagePath = createId();
-
-      const { error } = await dbmedia.storage
-        .from("images")
-        .upload(`image-${imagePath}`, file);
-
-      if (error) {
-        console.log("error", error);
-        throw new Error("Failed to upload image");
-      } else {
-        const { data: mediaUrl } = dbmedia.storage
-          .from("images")
-          .getPublicUrl(`image-${imagePath}`);
-
-        const media = {
-          ...(gweet_id && { gweet_id }),
-          url: mediaUrl?.publicUrl,
-          type: "image",
-        };
-
-        await fetch('/api/media', {
-          method: 'POST',
-          body: JSON.stringify(media)
-        })
-      }
-    });
-
-    return true;
-  } catch (error: any) {
-    if (error.response) {
-      // The request was made and the server responded with a status code
-      // that falls out of the range of 2xx
-      console.log(error.response.data);
-      console.log(error.response.status);
-      console.log(error.response.headers);
-    } else if (error.request) {
-      // The request was made but no response was received
-      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
-      // http.ClientRequest in node.js
-      console.log(error.request);
-    } else {
-      // Something happened in setting up the request that triggered an Error
-      console.log("Error", error.message);
-    }
-    console.log(error.config);
-  }
-};

components/create-gweet/components/create-gweet-wrapper.tsx

@@ -12,10 +12,10 @@ export const CreateGweetWrapper = ({
   const [isComment, setIsComment] = useState(true);
 
   return (
-    <div className="relative border-b border-border">
+    <div className="">
       <CreateGweet
         replyToGweetId={replyToGweetId}
-        placeholder="Gweet your reply"
+        placeholder="Gweet your reply..."
         isComment={isComment}
       />
       {isComment && (
@@ -23,8 +23,7 @@ export const CreateGweetWrapper = ({
           onClick={() => {
             setIsComment(false);
           }}
-          className="absolute top-0 right-0 w-full h-full z-1 pointer-events-auto"
-        ></button>
+        />
       )}
     </div>
   );

components/create-gweet/components/create-gweet.tsx

@@ -20,10 +20,10 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/use-toast";
 
-import { IGweet } from "@/components/gweets";
-import { Icons } from "@/components/icons";
+import { IGweet } from "@/components/gweets/types";
 import { UserAvatar } from "@/components/user-avatar";
 
+import { Icons } from "@/components/icons";
 import { Card } from "@/components/ui/card";
 import { useCreateGweet } from "../hooks/use-create-gweet";
 import { IChosenImages } from "../types";
@@ -67,7 +67,7 @@ export const CreateGweet = ({
     mutation.mutate({
       content: data.gweet,
       files: [],
-      userId: session?.user?.id,
+      authorId: session?.user?.id,
       replyToGweetId,
       quoteGweetId: quoted_gweet?.id || null,
     })
@@ -166,45 +166,7 @@ export const CreateGweet = ({
                           disabled={isGweetLoading || !session.user}
                           {...field}
                         />
-                        <input
-                          className="hidden"
-                          type="file"
-                          onChange={(e) => chooseImage(e, setChosenImages)}
-                          ref={imageUploadRef}
-                        />
                       </FormControl>
-                      <div className={`grid object-cover grid-cols-
-                        ${chosenImages.length === 1 ? "1"
-                          : chosenImages.length === 2 ? "2 space-x-3"
-                            : chosenImages.length === 3 ? "3 space-x-3 space-y-3"
-                              : chosenImages.length === 4 ? "4 space-x-3 space-y-3"
-                                : ""
-                        }`}
-                      >
-                        {chosenImages.map((image, i) => {
-                          return (
-                            <div key={i} className="relative max-h-[700px] overflow-hidden">
-                              <Button
-                                size="sm"
-                                onClick={() => {
-                                  setChosenImages(
-                                    chosenImages.filter((img, j) => j !== i),
-                                  );
-                                }}
-                              >
-                                <Icons.close />
-                              </Button>
-                              <Image
-                                src={image.url as string}
-                                alt="gweet image"
-                                width={1000}
-                                height={1000}
-                              />
-                            </div>
-                          );
-                        })}
-                        {/* {quoted_gweet && <QuotedGweet gweet={quoted_gweet} />} */}
-                      </div>
                       {!isComment ?
                         <FormDescription className="pt-3">
                           Your gweets will be public, and everyone can see them.
@@ -212,6 +174,49 @@ export const CreateGweet = ({
                         : null
                       }
                       <FormMessage />
+
+                      <input
+                        className="hidden w-full"
+                        type="file"
+                        onChange={(e) => chooseImage(e, setChosenImages)}
+                        ref={imageUploadRef}
+                      />
+                      {chosenImages.length > 0 && (
+                        <div className={`grid object-cover h-[680px]
+                        ${chosenImages.length === 1 ? "grid-cols-1"
+                            : chosenImages.length === 2 ? "grid-cols-2 gap-3"
+                              : chosenImages.length === 3 || 4 ? "grid-cols-2 grid-rows-2 gap-3"
+                                : ""
+                          }`}
+                        >
+                          {chosenImages.map((image, i) => {
+                            const isFirstImage = chosenImages.length === 3 && i === 0;
+                            return (
+                              <Card key={i} className={`relative max-h-[680px] overflow-hidden ${isFirstImage ? "row-span-2" : ""}`}>
+                                <Button
+                                  size="icon"
+                                  variant="secondary"
+                                  className="rounded-full absolute top-1 right-1 z-50"
+                                  onClick={() => {
+                                    setChosenImages(
+                                      chosenImages.filter((img, j) => j !== i),
+                                    );
+                                  }}
+                                >
+                                  <Icons.close />
+                                </Button>
+                                <Image
+                                  src={image.url as string}
+                                  alt="gweet image"
+                                  fill
+                                  className="object-cover rounded-lg"
+                                />
+                              </Card>
+                            );
+                          })}
+                        </div>
+                      )}
+                      {/* {quoted_gweet && <QuotedGweet gweet={quoted_gweet} />} */}
                     </div>
                   </FormItem>
                 )}

components/create-gweet/hooks/use-create-gweet.ts

@@ -10,21 +10,21 @@ export const useCreateGweet = () => {
     ({
       content,
       files,
-      userId,
+      authorId,
       replyToGweetId,
       quoteGweetId,
 
     }: {
       content: string;
       files: File[];
-      userId: string;
+      authorId: string;
       replyToGweetId?: string | null;
       quoteGweetId?: string | null;
     }) => {
       return postGweet({
         content,
         files,
-        userId,
+        authorId,
         replyToGweetId,
         quoteGweetId,
       });

components/create-gweet/index.ts

-export * from "./api/post-media";
-export * from "./components/create-gweet";
-export * from "./components/create-gweet-wrapper";
-export * from "./types";

components/gweets/api/delete-media.ts

-import dbmedia from "@/lib/db-media";
-
-export const deleteMedia = async (media: string[]) => {
-  try {
-    const { error } = await dbmedia.storage.from("images").remove(media);
-
-    if (error) {
-      throw new Error("Failed to delete media");
-    }
-
-  } catch (error: any) {
-    if (error.response) {
-      // The request was made and the server responded with a status code
-      // that falls out of the range of 2xx
-      console.log(error.response.data);
-      console.log(error.response.status);
-      console.log(error.response.headers);
-    } else if (error.request) {
-      // The request was made but no response was received
-      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
-      // http.ClientRequest in node.js
-      console.log(error.request);
-    } else {
-      // Something happened in setting up the request that triggered an Error
-      console.log("Error", error.message);
-    }
-    console.log(error.config);
-  }
-};
\ No newline at end of file

components/gweets/components/actions/comment-button.tsx

@@ -5,17 +5,15 @@ import { Icons } from "@/components/icons";
 
 export const CommentButton = ({
   gweet,
-  showStats = false,
 }: {
   gweet: IGweet;
-  showStats: boolean;
 }) => {
   return (
     <Button variant="ghost" size="lg" className="px-6 py-3 hover:bg-sky-800">
       <Icons.messagecircle className="h-5 w-5" />
       <span className="pl-2">
-        {showStats && gweet?.comments?.length > 0 && (
-          <span className="">{gweet?.comments?.length}</span>
+        {gweet?.allComments?.length > 0 && (
+          <span className="">{gweet?.allComments?.length}</span>
         )}
       </span>
     </Button>

components/gweets/components/actions/like-button.tsx

@@ -7,11 +7,9 @@ import { IGweet } from "../../types";
 
 export const LikeButton = ({
   gweet,
-  showStats = false,
 }: {
   gweet?: IGweet;
   smallIcons?: boolean;
-  showStats?: boolean;
 }) => {
   const { data: session } = useSession();
   const hasLiked = gweet?.likes?.some(
@@ -40,7 +38,7 @@ export const LikeButton = ({
       }
 
       <span className="pl-2">
-        {showStats && gweet?.likes && gweet?.likes?.length > 0 && (
+        {gweet?.likes && gweet?.likes?.length > 0 && (
           <span className="">{gweet?.likes?.length}</span>
         )}
       </span>

components/gweets/components/actions/regweet-button.tsx

@@ -27,7 +27,7 @@ export const RegweetButton = ({ gweet }: { gweet: IGweet }) => {
       variant="ghost" size="lg" className="px-6 py-3 hover:bg-green-800"
     >
       {hasRegweeted ?
-        <Icons.regweet className="h-5 w-5 fill-green-600 text-green-600" />
+        <Icons.regweet className="h-5 w-5 text-green-600" />
         : <Icons.regweet className="h-5 w-5" />
       }
 

components/gweets/components/comments.tsx

@@ -29,14 +29,12 @@ export const Comments = ({ gweetId }: { gweetId: string }) => {
   }
 
   return (
-    <div className="">
-      <InfiniteGweets
-        gweets={comments}
-        fetchNextPage={fetchNextPage}
-        hasNextPage={hasNextPage}
-        isFetchingNextPage={isFetchingNextPage}
-        isSuccess={isSuccess}
-      />
-    </div>
+    <InfiniteGweets
+      gweets={comments}
+      fetchNextPage={fetchNextPage}
+      hasNextPage={hasNextPage}
+      isFetchingNextPage={isFetchingNextPage}
+      isSuccess={isSuccess}
+    />
   );
-};
+};
\ No newline at end of file

components/gweets/components/gweet-actions.tsx

@@ -6,16 +6,14 @@ import { RegweetButton } from "./actions/regweet-button";
 
 export const GweetActions = ({
   gweet,
-  showStats = false,
 }: {
   gweet: IGweet;
-  showStats?: boolean | undefined;
 }) => {
   return (
     <div className="space-x-2">
-      <CommentButton gweet={gweet} showStats={showStats} />
+      <CommentButton gweet={gweet} />
       <RegweetButton gweet={gweet} />
-      <LikeButton gweet={gweet} smallIcons={false} showStats={showStats} />
+      <LikeButton gweet={gweet} smallIcons={false} />
     </div>
   );
 };
\ No newline at end of file

components/gweets/components/gweet-author.tsx

-import { GweetOptions, IGweet } from "@/components/gweets";
 import { UserAvatar } from "@/components/user-avatar";
+import { IGweet } from "../types";
+import { GweetOptions } from "./gweet-options";
 
 export const GweetAuthor = ({ gweet }: { gweet: IGweet }) => {
     return (
@@ -9,8 +10,8 @@ export const GweetAuthor = ({ gweet }: { gweet: IGweet }) => {
                 className="h-10 w-10"
             />
 
-            <div>
-                <span className="font-bold mr-2">{gweet.author.name}</span>
+            <div className="flex flex-col ml-3">
+                <span className="font-bold">{gweet.author.name}</span>
                 <span className="text-sky-500 text-sm">@{gweet.author.username}</span>
             </div>