From d7ad18c60f0531b85a5b68d0b6002f7632b75e1e Mon Sep 17 00:00:00 2001
From: LBlend <leanderfurumo@protonmail.com>
Date: Thu, 14 Mar 2024 14:45:23 +0100
Subject: [PATCH] refactor datetime handling & format based on lang

Date format should now be rendered according to the language. Removed 'moment' dependency as we can use built in js to handle timezones as well as formatting. This is one of the tasks in issue #45
---
 package.json                      |  1 -
 src/components/sections/events.js | 20 +++++++++++---------
 src/pages/eventPost.js            | 26 ++++++++++++++++++--------
 yarn.lock                         |  7 -------
 4 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index 374ce2f..f492a9a 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
     "i18next": "^23.10.1",
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-http-backend": "^2.5.0",
-    "moment-timezone": "^0.5.33",
     "path": "^0.12.7",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.7.2",
diff --git a/src/components/sections/events.js b/src/components/sections/events.js
index e441a1d..e55420c 100644
--- a/src/components/sections/events.js
+++ b/src/components/sections/events.js
@@ -4,8 +4,6 @@ import * as styles from "./events.module.css"
 import { graphql, useStaticQuery } from "gatsby"
 import { GatsbyImage } from "gatsby-plugin-image"
 import { Link, useTranslation } from "gatsby-plugin-react-i18next"
-import moment from "moment-timezone"
-import "moment/locale/nb"
 
 import { FaMapMarkerAlt, FaCalendarAlt } from "react-icons/fa"
 
@@ -40,12 +38,10 @@ const Events = () => {
 
   const { t, i18n } = useTranslation()
 
-  moment.locale(i18n.language)
-  const currentDate = moment().utc()
-
+  const currentDate = new Date()
   const filteredEvents = data.allSanityEvent.edges
     .filter(({ node: event }) => {
-      return currentDate <= moment.utc(event.date)
+      return currentDate <= new Date(event.date)
     })
     .slice(0, 2)
 
@@ -63,9 +59,15 @@ const Events = () => {
               <div className={styles.metadata}>
                 <FaCalendarAlt />
                 <p>
-                  {moment(event.date)
-                    .tz("Europe/Oslo")
-                    .format("dddd Do MMMM, H:mm")}
+                  {new Date(event.date).toLocaleString(i18n.language, {
+                    weekday: "long",
+                    month: "long",
+                    year: "numeric",
+                    day: "numeric",
+                    hour: "numeric",
+                    minute: "2-digit",
+                    timeZone: "Europe/Oslo",
+                  })}
                 </p>
               </div>
             </div>
diff --git a/src/pages/eventPost.js b/src/pages/eventPost.js
index c237ef7..277434c 100644
--- a/src/pages/eventPost.js
+++ b/src/pages/eventPost.js
@@ -2,7 +2,6 @@ import * as React from "react"
 import * as styles from "./eventPost.module.css"
 
 import { graphql } from "gatsby"
-import moment from "moment-timezone"
 import { useTranslation } from "gatsby-plugin-react-i18next"
 
 import Seo from "../components/seo"
@@ -36,11 +35,16 @@ export const query = graphql`
 
 const Event = ({ data }) => {
   const { t, i18n } = useTranslation()
-  moment.locale(i18n.language)
 
-  const time = moment(data.sanityEvent.date)
-    .tz("Europe/Oslo")
-    .format("dddd Do MMMM, H:mm")
+  const time = new Date(data.sanityEvent.date).toLocaleString(i18n.language, {
+    weekday: "long",
+    month: "long",
+    year: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    timeZone: "Europe/Oslo",
+  })
 
   return (
     <>
@@ -60,9 +64,15 @@ const Event = ({ data }) => {
           <div className={styles.metadata}>
             <FaCalendarAlt />
             <p>
-              {moment(data.sanityEvent.date)
-                .tz("Europe/Oslo")
-                .format("dddd Do MMMM, [kl.] H:mm")}
+              {new Date(data.sanityEvent.date).toLocaleString(i18n.language, {
+                weekday: "long",
+                month: "long",
+                year: "numeric",
+                day: "numeric",
+                hour: "numeric",
+                minute: "2-digit",
+                timeZone: "Europe/Oslo",
+              })}
             </p>
           </div>
           <p className={styles.description}>{data.sanityEvent.description}</p>
diff --git a/yarn.lock b/yarn.lock
index d2cb7ac..56c9773 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7395,13 +7395,6 @@ mkdirp@^0.5.1, mkdirp@^0.5.4:
   dependencies:
     minimist "^1.2.6"
 
-moment-timezone@^0.5.33:
-  version "0.5.45"
-  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.45.tgz#cb685acd56bac10e69d93c536366eb65aa6bcf5c"
-  integrity sha512-HIWmqA86KcmCAhnMAN0wuDOARV/525R2+lOLotuGFzn4HO+FH+/645z2wx0Dt3iDv6/p61SIvKnDstISainhLQ==
-  dependencies:
-    moment "^2.29.4"
-
 moment@^2.29.4:
   version "2.30.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"