Fixed timezones settings

pookmish · Feb 2, 2024 · 0094823 · 0094823
1 parent 1f00f1c
commit 0094823
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 29 deletions.
diff --git a/src/components/nodes/cards/stanford-event/stanford-event-card.tsx b/src/components/nodes/cards/stanford-event/stanford-event-card.tsx
@@ -12,16 +12,16 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 
 const StanfordEventCard = ({node, headingLevel, ...props}: Props) => {
 
-  const timezone: string = node.suEventDateTime?.timezone || 'America/Los_Angeles';
+  const timeZone = node.suEventDateTime.timezone || 'America/Los_Angeles';
 
   const start = new Date(node.suEventDateTime.value * 1000);
   const end = new Date(node.suEventDateTime.end_value * 1000);
 
-  const startMonth = start.toLocaleDateString("en-US", {month: "short", timeZone: timezone})
-  const startDay = parseInt(start.toLocaleDateString("en-US", {day: "numeric", timeZone: timezone}))
+  const startMonth = start.toLocaleDateString("en-US", {month: "short", timeZone})
+  const startDay = parseInt(start.toLocaleDateString("en-US", {day: "numeric", timeZone}))
 
   // Fix difference between server side render and client side render. Replace any strange characters.
-  const dateTimeString = getEventTimeString(start, end, timezone).replace(/[^a-zA-Z0-9 ,:\-|]/, ' ');
+  const dateTimeString = getEventTimeString(start, end, timeZone).replace(/[^a-zA-Z0-9 ,:\-|]/, ' ');
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
     <article aria-labelledby={node.id}
@@ -80,27 +80,27 @@ const StanfordEventCard = ({node, headingLevel, ...props}: Props) => {
 }
 
 
-export const getEventTimeString = (start: Date, end: Date, timezone: string): string => {
+export const getEventTimeString = (start: Date, end: Date, timeZone: string): string => {
   const startHour = parseInt(start.toLocaleTimeString("en-US", {
     hour: "numeric",
     hour12: false,
-    timeZone: timezone
+    timeZone
   }))
   const startMinute = parseInt(start.toLocaleTimeString("en-US", {
     minute: "numeric",
     hour12: false,
-    timeZone: timezone
+    timeZone
   }))
 
   const endHour = parseInt(end.toLocaleTimeString("en-US", {
     hour: "numeric",
     hour12: false,
-    timeZone: timezone
+    timeZone
   }))
   const endMinute = parseInt(end.toLocaleTimeString("en-US", {
     minute: "numeric",
     hour12: false,
-    timeZone: timezone
+    timeZone
   }))
 
   let dateTimeString: string;
@@ -111,12 +111,12 @@ export const getEventTimeString = (start: Date, end: Date, timezone: string): st
       month: "long",
       day: "numeric",
       year: "numeric",
-      timeZone: timezone
+      timeZone
     }) + ' - ' + end.toLocaleDateString("en-US", {
       month: "long",
       day: "numeric",
       year: "numeric",
-      timeZone: timezone
+      timeZone
     })
     return dateTimeString;
   }
@@ -133,7 +133,7 @@ export const getEventTimeString = (start: Date, end: Date, timezone: string): st
       month: "long",
       day: "numeric",
       year: "numeric",
-      timeZone: timezone
+      timeZone
     });
   }
 
@@ -145,19 +145,19 @@ export const getEventTimeString = (start: Date, end: Date, timezone: string): st
       month: "long",
       day: "numeric",
       year: "numeric",
-      timeZone: timezone
+      timeZone
     });
     dateTimeString += " | " + start.toLocaleTimeString("en-US", {
       hour: "numeric",
       minute: "numeric",
-      timeZone: timezone
+      timeZone
     });
     dateTimeString += ' - ';
     dateTimeString += end.toLocaleTimeString("en-US", {
       hour: "numeric",
       minute: "numeric",
       timeZoneName: "short",
-      timeZone: timezone
+      timeZone
     })
     return dateTimeString;
   }
@@ -167,7 +167,7 @@ export const getEventTimeString = (start: Date, end: Date, timezone: string): st
     hour: "numeric",
     minute: "numeric",
     timeZoneName: "short",
-    timeZone: timezone
+    timeZone
   })
 }
 

diff --git a/src/components/nodes/cards/stanford-news/stanford-news-card.tsx b/src/components/nodes/cards/stanford-news/stanford-news-card.tsx
@@ -2,7 +2,7 @@ import Image from "next/image";
 import Link from "@components/elements/link";
 import {H2, H3} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
