Migrate code to composition api.

src/components/ExportHistoryModal.vue

@@ -32,111 +32,100 @@
     </ModalComponent>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
 import ModalComponent from "./ModalComponent.vue";
+import { download } from "@/composables/useMisc.js";
 
-export default {
-    components: {
-        ModalComponent,
-    },
-    data() {
-        return {
-            exportOptions: ["playlist", "history"],
-            exportAs: "playlist",
-            fields: [
-                "videoId",
-                "title",
-                "uploaderName",
-                "uploaderUrl",
-                "duration",
-                "thumbnail",
-                "watchedAt",
-                "currentTime",
-            ],
-            selectedFields: [
-                "videoId",
-                "title",
-                "uploaderName",
-                "uploaderUrl",
-                "duration",
-                "thumbnail",
-                "watchedAt",
-                "currentTime",
-            ],
-        };
-    },
-    methods: {
-        async fetchAllVideos() {
-            if (window.db) {
-                var tx = window.db.transaction("watch_history", "readonly");
-                var store = tx.objectStore("watch_history");
-                const request = store.getAll();
-                return new Promise((resolve, reject) => {
-                    (request.onsuccess = e => {
-                        const videos = e.target.result;
-                        this.exportVideos = videos;
-                        resolve();
-                    }),
-                        (request.onerror = e => {
-                            reject(e);
-                        });
+const exportOptions = ["playlist", "history"];
+const exportAs = ref("playlist");
+const fields = ["videoId", "title", "uploaderName", "uploaderUrl", "duration", "thumbnail", "watchedAt", "currentTime"];
+const selectedFields = ref([
+    "videoId",
+    "title",
+    "uploaderName",
+    "uploaderUrl",
+    "duration",
+    "thumbnail",
+    "watchedAt",
+    "currentTime",
+]);
+
+let exportVideos = [];
+
+async function fetchAllVideos() {
+    if (window.db) {
+        var tx = window.db.transaction("watch_history", "readonly");
+        var store = tx.objectStore("watch_history");
+        const request = store.getAll();
+        return new Promise((resolve, reject) => {
+            (request.onsuccess = e => {
+                const videos = e.target.result;
+                exportVideos = videos;
+                resolve();
+            }),
+                (request.onerror = e => {
+                    reject(e);
                 });
-            }
-        },
-        handleExport() {
-            if (this.exportAs === "playlist") {
-                this.fetchAllVideos()
-                    .then(() => {
-                        this.exportAsPlaylist();
-                    })
-                    .catch(e => {
-                        console.error(e);
-                    });
-            } else if (this.exportAs === "history") {
-                this.fetchAllVideos()
-                    .then(() => {
-                        this.exportAsHistory();
-                    })
-                    .catch(e => {
-                        console.error(e);
-                    });
-            }
-        },
-        exportAsPlaylist() {
-            const dateStr = new Date().toISOString().split(".")[0];
-            let json = {
-                format: "Piped",
-                version: 1,
-                playlists: [
-                    {
-                        name: `Piped History ${dateStr}`,
-                        type: "history",
-                        visibility: "private",
-                        videos: this.exportVideos.map(video => "https://youtube.com" + video.url),
-                    },
-                ],
-            };
-            this.download(JSON.stringify(json), `piped_history_${dateStr}.json`, "application/json");
-        },
-        exportAsHistory() {
-            const dateStr = new Date().toISOString().split(".")[0];
-            let json = {
-                format: "Piped",
-                version: 1,
-                watchHistory: this.exportVideos.map(video => {
-                    let obj = {};
-                    this.selectedFields.forEach(field => {
-                        obj[field] = video[field];
-                    });
-                    return obj;
-                }),
-            };
-            this.download(JSON.stringify(json), `piped_history_${dateStr}.json`, "application/json");
-        },
-        formatField(field) {
-            // camelCase to Title Case
-            return field.replace(/([A-Z])/g, " $1").replace(/^./, str => str.toUpperCase());
-        },
-    },
-};
+        });
+    }
+}
+
+function handleExport() {
+    if (exportAs.value === "playlist") {
+        fetchAllVideos()
+            .then(() => {
+                exportAsPlaylist();
+            })
+            .catch(e => {
+                console.error(e);
+            });
+    } else if (exportAs.value === "history") {
+        fetchAllVideos()
+            .then(() => {
+                exportAsHistory();
+            })
+            .catch(e => {
+                console.error(e);
+            });
+    }
+}
+
+function exportAsPlaylist() {
+    const dateStr = new Date().toISOString().split(".")[0];
+    let json = {
+        format: "Piped",
+        version: 1,
+        playlists: [
+            {
+                name: `Piped History ${dateStr}`,
+                type: "history",
+                visibility: "private",
+                videos: exportVideos.map(video => "https://youtube.com" + video.url),
+            },
+        ],
+    };
+    download(JSON.stringify(json), `piped_history_${dateStr}.json`, "application/json");
+}
+
+function exportAsHistory() {
+    const dateStr = new Date().toISOString().split(".")[0];
+    let json = {
+        format: "Piped",
+        version: 1,
+        watchHistory: exportVideos.map(video => {
+            let obj = {};
+            selectedFields.value.forEach(field => {
+                obj[field] = video[field];
+            });
+            return obj;
+        }),
+    };
+    download(JSON.stringify(json), `piped_history_${dateStr}.json`, "application/json");
+}
+
+function formatField(field) {
+    // camelCase to Title Case
+    return field.replace(/([A-Z])/g, " $1").replace(/^./, str => str.toUpperCase());
+}
 </script>