update ticker logic and refactor websocket into app

src/App.vue

@@ -1,9 +1,67 @@
 <script setup lang="ts">
 import Ticker from './views/Ticker.vue';
+import { ref, onMounted } from 'vue';
+import { type Status, type TickerType } from '@/types/types';
+
+const status = ref(null as Status);
+const socketResponse = ref({} as TickerType);
+const previousResponse = ref({} as TickerType);
+
+const subscribeMessage = {
+  type: 'subscribe',
+  product_ids: ['ETH-USD'],
+  channels: [
+    'heartbeat',
+    {
+      name: 'ticker',
+      product_ids: ['ETH-USD']
+    }
+  ]
+};
+
+function websocketConnect() {
+  const socket = new WebSocket('wss://ws-feed.exchange.coinbase.com');
+
+  socket.onopen = () => {
+    socket.send(JSON.stringify(subscribeMessage));
+  };
+
+  socket.onmessage = (e) => {
+    const msg = JSON.parse(e.data);
+
+    if (status.value != 'connected') {
+      status.value = 'connected';
+    }
+
+    if (msg['type'] == 'ticker') {
+      previousResponse.value = socketResponse.value;
+      socketResponse.value.id = msg['product_id'];
+      socketResponse.value.price = msg['price'];
+      socketResponse.value.volume = msg['volume_24h'].split('.')[0];
+    }
+  };
+
+  socket.onclose = (e) => {
+    console.log(e);
+    setTimeout(() => {
+      status.value = 'connecting';
+    }, 60000);
+  };
+
+  socket.onerror = (err) => {
+    console.log(err);
+    status.value = 'error';
+    socket.close();
+  };
+}
+
+onMounted(() => {
+  websocketConnect();
+});
 </script>
 
 <template>
-  <Ticker />
+  <Ticker :tickerData="socketResponse" :previousData="previousResponse" :status="status" />
 </template>
 
 <style scoped>

src/types/types.ts

@@ -0,0 +1,7 @@
+export interface TickerType {
+  id: String;
+  price: String;
+  volume: String;
+}
+
+export type Status = 'connected' | 'connecting' | 'error' | null;

src/views/Ticker.vue

@@ -1,65 +1,44 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import { type Status, type TickerType } from '@/types/types';
 
-interface ticker {
-  id: string;
-  price: string;
-  volume: string;
-}
-
-const tickerData = ref({} as ticker);
-
-const subscribeMessage = {
-  type: 'subscribe',
-  product_ids: ['ETH-USD'],
-  channels: [
-    'heartbeat',
-    {
-      name: 'ticker',
-      product_ids: ['ETH-USD']
-    }
-  ]
-};
+const props = defineProps<{
+  tickerData: TickerType;
+  previousData: TickerType;
+  status: Status;
+}>();
 
 const triangleFilter = ref('filterGreen');
 
-const socket = new WebSocket('wss://ws-feed.exchange.coinbase.com');
-
-socket.onopen = () => {
-  socket.send(JSON.stringify(subscribeMessage));
-};
+const tickData = props.tickerData;
+const prevData = props.previousData;
+const prevFilter = triangleFilter.value;
 
-socket.onmessage = (e) => {
-  const msg = JSON.parse(e.data);
-
-  const previousValue = tickerData.value.price;
-  if (msg['type'] == 'ticker') {
-    tickerData.value.id = msg['product_id'];
-    tickerData.value.price = msg['price'];
-    tickerData.value.volume = msg['volume_24h'].split('.')[0];
-  }
-
-  const previousFilter = triangleFilter.value;
-  if (previousValue > msg['price']) {
+onMounted(() => {
+  if (prevData.price > tickData.price) {
     triangleFilter.value = 'filterRed';
-  } else if (previousValue < msg['price']) {
+  } else if (prevData.price < tickData.price) {
     triangleFilter.value = 'filterGreen';
   } else {
-    triangleFilter.value = previousFilter;
+    triangleFilter.value = prevFilter;
   }
-};
+});
 </script>
 
 <template>
   <header>
     <div class="wrapper">
-      <div class="info">
-        <h1 data-cy="ticker">{{ tickerData.id }} (Coinbase)</h1>
+      <div v-if="props.status == 'connecting'" class="info">
+        <h1 data-cy="ticker">ETH-USD</h1>
+        <h1 class="green price">Connecting...</h1>
+      </div>
+      <div v-else class="info">
+        <h1 data-cy="ticker">{{ props.tickerData.id }} (Coinbase)</h1>
         <div class="value">
           <img src="@/assets/triangle.svg" class="triangle" :class="triangleFilter" />
-          <h1 class="green price">${{ tickerData.price }}</h1>
+          <h1 class="green price">${{ props.tickerData.price }}</h1>
         </div>
-        <h1>Volume: ${{ tickerData.volume }}</h1>
+        <h1>Volume: ${{ props.tickerData.volume }}</h1>
       </div>
     </div>
   </header>