feat: plug getResourceTagValues to cards

arkhn · Jan 25, 2022 · 43be1cb · 43be1cb
1 parent c6d7cfb
commit 43be1cb
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 12 deletions.
diff --git a/src/features/conditions/ConditionCard.tsx b/src/features/conditions/ConditionCard.tsx
@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import DateInfo from "common/components/DateInfo";
 import Tag from "common/components/Tag";
 import ResourceCardActions from "features/resources/ResourceCardActions";
+import { getResourceTagValues } from "features/resources/utils";
 
 import { TERMINOLOGY_SYSTEM_URL } from "../../constants";
 
@@ -28,12 +29,12 @@ const ConditionCard = ({ condition }: ConditionCardProps): JSX.Element => {
   const { t } = useTranslation();
   const classes = useStyles();
   const { code, meta, resourceType } = condition;
-  const { codeTag, codeTitle } = useMemo(
+  const { tagValues, codeTitle } = useMemo(
     () => ({
-      codeTag: `${code?.coding?.[0]?.system}-${code?.coding?.[0]?.code}`,
+      tagValues: getResourceTagValues(condition),
       codeTitle: code?.coding?.[0]?.display,
     }),
-    [code]
+    [code, condition]
   );
   const softwareName = useMemo(
     () =>
@@ -49,7 +50,13 @@ const ConditionCard = ({ condition }: ConditionCardProps): JSX.Element => {
         subheader={
           <div className={classes.flexContainer}>
             {<Tag value={resourceType} color="#555" />}
-            {codeTag && <Tag value={codeTag} color="#CCC" />}
+            {tagValues.map((value, index) => (
+              <Tag
+                key={`tag_value_${condition.id}_${index}`}
+                value={value}
+                color="#CCC"
+              />
+            ))}
             {codeTitle && (
               <Typography display="inline" variant="h5">
                 {codeTitle}

diff --git a/src/features/encounters/EncounterCard.tsx b/src/features/encounters/EncounterCard.tsx
@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import DateInfo from "common/components/DateInfo";
 import Tag from "common/components/Tag";
 import ResourceCardActions from "features/resources/ResourceCardActions";
+import { getResourceTagValues } from "features/resources/utils";
 
 import { TERMINOLOGY_SYSTEM_URL } from "../../constants";
 
@@ -27,17 +28,14 @@ type EncounterCardProps = {
 const EncounterCard = ({ encounter }: EncounterCardProps): JSX.Element => {
   const { t } = useTranslation();
   const classes = useStyles();
-  const { meta, location, resourceType } = encounter;
+  const { meta, resourceType } = encounter;
   const softwareName = useMemo(
     () =>
       meta?.tag?.find(({ system }) => system === TERMINOLOGY_SYSTEM_URL)
         ?.display,
     [meta]
   );
-  const locationName = useMemo(
-    () => location?.[0]?.location.display,
-    [location]
-  );
+  const tagValues = useMemo(() => getResourceTagValues(encounter), [encounter]);
   return (
     <Card>
       <CardHeader
@@ -46,7 +44,13 @@ const EncounterCard = ({ encounter }: EncounterCardProps): JSX.Element => {
         subheader={
           <div className={classes.flexContainer}>
             <Tag value={resourceType} color="#555" />
-            {locationName && <Tag value={locationName} color="#CCC" />}
+            {tagValues.map((tagValue, index) => (
+              <Tag
+                key={`tag_value_${encounter.id}_${index}`}
+                value={tagValue}
+                color="#CCC"
+              />
+            ))}
           </div>
         }
       />

diff --git a/src/features/resources/ResourceCard.tsx b/src/features/resources/ResourceCard.tsx
@@ -2,6 +2,7 @@ import React, { useMemo } from "react";
 
 import type { IResourceList } from "@ahryman40k/ts-fhir-types/lib/R4";
 import { Card, CardHeader } from "@mui/material";
+import { makeStyles } from "@mui/styles";
 
 import DateInfo from "common/components/DateInfo";
 import Tag from "common/components/Tag";
@@ -10,12 +11,23 @@ import DocumentReferenceCard from "features/documentReferences/DocumentReference
 import EncounterCard from "features/encounters/EncounterCard";
 
 import ResourceCardActions from "./ResourceCardActions";
+import { getResourceTagValues } from "./utils";
+
+const useStyles = makeStyles((theme) => ({
+  flexContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: theme.spacing(2),
+  },
+}));
 
 type ResourceCardProps = {
   resource: IResourceList;
 };
 
 const ResourceCard = ({ resource }: ResourceCardProps): JSX.Element => {
+  const classes = useStyles();
   const card: JSX.Element = useMemo(() => {
     switch (resource.resourceType) {
       case "Condition":
@@ -30,13 +42,24 @@ const ResourceCard = ({ resource }: ResourceCardProps): JSX.Element => {
           <Card>
             <CardHeader
               title={<DateInfo resource={resource} />}
-              subheader={<Tag value={resource.resourceType} color="#555" />}
+              subheader={
+                <div className={classes.flexContainer}>
+                  <Tag value={resource.resourceType} color="#555" />
+                  {getResourceTagValues(resource).map((tagValue, index) => (
+                    <Tag
+                      key={`tag_value_${resource.id}_${index}`}
+                      color="#CCC"
+                      value={tagValue}
+                    />
+                  ))}
+                </div>
+              }
             />
             <ResourceCardActions resource={resource} />
           </Card>
         );
     }
-  }, [resource]);
+  }, [classes.flexContainer, resource]);
 
   return card;
 };