From 52e2e875dd6754a9b8b12d160922f9022a5da0d3 Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Tue, 23 Apr 2024 14:39:38 +0530
Subject: [PATCH 1/4] update: color code

---
 src/components/Meeting/Join.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/Meeting/Join.vue b/src/components/Meeting/Join.vue
index d79176be..89427324 100644
--- a/src/components/Meeting/Join.vue
+++ b/src/components/Meeting/Join.vue
@@ -49,11 +49,9 @@ const meetingStatusMessage = computed(() => {
 </script>
 <template>
 	<button
-		v-if="
-			(startTime === undefined || !isFutureTimestamp(startTime)) &&
-			(expiryTime === undefined || isFutureTimestamp(expiryTime))
+		v-if="((meetingHasStarted && meetingIsActive))
 		"
-		class="hs-button is-fullwidth is-large w-full gap-2 font-bold border border-blue-500 rounded-full bg-[#236BFE] outline hover:outline-[#236BFE] outline-2 outline-offset-2 transition-all text-white"
+		class="hs-button is-fullwidth is-large w-full gap-2 font-bold border border-green-500 rounded-full bg-green-500 outline hover:outline-green-500 outline-2 outline-offset-2 transition-all text-white"
 		@click="
 			() => {
 				redirectToUrl(meetingLink)
@@ -66,7 +64,14 @@ const meetingStatusMessage = computed(() => {
 	</button>
 	<div
 		v-else
-		class="hs-button is-fullwidth is-large w-full gap-2 font-bold border border-blue-500 rounded-full bg-[#236BFE] outline hover:outline-[#236BFE] outline-2 outline-offset-2 transition-all text-white"
+		class="hs-button is-fullwidth is-large w-full gap-2 font-bold border rounded-full outline outline-2 outline-offset-2 transition-all text-white"
+		:class="{ 'bg-gray-500': !meetingIsActive ,
+		'border-gray-500': !meetingIsActive,
+		'hover:outline-gray-500': !meetingIsActive,
+		'bg-[#236BFE]': meetingIsActive,
+		'border-[#236BFE]': meetingIsActive,
+		'hover:outline-[#236BFE]': meetingIsActive
+		}"
 	>
 		<VideoCamera :solid="true" :iconType="`${roomType}`" />
 		{{ roomTypeDescription }}

From 72a47bd5d74996a533a366350fe4fbf9584e8d9d Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Tue, 23 Apr 2024 14:39:58 +0530
Subject: [PATCH 2/4] lint

---
 src/components/Meeting/Join.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Meeting/Join.vue b/src/components/Meeting/Join.vue
index 89427324..96bebe94 100644
--- a/src/components/Meeting/Join.vue
+++ b/src/components/Meeting/Join.vue
@@ -49,8 +49,7 @@ const meetingStatusMessage = computed(() => {
 </script>
 <template>
 	<button
-		v-if="((meetingHasStarted && meetingIsActive))
-		"
+		v-if="meetingHasStarted && meetingIsActive"
 		class="hs-button is-fullwidth is-large w-full gap-2 font-bold border border-green-500 rounded-full bg-green-500 outline hover:outline-green-500 outline-2 outline-offset-2 transition-all text-white"
 		@click="
 			() => {
@@ -65,12 +64,13 @@ const meetingStatusMessage = computed(() => {
 	<div
 		v-else
 		class="hs-button is-fullwidth is-large w-full gap-2 font-bold border rounded-full outline outline-2 outline-offset-2 transition-all text-white"
-		:class="{ 'bg-gray-500': !meetingIsActive ,
-		'border-gray-500': !meetingIsActive,
-		'hover:outline-gray-500': !meetingIsActive,
-		'bg-[#236BFE]': meetingIsActive,
-		'border-[#236BFE]': meetingIsActive,
-		'hover:outline-[#236BFE]': meetingIsActive
+		:class="{
+			'bg-gray-500': !meetingIsActive,
+			'border-gray-500': !meetingIsActive,
+			'hover:outline-gray-500': !meetingIsActive,
+			'bg-[#236BFE]': meetingIsActive,
+			'border-[#236BFE]': meetingIsActive,
+			'hover:outline-[#236BFE]': meetingIsActive,
 		}"
 	>
 		<VideoCamera :solid="true" :iconType="`${roomType}`" />

From 54fd8a4a9d1b2d65b9504729b1dc03e35ec647a3 Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Tue, 23 Apr 2024 15:32:59 +0530
Subject: [PATCH 3/4] add: reactivity for time sensitive meeting update

---
 src/components/Meeting/Join.vue | 83 +++++++++++++++++++--------------
 src/fixtures/index.ts           |  5 +-
 2 files changed, 50 insertions(+), 38 deletions(-)

diff --git a/src/components/Meeting/Join.vue b/src/components/Meeting/Join.vue
index 96bebe94..3f76a0a9 100644
--- a/src/components/Meeting/Join.vue
+++ b/src/components/Meeting/Join.vue
@@ -1,52 +1,65 @@
 <script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue'
 import VideoCamera from '../Icons/VideoCamera.vue'
-import { computed } from 'vue'
 import { formatISOTimestamp, isFutureTimestamp } from '../../fixtures'
 
 const props = defineProps<{
-	redirectToUrl: (meetingLink: string | undefined) => void
-	meetingLink: string | undefined
-	roomType: string
-	startTime: string | undefined
-	expiryTime: string | undefined
+  redirectToUrl: (meetingLink: string | undefined) => void
+  meetingLink: string | undefined
+  roomType: string
+  startTime: string | undefined
+  expiryTime: string | undefined
 }>()
 
-const startTimeValid = computed(
-	() => props.startTime && !isNaN(new Date(props.startTime).getTime()),
-)
-const expiryTimeValid = computed(
-	() => props.expiryTime && !isNaN(new Date(props.expiryTime).getTime()),
-)
 
-const meetingHasStarted = computed(
-	() => startTimeValid.value && !isFutureTimestamp(props.startTime as string),
-)
-const meetingIsActive = computed(
-	() =>
-		startTimeValid.value &&
-		(!expiryTimeValid.value || isFutureTimestamp(props.expiryTime as string)),
-)
+const currentTime = ref(new Date());
 
-const roomTypeDescription = computed(() => {
-	return `${props.roomType === 'VIDEO' ? 'Video Call' : 'Audio Space'}`
-})
+// Update current time every minute
+const updateCurrentTime = () => {
+  currentTime.value = new Date();
+};
+let timer: NodeJS.Timeout | undefined;
+onMounted(() => {
+  timer = setInterval(updateCurrentTime, 15000);  // 15 seconds
+});
+onUnmounted(() => {
+  clearInterval(timer);
+});
 
-const meetingStatusMessage = computed(() => {
-	if (!startTimeValid.value) {
-		return 'Unkwown Start Time'
-	}
+// Computed properties
+const startTimeValid = computed(() => {
+  return props.startTime && !isNaN(new Date(props.startTime).getTime());
+});
+const expiryTimeValid = computed(() => {
+  return props.expiryTime && !isNaN(new Date(props.expiryTime).getTime());
+});
 
-	if (meetingHasStarted.value && !meetingIsActive.value) {
-		return 'Expired'
-	}
+const meetingHasStarted = computed(() => {
+  return startTimeValid.value && !isFutureTimestamp(props.startTime as string, currentTime.value);
+});
+const meetingIsActive = computed(() => {
+  return startTimeValid.value && 
+         (!expiryTimeValid.value || isFutureTimestamp(props.expiryTime as string, currentTime.value));
+});
 
-	if (!meetingHasStarted.value) {
-		return `Starts @ ${formatISOTimestamp(props.startTime as string)}`
-	}
+const roomTypeDescription = computed(() => {
+  return `${props.roomType === 'VIDEO' ? 'Video Call' : 'Audio Space'}`;
+});
 
-	return `Ends @ ${formatISOTimestamp(props.expiryTime as string)}`
-})
+const meetingStatusMessage = computed(() => {
+  if (!startTimeValid.value) {
+    return 'Unknown Start Time';
+  }
+  if (meetingHasStarted.value && !meetingIsActive.value) {
+    return 'Expired';
+  }
+  if (!meetingHasStarted.value) {
+    return `Starts @ ${formatISOTimestamp(props.startTime as string)}`;
+  }
+  return `Ends @ ${formatISOTimestamp(props.expiryTime as string)}`;
+});
 </script>
+
 <template>
 	<button
 		v-if="meetingHasStarted && meetingIsActive"
diff --git a/src/fixtures/index.ts b/src/fixtures/index.ts
index 604d1afa..0b887246 100644
--- a/src/fixtures/index.ts
+++ b/src/fixtures/index.ts
@@ -29,13 +29,12 @@ export const formatISOTimestamp = (isoTimestamp: string) => {
 	return `${hours}:${minutes} ${amPm} (${day}:${month}:${year}) ${timeZone}`
 }
 
-export const isFutureTimestamp = (isoTimestamp: string) => {
+export const isFutureTimestamp = (isoTimestamp: string, currentTime: Date) => {
 	if (isoTimestamp === undefined) {
 		return true
 	}
 	const inputDate = new Date(isoTimestamp)
 
-	const currentDate = new Date()
 	// Return true if the input date is in the future, false otherwise
-	return inputDate > currentDate
+	return inputDate > currentTime
 }

From 28b1445306bc43bd8a33696a0d2fbe982c047885 Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Tue, 23 Apr 2024 15:33:12 +0530
Subject: [PATCH 4/4] lint

---
 src/components/Meeting/Join.vue | 77 ++++++++++++++++++---------------
 1 file changed, 41 insertions(+), 36 deletions(-)

diff --git a/src/components/Meeting/Join.vue b/src/components/Meeting/Join.vue
index 3f76a0a9..1a8dfd03 100644
--- a/src/components/Meeting/Join.vue
+++ b/src/components/Meeting/Join.vue
@@ -4,60 +4,65 @@ import VideoCamera from '../Icons/VideoCamera.vue'
 import { formatISOTimestamp, isFutureTimestamp } from '../../fixtures'
 
 const props = defineProps<{
-  redirectToUrl: (meetingLink: string | undefined) => void
-  meetingLink: string | undefined
-  roomType: string
-  startTime: string | undefined
-  expiryTime: string | undefined
+	redirectToUrl: (meetingLink: string | undefined) => void
+	meetingLink: string | undefined
+	roomType: string
+	startTime: string | undefined
+	expiryTime: string | undefined
 }>()
 
-
-const currentTime = ref(new Date());
+const currentTime = ref(new Date())
 
 // Update current time every minute
 const updateCurrentTime = () => {
-  currentTime.value = new Date();
-};
-let timer: NodeJS.Timeout | undefined;
+	currentTime.value = new Date()
+}
+let timer: NodeJS.Timeout | undefined
 onMounted(() => {
-  timer = setInterval(updateCurrentTime, 15000);  // 15 seconds
-});
+	timer = setInterval(updateCurrentTime, 15000) // 15 seconds
+})
 onUnmounted(() => {
-  clearInterval(timer);
-});
+	clearInterval(timer)
+})
 
 // Computed properties
 const startTimeValid = computed(() => {
-  return props.startTime && !isNaN(new Date(props.startTime).getTime());
-});
+	return props.startTime && !isNaN(new Date(props.startTime).getTime())
+})
 const expiryTimeValid = computed(() => {
-  return props.expiryTime && !isNaN(new Date(props.expiryTime).getTime());
-});
+	return props.expiryTime && !isNaN(new Date(props.expiryTime).getTime())
+})
 
 const meetingHasStarted = computed(() => {
-  return startTimeValid.value && !isFutureTimestamp(props.startTime as string, currentTime.value);
-});
+	return (
+		startTimeValid.value &&
+		!isFutureTimestamp(props.startTime as string, currentTime.value)
+	)
+})
 const meetingIsActive = computed(() => {
-  return startTimeValid.value && 
-         (!expiryTimeValid.value || isFutureTimestamp(props.expiryTime as string, currentTime.value));
-});
+	return (
+		startTimeValid.value &&
+		(!expiryTimeValid.value ||
+			isFutureTimestamp(props.expiryTime as string, currentTime.value))
+	)
+})
 
 const roomTypeDescription = computed(() => {
-  return `${props.roomType === 'VIDEO' ? 'Video Call' : 'Audio Space'}`;
-});
+	return `${props.roomType === 'VIDEO' ? 'Video Call' : 'Audio Space'}`
+})
 
 const meetingStatusMessage = computed(() => {
-  if (!startTimeValid.value) {
-    return 'Unknown Start Time';
-  }
-  if (meetingHasStarted.value && !meetingIsActive.value) {
-    return 'Expired';
-  }
-  if (!meetingHasStarted.value) {
-    return `Starts @ ${formatISOTimestamp(props.startTime as string)}`;
-  }
-  return `Ends @ ${formatISOTimestamp(props.expiryTime as string)}`;
-});
+	if (!startTimeValid.value) {
+		return 'Unknown Start Time'
+	}
+	if (meetingHasStarted.value && !meetingIsActive.value) {
+		return 'Expired'
+	}
+	if (!meetingHasStarted.value) {
+		return `Starts @ ${formatISOTimestamp(props.startTime as string)}`
+	}
+	return `Ends @ ${formatISOTimestamp(props.expiryTime as string)}`
+})
 </script>
 
 <template>