fix: add reach end status (#12)

.changeset/loud-lies-yawn.md

@@ -0,0 +1,5 @@
+---
+"useful-dependents": patch
+---
+
+fix: add reach end status to show correctly end status

src/components/result.tsx

@@ -17,16 +17,17 @@ export const Result: React.FC = () => {
   const repo = searchParams.get('repo')
   const packageId = searchParams.get('package_id')
   const [loadPage, setLoadPage] = useState(5)
-  const { data, setSize, packages, size, isLoading } = useDependents(repo as string, packageId as string)
+  const { data, setSize, packages, size, isLoading, isFinished } = useDependents(repo as string, packageId as string)
   const [ignoreZeroStar, setIgnoreZeroStar] = useState(true)
   const sortedData = useMemo(() => {
     const filteredData = ignoreZeroStar ? data.filter(d => d.stars > 0) : data
     return orderBy(filteredData ?? [], 'stars', 'desc')
   }, [data, ignoreZeroStar])
   const isFetching = useMemo(() => {
     const last = 30 * (loadPage - 1)
+    if (isFinished) return false
     return size > 0 && data && typeof data[last] === 'undefined'
-  }, [size, data, loadPage])
+  }, [size, data, loadPage, isFinished])
 
   useEffect(() => {
     if (repo && !isLoading) {
@@ -83,15 +84,16 @@ export const Result: React.FC = () => {
         <div className="rounded-b-md border text-center p-2">
           {isFetching ? (
             <Icons.loading className="animate-spin h-4 w-4 my-2 mx-auto " />
-          ) : (
+          ) : null}
+          {!isFetching && !isFinished ? (
             <Button
               className=" font-semibold"
               variant="link"
               onClick={() => setLoadPage(p => p + 5)}
             >
               Load More
             </Button>
-          )}
+          ) : null}
         </div>
       </div>
     </>

src/hooks/useDependents.ts

@@ -44,6 +44,7 @@ export const useDependents = (repo: string, packageId?: string) => {
 
   return {
     ...response,
+    isFinished: response.data?.some(d => !d?.nextURL),
     data: data.filter(Boolean),
     packages: response.data ? response.data[0]?.packages : [],
   }