toast messages

components/gweets/components/gweet-details.tsx

 "use client"
 
-import { CreateGweetWrapper } from "@/components/create-gweet/components/create-gweet-wrapper";
-import LoadingItem from "@/components/loading-item";
-import { TryAgain } from "@/components/try-again";
-import { Card } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import Image from "next/image";
-import { usePathname } from "next/navigation";
-import { useGweet } from "../hooks/use-gweet";
-import { Comments } from "./comments";
-import { GweetActions } from "./gweet-actions";
-import { GweetAuthor } from "./gweet-author";
-import { GweetCreationDate } from "./gweet-creation-date";
+import { CreateGweetWrapper } from "@/components/create-gweet/components/create-gweet-wrapper"
+import LoadingItem from "@/components/loading-item"
+import { TryAgain } from "@/components/try-again"
+import { Separator } from "@/components/ui/separator"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { useGweet } from "../hooks/use-gweet"
+import { Comments } from "./comments"
+import { GweetActions } from "./gweet-actions"
+import { GweetAuthor } from "./gweet-author"
+import { GweetCreationDate } from "./gweet-creation-date"
+import { GweetMedia } from "./gweet-media"
+// import { Thread } from "./thread"
 
 export const GweetDetails = () => {
     // TODO use params
-    const pathname = usePathname();
-    const id = pathname?.split(`/`)[3] || ``;
+    const pathname = usePathname()
+    const id = pathname?.split(`/`)[3] || ``
 
-    const { data: gweet, isLoading, isError } = useGweet(id);
+    const { data: gweet, isLoading, isError } = useGweet(id)
 
     if (isLoading) {
-        return <LoadingItem />;
+        return <LoadingItem />
     }
 
     if (isError) {
-        return <TryAgain />;
+        return <TryAgain />
     }
 
     if (!isLoading && !isError && !gweet) {
@@ -33,38 +34,29 @@ export const GweetDetails = () => {
     }
 
     return (
-        <>
+        <div>
+            {/* TODO needs handling of all gweets above and under the gweet */}
+            {/* <Thread gweetId={gweet?.id} /> */}
             <div className="flex flex-col space-y-3 px-3 pt-3">
+                {gweet?.replyToGweetId && (
+                    <div>
+                        <span className="text-muted-foreground">Replying to </span>
+                        <Link
+                            href={`/${gweet?.comment.author.username}`}
+                            className="text-sky-500 hover:underline z-10"
+                            onClick={(e) => {
+                                e.stopPropagation()
+                            }}>
+                            @{gweet?.comment.author.username}
+                        </Link>
+                    </div>
+                )}
                 <GweetAuthor gweet={gweet} />
 
-                {/* TODO needs handling of all gweets above and under the gweet */}
-
                 <div className="flex flex-col space-y-3">
                     {gweet.content && <h1 className="break-words">{gweet.content}</h1>}
 
-                    {/* TODO make own component */}
-                    {gweet.media.length > 0 && (
-                        <div className={`grid object-cover h-[600px] ${gweet.media.length === 1 ? "grid-cols-1"
-                            : gweet.media.length === 2 ? "grid-cols-2 gap-3"
-                                : gweet.media.length === 3 || 4 ? "grid-cols-2 grid-rows-2 gap-3"
-                                    : ""
-                            }`}
-                        >
-                            {gweet.media.map((image, i) => {
-                                const isFirstImage = gweet.media.length === 3 && i === 0;
-                                return (
-                                    <Card key={i} className={`relative max-h-[600px] overflow-hidden ${isFirstImage ? "row-span-2" : ""}`}>
-                                        <Image
-                                            src={image.url as string}
-                                            alt="gweet image"
-                                            fill
-                                            className="object-cover rounded-lg"
-                                        />
-                                    </Card>
-                                );
-                            })}
-                        </div>
-                    )}
+                    {gweet.media.length > 0 && (<GweetMedia gweet={gweet} />)}
 
                     {/* TODO */}
                     {/* {gweet?.quotedGweet && <QuotedGweet gweet={gweet?.quotedGweet} />} */}
@@ -83,6 +75,6 @@ export const GweetDetails = () => {
             </div>
             <Separator className="h-1 mb-3" />
             <Comments gweetId={gweet?.id} />
-        </>
-    );
-};
+        </div>
+    )
+}
\ No newline at end of file

components/gweets/components/gweet-media.tsx

+import { Card } from "@/components/ui/card"
+import Image from "next/image"
+import { IGweet } from "../types"
+
+export const GweetMedia = ({ gweet }: { gweet: IGweet }) => {
+    return (
+        <div className={`grid object-cover h-[600px] ${gweet.media.length === 1 ? "grid-cols-1"
+            : gweet.media.length === 2 ? "grid-cols-2 gap-3"
+                : gweet.media.length === 3 || 4 ? "grid-cols-2 grid-rows-2 gap-3"
+                    : ""
+            }`}
+        >
+            {gweet.media.map((image, i) => {
+                const isFirstImage = gweet.media.length === 3 && i === 0
+                return (
+                    <Card key={i} className={`relative max-h-[600px] overflow-hidden ${isFirstImage ? "row-span-2" : ""}`}>
+                        <Image
+                            src={image.url as string}
+                            alt="gweet image"
+                            fill
+                            className="object-cover rounded-lg"
+                        />
+                    </Card>
+                )
+            })}
+        </div>
+    )
+}
\ No newline at end of file

components/gweets/components/thread.tsx

+import { TryAgain } from "@/components/try-again"
+
+import LoadingItem from "@/components/loading-item"
+import { useGweets } from "../hooks/use-gweets"
+import { InfiniteGweets } from "./infinite-gweets"
+
+export const Thread = ({ gweetId }: { gweetId: string }) => {
+    const {
+        data: threads,
+        isLoading,
+        isError,
+        fetchPreviousPage,
+        hasPreviousPage,
+        isFetchingPreviousPage,
+        isSuccess,
+    } = useGweets({
+        queryKey: ["gweets", gweetId, "threads"],
+        type: "threads",
+        id: gweetId,
+    })
+
+    if (isLoading) {
+        return <LoadingItem />
+    }
+
+    if (isError) {
+        return <TryAgain />
+    }
+
+    return (
+        <InfiniteGweets
+            gweets={threads}
+            fetchPreviousPage={fetchPreviousPage}
+            hasPreviousPage={hasPreviousPage}
+            isFetchingPreviousPage={isFetchingPreviousPage}
+            isSuccess={isSuccess}
+        />
+    )
+}
\ No newline at end of file

components/icons.tsx

@@ -34,11 +34,11 @@ import {
     Users,
     X,
     type Icon as LucideIcon,
-} from "lucide-react";
+} from "lucide-react"
 
 export type IconsType = {
-    [key: string]: LucideIcon;
-};
+    [key: string]: LucideIcon
+}
 
 export type Icon = LucideIcon