♻️ Refactor and improve download buttons (RubberDuckCrew#303)

Author: Friedinger

docs/package.json

@@ -16,7 +16,7 @@
     "scripts": {
         "dev": "vitepress dev",
         "build": "vitepress build",
-        "preview": "vitepress preview"
+        "preview": "npm run build && vitepress preview"
     },
     "devDependencies": {
         "vitepress": "1.6.4"

docs/src/download/DownloadRelease.vue

@@ -5,110 +5,52 @@
     <template v-else-if="status === 'success'">
         <p>
             <VPButton
+                v-if="releaseInfo"
                 :text="`Download latest stable release (${releaseInfo.name})`"
                 theme="brand"
-                v-if="releaseInfo"
                 :href="releaseInfo.url" />
             <VPButton
+                v-else
                 text="No stable release available"
                 theme="alt"
-                disabled
-                v-else />
+                disabled />
         </p>
         <p>
             <VPButton
+                v-if="preReleaseInfo"
                 :text="`Download latest pre-release (${preReleaseInfo.name})`"
                 theme="brand"
-                v-if="
-                    preReleaseInfo && preReleaseInfo.name !== releaseInfo?.name
-                "
                 :href="preReleaseInfo.url" />
             <VPButton
+                v-else
                 text="No pre-release available"
                 theme="alt"
-                disabled
-                v-else />
+                disabled />
+        </p>
+        <p>
+            You can also find all releases on the
+            <a
+                href="https://github.com/RubberDuckCrew/gitdone/releases"
+                target="_blank">
+                GitHub releases page</a
+            >.
         </p>
     </template>
     <template v-else>
         <p>
             Please download latest release manually from the
             <a
                 href="https://github.com/RubberDuckCrew/gitdone/releases"
-                target="_blank"
-                >GitHub releases page</a
+                target="_blank">
+                GitHub releases page</a
             >.
         </p>
     </template>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
 import VPButton from "vitepress/dist/client/theme-default/components/VPButton.vue";
+import { useDownloadRelease } from "./downloadRelease.ts";
 
-const status = ref<DownloadStatus>("loading");
-const preReleaseInfo = ref<ReleaseInfo | null>(null);
-const releaseInfo = ref<ReleaseInfo | null>(null);
-
-type DownloadStatus = "loading" | "success" | "error";
-type Release = {
-    tag_name: string;
-    prerelease: boolean;
-    assets: Asset[];
-    published_at: string;
-};
-type Asset = {
-    name: string;
-    browser_download_url: string;
-};
-type ReleaseInfo = {
-    name: string;
-    url: string;
-};
-
-onMounted(() => {
-    fetch("https://api.github.com/repos/RubberDuckCrew/gitdone/releases")
-        .then((res) => res.json())
-        .then((data) => {
-            data.sort(
-                (a: Release, b: Release) =>
-                    new Date(b.published_at).getTime() -
-                    new Date(a.published_at).getTime()
-            );
-            const latestRelease = data.find(
-                (release: Release) => !release.prerelease
-            );
-            const latestPreRelease = data.find(
-                (release: Release) =>
-                    release.prerelease &&
-                    new Date(release.published_at) >
-                        new Date(latestRelease?.published_at ?? 0)
-            );
-            preReleaseInfo.value = extractReleaseInfo(latestPreRelease);
-            releaseInfo.value = extractReleaseInfo(latestRelease);
-            status.value =
-                preReleaseInfo.value || releaseInfo.value ? "success" : "error";
-            if (status.value !== "success") {
-                status.value = "error";
-            }
-        })
-        .catch((e) => {
-            status.value = "error";
-        });
-});
-
-function extractReleaseInfo(release: Release | undefined): ReleaseInfo | null {
-    if (release && release.assets && release.assets.length > 0) {
-        const apk = release.assets.find((asset: Asset) =>
-            asset.name.endsWith(".apk")
-        );
-        if (apk) {
-            return {
-                name: release.tag_name,
-                url: apk.browser_download_url,
-            };
-        }
-    }
-    return null;
-}
+const { status, preReleaseInfo, releaseInfo } = useDownloadRelease();
 </script>

docs/src/download/downloadRelease.ts

@@ -0,0 +1,82 @@
+import { ref, onMounted, readonly } from "vue";
+
+type DownloadStatus = "loading" | "success" | "errorFetchingReleases";
+type Release = {
+    tag_name: string;
+    prerelease: boolean;
+    assets: Asset[];
+    published_at: string;
+};
+type Asset = {
+    name: string;
+    browser_download_url: string;
+};
+type ReleaseInfo = {
+    name: string;
+    url: string;
+};
+
+export function useDownloadRelease() {
+    const status = ref<DownloadStatus>("loading");
+    const preReleaseInfo = ref<ReleaseInfo>();
+    const releaseInfo = ref<ReleaseInfo>();
+
+    onMounted(() => {
+        fetchReleases();
+    });
+
+    function fetchReleases() {
+        fetch("https://api.github.com/repos/RubberDuckCrew/gitdone/releases")
+            .then((res) => res.json())
+            .then((releases: Release[]) => {
+                processReleases(releases);
+                status.value = "success";
+            })
+            .catch((e) => {
+                console.error("Error fetching releases:", e);
+                status.value = "errorFetchingReleases";
+            });
+    }
+
+    function processReleases(releases: Release[]) {
+        releases.sort(
+            (a: Release, b: Release) =>
+                new Date(b.published_at).getTime() -
+                new Date(a.published_at).getTime()
+        );
+        const latestRelease = releases.find(
+            (release: Release) => !release.prerelease
+        );
+        const latestPreRelease = releases.find(
+            (release: Release) =>
+                release.prerelease &&
+                new Date(release.published_at) >
+                    new Date(latestRelease?.published_at ?? 0)
+        );
+        preReleaseInfo.value = extractReleaseInfo(latestPreRelease);
+        releaseInfo.value = extractReleaseInfo(latestRelease);
+    }
+
+    function extractReleaseInfo(
+        release: Release | undefined
+    ): ReleaseInfo | undefined {
+        if (release?.assets && release.assets.length > 0) {
+            const apk = release.assets.find((asset: Asset) =>
+                asset.name.endsWith(".apk")
+            );
+            if (apk) {
+                return {
+                    name: release.tag_name,
+                    url: apk.browser_download_url,
+                };
+            }
+        }
+        return undefined;
+    }
+
+    return {
+        status: readonly(status),
+        preReleaseInfo: readonly(preReleaseInfo),
+        releaseInfo: readonly(releaseInfo),
+    };
+}

docs/src/download/index.md

@@ -1,11 +1,11 @@
-<script setup>
-import DownloadRelease from "./DownloadRelease.vue";
-</script>
-
 # Download
 
 You can download the latest release of GitDone from the links below.
 
+<script setup>
+import DownloadRelease from "./DownloadRelease.vue";
+</script>
+
 <DownloadRelease />
 
 Check out the [Verifying the Downloaded APK](./verify) guide to ensure the authenticity of the APK.