convert codebase to typescript

src/components/TimeWindows.vue

@@ -4,84 +4,31 @@
       <li
         v-for="window in windows"
         :key="window.label"
-        @click="$emit('set-window', window)"
-        :class="{ 'is-active': window.label === activeWindow.label }"
+        @click="emit('set-window', window)"
+        :class="{ 'is-active': window.label === activeWindow?.label }"
       >
         <a>{{ window.label }}</a>
       </li>
     </ul>
   </div>
 </template>
-<script>
-import { ref, onMounted } from 'vue'
-import dayjs from 'dayjs'
-export default {
-  props: {
-    activeWindow: {
-      type: Object
-    }
-  },
-  setup(props, { emit }) {
-    const windows = ref([
-      {
-        label: 'afgelopen uur',
-        getStart: () => dayjs().subtract(1, 'hour').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'HH:mm',
-        interval: 4
-      },
-      {
-        label: '24 uur',
-        getStart: () => dayjs().subtract(1, 'days').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'HH:mm',
-        interval: 4
-      },
-      {
-        label: 'vandaag',
-        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(24, 'hours').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'HH:mm',
-        interval: 4
-      },
-      {
-        label: '3 dagen',
-        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(3, 'days').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'ddd D/M',
-        interval: 24
-      },
-      {
-        label: 'week',
-        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(7, 'days').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'ddd D/M',
-        interval: 24
-      },
-      {
-        label: 'maand',
-        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(1, 'months').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'ddd D/M',
-        interval: 24
-      },
-      {
-        label: 'jaar',
-        getStart: () => dayjs().startOf('day').add(1, 'day').subtract(1, 'year').unix(),
-        getEnd: () => dayjs().unix(),
-        format: 'ddd D/M',
-        interval: 24 * 7
-      }
-    ])
-    onMounted(() => {
-      const activeWindow = !props.activeWindow.label
-        ? windows.value[1]
-        : windows.value.find((w) => w.label === props.activeWindow.label.replace('-', ' '))
-      emit('set-window', activeWindow)
-    })
-    return {
-      windows
-    }
-  }
-}
+<script setup lang="ts">
+import { onMounted, defineProps, defineEmits } from 'vue'
+import { windows } from '@/utils/helpers'
+import type { Window } from '@/utils/types'
+
+const props = defineProps<{
+  activeWindow: Window | undefined
+}>()
+
+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>