Cleans up date components

assets/components/PastTime.vue

@@ -2,38 +2,23 @@
   <time :datetime="date.toISOString()">{{ text }}</time>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
+import { useIntervalFn } from "@vueuse/core";
 import formatDistance from "date-fns/formatDistance";
+import { PropType, ref } from "vue";
 
-export default {
-  props: {
-    date: {
-      required: true,
-      type: Date,
-    },
+const props = defineProps({
+  date: {
+    required: true,
+    type: Object as PropType<Date>,
   },
-  data() {
-    return {
-      text: "" as string,
-      interval: null,
-    };
-  },
-  name: "PastTime",
-  mounted() {
-    this.updateFromNow();
-    this.interval = setInterval(() => this.updateFromNow(), 30000);
-  },
-  destroyed() {
-    clearInterval(this.interval);
-  },
-  methods: {
-    updateFromNow() {
-      this.text = formatDistance(this.date, new Date(), {
-        addSuffix: true,
-      });
-    },
-  },
-};
+});
+
+const text = ref<string>();
+function updateFromNow() {
+  text.value = formatDistance(props.date, new Date(), {
+    addSuffix: true,
+  });
+}
+useIntervalFn(updateFromNow, 30_000, { immediateCallback: true });
 </script>
-
-<style scoped lang="scss"></style>

assets/components/RelativeTime.vue

@@ -3,46 +3,42 @@
 </template>
 
 <script lang="ts">
-import { formatRelative } from "date-fns";
-import { hourStyle } from "@/composables/settings";
-import enGB from "date-fns/locale/en-GB";
-import enUS from "date-fns/locale/en-US";
-
 const use24Hr =
   new Intl.DateTimeFormat(undefined, {
     hour: "numeric",
   })
     .formatToParts(new Date(2020, 0, 1, 13))
-    .find((part) => part.type === "hour").value.length === 2;
+    .find((part) => part.type === "hour")?.value.length === 2;
 
 const auto = use24Hr ? enGB : enUS;
 const styles = { auto, 12: enUS, 24: enGB };
-
-export default {
-  props: {
-    date: {
-      required: true,
-      type: Date,
-    },
-  },
-  name: "RelativeTime",
-  components: {},
-  computed: {
-    locale() {
-      const locale = styles[hourStyle.value];
-      const oldFormatter = locale.formatRelative;
-      return {
-        ...locale,
-        formatRelative(token) {
-          return oldFormatter(token) + "p";
-        },
-      };
-    },
-  },
-  methods: {
-    relativeTime(date, locale) {
-      return formatRelative(date, new Date(), { locale });
-    },
-  },
-};
+</script>
+
+<script lang="ts" setup>
+import { formatRelative } from "date-fns";
+import { hourStyle } from "@/composables/settings";
+import enGB from "date-fns/locale/en-GB";
+import enUS from "date-fns/locale/en-US";
+import { computed, PropType } from "vue";
+defineProps({
+  date: {
+    required: true,
+    type: Object as PropType<Date>,
+  },
+});
+
+const locale = computed(() => {
+  const locale = styles[hourStyle.value];
+  const oldFormatter = locale.formatRelative as (d: Date | number) => string;
+  return {
+    ...locale,
+    formatRelative(date: Date | number) {
+      return oldFormatter(date) + "p";
+    },
+  };
+});
+
+function relativeTime(date: Date, locale: Locale) {
+  return formatRelative(date, new Date(), { locale });
+}
 </script>