feat: Factorize DateInfo comp in Cards

arkhn · Jan 17, 2022 · a94c0dc · a94c0dc
1 parent 0f0d4df
commit a94c0dc
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 81 deletions.
diff --git a/src/common/components/DateInfo.tsx b/src/common/components/DateInfo.tsx
@@ -1,11 +1,15 @@
-import React from "react";
+import React, { useMemo } from "react";
 
+import type { IResourceList } from "@ahryman40k/ts-fhir-types/lib/R4";
 import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
 import { Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
+import { DateTime } from "luxon";
+
+import { getResourceDateOrPeriod } from "features/resources/utils";
 
 type DateInfoProps = {
-  date?: string;
+  resource: IResourceList;
 };
 
 const useStyles = makeStyles((theme) => ({
@@ -22,8 +26,45 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const DateInfo = ({ date }: DateInfoProps): JSX.Element => {
+const DateInfo = ({ resource }: DateInfoProps): JSX.Element => {
   const classes = useStyles();
+  const date = useMemo(() => {
+    const dateOrPeriod = getResourceDateOrPeriod(resource);
+    if (typeof dateOrPeriod === "string") {
+      return DateTime.fromISO(dateOrPeriod).toLocaleString(
+        {
+          day: "numeric",
+          month: "long",
+          year: "numeric",
+        },
+        {
+          locale: navigator.language,
+        }
+      );
+    }
+
+    if (typeof dateOrPeriod === "object") {
+      return `${DateTime.fromISO(dateOrPeriod.start).toLocaleString(
+        {
+          day: "numeric",
+          month: "long",
+          year: "numeric",
+        },
+        {
+          locale: navigator.language,
+        }
+      )} - ${DateTime.fromISO(dateOrPeriod.end).toLocaleString(
+        {
+          day: "numeric",
+          month: "long",
+          year: "numeric",
+        },
+        {
+          locale: navigator.language,
+        }
+      )}`;
+    }
+  }, [resource]);
   return (
     <div className={classes.flexContainer}>
       <CalendarTodayIcon fontSize="small" className={classes.icon} />

diff --git a/src/features/conditions/ConditionCard.tsx b/src/features/conditions/ConditionCard.tsx
@@ -3,7 +3,6 @@ import React, { useMemo } from "react";
 import type { ICondition } from "@ahryman40k/ts-fhir-types/lib/R4";
 import { Card, CardContent, CardHeader, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import { DateTime } from "luxon";
 import { useTranslation } from "react-i18next";
 
 import DateInfo from "common/components/DateInfo";
@@ -28,7 +27,7 @@ type ConditionCardProps = {
 const ConditionCard = ({ condition }: ConditionCardProps): JSX.Element => {
   const { t } = useTranslation();
   const classes = useStyles();
-  const { code, meta, onsetDateTime, resourceType } = condition;
+  const { code, meta, resourceType } = condition;
   const { codeTag, codeTitle } = useMemo(
     () => ({
       codeTag: `${code?.coding?.[0]?.system}-${code?.coding?.[0]?.code}`,
@@ -42,26 +41,11 @@ const ConditionCard = ({ condition }: ConditionCardProps): JSX.Element => {
         ?.display,
     [meta]
   );
-  const conditionDate = useMemo(
-    () =>
-      onsetDateTime &&
-      DateTime.fromISO(onsetDateTime).toLocaleString(
-        {
-          day: "numeric",
-          month: "long",
-          year: "numeric",
-        },
-        {
-          locale: navigator.language,
-        }
-      ),
-    [onsetDateTime]
-  );
   return (
     <Card>
       <CardHeader
         disableTypography
-        title={<DateInfo date={conditionDate} />}
+        title={<DateInfo resource={condition} />}
         subheader={
           <div className={classes.flexContainer}>
             {<Tag value={resourceType} color="#555" />}

diff --git a/src/features/documentReferences/DocumentReferenceCard.tsx b/src/features/documentReferences/DocumentReferenceCard.tsx
@@ -3,7 +3,6 @@ import React, { useMemo } from "react";
 import type { IDocumentReference } from "@ahryman40k/ts-fhir-types/lib/R4";
 import { Card, CardContent, CardHeader, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import { DateTime } from "luxon";
 import { useTranslation } from "react-i18next";
 
 import DateInfo from "common/components/DateInfo";
@@ -30,34 +29,19 @@ const DocumentReferenceCard = ({
 }: DocumentReferenceCardProps): JSX.Element => {
   const { t } = useTranslation();
   const classes = useStyles();
-  const { meta, date, resourceType } = documentReference;
+  const { meta, resourceType } = documentReference;
 
   const softwareName = useMemo(
     () =>
       meta?.tag?.find(({ system }) => system === TERMINOLOGY_SYSTEM_URL)
         ?.display,
     [meta]
   );
-  const documentReferenceDate = useMemo(
-    () =>
-      date &&
-      DateTime.fromISO(date).toLocaleString(
-        {
-          day: "numeric",
-          month: "long",
-          year: "numeric",
-        },
-        {
-          locale: navigator.language,
-        }
-      ),
-    [date]
-  );
   return (
     <Card>
       <CardHeader
         disableTypography
-        title={<DateInfo date={documentReferenceDate} />}
+        title={<DateInfo resource={documentReference} />}
         subheader={
           <div className={classes.flexContainer}>
             {<Tag value={resourceType} color="#555" />}

diff --git a/src/features/encounters/EncounterCard.tsx b/src/features/encounters/EncounterCard.tsx
@@ -3,7 +3,6 @@ import React, { useMemo } from "react";
 import type { IEncounter } from "@ahryman40k/ts-fhir-types/lib/R4";
 import { Card, CardContent, CardHeader, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import { DateTime } from "luxon";
 import { useTranslation } from "react-i18next";
 
 import DateInfo from "common/components/DateInfo";
@@ -28,36 +27,7 @@ type EncounterCardProps = {
 const EncounterCard = ({ encounter }: EncounterCardProps): JSX.Element => {
   const { t } = useTranslation();
   const classes = useStyles();
-  const { period, meta, location, resourceType } = encounter;
-  const { startPeriod, endPeriod } = useMemo(
-    () => ({
-      startPeriod:
-        period?.start &&
-        DateTime.fromISO(period.start).toLocaleString(
-          {
-            day: "numeric",
-            month: "long",
-            year: "numeric",
-          },
-          {
-            locale: navigator.language,
-          }
-        ),
-      endPeriod:
-        period?.end &&
-        DateTime.fromISO(period.end).toLocaleString(
-          {
-            day: "numeric",
-            month: "long",
-            year: "numeric",
-          },
-          {
-            locale: navigator.language,
-          }
-        ),
-    }),
-    [period]
-  );
+  const { meta, location, resourceType } = encounter;
   const softwareName = useMemo(
     () =>
       meta?.tag?.find(({ system }) => system === TERMINOLOGY_SYSTEM_URL)
@@ -72,16 +42,7 @@ const EncounterCard = ({ encounter }: EncounterCardProps): JSX.Element => {
     <Card>
       <CardHeader
         disableTypography
-        title={
-          <DateInfo
-            date={
-              period &&
-              [startPeriod, endPeriod]
-                .filter((periodValue) => !!periodValue)
-                .join(" - ")
-            }
-          />
-        }
+        title={<DateInfo resource={encounter} />}
         subheader={
           <div className={classes.flexContainer}>
             <Tag value={resourceType} color="#555" />

diff --git a/src/features/resources/ResourceCard.tsx b/src/features/resources/ResourceCard.tsx
@@ -29,7 +29,7 @@ const ResourceCard = ({ resource }: ResourceCardProps): JSX.Element => {
         return (
           <Card>
             <CardHeader
-              title={<DateInfo />}
+              title={<DateInfo resource={resource} />}
               subheader={<Tag value={resource.resourceType} color="#555" />}
             />
             <ResourceCardActions resource={resource} />