Files
miniminu/src/hooks/useTimeUntil.hooks.ts
2023-03-18 14:17:09 +01:00

67 lines
2.0 KiB
TypeScript

import { ref, computed, onUnmounted, ComputedRef } from "vue"
import { hasTimePassed, timeUntil } from "../services/time-until"
export const useTimeUntil = (target: ComputedRef<string | undefined>) => {
const timeUntilTarget = target.value ? timeUntil(target.value) : null
const hasTargetPassed = timeUntilTarget
? hasTimePassed(timeUntilTarget)
: false
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,
hasTargetPassed,
isYearsDisplayed,
isMonthsDisplayed,
isDaysDisplayed,
isHoursDisplayed,
isMinutesDisplayed,
isSecondsDisplayed,
yearsUntil,
monthsUntil,
daysUntil,
hoursUntil,
minutesUntil,
secondsUntil,
}
}