From cf82d76b6fa6c80b7397c692ec223ed13ca9b28b Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 31 May 2023 14:15:02 -0700
Subject: [PATCH] feat: create UptimeExpire component

---
 components/UserProfile/UptimeExpire.vue | 56 +++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 components/UserProfile/UptimeExpire.vue

diff --git a/components/UserProfile/UptimeExpire.vue b/components/UserProfile/UptimeExpire.vue
new file mode 100644
index 000000000..e94918ad2
--- /dev/null
+++ b/components/UserProfile/UptimeExpire.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import dateDiff from '~/helpers/time/dateDiff';
+import dateFormat from '~/helpers/time/dateFormat';
+import buildStringFromValues from '~/helpers/time/buildTimeString';
+
+export interface Props {
+  time: string;
+  state: string;
+}
+
+const props = defineProps<Props>();
+
+const parsedTime = ref<string>('');
+const formattedTime = computed<string>(() => {
+  return dateFormat(props.time);
+});
+
+const countUp = computed<boolean>(() => {
+  return props.state !== 'TRIAL' && props.state === 'EEXPIRED';
+})
+
+const output = computed(() => {
+  if (!countUp.value) {
+    return {
+      title: props.state === 'EEXPIRED'
+        ? `Trial Key Expired at ${formattedTime.value}`
+        : `Trial Key Expires at ${formattedTime.value}`,
+      text: props.state === 'EEXPIRED'
+        ? `Trial Key Expired ${parsedTime.value}`
+        : `Trial Key Expires in ${parsedTime.value}`,
+    };
+  }
+  return {
+    title: `Server Up Since ${formattedTime.value}`,
+    text: `Uptime ${parsedTime.value}`,
+  };
+});
+
+const runDiff = () => parsedTime.value = buildStringFromValues(dateDiff(props.time, countUp.value));
+
+let interval: string | number | NodeJS.Timeout | undefined = undefined;
+onBeforeMount(() => {
+  runDiff();
+  interval = setInterval(() => {
+    runDiff();
+  }, 1000);
+});
+
+onBeforeUnmount(() => {
+  clearInterval(interval);
+});
+</script>
+
+<template>
+  <p :title="output.title">{{ output.text }}</p>
+</template>