simplify code

src/components/Chart.vue

@@ -5,7 +5,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch, toRefs, nextTick, onMounted } from 'vue'
+import { ref, watchEffect, toRefs, nextTick } from 'vue'
 import * as Highcharts from 'highcharts'
 import 'highcharts/css/highcharts.scss'
 import Loader from '@/components/Loader.vue'
@@ -19,37 +19,35 @@ Highcharts.setOptions({
 })
 
 const props = defineProps<{
-  window: Window | undefined
+  activeWindow: Window
-  type: string
+  activeType: string
 }>()
 
 const data = ref([])
 const loading = ref(false)
 const chart = ref<HTMLElement | null>(null)
-const { window, type } = toRefs(props)
+const { activeWindow, activeType } = toRefs(props)
 
-const fetchData = async () => {
+const fetchData = async (window: Window, type: string) => {
-  if (window.value && type.value) {
   loading.value = true
   const typeApi = {
     temperatuur: 'temperature',
     luchtvochtigheid: 'humidity'
   }
   try {
-      const [start, end] = [window.value.getStart(), window.value.getEnd()]
+    const [start, end] = [window.getStart(), window.getEnd()]
     const sample = Math.round((end - start) / 60 / 288) || 1
     const host = import.meta.env.MODE === 'development' ? 'http://localhost:3000' : ''
     const fetchUrl = `${host}/type/${
-        typeApi[type.value as keyof typeof typeApi]
+      typeApi[type as keyof typeof typeApi]
     }/startDate/${start}/endDate/${end}/sample/${sample}`
     const response = await fetch(fetchUrl)
     loading.value = false
-      data.value = await response.json()
+    return response.json()
   } catch (err) {
     console.log(err)
   }
 }
-}
 
 const renderChart = () => {
   const chartData = data.value.map(({ date, value }) => ({ x: date, y: value }))
@@ -74,29 +72,23 @@ const renderChart = () => {
     yAxis: {
       labels: {
         formatter() {
-          const suffix = type.value === 'temperatuur' ? '°C' : '%'
+          const suffix = activeType.value === 'temperatuur' ? '°C' : '%'
           return this.value + suffix
         }
       },
       title: { text: null },
       minTickInterval: 0.1
     },
-    series: [{ name: capitalizeFirstLetter(type.value), data: chartData, type: 'line' }],
+    series: [{ name: capitalizeFirstLetter(activeType.value), data: chartData, type: 'line' }],
     credits: { enabled: false }
   })
 }
 
-watch([window, type], () => {
+watchEffect(async () => {
-  fetchData(), { immediate: true }
+  if (activeWindow.value && activeType.value) {
-})
+    data.value = await fetchData(activeWindow.value, activeType.value)
-onMounted(() => {
-  watch(
-    data,
-    () => {
     if (data.value.length > 0) nextTick(() => renderChart())
-    },
+  }
-    { immediate: true }
-  )
 })
 </script>
 

src/components/Main.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="app">
-    <NavBar :activeType="type" @set-type="setType"></NavBar>
+    <NavBar :activeType="activeType" @set-type="setType"></NavBar>
     <section class="section">
-      <TimeWindows :activeWindow="window" @set-window="setWindow"></TimeWindows>
+      <TimeWindows :windows="windows" :active-window="activeWindow" @set-window="setWindow"></TimeWindows>
-      <Chart :window="window" :type="type"></Chart>
+      <Chart :active-window="activeWindow" :active-type="activeType"></Chart>
     </section>
     <router-view></router-view>
   </div>
@@ -17,31 +17,37 @@ import Chart from '@/components/Chart.vue'
 import { windows } from '@/utils/helpers'
 import type { Window } from '@/utils/types'
 
-const type = ref<string>('')
+const defaultWindow = windows[1]
-const window = ref<Window | undefined>(undefined)
+
+const activeType = ref<string>('')
+const activeWindow = ref<Window>(defaultWindow)
+
 const router = useRouter()
 const currentRoute = useRoute()
-if (currentRoute.params.type) type.value = currentRoute.params.type as string
+if (currentRoute.params.type) activeType.value = currentRoute.params.type as string
-if (currentRoute.params.window) window.value = windows.find((w) => w.label === currentRoute.params.window)
+if (currentRoute.params.window) {
+  activeWindow.value = windows.find((w) => w.label === currentRoute.params.window) || defaultWindow
+}
 
 const updateRoute = () => {
-  if (type.value) {
+  if (activeType.value) {
     const route = {
       name: 'view',
       params: {
-        type: type.value,
+        type: activeType.value,
-        window: window.value?.label.replace(' ', '-')
+        window: activeWindow.value?.label.replace(' ', '-')
       }
     }
     router.push(route)
   }
 }
+
 const setType = (newType: string) => {
-  type.value = newType
+  activeType.value = newType
   updateRoute()
 }
 const setWindow = (newWindow: Window) => {
-  window.value = newWindow
+  activeWindow.value = newWindow
   updateRoute()
 }
 </script>

src/components/TimeWindows.vue

@@ -2,7 +2,7 @@
   <div class="tabs is-centered">
     <ul>
       <li
-        v-for="window in windows"
+        v-for="window in props.windows"
         :key="window.label"
         @click="emit('set-window', window)"
         :class="{ 'is-active': window.label === activeWindow?.label }"
@@ -13,22 +13,15 @@
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, defineProps, defineEmits } from 'vue'
+import { defineProps, defineEmits } from 'vue'
-import { windows } from '@/utils/helpers'
 import type { Window } from '@/utils/types'
 
 const props = defineProps<{
-  activeWindow: Window | undefined
+  activeWindow: Window
+  windows: Window[]
 }>()
 
 const emit = defineEmits<{
   (e: 'set-window', window: Window): void
 }>()
-
-onMounted(() => {
-  const activeWindow = !props.activeWindow?.label
-    ? windows[1]
-    : windows.find((w) => w.label === props.activeWindow?.label.replace('-', ' '))
-  if (activeWindow) emit('set-window', activeWindow)
-})
 </script>