Replace narrow non break space with normal space (#87)

* Replace narrow non break space with normal space

* Move formatter into utils and add test

---------

Co-authored-by: Brooks Lybrand <brookslybrand@brookss-mbp.lan>

app/components/NextEventInfo/NextEventInfo.tsx

@@ -1,5 +1,5 @@
 import type { MeetupEvent } from "~/models/meetup.parsing";
-import { isEmptyString } from "~/utils";
+import { formatDateTime, isEmptyString } from "~/utils";
 import MeetupLink from "~/components/MeetupLink";
 import type { SerializeFrom } from "@remix-run/server-runtime";
 
@@ -12,16 +12,6 @@ const DEFAULT_VENUE: Venue = {
   state: "TX",
 };
 
-const EVENT_TIME_FORMAT = new Intl.DateTimeFormat("en-US", {
-  weekday: "short",
-  month: "short",
-  day: "numeric",
-  hour: "numeric",
-  minute: "2-digit",
-  timeZoneName: "short",
-  timeZone: "America/Chicago",
-});
-
 function isValidVenue(venue: MeetupEvent["venue"]): venue is Venue {
   return (
     venue !== null &&
@@ -48,9 +38,7 @@ export default function NextEventInfo({
       </MeetupLink>
       <p className="text-xl font-bold">{event.title}</p>
       <p>
-        <time dateTime={event.dateTime}>
-          {EVENT_TIME_FORMAT.format(new Date(event.dateTime))}
-        </time>
+        <time dateTime={event.dateTime}>{formatDateTime(event.dateTime)}</time>
       </p>
       <p>{venue.name}</p>
       <p>

app/utils.test.ts

@@ -3,6 +3,7 @@ import {
   safeRedirect,
   getRedirectUrlIfWww,
   isEmptyString,
+  formatDateTime,
 } from "./utils";
 
 describe("utils", () => {
@@ -123,10 +124,11 @@ describe("utils", () => {
     });
   });
 
-  // TODO
-  // describe("useMatchesData", () => {
-  //   it("safeRedirect", () => {
-  //     expect(validateEmail("kody@example.com")).toBe(true);
-  //   });
-  // });
+  describe("formatDateTime", () => {
+    it("Correctly formats a date string", () => {
+      const dateTime = "2023-03-08T15:06:39.096Z";
+      const formattedDateTime = formatDateTime(dateTime);
+      expect(formattedDateTime).toBe("Wed, Mar 8, 9:06 AM CST");
+    });
+  });
 });

app/utils.ts

@@ -74,3 +74,29 @@ export function isEmptyString(val: unknown): boolean {
 export type PropsWithRequiredChildren<P = unknown> = P & {
   children: ReactNode;
 };
+
+const eventTimeFormat = new Intl.DateTimeFormat("en-US", {
+  weekday: "short",
+  month: "short",
+  day: "numeric",
+  hour: "numeric",
+  minute: "2-digit",
+  timeZoneName: "short",
+  timeZone: "America/Chicago",
+});
+
+const NARROW_NON_BREAK_SPACE = String.fromCharCode(8239);
+
+// Note: if we have more date formatting needs we can seperate this function and others
+// into a dedicated utils file
+
+/**
+ * Formats an date string into a more human readable format
+ * For example: "2023-03-08T15:06:39.096Z" -> "Wed, Mar 8, 9:06 AM CST"
+ */
+export function formatDateTime(dateTime: string) {
+  // Discrepency between server and client, see https://github.com/remix-austin/remixaustin-com/issues/83#issuecomment-1450654389
+  return eventTimeFormat
+    .format(new Date(dateTime))
+    .replaceAll(NARROW_NON_BREAK_SPACE, " ");
+}

tsconfig.json

@@ -2,15 +2,15 @@
   "exclude": ["./e2e"],
   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "lib": ["DOM", "DOM.Iterable", "ES2021"],
     "types": ["vitest/globals"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
     "module": "CommonJS",
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "target": "ES2019",
+    "target": "ES2021",
     "strict": true,
     "allowJs": true,
     "forceConsistentCasingInFileNames": true,