added error handling on delete and last posted media to profile

app/(apidocs)/apidocs/page.tsx

@@ -3,6 +3,7 @@ import ReactSwagger from './react-swagger'
 
 export default async function IndexPage() {
     const spec = await getApiDocs()
+
     return (
         <section className="container">
             <ReactSwagger spec={spec} />

app/(content)/(user)/[username]/(profile)/layout.tsx

@@ -2,6 +2,7 @@ import { GlobalLayout } from "@/components/global-layout"
 import { ProfileNavbar } from "@/components/profile/components/profile-navbar"
 import { ProfileSideContent } from "@/components/profile/components/profile-side-content"
 import { ProfileUserInfo } from "@/components/profile/components/profile-user-info"
+import { IUser } from "@/components/profile/types"
 import { Card } from "@/components/ui/card"
 import { UserNotFound } from "@/components/user-not-found"
 import getURL from "@/lib/utils"
@@ -16,7 +17,7 @@ export default async function ProfileLayout({
     params: { username: string }
     children: React.ReactNode
 }) {
-    const user = await fetch(getURL(`/api/users/${params.username}`)).then((result) => result.json())
+    const user: IUser = await fetch(getURL(`/api/users/${params.username}`)).then((result) => result.json())
 
     return (
         <GlobalLayout
@@ -34,7 +35,7 @@ export default async function ProfileLayout({
                     }
                 </Card>
             }
-            sideContent={<ProfileSideContent />}
+            sideContent={<ProfileSideContent user={user} />}
         />
     )
 }
\ No newline at end of file

app/api/users/[username]/route.ts

@@ -33,6 +33,16 @@ export async function GET(request: Request, context: { params: { username: strin
                 followers: true,
                 following: true,
 
+                gweets: {
+                    select: {
+                        id: true,
+                        media: true,
+                    },
+                    orderBy: {
+                        createdAt: "desc",
+                    },
+                },
+
                 _count: {
                     select: {
                         followers: true,

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

@@ -33,7 +33,7 @@ export const useCreateGweet = () => {
                 queryClient.invalidateQueries(["hashtags"])
             },
             onError: (error) => {
-                console.log("error", error)
+                if (process.env.NODE_ENV === "development") console.log(error)
             },
         },
     )

components/gweets/api/get-gweet.ts

 export default async function getGweet(id: string | undefined) {
     try {
-        const data = await fetch(`/api/gweets/${id}`).then((result) => result.json())
+        const data = await fetch(`/api/gweets/${id}`)
+        if (!data.ok) {
+            throw new Error('Network response was not ok')
+        }
 
-        return data
+        return data.json()
     } catch (error: any) {
         return error.response.data
     }

components/gweets/api/get-gweets.ts

@@ -11,9 +11,12 @@ export const getGweets = async ({
 }) => {
     try {
         const url = `/api/gweets?cursor=${pageParam}&limit=${limit}${type ? `&type=${type}` : ""}${id ? `&id=${id}` : ""}`
-        const data = await fetch(url).then((result) => result.json())
+        const data = await fetch(url)
+        if (!data.ok) {
+            throw new Error('Network response was not ok')
+        }
 
-        return data
+        return data.json()
     } catch (error: any) {
         return error.response.data
     }

components/gweets/components/delete-gweet-modal.tsx

@@ -15,14 +15,27 @@ import {
     DialogTitle,
     DialogTrigger,
 } from "@/components/ui/dialog"
-import { useRouter } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation"
 
 export const DeleteGweetModal = ({ gweet, props, forwardedRef }: { gweet: IGweet, props: any, forwardedRef: any }) => {
     const { triggerChildren, onSelect, onOpenChange, ...itemProps } = props
     const { isLoading, mutate, isSuccess } = useDeleteGweet()
 
+    const pathname = usePathname()
+    const isDetail = pathname?.split("/")[2] || ""
+
     const router = useRouter()
-    if (isSuccess) router.push("/home")
+    if (isSuccess) {
+        onOpenChange(false)
+
+        setTimeout(() => {
+            if (isDetail === "status") {
+                router.push("/home")
+            } else {
+                router.refresh()
+            }
+        }, 150)
+    }
 
     return (
         <Dialog onOpenChange={onOpenChange}>

components/gweets/components/gweet-details.tsx

@@ -29,10 +29,6 @@ export const GweetDetails = () => {
         return <TryAgain />
     }
 
-    if (!isLoading && !isError && !gweet) {
-        return <>Not Found!</>
-    }
-
     return (
         <div>
             {/* TODO needs handling of all gweets above and under the gweet */}

components/gweets/components/gweet.tsx

@@ -34,6 +34,7 @@ export const Gweet = ({ gweet }: { gweet: IGweet }) => {
             <div className="flex flex-row h-auto w-full">
                 <Link
                     href={`/${gweet.author.username}`}
+                    className="h-fit"
                     onClick={(e) => {
                         e.stopPropagation()
                     }}>

components/gweets/hooks/use-delete-gweet.ts

@@ -12,7 +12,7 @@ export const useDeleteGweet = () => {
             queryClient.invalidateQueries(["gweets"])
         },
         onError: (error) => {
-            console.log(error)
+            if (process.env.NODE_ENV === "development") console.log(error)
         },
     })
 }
\ No newline at end of file

components/gweets/hooks/use-like.ts

@@ -23,8 +23,8 @@ export const useLike = ({
                     queryClient.invalidateQueries(["users", gweetAuthorId])
             },
             onError: () => {
-                console.log("error")
+                if (process.env.NODE_ENV === "development") console.log("error")
             },
         },
     )
-}
+}
\ No newline at end of file

components/gweets/hooks/use-regweet.ts

@@ -16,11 +16,9 @@ export const useRegweet = () => {
                 QueryClient.invalidateQueries(["users"])
             },
 
-            onError: (error: any) => {
-                console.log(error)
+            onError: (error) => {
+                if (process.env.NODE_ENV === "development") console.log(error)
             },
-
-            onSettled: () => { },
         },
     )
 }
\ No newline at end of file

components/profile/api/get-follows.ts

 export const getFollows = async (id: string | undefined, type: string | undefined) => {
     try {
         const data = await fetch(`/api/users/follow?type=${type}&userId=${id}`)
-            .then((result) => result.json())
+        if (!data.ok) {
+            throw new Error('Network response was not ok')
+        }
 
-        return data
+        return data.json()
     } catch (error: any) {
         return error.message
     }

components/profile/api/get-users.ts

 export const getUsers = async (id?: string) => {
     try {
         const data = await fetch(`/api/users${id ? `?id=${id}` : ""}`)
-            .then((result) => result.json())
+        if (!data.ok) {
+            throw new Error('Network response was not ok')
+        }
 
-        return data
+        return data.json()
     } catch (error: any) {
         return error.response.data
     }

components/profile/api/update-profile.ts

@@ -21,7 +21,7 @@ export const updateProfile = async ({
         if (profile.image.file) {
             [imagefileprops] = await uploadFiles({ files: [profile.image.file], endpoint: 'imageUploader' })
         }
-        console.log('bannerfileprops', profile.banner.removed)
+
         const data = await fetch(`/api/users/${userId}`, {
             method: 'PUT',
             body: JSON.stringify({

components/profile/components/profile-side-content.tsx

-import { Trends } from "@/components/trends/components/trends"
 import { Card } from "@/components/ui/card"
-import { Skeleton } from "@/components/ui/skeleton"
 import { getCurrentUser } from "@/lib/session"
+import Image from "next/image"
+import { IUser } from "../types"
 import { Connect } from "./connect"
 
-export const ProfileSideContent = async () => {
+export const ProfileSideContent = async ({ user }: { user: IUser }) => {
     const session = await getCurrentUser()
+    const arrayOfUserMedia = user.gweets.slice(0, 4)
+        .flatMap((gweet) => gweet.media.slice(0, 4).map((media) => ({ id: gweet.id, url: media.url })))
+        .slice(0, 4)
 
     return (
         <div className="space-y-6">
-            <Card className="p-6 bg-secondary">
-                <div className="grid grid-cols-2 gap-3">
-                    {Array.from({ length: 4 }, (_, i) => i + 1).map((i) => {
-                        return (
-                            <Skeleton key={i} className="aspect-[1/1] bg-gray-300" />
-                        )
-                    })}
-                </div>
-            </Card>
+            {arrayOfUserMedia.length > 0 &&
+                <Card className="p-6 bg-secondary">
+                    <div className={`grid object-cover ${arrayOfUserMedia.length === 1 ? "grid-cols-1"
+                        : arrayOfUserMedia.length === 2 ? "grid-cols-2 gap-3"
+                            : arrayOfUserMedia.length === 3 || 4 ? "grid-cols-2 grid-rows-2 gap-3"
+                                : ""
+                        }`}
+                    >
+                        {arrayOfUserMedia.map(({ id, url }, i) => {
+                            const isFirstImage = arrayOfUserMedia.length === 3 && i === 0
+                            return (
+                                <Card key={id} className={`relative overflow-hidden ${isFirstImage ? "col-span-2 aspect-[2/1]" : "aspect-square"}`}>
+                                    <Image src={url} alt="gweet media" fill className="object-cover rounded-lg" />
+                                </Card>
+                            )
+                        })}
+                    </div>
+                </Card>
+            }
 
             <Card className="p-6 bg-secondary">
                 <Connect session={session} />

components/profile/hooks/use-follow.ts

@@ -19,11 +19,11 @@ export const useFollow = (type: "follow" | "unfollow") => {
 
         {
             onSuccess: () => {
-                console.log("success")
+                if (process.env.NODE_ENV === "development") console.log("success")
             },
 
-            onError: () => {
-                console.log("error")
+            onError: (error) => {
+                if (process.env.NODE_ENV === "development") console.log(error)
             },
 
             onSettled: ({ userId }) => {

components/profile/hooks/use-update-profile.ts

@@ -19,11 +19,11 @@ export const useUpdateProfile = () => {
 
         {
             onSuccess: () => {
-                console.log("success")
+                if (process.env.NODE_ENV === "development") console.log("success")
             },
 
             onError: (error) => {
-                console.log(error)
+                if (process.env.NODE_ENV === "development") console.log(error)
             },
 
             onSettled: ({ userId }) => {

components/trends/api/get-hashtags.ts

 export const getHashtags = async () => {
     try {
-        const data = await fetch(`/api/hashtags`).then((result) => result.json())
-        return data
+        const data = await fetch(`/api/hashtags`)
+        if (!data.ok) {
+            throw new Error('Network response was not ok')
+        }
+
+        return data.json()
     } catch (error: any) {
         return error.response.data
     }

components/try-again.tsx

 import { useRouter } from "next/navigation"
+import { Button } from "./ui/button"
 
 export const TryAgain = () => {
     const router = useRouter()
 
     return (
-        <div className="flex flex-col items-center gap-1.2 p-4">
-            <h2 className="text-tertiary text-center">Something went wrong. Try reloading.</h2>
-            <button onClick={() => router.refresh} className="px-4 py-2 rounded-full bg-primary text-light font-medium flex items-center gap-1">
-                <span>Retry</span>
-            </button>
+        <div className="flex flex-col items-center p-6 space-y-3">
+            <h1 className="text-tertiary text-center">Huh. Couldn&apos;t find what you were looking for.</h1>
+            <h1 className="text-tertiary text-center pb-3">Let&apos;s go back to the homepage.</h1>
+            <Button size="lg" onClick={() => router.push("/home")}>Home</Button>
         </div>
     )
 }
\ No newline at end of file