From 784e54bbf8c1b688945c8f6ea708392306799351 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 18 Mar 2023 14:17:09 +0100
Subject: [PATCH] display when the target has passed

---
 src/components/ResponsiveTimeUntil.vue | 19 ++++++++++++++++---
 src/hooks/useTimeUntil.hooks.ts        |  6 +++++-
 src/services/time-until.test.ts        |  6 +++---
 src/services/time-until.ts             |  2 +-
 4 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/components/ResponsiveTimeUntil.vue b/src/components/ResponsiveTimeUntil.vue
index f11ed59..9bc5254 100644
--- a/src/components/ResponsiveTimeUntil.vue
+++ b/src/components/ResponsiveTimeUntil.vue
@@ -21,6 +21,7 @@ const targetDate = computed(() =>
 
 const {
   timeUntilTarget,
+  hasTargetPassed,
   isYearsDisplayed,
   isMonthsDisplayed,
   isDaysDisplayed,
@@ -85,8 +86,12 @@ const copyUrl = () => {
         <span class="moment">seconds</span>
       </div>
     </section>
-    <section v-else>No target set.</section>
-    <section v-if="targetDate" class="target-date">{{ targetDate }}</section>
+    <section v-else class="no-target">No target set.</section>
+    <section v-if="targetDate" class="target-date">
+      <div v-if="hasTargetPassed" class="has-target-passed">🎊</div>
+      <hr v-else />
+      {{ targetDate }}
+    </section>
     <form @submit.prevent>
       <div>
         <label for="title">Title:</label>
@@ -104,7 +109,7 @@ const copyUrl = () => {
 </template>
 
 <style scoped>
-div.responsive-time-until {
+.responsive-time-until {
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -133,6 +138,14 @@ div.responsive-time-until {
   margin-bottom: 1rem;
 }
 
+.no-target {
+  padding: 1rem;
+}
+
+.has-target-passed {
+  font-size: 72px;
+}
+
 form {
   display: none;
   padding: 1rem;
diff --git a/src/hooks/useTimeUntil.hooks.ts b/src/hooks/useTimeUntil.hooks.ts
index 24f6f60..70a6053 100644
--- a/src/hooks/useTimeUntil.hooks.ts
+++ b/src/hooks/useTimeUntil.hooks.ts
@@ -1,8 +1,11 @@
 import { ref, computed, onUnmounted, ComputedRef } from "vue"
-import { timeUntil } from "../services/time-until"
+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)
@@ -46,6 +49,7 @@ export const useTimeUntil = (target: ComputedRef<string | undefined>) => {
 
   return {
     timeUntilTarget,
+    hasTargetPassed,
     isYearsDisplayed,
     isMonthsDisplayed,
     isDaysDisplayed,
diff --git a/src/services/time-until.test.ts b/src/services/time-until.test.ts
index cb9958b..13847ea 100644
--- a/src/services/time-until.test.ts
+++ b/src/services/time-until.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, afterEach, beforeEach } from "vitest"
-import { hasPassed, timeUntil } from "./time-until"
+import { hasTimePassed, timeUntil } from "./time-until"
 
 const noTime = () => ({
   days: 0,
@@ -57,9 +57,9 @@ describe("time until", () => {
 
 describe("has passed", () => {
   it("tells if the targed has passed", () => {
-    expect(hasPassed(noTime())).toBeTruthy()
+    expect(hasTimePassed(noTime())).toBeTruthy()
     expect(
-      hasPassed({
+      hasTimePassed({
         years: 0,
         months: 0,
         days: 0,
diff --git a/src/services/time-until.ts b/src/services/time-until.ts
index b8fbaaf..1926668 100644
--- a/src/services/time-until.ts
+++ b/src/services/time-until.ts
@@ -38,5 +38,5 @@ export const timeUntil = (target: string): TimeUntilReturn => {
   }
 }
 
-export const hasPassed = (timeUntil: TimeUntilReturn): boolean =>
+export const hasTimePassed = (timeUntil: TimeUntilReturn): boolean =>
   Object.entries(timeUntil).every(([_, value]) => value === 0)