convert repeated logic to component

kajgm · Jun 11, 2024 · f510c8d · f510c8d
1 parent 81e1f38
commit f510c8d
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 80 deletions.
diff --git a/src/components/ticker/TickerBox.vue b/src/components/ticker/TickerBox.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { useTickerStore } from '@/store/ticker';
+import { concatNumber } from '@/helpers/helpers';
+import { computed } from 'vue';
+import type { TickerData, SizeType } from '@/types/types';
+import { SizeMap } from '@/defaults/defaults';
+
+const tickerStore = useTickerStore();
+
+const { tickerId, boxSize, rLink } = defineProps<{
+  tickerId: string;
+  boxSize: SizeType;
+  rLink: string;
+}>();
+
+const ticker = computed<TickerData>(() => {
+  return tickerStore.tickerValue(tickerId);
+});
+
+const sInfo = SizeMap[boxSize];
+</script>
+
+<template>
+  <div class="p-1.5 w-full h-full">
+    <div class="bg-zinc-800 rounded-2xl w-full h-full">
+      <RouterLink :to="rLink">
+        <div class="p-2 h-full w-full flex flex-wrap flex-col">
+          <h1 class="font-medium" :class="sInfo.name">{{ ticker.id }}</h1>
+          <div v-if="ticker.status == 'CONNECTING'">
+            <h1 class="font-medium" :class="sInfo.status">Connecting...</h1>
+          </div>
+          <div v-else-if="ticker.status == 'ERROR'">
+            <h1 class="font-medium" :class="sInfo.status">Error</h1>
+          </div>
+          <div v-else-if="ticker.status == 'CONNECTED'" class="flex grow flex-wrap">
+            <div class="inline-flex items-center text-center" :class="sInfo.padding">
+              <svg class="w-auto" :class="[ticker.dirFilter, sInfo.iconSize]" viewBox="0 0 31.417 31.416">
+                <path
+                  d="M29.462 15.707a3.004 3.004 0 0 1-1.474 2.583L6.479 30.999c-.47.275-.998.417-1.526.417a2.98 2.98 0 0 1-1.487-.396 2.997 2.997 0 0 1-1.513-2.604V2.998A3.002 3.002 0 0 1 6.479.415l21.509 12.709a2.997 2.997 0 0 1 1.474 2.583z"
+                />
+              </svg>
+              <h1 class="text-emerald-500 font-medium px-1" :class="sInfo.price">
+                ${{ concatNumber(ticker.curPrice, 2, true, false) }}
+              </h1>
+            </div>
+            <div class="grow flex h-auto items-end justify-end">
+              <h1 class="font-medium text-left inline-block px-1 w-1/2" :class="sInfo.info">
+                {{ concatNumber(ticker.volume, 2, false, true) }}
+              </h1>
+              <h1
+                class="font-medium text-right inline-block px-1 w-1/2"
+                :class="[ticker.dayPercentage >= 0 ? 'text-emerald-500' : 'text-red-500', sInfo.info]"
+              >
+                {{ ticker.dayPercentage.toPrecision(3) }}%
+              </h1>
+            </div>
+          </div>
+        </div>
+      </RouterLink>
+    </div>
+  </div>
+</template>
diff --git a/src/defaults/defaults.ts b/src/defaults/defaults.ts
@@ -17,3 +17,30 @@ export const DEFAULT_TICKER = {
   dirFilter: 'fill-emerald-500 -rotate-90',
   status: 'CONNECTING'
 } as TickerData;
