Revert "LocalDate and NoSSR components to render localized dates only on client"

This reverts commit b4ccd6d.

Author: jonkafton

frontends/main/package.json

@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "PORT=${PORT:-8062} TZ=UTC next dev",
+    "dev": "PORT=${PORT:-8062} next dev",
     "build": "next build",
     "build:no-lint": "next build --no-lint",
-    "start": "TZ=UTC next start",
+    "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {

frontends/main/src/app-pages/HomePage/NewsEventsSection.tsx

@@ -13,7 +13,7 @@ import {
   NewsEventsListFeedTypeEnum,
 } from "api/hooks/newsEvents"
 import type { NewsFeedItem, EventFeedItem } from "api/v0"
-import { LocalDate } from "ol-utilities"
+import { formatDate } from "ol-utilities"
 import { RiArrowRightSLine } from "@remixicon/react"
 import Link from "next/link"
 
@@ -196,7 +196,7 @@ const Story: React.FC<{ item: NewsFeedItem; mobile: boolean }> = ({
         {item.title}
       </Card.Title>
       <Card.Footer>
-        Published: <LocalDate date={item.news_details?.publish_date} />
+        Published: {formatDate(item.news_details?.publish_date)}
       </Card.Footer>
     </StoryCard>
   )
@@ -226,16 +226,16 @@ const NewsEventsSection: React.FC = () => {
       <Card.Content>
         <EventDate>
           <EventDay>
-            <LocalDate
-              date={(item as EventFeedItem).event_details?.event_datetime}
-              format="D"
-            />
+            {formatDate(
+              (item as EventFeedItem).event_details?.event_datetime,
+              "D",
+            )}
           </EventDay>
           <EventMonth>
-            <LocalDate
-              date={(item as EventFeedItem).event_details?.event_datetime}
-              format="MMM"
-            />
+            {formatDate(
+              (item as EventFeedItem).event_details?.event_datetime,
+              "MMM",
+            )}
           </EventMonth>
         </EventDate>
         <Link href={item.url} data-card-link>

frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx

@@ -9,7 +9,7 @@ import {
 } from "@remixicon/react"
 import { LearningResource } from "api"
 import {
-  LocalDate,
+  formatDate,
   getReadableResourceType,
   DEFAULT_RESOURCE_IMG,
   getLearningResourcePrices,
@@ -149,8 +149,7 @@ const StartDate: React.FC<{ resource: LearningResource; size?: Size }> = ({
   const format = size === "small" ? "MMM DD, YYYY" : "MMMM DD, YYYY"
   const formatted = anytime
     ? "Anytime"
-    : startDate && <LocalDate date={startDate} format={format} />
-
+    : startDate && formatDate(startDate, format)
   if (!formatted) return null
 
   const showLabel = size !== "small" || anytime

frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx

@@ -9,7 +9,7 @@ import {
 } from "@remixicon/react"
 import { ResourceTypeEnum, LearningResource } from "api"
 import {
-  LocalDate,
+  formatDate,
   getReadableResourceType,
   DEFAULT_RESOURCE_IMG,
   pluralize,
@@ -151,7 +151,7 @@ export const StartDate: React.FC<{ resource: LearningResource }> = ({
   const startDate = getResourceDate(resource)
   const formatted = anytime
     ? "Anytime"
-    : startDate && <LocalDate date={startDate} format="MMMM DD, YYYY" />
+    : startDate && formatDate(startDate, "MMMM DD, YYYY")
   if (!formatted) return null
 
   return (

frontends/ol-components/src/components/LearningResourceExpanded/DifferingRunsTable.tsx

@@ -8,7 +8,6 @@ import {
   getDisplayPrice,
   getRunPrices,
   showStartAnytime,
-  NoSSR,
 } from "ol-utilities"
 
 const DifferingRuns = styled.div({
@@ -104,9 +103,7 @@ const DifferingRunsTable: React.FC<{ resource: LearningResource }> = ({
         </DifferingRunHeader>
         {resource.runs?.map((run, index) => (
           <DifferingRun key={index}>
-            <DateData>
-              <NoSSR>{formatRunDate(run, asTaughtIn)}</NoSSR>
-            </DateData>
+            <DateData>{formatRunDate(run, asTaughtIn)}</DateData>
             {run.resource_prices && (
               <PriceData>
                 <span>{getDisplayPrice(getRunPrices(run)["course"])}</span>

frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.tsx

@@ -24,7 +24,6 @@ import {
   formatRunDate,
   getLearningResourcePrices,
   showStartAnytime,
-  NoSSR,
 } from "ol-utilities"
 import { theme } from "../ThemeProvider/ThemeProvider"
 import DifferingRunsTable from "./DifferingRunsTable"
@@ -256,11 +255,7 @@ const INFO_ITEMS: InfoItemConfig = [
       const totalDatesWithRuns =
         resource.runs?.filter((run) => run.start_date !== null).length || 0
       if (allRunsAreIdentical(resource) && totalDatesWithRuns > 0) {
-        return (
-          <NoSSR>
-            <RunDates resource={resource} />
-          </NoSSR>
-        )
+        return <RunDates resource={resource} />
       } else return null
     },
   },

frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpandedV1.tsx

@@ -7,7 +7,6 @@ import { ButtonLink } from "../Button/Button"
 import type { LearningResource, LearningResourceRun } from "api"
 import { ResourceTypeEnum, PlatformEnum } from "api"
 import {
-  NoSSR,
   formatDate,
   capitalize,
   DEFAULT_RESOURCE_IMG,
@@ -300,7 +299,7 @@ const ResourceDescription = ({ resource }: { resource?: LearningResource }) => {
   return (
     <Description
       /**
-       * Resource descriptions can contain HTML. They are sanitized on the
+       * Resource descriptions can contain HTML. They are santiized on the
        * backend during ETL. This is safe to render.
        */
       dangerouslySetInnerHTML={{ __html: resource.description || "" }}
@@ -385,7 +384,7 @@ const LearningResourceExpandedV1: React.FC<LearningResourceExpandedV1Props> = ({
         .map((run) => {
           return {
             value: run.id.toString(),
-            label: <NoSSR>{formatRunDate(run, asTaughtIn)}</NoSSR>,
+            label: formatRunDate(run, asTaughtIn),
           }
         }) ?? []
 
@@ -416,7 +415,7 @@ const LearningResourceExpandedV1: React.FC<LearningResourceExpandedV1Props> = ({
     return (
       <DateSingle>
         <DateLabel>{label}</DateLabel>
-        <NoSSR>{formatted ?? ""}</NoSSR>
+        {formatted ?? ""}
       </DateSingle>
     )
   }

frontends/ol-utilities/src/date/LocalDate.tsx

@@ -1,14 +1,12 @@
 import moment from "moment"
 
-/* Instances must be wrapped in <NoSSR> to avoid SSR hydration mismatches.
- */
 export const formatDate = (
   /**
    * Date string or date.
    */
   date: string | Date,
   /**
-   * A Moment.js format string. See https://momentjs.com/docs/#/displaying/format/
+   * A momentjs format string. See https://momentjs.com/docs/#/displaying/format/
    */
   format = "MMM D, YYYY",
 ) => {

frontends/ol-utilities/src/date/format.ts

@@ -6,7 +6,6 @@
 export * from "./styles"
 
 export * from "./date/format"
-export * from "./date/LocalDate"
 export * from "./learning-resources/learning-resources"
 export * from "./learning-resources/pricing"
 export * from "./strings/html"
@@ -15,4 +14,3 @@ export * from "./hooks"
 export * from "./querystrings"
 export * from "./lib"
 export * from "./images/backgroundImages"
-export * from "./ssr/NoSSR"