💄Add download quantity statistics for the latest release.

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 }

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
     }

common/types/configType.ts

@@ -45,6 +45,7 @@ const OptionalConfigKeyStrings = {
 
 const OptionalConfigKeyNumbers = {
   stargazers: true,
+  downloads: true,
   forks: true,
   issues: true,
   pulls: true

common/types/queryType.ts

@@ -7,6 +7,7 @@ type QueryType = {
 
   language: string
   stargazers: string
+  downloads: string
   forks: string
   issues: string
   pulls: string

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>
   )

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"

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()
     }

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"