From b82e5d64908c15da3c7bb71ad70d8dc78178481b Mon Sep 17 00:00:00 2001
From: Thawne <thawne2018@gmail.com>
Date: Wed, 11 Oct 2023 13:11:55 +0800
Subject: [PATCH] :lipstick:Add download quantity statistics for the latest
 release.

---
 common/configHelper.ts                           |  6 ++++++
 common/github/repoQuery.ts                       | 16 ++++++++++++++++
 common/types/configType.ts                       |  1 +
 common/types/queryType.ts                        |  1 +
 src/components/configuration/checkBoxWrapper.tsx |  2 +-
 src/components/configuration/config.tsx          |  6 ++++++
 src/components/hooks/use-autofocus.ts            |  2 +-
 src/components/preview/card.tsx                  |  7 +++++++
 8 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/common/configHelper.ts b/common/configHelper.ts
index 535239be..ace51474 100644
--- a/common/configHelper.ts
+++ b/common/configHelper.ts
@@ -22,6 +22,11 @@ const getOptionalConfig = (repository: RepoQueryResponse['repository']) => {
     const languages = repository.languages?.nodes || []
     const language =
       languages.length > 0 ? languages[0]?.name || 'unknown' : 'unknown'
+    const latestRelease = repository.latestRelease?.releaseAssets?.nodes || []
+    const totalDownloadCount = latestRelease.reduce(
+      (acc, cur) => acc + (cur?.downloadCount || 0),
+      0
+    )
     const newConfig: OptionalConfigs = {
       owner: { state: false, value: repository.owner.login },
       name: { state: true, value: repository.name },
@@ -32,6 +37,7 @@ const getOptionalConfig = (repository: RepoQueryResponse['repository']) => {
       },
       language: { state: false, value: language },
       stargazers: { state: false, value: repository.stargazerCount },
+      downloads: { state: false, value: totalDownloadCount },
       forks: { state: false, value: repository.forkCount },
       pulls: { state: false, value: repository.pullRequests.totalCount },
       issues: { state: false, value: repository.issues.totalCount }
diff --git a/common/github/repoQuery.ts b/common/github/repoQuery.ts
index 41096fea..3dfdb588 100644
--- a/common/github/repoQuery.ts
+++ b/common/github/repoQuery.ts
@@ -28,6 +28,14 @@ export const getRepoDetails = async (owner: string, name: string) => {
               tagName
             }
           }
+          latestRelease {
+            releaseAssets(last: 100) {
+              nodes {
+                name,
+                downloadCount
+              }
+            }
+          }
           owner {
             login
           }
@@ -77,6 +85,14 @@ export type RepoQueryResponse = {
         readonly tagName: string
       } | null> | null
     }
+    readonly latestRelease: {
+      readonly releaseAssets: {
+        readonly nodes: ReadonlyArray<{
+          readonly name: string
+          readonly downloadCount: number
+        } | null> | null
+      }
+    }
     readonly owner: {
       readonly login: string
     }
diff --git a/common/types/configType.ts b/common/types/configType.ts
index 13eb368f..de601e74 100644
--- a/common/types/configType.ts
+++ b/common/types/configType.ts
@@ -45,6 +45,7 @@ const OptionalConfigKeyStrings = {
 
 const OptionalConfigKeyNumbers = {
   stargazers: true,
+  downloads: true,
   forks: true,
   issues: true,
   pulls: true
diff --git a/common/types/queryType.ts b/common/types/queryType.ts
index 3823dbe2..cd49ed4f 100644
--- a/common/types/queryType.ts
+++ b/common/types/queryType.ts
@@ -7,6 +7,7 @@ type QueryType = {
 
   language: string
   stargazers: string
+  downloads: string
   forks: string
   issues: string
   pulls: string
diff --git a/src/components/configuration/checkBoxWrapper.tsx b/src/components/configuration/checkBoxWrapper.tsx
index e9dd1eb1..8b106502 100644
--- a/src/components/configuration/checkBoxWrapper.tsx
+++ b/src/components/configuration/checkBoxWrapper.tsx
@@ -28,7 +28,7 @@ const CheckBoxWrapper = ({
             handleChange({ state: e.target.checked }, keyName)
           }}
         />
-        <span className="label-text">{title}</span>
+        <span className="label-text whitespace-nowrap">{title}</span>
       </label>
     </div>
   )
diff --git a/src/components/configuration/config.tsx b/src/components/configuration/config.tsx
index 0b920d6e..f257fd44 100644
--- a/src/components/configuration/config.tsx
+++ b/src/components/configuration/config.tsx
@@ -199,6 +199,12 @@ const Config = ({ repository }: ConfigProp) => {
             checked={config.stargazers?.state}
             handleChange={handleChange}
           />
+          <CheckBoxWrapper
+            title="Latest Downloads"
+            keyName="downloads"
+            checked={config.downloads?.state}
+            handleChange={handleChange}
+          />
           <CheckBoxWrapper
             title="Forks"
             keyName="forks"
diff --git a/src/components/hooks/use-autofocus.ts b/src/components/hooks/use-autofocus.ts
index a54ed945..1d69b2d7 100644
--- a/src/components/hooks/use-autofocus.ts
+++ b/src/components/hooks/use-autofocus.ts
@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 
 const useAutoFocus = () => {
-  const inputRef = useCallback((inputElement) => {
+  const inputRef = useCallback((inputElement: HTMLInputElement) => {
     if (inputElement) {
       inputElement.focus()
     }
diff --git a/src/components/preview/card.tsx b/src/components/preview/card.tsx
index dd420920..ed36adf4 100644
--- a/src/components/preview/card.tsx
+++ b/src/components/preview/card.tsx
@@ -184,6 +184,13 @@ export const Card = (config: Configuration) => {
               color="#007ec6"
             />
           )}
+          {config.downloads?.state && (
+            <Badge
+              name="lastest downloads"
+              value={`${config.downloads.value}`}
+              color="#4ec920"
+            />
+          )}
           {config.pulls?.state && (
             <Badge
               name="pulls"