From 58cb4390861814be44a56853aab52bdef3d72cd4 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 19 Dec 2021 20:02:44 +0000
Subject: [PATCH] :recycle: Refactors date time method

---
 src/components/Widgets/CryptoWatchList.vue |  4 ++--
 src/components/Widgets/NewsHeadlines.vue   |  4 ++--
 src/components/Widgets/PublicHolidays.vue  |  4 ++--
 src/utils/MiscHelpers.js                   | 15 ++++++++++++++-
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/Widgets/CryptoWatchList.vue b/src/components/Widgets/CryptoWatchList.vue
index 5e7cb6f6..891721e9 100644
--- a/src/components/Widgets/CryptoWatchList.vue
+++ b/src/components/Widgets/CryptoWatchList.vue
@@ -22,7 +22,7 @@
 import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
 import { widgetApiEndpoints } from '@/utils/defaults';
-import { findCurrencySymbol, convertTimestampToDate } from '@/utils/MiscHelpers';
+import { findCurrencySymbol, timestampToDate } from '@/utils/MiscHelpers';
 
 export default {
   mixins: [WidgetMixin],
@@ -121,7 +121,7 @@ export default {
         + `<b>${this.$options.filters.currency(info.marketCap)}</b>`
         + `<br>Circulating Supply: <b>${info.supply} ${info.symbol.toUpperCase()}</b>${maxSupply}`
         + `<br>All-time-high of <b>${info.allTimeHigh}</b> `
-        + `at <b>${convertTimestampToDate(info.allTimeHighDate)}</b>`;
+        + `at <b>${timestampToDate(info.allTimeHighDate)}</b>`;
       return {
         content, html: true, trigger: 'hover focus', delay: 250,
       };
diff --git a/src/components/Widgets/NewsHeadlines.vue b/src/components/Widgets/NewsHeadlines.vue
index 66f1c91c..afa6e95b 100644
--- a/src/components/Widgets/NewsHeadlines.vue
+++ b/src/components/Widgets/NewsHeadlines.vue
@@ -16,7 +16,7 @@
 import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
 import { widgetApiEndpoints } from '@/utils/defaults';
-import { convertTimestampToDate } from '@/utils/MiscHelpers';
+import { timestampToDate } from '@/utils/MiscHelpers';
 
 export default {
   mixins: [WidgetMixin],
@@ -53,7 +53,7 @@ export default {
   },
   filters: {
     date(date) {
-      return convertTimestampToDate(date);
+      return timestampToDate(date);
     },
   },
   methods: {
diff --git a/src/components/Widgets/PublicHolidays.vue b/src/components/Widgets/PublicHolidays.vue
index dc0153f5..c22cc522 100644
--- a/src/components/Widgets/PublicHolidays.vue
+++ b/src/components/Widgets/PublicHolidays.vue
@@ -16,7 +16,7 @@
 import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
 import { widgetApiEndpoints } from '@/utils/defaults';
-import { convertTimestampToDate, capitalize } from '@/utils/MiscHelpers';
+import { timestampToDate, capitalize } from '@/utils/MiscHelpers';
 
 export default {
   mixins: [WidgetMixin],
@@ -77,7 +77,7 @@ export default {
     /* Assign data variables to the returned data */
     processData(holidays) {
       const results = [];
-      const makeDate = (date) => convertTimestampToDate(
+      const makeDate = (date) => timestampToDate(
         new Date(`${date.year}-${date.month}-${date.day}`).getTime(),
       );
       const formatType = (ht) => capitalize(ht.replaceAll('_', ' '));
diff --git a/src/utils/MiscHelpers.js b/src/utils/MiscHelpers.js
index fca6a800..6d941fe7 100644
--- a/src/utils/MiscHelpers.js
+++ b/src/utils/MiscHelpers.js
@@ -48,7 +48,8 @@ export const applyItemId = (inputSections) => {
   return sections;
 };
 
-export const convertTimestampToDate = (timestamp) => {
+/* Given a timestamp, returns formatted date, in local format */
+export const timestampToDate = (timestamp) => {
   const localFormat = navigator.language;
   const dateFormat = {
     weekday: 'short', day: 'numeric', month: 'short', year: '2-digit',
@@ -57,6 +58,18 @@ export const convertTimestampToDate = (timestamp) => {
   return `${date}`;
 };
 
+/* Given a timestamp, returns formatted time in local format */
+export const timestampToTime = (timestamp) => {
+  const localFormat = navigator.language;
+  const timeFormat = { hour: 'numeric', minute: 'numeric', second: 'numeric' };
+  const time = Intl.DateTimeFormat(localFormat, timeFormat).format(new Date(timestamp));
+  return time;
+};
+
+export const timestampToDateTime = (timestamp) => {
+  return `${timestampToDate(timestamp)} at ${timestampToTime(timestamp)}`;
+};
+
 /* Given a currency code, return the corresponding unicode symbol */
 export const findCurrencySymbol = (currencyCode) => {
   const code = currencyCode.toUpperCase().trim();