-import {NodeStanfordNews, TermUnion} from "@lib/gql/__generated__/drupal";
+import {NodeStanfordNews} from "@lib/gql/__generated__/drupal";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordNews
@@ -19,7 +19,7 @@ const StanfordNewsCard = ({node, headingLevel, ...props}: Props) => {
     month: "long",
     day: "numeric",
     year: "numeric",
-    timezone: node.suNewsPublishingDate.timezone
+    timeZone: node.suNewsPublishingDate.timezone
   }) : undefined;
 
   return (
@@ -38,12 +38,20 @@ const StanfordNewsCard = ({node, headingLevel, ...props}: Props) => {
       }
       <div className="p-20">
 
+        <div className="flex flex-col">
         <Heading className="text-m2 [&_a]:text-black" id={node.id}>
           <Link href={node.suNewsSource?.url || node.path}>
             {node.title}
           </Link>
         </Heading>
 
+        {publishDate &&
+          <div className="order-first">
+            {publishDate}
+          </div>
+        }
+        </div>
+
         {topics &&
           <div>
             {topics.map((topic, index) =>

diff --git a/src/components/nodes/list-item/stanford-event/stanford-event-list-item.tsx b/src/components/nodes/list-item/stanford-event/stanford-event-list-item.tsx
@@ -13,15 +13,15 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 
 const StanfordEventListItem = ({node, headingLevel, ...props}: Props) => {
 
-  const timezone: string = node.suEventDateTime.timezone || 'America/Los_Angeles';
+  const timeZone = node.suEventDateTime.timezone || 'America/Los_Angeles';
   const start = new Date(node.suEventDateTime.value * 1000);
   const end = new Date(node.suEventDateTime.end_value * 1000);
 
-  const startMonth = start.toLocaleDateString("en-US", {month: "short", timeZone: timezone})
-  const startDay = parseInt(start.toLocaleDateString("en-US", {day: "numeric", timeZone: timezone}))
+  const startMonth = start.toLocaleDateString("en-US", {month: "short", timeZone})
+  const startDay = parseInt(start.toLocaleDateString("en-US", {day: "numeric", timeZone}))
 
   // Fix difference between server side render and client side render. Replace any strange characters.
-  const dateTimeString = getEventTimeString(start, end, timezone).replace(/[^a-zA-Z0-9 ,:\-|]/, ' ');
+  const dateTimeString = getEventTimeString(start, end, timeZone).replace(/[^a-zA-Z0-9 ,:\-|]/, ' ');
   const Heading = headingLevel === 'h3' ? H3 : H2;
 
   return (

diff --git a/src/components/nodes/list-item/stanford-news/stanford-news-list-item.tsx b/src/components/nodes/list-item/stanford-news/stanford-news-list-item.tsx
@@ -19,7 +19,7 @@ const StanfordNewsListItem = ({node, headingLevel, ...props}: Props) => {
     month: "long",
     day: "numeric",
     year: "numeric",
-    timezone: node.suNewsPublishingDate.timezone
+    timeZone: node.suNewsPublishingDate.timezone
   }) : undefined;
 
   return (

diff --git a/src/components/nodes/pages/stanford-event/stanford-event-page.tsx b/src/components/nodes/pages/stanford-event/stanford-event-page.tsx
@@ -23,7 +23,7 @@ const StanfordEventPage = ({node, ...props}: Props) => {
 
   const startTime = new Date(node.suEventDateTime.value * 1000);
   const endTime = new Date(node.suEventDateTime.end_value * 1000);
-  const timezone = node.suEventDateTime.timezone || 'America/Los_Angeles';
+  const timeZone = node.suEventDateTime.timezone || 'America/Los_Angeles';
 
   return (
     <article className="centered mt-32 flex flex-col gap-20" {...props}>
@@ -62,7 +62,7 @@ const StanfordEventPage = ({node, ...props}: Props) => {
         <div className="grid items-start lg:grid-cols-2 gap-20">
           <time className="flex items-center gap-5" dateTime={startTime.toISOString()}>
             <CalendarDaysIcon width={30} className="shrink-0"/>
-            {getEventTimeString(startTime, endTime, timezone)}
+            {getEventTimeString(startTime, endTime, timeZone)}
           </time>
 
 

diff --git a/src/components/nodes/pages/stanford-news/stanford-news-page.tsx b/src/components/nodes/pages/stanford-news/stanford-news-page.tsx
@@ -18,7 +18,7 @@ const StanfordNewsPage = ({node, ...props}: Props) => {
     month: "long",
     day: "numeric",
     year: "numeric",
-    timezone: node.suNewsPublishingDate.timezone
+    timeZone: node.suNewsPublishingDate.timezone
   }) : undefined;
 
   let bannerImageUrl: string | undefined, bannerImageAlt: string = ""

diff --git a/src/components/nodes/pages/stanford-policy/stanford-policy-page.tsx b/src/components/nodes/pages/stanford-policy/stanford-policy-page.tsx
@@ -33,7 +33,7 @@ const StanfordPolicyPage = async ({node, ...props}: Props) => {
                   month: "long",
                   day: "numeric",
                   year: "numeric",
-                  timezone: node.suPolicyUpdated.timezone
+                  timeZone: node.suPolicyUpdated.timezone
                 })}
               </div>
             }
@@ -44,7 +44,7 @@ const StanfordPolicyPage = async ({node, ...props}: Props) => {
                   month: "long",
                   day: "numeric",
                   year: "numeric",
-                  timezone: node.suPolicyEffective.timezone
+                  timeZone: node.suPolicyEffective.timezone
                 })}
               </div>
             }
@@ -62,7 +62,7 @@ const StanfordPolicyPage = async ({node, ...props}: Props) => {
                     month: "long",
                     day: "numeric",
                     year: "numeric",
-                    timezone: node.suPolicyDate.timezone
+                    timeZone: change.suPolicyDate.timezone
                   })}</div>
                   <div className="w-[2px] bg-black shrink-0"/>
                   <div>{change.suPolicyTitle}</div>