infinite scroll + fix nsfw check + input doesnt allow to edit

app/api/route.ts

@@ -41,16 +41,14 @@ export async function POST(
       const isNSFW = await response_nsfw.clone().json().catch(() => ({}));
 
       if (isNSFW?.error && isNSFW?.estimated_time) {
-        console.log("retrying...")
         setTimeout(() => {
           checkIfIsNSFW(blob)
-        }, isNSFW?.estimated_time * 1000);
+        }, isNSFW?.estimated_time * 100);
       } else resolve(isNSFW)
     })
   }
 
   const isNSFW: any = await checkIfIsNSFW(blob)
-  console.log(isNSFW)
 
   if (isNSFW?.error) return Response.json({ status: 500, ok: false, message: isNSFW?.error });
 

components/main/collections/index.tsx

@@ -29,7 +29,6 @@ export const Collections: React.FC<{ category: string }> = ({ category }) => {
           infiniteRefetch();
         }}
         hasMore={pagination?.total_pages > pagination?.page}
-        // loader={<p className="bg-red-500 text-white text-2xl">loading...</p>}
         className="mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5 mt-8 lg:mt-14"
       >
         {images?.map((collection: Image, i: number) =>

components/main/hooks/useInputGeneration.ts

@@ -2,7 +2,7 @@ import { useId, useState } from "react"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { useLocalStorage } from 'react-use';
 
-import { Collection } from "@/utils/type"
+import { Collection, Image } from "@/utils/type"
 import list_styles from "@/assets/list_styles.json"
 import { useCollection } from "@/components/modal/useCollection";
 
@@ -29,16 +29,19 @@ export const useInputGeneration = () => {
       // generate string random ID
       const id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
       if (!hasMadeFirstGeneration) setFirstGenerationDone()
-      client.setQueryData(["collections"], (old) => {
-        return [{
-          id,
-          loading: true,
-          blob: {
-            type: "image/png",
-            data: new ArrayBuffer(0),
-          },
-          prompt
-        }, ...old as Collection[]]
+      client.setQueryData(["collections"], (old: any) => {
+        return {
+          pagination: old.pagination,
+          images: [{
+            id,
+            loading: true,
+            blob: {
+              type: "image/png",
+              data: new ArrayBuffer(0),
+            },
+            prompt
+          }, ...old.images as Image[]]
+        }
       })
 
       const findStyle = list_styles.find((item) => item.name === style)
@@ -52,16 +55,19 @@ export const useInputGeneration = () => {
       })
       const data = await response.json()
 
-      client.setQueryData(["collections"], (old) => {
-        const newArray = [...old as Collection[]]
-        const index = newArray.findIndex((item: Collection) => item.id === id)
+      client.setQueryData(["collections"], (old: any) => {
+        const newArray = [...old?.images as Image[]]
+        const index = newArray.findIndex((item: Image) => item.id === id)
 
         newArray[index] = !data.ok ? {
           ...newArray[index],
           error: data.message
-        } : data?.blob as Collection
+        } : data?.blob as Image
 
-        return newArray
+        return {
+          ...old,
+          images:newArray,
+        }
       })
 
       if (!data.ok) return null