+
+export const SizeMap = {
+  SMALL: {
+    name: 'text-4xl',
+    price: 'text-4xl',
+    status: 'text-4xl',
+    padding: 'pl-1',
+    iconSize: 'h-5',
+    info: 'text-2xl'
+  },
+  LARGE: {
+    name: 'text-6xl',
+    price: 'text-7xl',
+    status: 'text-6xl',
+    padding: 'pl-4 pt-6',
+    iconSize: 'h-10',
+    info: 'text-5xl'
+  },
+  MEDIUM: {
+    name: 'text-6xl',
+    price: 'text-7xl',
+    status: 'text-6xl',
+    padding: 'pl-4 pt-6',
+    iconSize: 'h-10',
+    info: 'text-5xl'
+  }
+};
diff --git a/src/store/ticker.ts b/src/store/ticker.ts
@@ -27,6 +27,9 @@ export const useTickerStore = defineStore('ticker', {
     tickerData(): Map<string, TickerData> {
       return this.tickerDataMap;
     },
+    tickerKeys(): string[] {
+      return Array.from(this.tickerDataMap.keys());
+    },
     overallStatus(): StatusType {
       return this.status.overall;
     },

diff --git a/src/types/types.ts b/src/types/types.ts
@@ -56,3 +56,5 @@ export interface WebsocketData {
 }
 
 export type StatusType = 'CONNECTED' | 'CONNECTING' | 'ERROR';
+
+export type SizeType = 'SMALL' | 'MEDIUM' | 'LARGE';
diff --git a/src/views/Chart.vue b/src/views/Chart.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { useTickerStore } from '@/store/ticker';
-import { concatNumber } from '@/helpers/helpers';
 import { computed } from 'vue';
-import type { TickerData } from '@/types/types';
+import type { TickerData, SizeType } from '@/types/types';
+import TickerBox from '@/components/ticker/TickerBox.vue';
 
 const tickerStore = useTickerStore();
 
+const boxSize = 'LARGE' as SizeType;
+
 const { tickerId } = defineProps<{
   tickerId: string;
 }>();
@@ -17,43 +19,6 @@ const ticker = computed<TickerData>(() => {
 
 <template>
   <div class="flex flex-wrap justify-center m-auto w-full h-full">
-    <div class="p-2 w-full h-full">
-      <div class="bg-zinc-800 rounded-2xl w-full h-full">
-        <RouterLink to="/">
-          <div class="p-2 h-full w-full flex flex-wrap flex-col">
-            <h1 class="font-medium text-6xl">{{ ticker.id }}</h1>
-            <div v-if="ticker.status == 'CONNECTING'">
-              <h1 class="font-medium text-4xl">Connecting...</h1>
-            </div>
-            <div v-else-if="ticker.status == 'ERROR'">
-              <h1 class="font-medium text-4xl">Error</h1>
-            </div>
-            <div v-else-if="ticker.status == 'CONNECTED'" class="flex grow flex-wrap">
-              <div class="inline-flex items-center text-center pl-4 pt-8">
-                <svg class="h-10 w-auto" :class="ticker.dirFilter" viewBox="0 0 31.417 31.416">
-                  <path
-                    d="M29.462 15.707a3.004 3.004 0 0 1-1.474 2.583L6.479 30.999c-.47.275-.998.417-1.526.417a2.98 2.98 0 0 1-1.487-.396 2.997 2.997 0 0 1-1.513-2.604V2.998A3.002 3.002 0 0 1 6.479.415l21.509 12.709a2.997 2.997 0 0 1 1.474 2.583z"
-                  />
-                </svg>
-                <h1 class="text-emerald-500 font-medium text-7xl px-1">
-                  ${{ concatNumber(ticker.curPrice, 2, true, false) }}
-                </h1>
-              </div>
-              <div class="grow flex h-auto items-end justify-end">
-                <h1 class="font-medium text-5xl text-left inline-block px-1 w-1/2">
-                  {{ concatNumber(ticker.volume, 2, false, true) }}
-                </h1>
-                <h1
-                  class="font-medium text-5xl text-right inline-block px-1 w-1/2"
-                  :class="[ticker.dayPercentage >= 0 ? 'text-emerald-500' : 'text-red-500']"
-                >
-                  {{ ticker.dayPercentage.toPrecision(3) }}%
-                </h1>
-              </div>
-            </div>
-          </div>
-        </RouterLink>
-      </div>
-    </div>
+    <TickerBox :tickerId="ticker.id" :boxSize="boxSize" rLink="/"></TickerBox>
   </div>
 </template>
diff --git a/src/views/TickerGrid.vue b/src/views/TickerGrid.vue
@@ -1,54 +1,20 @@
 <script setup lang="ts">
 import { useTickerStore } from '@/store/ticker';
-import { concatNumber } from '@/helpers/helpers';
+import { type SizeType } from '@/types/types';
+import TickerBox from '@/components/ticker/TickerBox.vue';
 
 const tickerStore = useTickerStore();
+
+const boxSize = 'SMALL' as SizeType;
 </script>
 
 <template>
   <div v-if="tickerStore.status.overall == 'CONNECTING'" class="text-center">
     <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, ticker] in tickerStore.tickerData" :key="id" class="w-1/2 h-1/2">
-      <div class="p-1 w-full h-full">
-        <div class="bg-zinc-800 rounded-2xl w-full h-full">
-          <RouterLink :to="id">
-            <div class="p-2 h-full w-full flex flex-wrap flex-col">
-              <h1 class="font-medium text-4xl">{{ ticker.id }}</h1>
-              <div v-if="ticker.status == 'CONNECTING'">
-                <h1 class="font-medium text-4xl">Connecting...</h1>
-              </div>
-              <div v-else-if="ticker.status == 'ERROR'">
-                <h1 class="font-medium text-4xl">Error</h1>
-              </div>
-              <div v-else-if="ticker.status == 'CONNECTED'" class="flex grow flex-wrap">
-                <div class="inline-flex items-center text-center pl-1">
-                  <svg class="h-5 w-auto" :class="ticker.dirFilter" viewBox="0 0 31.417 31.416">
-                    <path
-                      d="M29.462 15.707a3.004 3.004 0 0 1-1.474 2.583L6.479 30.999c-.47.275-.998.417-1.526.417a2.98 2.98 0 0 1-1.487-.396 2.997 2.997 0 0 1-1.513-2.604V2.998A3.002 3.002 0 0 1 6.479.415l21.509 12.709a2.997 2.997 0 0 1 1.474 2.583z"
-                    />
-                  </svg>
-                  <h1 class="text-emerald-500 font-medium text-4xl py-2 px-1">
-                    ${{ concatNumber(ticker.curPrice, 2, true, false) }}
-                  </h1>
-                </div>
-                <div class="grow flex h-auto items-end justify-end">
-                  <h1 class="font-medium text-2xl text-left w-1/2 px-1">
-                    {{ concatNumber(ticker.volume, 2, false, true) }}
-                  </h1>
-                  <h1
-                    class="font-medium text-2xl text-right w-1/2 px-1"
-                    :class="[ticker.dayPercentage >= 0 ? 'text-emerald-500' : 'text-red-500']"
-                  >
-                    {{ ticker.dayPercentage.toPrecision(3) }}%
-                  </h1>
-                </div>
-              </div>
-            </div>
-          </RouterLink>
-        </div>
-      </div>
+    <div v-for="id in tickerStore.tickerKeys" :key="id" class="w-1/2 h-1/2">
+      <TickerBox :tickerId="id" :boxSize="boxSize" :rLink="id"></TickerBox>
     </div>
   </div>
 </template>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -56,3 +56,5 @@ export interface WebsocketData {
		}

		export type StatusType = 'CONNECTED' \| 'CONNECTING' \| 'ERROR';

		export type SizeType = 'SMALL' \| 'MEDIUM' \| 'LARGE';