refacto to useTimeUntil hook

src/components/ResponsiveTimeUntil.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { computed, onUnmounted, ref } from "vue"
-import { timeUntil } from "../services/time-until"
+import { computed, ref } from "vue"
 import { useTitle } from "@vueuse/core"
+import { useTimeUntil } from "../hooks/useTimeUntil.hooks"
 
 const props = defineProps<{ project?: string; target?: string }>()
 
+const target = computed(() => props.target)
+
 if (props.project) {
   useTitle(props.project)
 }
@@ -17,47 +19,21 @@ const targetDate = computed(() =>
     : null
 )
 
-const timeUntilTarget = props.target ? timeUntil(props.target) : null
-
-const yearsUntil = ref(timeUntilTarget?.years ?? 0)
-const monthsUntil = ref(timeUntilTarget?.months ?? 0)
-const daysUntil = ref(timeUntilTarget?.days ?? 0)
-const hoursUntil = ref(timeUntilTarget?.hours ?? 0)
-const minutesUntil = ref(timeUntilTarget?.minutes ?? 0)
-const secondsUntil = ref(timeUntilTarget?.seconds ?? 0)
-
-const isYearsDisplayed = computed(() => yearsUntil.value > 0)
-const isMonthsDisplayed = computed(
-  () => isYearsDisplayed.value || monthsUntil.value > 0
-)
-const isDaysDisplayed = computed(
-  () => isMonthsDisplayed.value || daysUntil.value > 0
-)
-const isHoursDisplayed = computed(
-  () => isDaysDisplayed.value || hoursUntil.value > 0
-)
-const isMinutesDisplayed = computed(
-  () => isHoursDisplayed.value || minutesUntil.value > 0
-)
-const isSecondsDisplayed = computed(
-  () => isMinutesDisplayed.value || secondsUntil.value > 0
-)
-
-const id = setInterval(() => {
-  if (!props.target) {
-    return
-  }
-  const timeUntilTarget = timeUntil(props.target)
-
-  yearsUntil.value = timeUntilTarget.years
-  monthsUntil.value = timeUntilTarget.months
-  daysUntil.value = timeUntilTarget.days
-  hoursUntil.value = timeUntilTarget.hours
-  minutesUntil.value = timeUntilTarget.minutes
-  secondsUntil.value = timeUntilTarget.seconds
-}, 1000)
-
-onUnmounted(() => clearInterval(id))
+const {
+  timeUntilTarget,
+  isYearsDisplayed,
+  isMonthsDisplayed,
+  isDaysDisplayed,
+  isHoursDisplayed,
+  isMinutesDisplayed,
+  isSecondsDisplayed,
+  yearsUntil,
+  monthsUntil,
+  daysUntil,
+  hoursUntil,
+  minutesUntil,
+  secondsUntil,
+} = useTimeUntil(target)
 
 const projectTitle = ref(props.project)
 const targetInput = ref(props.target)

src/hooks/useTimeUntil.hooks.ts

@@ -0,0 +1,62 @@
+import { ref, computed, onUnmounted, ComputedRef } from "vue"
+import { timeUntil } from "../services/time-until"
+
+export const useTimeUntil = (target: ComputedRef<string | undefined>) => {
+  const timeUntilTarget = target.value ? timeUntil(target.value) : null
+
+  const yearsUntil = ref(timeUntilTarget?.years ?? 0)
+  const monthsUntil = ref(timeUntilTarget?.months ?? 0)
+  const daysUntil = ref(timeUntilTarget?.days ?? 0)
+  const hoursUntil = ref(timeUntilTarget?.hours ?? 0)
+  const minutesUntil = ref(timeUntilTarget?.minutes ?? 0)
+  const secondsUntil = ref(timeUntilTarget?.seconds ?? 0)
+
+  const isYearsDisplayed = computed(() => yearsUntil.value > 0)
+  const isMonthsDisplayed = computed(
+    () => isYearsDisplayed.value || monthsUntil.value > 0
+  )
+  const isDaysDisplayed = computed(
+    () => isMonthsDisplayed.value || daysUntil.value > 0
+  )
+  const isHoursDisplayed = computed(
+    () => isDaysDisplayed.value || hoursUntil.value > 0
+  )
+  const isMinutesDisplayed = computed(
+    () => isHoursDisplayed.value || minutesUntil.value > 0
+  )
+  const isSecondsDisplayed = computed(
+    () => isMinutesDisplayed.value || secondsUntil.value > 0
+  )
+
+  const id = setInterval(() => {
+    if (!target.value) {
+      return
+    }
+    const timeUntilTarget = timeUntil(target.value)
+
+    yearsUntil.value = timeUntilTarget.years
+    monthsUntil.value = timeUntilTarget.months
+    daysUntil.value = timeUntilTarget.days
+    hoursUntil.value = timeUntilTarget.hours
+    minutesUntil.value = timeUntilTarget.minutes
+    secondsUntil.value = timeUntilTarget.seconds
+  }, 1000)
+
+  onUnmounted(() => clearInterval(id))
+
+  return {
+    timeUntilTarget,
+    isYearsDisplayed,
+    isMonthsDisplayed,
+    isDaysDisplayed,
+    isHoursDisplayed,
+    isMinutesDisplayed,
+    isSecondsDisplayed,
+    yearsUntil,
+    monthsUntil,
+    daysUntil,
+    hoursUntil,
+    minutesUntil,
+    secondsUntil,
+  }
+}