no-ssr component

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

@@ -0,0 +1,16 @@
+import { PrismaClient } from '@prisma/client'
+
+// const prisma = new PrismaClient()
+
+export async function DELETE(request: Request) {
+  const { id } = await request.json()
+
+  console.log(id)
+
+  return Response.json(
+    {
+      status: 200,
+      ok: true
+    }
+  )
+}

app/api/collections/route.ts

@@ -2,8 +2,10 @@ import { PrismaClient } from '@prisma/client'
 
 const prisma = new PrismaClient()
 
-export async function POST(request: Request) {
-  const { userId, page } = await request.json()
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const userId = searchParams.get('id') ?? undefined
+  const page = searchParams.get('page') ? parseInt(searchParams.get('page') as string) : 0
 
   const collections = await prisma.collection.findMany({
     orderBy: {

app/page.tsx

@@ -1,12 +1,15 @@
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
 import { Main } from "@/components/main";
+import NoSSR from "@/components/no-ssr";
 
 export default function Home() {
   return (
     <div className="pb-32">
       <Header />
-      <Main />
+      <NoSSR>
+        <Main />
+      </NoSSR>
       <Footer />
     </div>
   );

components/main/collections/collection.tsx

@@ -30,6 +30,7 @@ export const Collection: React.FC<Props> = ({
       <motion.div
         initial={{ y: 100, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
+        data-id={collection.id}
         transition={{
           duration: 0.35,
           delay: (index % 15) * 0.1,

components/main/hooks/useCollections.ts

@@ -19,13 +19,14 @@ export const useCollections = (category: string) => {
       } = useQuery(
     ["collections"],
     async () => {
-      const response = await fetch("/api/collections", {
-        method: "POST",
-        body: JSON.stringify({
-          userId: category === 'my-own' ? user?.sub : undefined,
-          page: 0,
-        }),
+      const queryParams = new URLSearchParams();
+      queryParams.append('userId', category === 'my-own' ? user?.sub : undefined);
+      queryParams.append('page', '0');
+
+      const response = await fetch(`/api/collections?${queryParams.toString()}`, {
+        method: "GET",
       })
+
       const data = await response.json()
 
       if (!response.ok) {
@@ -45,13 +46,14 @@ export const useCollections = (category: string) => {
 
   const infiniteRefetch = async () => {
     setLoading(true);
-    const response = await fetch("/api/collections", {
-      method: "POST",
-      body: JSON.stringify({
-        userId: category === 'my-own' ? user?.sub : undefined,
-        page: data?.pagination?.page,
-      }),
-    })
+    const queryParams = new URLSearchParams();
+      queryParams.append('userId', category === 'my-own' ? user?.sub : undefined);
+      queryParams.append('page', data?.pagination?.page,);
+
+      const response = await fetch(`/api/collections?${queryParams.toString()}`, {
+        method: "GET",
+      })
+
     const d = await response.json()
     if (d.ok) {
       const images = _.concat(data?.images, d?.collections);

components/main/index.tsx

@@ -29,7 +29,7 @@ const categories = [
   },
 ];
 
-const useBreakpoint = createBreakpoint({ L: 1024, XS: 640 });
+const useBreakpoint = createBreakpoint({ XL: 1280, L: 1024, S: 768, XS: 640 });
 
 export const Main = () => {
   const { openWindowLogin, user } = useUser();
@@ -46,12 +46,15 @@ export const Main = () => {
           <div className="items-center justify-center flex-col lg:flex-row lg:justify-end gap-5 w-full mt-6 lg:mt-0 flex">
             {categories.map(({ key, label, icon, isLogged }) =>
               isLogged && !user ? (
-                <img
+                <Image
                   key={key}
                   src={`https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-${
-                    breakpoint === "XS" ? "lg" : "xl"
+                    ["XS", "S"].includes(breakpoint) ? "lg" : "xl"
                   }.svg`}
-                  className="cursor-pointer hover:-translate-y-1 transition-all duration-200"
+                  width="100"
+                  height="32"
+                  alt="Sign in with Hugging Face"
+                  className="cursor-pointer hover:-translate-y-1 transition-all duration-200 w-auto object-contain"
                   onClick={openWindowLogin}
                 />
               ) : (

components/no-ssr.tsx

@@ -0,0 +1,31 @@
+"use client";
+import { useEffect, useLayoutEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+const useEnhancedEffect =
+  typeof window !== "undefined" && process.env.NODE_ENV !== "test"
+    ? useLayoutEffect
+    : useEffect;
+
+const NoSSR = ({
+  children,
+  defer = false,
+  fallback = null,
+}: {
+  children: React.ReactNode;
+  defer?: boolean;
+  fallback?: React.ReactNode;
+}) => {
+  const [isMounted, setMountedState] = useState(false);
+
+  useEnhancedEffect(() => {
+    if (!defer) setMountedState(true);
+  }, [defer]);
+
+  useEffect(() => {
+    if (defer) setMountedState(true);
+  }, [defer]);
+
+  return isMounted ? children : fallback;
+};
+export default NoSSR;