feat: add empty result (#13)

izayl · May 8, 2023 · 19f0fc8 · 19f0fc8
1 parent 1f62c00
commit 19f0fc8
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 38 deletions.
diff --git a/.changeset/healthy-peaches-pull.md b/.changeset/healthy-peaches-pull.md
@@ -0,0 +1,5 @@
+---
+"useful-dependents": patch
+---
+
+feat: add empty result
diff --git a/src/components/result.tsx b/src/components/result.tsx
@@ -12,12 +12,24 @@ import { Button } from './ui/button'
 import { Icons } from './icons'
 import { PackageSelect } from './package-select'
 
+const EmptySlate: React.FC<React.PropsWithChildren> = ({ children }) => {
+  return (
+    <div className="py-[80px] border-b text-center">
+      <div className="text-xl font-semibold">{children}</div>
+      <p className="text-slate-400">
+        Please try again later.
+      </p>
+    </div>
+  )
+}
+
 export const Result: React.FC = () => {
   const searchParams = useSearchParams()
   const repo = searchParams.get('repo')
   const packageId = searchParams.get('package_id')
   const [loadPage, setLoadPage] = useState(5)
-  const { data, setSize, packages, size, isLoading, isFinished } = useDependents(repo as string, packageId as string)
+  const { data, setSize, packages, size, isLoading, isFinished, emptyText } =
+    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
@@ -80,21 +92,23 @@ export const Result: React.FC = () => {
               avatarUrl={result.avatarUrl}
             />
           ))}
+          {emptyText ? <EmptySlate>{emptyText}</EmptySlate> : null}
         </div>
-        <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>
+        {!isFinished ? (
+          <div className="rounded-b-md border text-center p-2">
+            {isFetching ? (
+              <Icons.loading className="animate-spin h-4 w-4 my-2 mx-auto " />
+            ) : (
+              <Button
+                className=" font-semibold"
+                variant="link"
+                onClick={() => setLoadPage(p => p + 5)}
+              >
+                Load More
+              </Button>
+            )}
+          </div>
+        ) : null}
       </div>
     </>
   )

diff --git a/src/hooks/useDependents.ts b/src/hooks/useDependents.ts
@@ -45,6 +45,7 @@ export const useDependents = (repo: string, packageId?: string) => {
   return {
     ...response,
     isFinished: response.data?.some(d => !d?.nextURL),
+    emptyText: response.data?.[0]?.empty,
     data: data.filter(Boolean),
     packages: response.data ? response.data[0]?.packages : [],
   }

diff --git a/src/lib/parse-page.ts b/src/lib/parse-page.ts
@@ -18,6 +18,7 @@ export type ParseResult = {
   dependents: Dependent[]
   nextURL: string | null
   packages: Package[]
+  empty: string
 }
 
 function parsePackages($: CheerioAPI): Package[] {
@@ -39,39 +40,47 @@ export async function parsePage(res?: string): Promise<ParseResult> {
   const $ = cheerio.load(res)
   const packages = parsePackages($)
   const dependents: Dependent[] = []
+  let empty = ''
+  let nextURL = null
 
-  $('#dependents > div.Box > div').each((i, e) => {
-    // The first element is the header row
-    if (i === 0) return
+  if ($('#dependents > .blankslate')) {
+    empty = $('#dependents .blankslate-heading').text().trim()
+  }
 
-    const avatarUrl = $(e).find('.avatar').attr('src') ?? ''
+  if (!empty) {
+    $('#dependents > div.Box > div').each((i, e) => {
+      // The first element is the header row
+      if (i === 0) return
 
-    const repo =
-      `${$(e).find('span > a:nth-child(1)').text().trim()}/${$(e).find('span > a:nth-child(2)').text().trim()}`
+      const avatarUrl = $(e).find('.avatar').attr('src') ?? ''
 
-    const stars = extractNumbers(
-      $(e).find('div > span:nth-child(1)').last().text().trim()
-    )
-    const forks = extractNumbers(
-      $(e).find('div > span:nth-child(2)').last().text().trim()
-    )
+      const repo =
+        `${$(e).find('span > a:nth-child(1)').text().trim()}/${$(e).find('span > a:nth-child(2)').text().trim()}`
 
-    dependents.push({
-      avatarUrl,
-      repo,
-      stars,
-      forks,
-    })
-  })
+      const stars = extractNumbers(
+        $(e).find('div > span:nth-child(1)').last().text().trim()
+      )
+      const forks = extractNumbers(
+        $(e).find('div > span:nth-child(2)').last().text().trim()
+      )
 
-  const nextURL =
-    $('#dependents > div.paginate-container > div > a:contains("Next")')?.prop(
-      'href'
-    ) || null
+      dependents.push({
+        avatarUrl,
+        repo,
+        stars,
+        forks,
+      })
+    })
 
+    nextURL =
+      $('#dependents > div.paginate-container > div > a:contains("Next")')?.prop(
+        'href'
+      ) || null
+  }
   return {
     dependents,
     nextURL,
     packages,
+    empty,
   }
 }