From 4f32f755d20c3669f59f6b8879bd9d9dd11a9f48 Mon Sep 17 00:00:00 2001
From: kajgrant <kajgrant@gmail.com>
Date: Wed, 12 Jun 2024 16:20:35 -0700
Subject: [PATCH] improve socket typing and store access for tickergrid

---
 client/src/socket/socket.ts     | 19 ++++++++-----------
 client/src/types/types.ts       |  2 --
 client/src/views/Chart.vue      |  4 +---
 client/src/views/TickerGrid.vue |  7 +++++--
 4 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/client/src/socket/socket.ts b/client/src/socket/socket.ts
index 2746d93..7afc08e 100644
--- a/client/src/socket/socket.ts
+++ b/client/src/socket/socket.ts
@@ -1,6 +1,6 @@
 import { useTickerStore } from '@/store/ticker.js';
 import { priceDirection } from '@/helpers/helpers.js';
-import { WebSocketMessage, type StatusType, type TickerData, type WebsocketData } from '@/types/types.js';
+import { type StatusType, type TickerData, type WebsocketData } from '@/types/types.js';
 
 const CRYPTO_ENDPOINT = 'wss://ws-feed.exchange.coinbase.com';
 
@@ -28,24 +28,21 @@ export function websocketConnect() {
   };
 
   socket.onmessage = (e: MessageEvent<unknown>) => {
-    const msg = JSON.parse(e.data as string);
-
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    const msg = JSON.parse(e.data as string) as WebsocketData;
     if (msg['type'] == 'ticker') {
-      const socketTicker = msg as WebsocketData;
-      const prevRes = tickerStore.tickerValue(socketTicker.product_id);
-      const curPrice = parseFloat(socketTicker.price);
-      const dayPrice = parseFloat(socketTicker.open_24h);
+      const prevRes = tickerStore.tickerValue(msg.product_id);
+      const curPrice = parseFloat(msg.price);
+      const dayPrice = parseFloat(msg.open_24h);
       const tickerValue = {
-        id: socketTicker.product_id,
+        id: msg.product_id,
         curPrice: curPrice,
-        volume: parseFloat(socketTicker.volume_24h),
+        volume: parseFloat(msg.volume_24h),
         dayPercentage: ((curPrice - dayPrice) / dayPrice) * 100,
         prevPrice: prevRes.curPrice,
         dirFilter: priceDirection(prevRes.dirFilter, curPrice, prevRes.prevPrice),
         status: 'CONNECTED'
       } as TickerData;
-      tickerStore.updateTickerData(socketTicker.product_id, tickerValue);
+      tickerStore.updateTickerData(msg.product_id, tickerValue);
     }
   };
 
diff --git a/client/src/types/types.ts b/client/src/types/types.ts
index 0d059ea..e92e029 100644
--- a/client/src/types/types.ts
+++ b/client/src/types/types.ts
@@ -35,8 +35,6 @@ export interface ApiRequestData {
   timestamp: number;
 }
 
-export type WebSocketMessage = { data: object };
-
 export interface WebsocketData {
   best_ask: string;
   best_ask_size: string;
diff --git a/client/src/views/Chart.vue b/client/src/views/Chart.vue
index b064d60..d8833b4 100644
--- a/client/src/views/Chart.vue
+++ b/client/src/views/Chart.vue
@@ -9,12 +9,10 @@ const { tickerId } = defineProps<{
 }>();
 
 const tickerStore = useTickerStore();
-
-const boxSize = 'LARGE' as SizeType;
-
 const ticker = computed<TickerData>(() => {
   return tickerStore.tickerValue(tickerId);
 });
+const boxSize = 'LARGE' as SizeType;
 </script>
 
 <template>
diff --git a/client/src/views/TickerGrid.vue b/client/src/views/TickerGrid.vue
index e1bc1a8..4dfbf39 100644
--- a/client/src/views/TickerGrid.vue
+++ b/client/src/views/TickerGrid.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { useTickerStore } from '@/store/ticker';
 import { type SizeType } from '@/types/types';
 import TickerBox from '@/components/ticker/TickerBox.vue';
 
 const tickerStore = useTickerStore();
-
+const tickerIds = computed<string[]>(() => {
+  return tickerStore.tickerKeys;
+});
 const boxSize = 'SMALL' as SizeType;
 </script>
 
@@ -13,7 +16,7 @@ const boxSize = 'SMALL' as SizeType;
     <h1 class="font-medium text-4xl">Connecting...</h1>
   </div>
   <div v-else-if="tickerStore.status.overall == 'CONNECTED'" class="flex flex-wrap justify-center m-auto w-full h-full">
-    <div v-for="id in tickerStore.tickerKeys" :key="id" class="w-1/2 h-1/2">
+    <div v-for="id in tickerIds" :key="id" class="w-1/2 h-1/2">
       <TickerBox :ticker-id="id" :box-size="boxSize" :r-link="id"></TickerBox>
     </div>
   </div>