From d4ded694d608f54d1bf0bfeb1c9b0b2f45a32c92 Mon Sep 17 00:00:00 2001
From: Sirttas <calloch.gael@gmail.com>
Date: Fri, 15 Sep 2023 19:21:36 +0200
Subject: [PATCH] fix perfs

---
 src/market/Market.vue            | 35 ++++++++++++++++++++++----------
 src/market/MarketResultTable.vue |  2 +-
 src/market/market.ts             |  2 +-
 src/style.css                    |  6 ++++++
 4 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/market/Market.vue b/src/market/Market.vue
index 615187c..01d408a 100644
--- a/src/market/Market.vue
+++ b/src/market/Market.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { computedAsync, useStorage } from '@vueuse/core';
-import { ref } from 'vue';
+import { ArrowPathIcon } from '@heroicons/vue/24/outline';
+import { useStorage } from '@vueuse/core';
+import { onMounted, ref } from 'vue';
 import { MarketOrderHistory, MarketResult, getHistory, getHistoryQuartils, jitaId } from ".";
 import MarketReultTable from "./MarketResultTable.vue";
 import { getMarketType, searchMarketType } from "./type";
@@ -12,19 +13,18 @@ type MarketItem = {
 
 const item = ref("");
 const items = useStorage<MarketItem[]>('market-items', []);
-const result = computedAsync<MarketResult[]>(() => Promise.all(items.value.map(async (i) => {
-    const [type, quartils] = await Promise.all([
-        getMarketType(i.typeID), 
-        getHistoryQuartils(i.history)
-    ]);
+const result = ref<MarketResult[]>([]);
+const processResult = async (i: MarketItem) => {
+    const type = getMarketType(i.typeID);
+    const quartils = getHistoryQuartils(i.history)
 
     return {
-        type,
+        type: await type,
         q1: quartils.q1,
         median: quartils.median,
         q3: quartils.q3
     };
-})), []);
+}
 const addOrRelaod = async (typeID: number) => {
     const history = await getHistory(jitaId, typeID);
     const item = { typeID, history };
@@ -34,6 +34,15 @@ const addOrRelaod = async (typeID: number) => {
     } else {
         items.value = [ ...items.value, item];
     }
+    
+    const filteredResult = result.value.filter(r => r.type.id !== typeID);
+    
+    result.value = [ ...filteredResult, await processResult(item) ];
+}
+const reloadAll = async () => {
+    items.value = await Promise.all(items.value.map( async i => ({ ...i, history: await getHistory(jitaId, i.typeID) })));
+    
+    result.value = await Promise.all(items.value.map(processResult));
 }
 const addItem = async () => {
     const type = await searchMarketType(item.value.split('\t')[0]);
@@ -41,15 +50,19 @@ const addItem = async () => {
     item.value = "";
     addOrRelaod(type.id);
 }
+onMounted(async () => {
+    result.value = await Promise.all(items.value.map(processResult));
+})
 </script>
 
 <template>
-    <div class="grid mb-2 mt-4">
-        <div>
+    <div class="grid grid-cols-2 mb-2 mt-4">
+        <div class="w-auto">
             <span>Item: </span>
             <input type="text" class="w-96" v-model="item" @keyup.enter="addItem" />
             <button class="justify-self-end ms-2" @click="addItem">Add</button>
         </div>
+            <button class="justify-self-end flex" @click="reloadAll"><ArrowPathIcon class="h-6 w-6 me-2" />Reload all</button>
     </div>
     <template v-if="result.length > 0">
         <hr />
diff --git a/src/market/MarketResultTable.vue b/src/market/MarketResultTable.vue
index e188924..3c43738 100644
--- a/src/market/MarketResultTable.vue
+++ b/src/market/MarketResultTable.vue
@@ -56,7 +56,7 @@ const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r =
                     <td class="text-right">{{ formatIsk(r.q3) }}</td>
                     <td class="text-right">{{  percentFormater.format(r.percent) }}</td>
                     <td class="text-right">
-                        <button class="p-0 border-none bg-transparent" @click="$emit('relaod', r.typeID)"><ArrowPathIcon class="h-6 w-6" /></button>
+                        <button class="btn-icon" @click="$emit('relaod', r.typeID)"><ArrowPathIcon class="hover:stroke-slate-400"/></button>
                     </td>
                 </tr>
             </tbody>
diff --git a/src/market/market.ts b/src/market/market.ts
index da7c449..0f6a553 100644
--- a/src/market/market.ts
+++ b/src/market/market.ts
@@ -28,7 +28,7 @@ export type HistoryQuartils = {
 
 export const getHistory = async (regionId: number, tyeId: number): Promise<MarketOrderHistory[]> =>  (await esiAxiosInstance.get(`/markets/${regionId}/history/`, { params: { type_id: tyeId } })).data;
 
-export const getHistoryQuartils = async (history: MarketOrderHistory[]): Promise<HistoryQuartils> => {
+export const getHistoryQuartils = (history: MarketOrderHistory[]): HistoryQuartils => {
     const volumes = history
         .flatMap(h => {
             const volume = h.volume;
diff --git a/src/style.css b/src/style.css
index 99f7b29..e681938 100644
--- a/src/style.css
+++ b/src/style.css
@@ -41,4 +41,10 @@
         @apply bg-slate-600 hover:bg-slate-800;
         border-radius: 5px;
     }
+    .btn-icon {
+        @apply p-0 border-none bg-transparent hover:text-slate-400;
+        > svg {
+            @apply w-6 h-6 hover:text-slate-400;
+        }
+    }
 }
\ No newline at end of file