From ffa1098fd98c185cee2070b0f7494bafe69c07e9 Mon Sep 17 00:00:00 2001 From: Jon Kafton <939376+jonkafton@users.noreply.github.com> Date: Mon, 18 Nov 2024 16:32:57 +0100 Subject: [PATCH] Revert "LocalDate and NoSSR components to render localized dates only on client" This reverts commit b4ccd6d361a8e54d25eb51ef25e5f4e3c0cad774. --- frontends/main/package.json | 4 ++-- .../app-pages/HomePage/NewsEventsSection.tsx | 20 +++++++++---------- .../LearningResourceCard.tsx | 5 ++--- .../LearningResourceListCard.tsx | 4 ++-- .../DifferingRunsTable.tsx | 5 +---- .../InfoSectionV2.tsx | 7 +------ .../LearningResourceExpandedV1.tsx | 7 +++---- frontends/ol-utilities/src/date/LocalDate.tsx | 20 ------------------- frontends/ol-utilities/src/date/format.ts | 4 +--- frontends/ol-utilities/src/index.ts | 2 -- frontends/ol-utilities/src/ssr/NoSSR.tsx | 16 --------------- 11 files changed, 22 insertions(+), 72 deletions(-) delete mode 100644 frontends/ol-utilities/src/date/LocalDate.tsx delete mode 100644 frontends/ol-utilities/src/ssr/NoSSR.tsx diff --git a/frontends/main/package.json b/frontends/main/package.json index 6511220ed6..9cf7375c7a 100644 --- a/frontends/main/package.json +++ b/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": { diff --git a/frontends/main/src/app-pages/HomePage/NewsEventsSection.tsx b/frontends/main/src/app-pages/HomePage/NewsEventsSection.tsx index 2b9b37abbb..bcf7d7227f 100644 --- a/frontends/main/src/app-pages/HomePage/NewsEventsSection.tsx +++ b/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} - Published: + Published: {formatDate(item.news_details?.publish_date)} ) @@ -226,16 +226,16 @@ const NewsEventsSection: React.FC = () => { - + {formatDate( + (item as EventFeedItem).event_details?.event_datetime, + "D", + )} - + {formatDate( + (item as EventFeedItem).event_details?.event_datetime, + "MMM", + )} diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx index c0aec628f1..8db2fffc68 100644 --- a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx +++ b/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 && - + : startDate && formatDate(startDate, format) if (!formatted) return null const showLabel = size !== "small" || anytime diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx index 65b08b0cdb..f68b78baa4 100644 --- a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx +++ b/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 && + : startDate && formatDate(startDate, "MMMM DD, YYYY") if (!formatted) return null return ( diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/DifferingRunsTable.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/DifferingRunsTable.tsx index ea1663f41c..57bdaf0843 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/DifferingRunsTable.tsx +++ b/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 }> = ({ {resource.runs?.map((run, index) => ( - - {formatRunDate(run, asTaughtIn)} - + {formatRunDate(run, asTaughtIn)} {run.resource_prices && ( {getDisplayPrice(getRunPrices(run)["course"])} diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.tsx index 2141d8c52e..6908649c75 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.tsx +++ b/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 ( - - - - ) + return } else return null }, }, diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpandedV1.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpandedV1.tsx index ed27f0ef29..09005f595a 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpandedV1.tsx +++ b/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 ( = ({ .map((run) => { return { value: run.id.toString(), - label: {formatRunDate(run, asTaughtIn)}, + label: formatRunDate(run, asTaughtIn), } }) ?? [] @@ -416,7 +415,7 @@ const LearningResourceExpandedV1: React.FC = ({ return ( {label} - {formatted ?? ""} + {formatted ?? ""} ) } diff --git a/frontends/ol-utilities/src/date/LocalDate.tsx b/frontends/ol-utilities/src/date/LocalDate.tsx deleted file mode 100644 index 1ebdb9c636..0000000000 --- a/frontends/ol-utilities/src/date/LocalDate.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react" -import { NoSSR } from "../ssr/NoSSR" -import { formatDate } from "./format" - -type LocalDateProps = { - date?: string | Date | null - /** - * A Moment.js format string. See https://momentjs.com/docs/#/displaying/format/ - */ - format?: string -} - -/* Component to render dates only on the client as these are displayed - * according to the user's locale (generally, not all Moment.js format tokens - * are localized) causing an error due to hydration mismatch. - */ -export const LocalDate = ({ date, format = "MMM D, YYYY" }: LocalDateProps) => { - if (!date) return null - return {formatDate(date, format)} -} diff --git a/frontends/ol-utilities/src/date/format.ts b/frontends/ol-utilities/src/date/format.ts index 706d5cbef6..3bd6206487 100644 --- a/frontends/ol-utilities/src/date/format.ts +++ b/frontends/ol-utilities/src/date/format.ts @@ -1,14 +1,12 @@ import moment from "moment" -/* Instances must be wrapped in 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", ) => { diff --git a/frontends/ol-utilities/src/index.ts b/frontends/ol-utilities/src/index.ts index 39f05c6eb6..eefe535703 100644 --- a/frontends/ol-utilities/src/index.ts +++ b/frontends/ol-utilities/src/index.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" diff --git a/frontends/ol-utilities/src/ssr/NoSSR.tsx b/frontends/ol-utilities/src/ssr/NoSSR.tsx deleted file mode 100644 index 4a3d344e2b..0000000000 --- a/frontends/ol-utilities/src/ssr/NoSSR.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React, { useState, useEffect, ReactNode } from "react" - -type NoSSRProps = { - children: ReactNode - onSSR?: ReactNode -} - -export const NoSSR: React.FC = ({ children, onSSR = <> }) => { - const [isClient, setClient] = useState(false) - - useEffect(() => { - setClient(true) - }, []) - - return <>{isClient ? children : onSSR} -}