From 742a46dbed3717ef6a24f4c691dd708cc11297a2 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Thu, 25 Jan 2024 15:56:15 +0100
Subject: [PATCH] Convert entryPointStore to composition API + TS

---
 client/src/stores/entryPointStore.js      |  74 ----------------
 client/src/stores/entryPointStore.test.js |   2 +-
 client/src/stores/entryPointStore.ts      | 103 ++++++++++++++++++++++
 3 files changed, 104 insertions(+), 75 deletions(-)
 delete mode 100644 client/src/stores/entryPointStore.js
 create mode 100644 client/src/stores/entryPointStore.ts

diff --git a/client/src/stores/entryPointStore.js b/client/src/stores/entryPointStore.js
deleted file mode 100644
index aab059c25889..000000000000
--- a/client/src/stores/entryPointStore.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import axios from "axios";
-import isEqual from "lodash.isequal";
-import { getAppRoot } from "onload/loadConfig";
-import { defineStore } from "pinia";
-import { rethrowSimple } from "utils/simple-error";
-
-export const useEntryPointStore = defineStore("entryPointStore", {
-    state: () => ({
-        entryPoints: [],
-        pollTimeout: undefined,
-    }),
-    getters: {
-        entryPointsForJob: (state) => {
-            return (jobId) => state.entryPoints.filter((entryPoint) => entryPoint["job_id"] === jobId);
-        },
-        entryPointsForHda: (state) => {
-            return (hdaId) =>
-                state.entryPoints.filter((entryPoint) => entryPoint["output_datasets_ids"].includes(hdaId));
-        },
-    },
-    actions: {
-        async ensurePollingEntryPoints() {
-            await this.fetchEntryPoints();
-            this.pollTimeout = setTimeout(() => {
-                this.ensurePollingEntryPoints();
-            }, 10000);
-        },
-        stopPollingEntryPoints() {
-            this.pollTimeout = clearTimeout(this.pollTimeout);
-        },
-        async fetchEntryPoints() {
-            this.stopPollingEntryPoints();
-            const url = getAppRoot() + `api/entry_points`;
-            const params = { running: true };
-            axios
-                .get(url, { params: params })
-                .then((response) => {
-                    this.updateEntryPoints(response.data);
-                })
-                .catch((e) => {
-                    rethrowSimple(e);
-                });
-        },
-        updateEntryPoints(data) {
-            let hasChanged = this.entryPoints.length !== data.length ? true : false;
-            if (this.entryPoints.length === 0) {
-                this.entryPoints = data;
-            } else {
-                const newEntryPoints = [];
-                for (const ep of data) {
-                    const olderEntryPoint = this.entryPoints.filter((item) => item.id === ep.id)[0];
-                    if (!hasChanged && !isEqual(olderEntryPoint, ep)) {
-                        hasChanged = true;
-                    }
-                    newEntryPoints.push(mergeEntryPoints(olderEntryPoint, ep));
-                }
-                if (hasChanged) {
-                    this.entryPoints = newEntryPoints;
-                }
-            }
-            function mergeEntryPoints(original, updated) {
-                return { ...original, ...updated };
-            }
-        },
-        removeEntryPoint(toolId) {
-            const index = this.entryPoints.findIndex((ep) => {
-                return ep.id === toolId ? true : false;
-            });
-            if (index >= 0) {
-                this.entryPoints.splice(index, 1);
-            }
-        },
-    },
-});
diff --git a/client/src/stores/entryPointStore.test.js b/client/src/stores/entryPointStore.test.js
index e59d82a00090..ddd9f8183f48 100644
--- a/client/src/stores/entryPointStore.test.js
+++ b/client/src/stores/entryPointStore.test.js
@@ -27,7 +27,7 @@ describe("stores/EntryPointStore", () => {
         expect(store.entryPoints.length).toBe(2);
     });
     it("stops polling", async () => {
-        expect(store.pollTimeout >= 0).toBeTruthy();
+        expect(store.pollTimeout !== undefined).toBeTruthy();
         store.stopPollingEntryPoints();
         expect(store.pollTimeout === undefined).toBeTruthy();
     });
diff --git a/client/src/stores/entryPointStore.ts b/client/src/stores/entryPointStore.ts
new file mode 100644
index 000000000000..0c20bbcf84fc
--- /dev/null
+++ b/client/src/stores/entryPointStore.ts
@@ -0,0 +1,103 @@
+import axios from "axios";
+import isEqual from "lodash.isequal";
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+
+import { getAppRoot } from "@/onload/loadConfig";
+import { rethrowSimple } from "@/utils/simple-error";
+
+// TODO: replace with the corresponding autogenerated model when ready
+interface EntryPoint {
+    model_class: "InteractiveToolEntryPoint";
+    id: string;
+    job_id: string;
+    name: string;
+    active: boolean;
+    created_time: string;
+    modified_time: string;
+    output_datasets_ids: string[];
+    target?: string;
+}
+
+export const useEntryPointStore = defineStore("entryPointStore", () => {
+    const pollTimeout = ref<NodeJS.Timeout | undefined>(undefined);
+    const entryPoints = ref<EntryPoint[]>([]);
+
+    const entryPointsForJob = computed(() => {
+        return (jobId: string) => entryPoints.value.filter((entryPoint) => entryPoint["job_id"] === jobId);
+    });
+
+    const entryPointsForHda = computed(() => {
+        return (hdaId: string) =>
+            entryPoints.value.filter((entryPoint) => entryPoint["output_datasets_ids"].includes(hdaId));
+    });
+
+    async function ensurePollingEntryPoints() {
+        await fetchEntryPoints();
+        pollTimeout.value = setTimeout(() => {
+            ensurePollingEntryPoints();
+        }, 10000);
+    }
+
+    function stopPollingEntryPoints() {
+        clearTimeout(pollTimeout.value);
+        pollTimeout.value = undefined;
+    }
+
+    async function fetchEntryPoints() {
+        const url = `${getAppRoot()}api/entry_points`;
+        const params = { running: true };
+        try {
+            const response = await axios.get(url, { params: params });
+            updateEntryPoints(response.data);
+        } catch (e) {
+            rethrowSimple(e);
+        }
+    }
+
+    function updateEntryPoints(data: EntryPoint[]) {
+        let hasChanged = entryPoints.value.length !== data.length ? true : false;
+        if (entryPoints.value.length === 0) {
+            entryPoints.value = data;
+        } else {
+            const newEntryPoints = [];
+            for (const ep of data) {
+                const olderEntryPoint = entryPoints.value.filter((item) => item.id === ep.id)[0];
+                if (!hasChanged && !isEqual(olderEntryPoint, ep)) {
+                    hasChanged = true;
+                }
+                if (olderEntryPoint) {
+                    newEntryPoints.push(mergeEntryPoints(olderEntryPoint, ep));
+                }
+            }
+            if (hasChanged) {
+                entryPoints.value = newEntryPoints;
+            }
+        }
+    }
+
+    function mergeEntryPoints(original: EntryPoint, updated: EntryPoint) {
+        return { ...original, ...updated };
+    }
+
+    function removeEntryPoint(toolId: string) {
+        const index = entryPoints.value.findIndex((ep) => {
+            return ep.id === toolId ? true : false;
+        });
+        if (index >= 0) {
+            entryPoints.value.splice(index, 1);
+        }
+    }
+
+    return {
+        entryPoints,
+        entryPointsForJob,
+        entryPointsForHda,
+        fetchEntryPoints,
+        updateEntryPoints,
+        removeEntryPoint,
+        pollTimeout,
+        ensurePollingEntryPoints,
+        stopPollingEntryPoints,
+    };
+});