Review changes

openmrs · FlorianRappl · Aug 3, 2021 · Jul 27, 2021 · Jul 27, 2021 · Jul 28, 2021
commit 963604601c4c71a2667f7c21c327c3bd228e4b5f
diff --git a/packages/esm-active-visits-app/src/active-visits-widget/active-visits.component.tsx b/packages/esm-active-visits-app/src/active-visits-widget/active-visits.component.tsx
@@ -21,39 +21,6 @@ import { ActiveVisitRow, fetchActiveVisits } from './active-visits.resource';
 import styles from './active-visits.scss';
 import dayjs from 'dayjs';
 
-const headerData = [
-  {
-    id: 0,
-    header: 'Visit Time',
-    key: 'visitStartTime',
-  },
-  {
-    id: 1,
-    header: 'ID Number',
-    key: 'IDNumber',
-  },
-  {
-    id: 2,
-    header: 'Name',
-    key: 'name',
-  },
-  {
-    id: 3,
-    header: 'Gender',
-    key: 'gender',
-  },
-  {
-    id: 4,
-    header: 'Age',
-    key: 'age',
-  },
-  {
-    id: 5,
-    header: 'Visit Type',
-    key: 'visitType',
-  },
-];
-
 function formatDatetime(startDatetime) {
   const todayDate = dayjs();
   const today =
@@ -67,7 +34,7 @@ function formatDatetime(startDatetime) {
   }
 }
 
-const ActiveVisitsTable = (props) => {
+const ActiveVisitsTable = () => {
   const { t } = useTranslation();
   const layout = useLayoutType();
   const desktopView = layout === 'desktop';
@@ -78,6 +45,60 @@ const ActiveVisitsTable = (props) => {
   const [activeVisits, setActiveVisits] = useState<ActiveVisitRow[]>([]);
   const [searchString, setSearchString] = useState('');
 
+  const headerData = useMemo(
+    () => [
+      {
+        id: 0,
+        header: t('visitStartTime', 'Visit Time'),
+        key: 'visitStartTime',
+      },
+      {
+        id: 1,
+        header: t('IDNumber', 'ID Number'),
+        key: 'IDNumber',
+      },
+      {
+        id: 2,
+        header: t('name', 'Name'),
+        key: 'name',
+      },
+      {
+        id: 3,
+        header: t('gender', 'Gender'),
+        key: 'gender',
+      },
+      {
+        id: 4,
+        header: t('age', 'Age'),
+        key: 'age',
+      },
+      {
+        id: 5,
+        header: t('visitType', 'Visit Type'),
+        key: 'visitType',
+      },
+    ],
+    [t],
+  );
+
+  useEffect(() => {
+    fetchActiveVisits().then(({ data }) => {
+      const rowData = data.results.map((visit, ind) => ({
+        id: `${ind}`,
+        visitStartTime: formatDatetime(visit.startDatetime),
+        IDNumber: visit?.patient?.identifiers[0]?.identifier,
+        name: visit?.patient?.person?.display,
+        gender: visit?.patient?.person?.gender,
+        age: visit?.patient?.person?.age,
+        visitType: visit?.visitType?.display,
+        patientUuid: visit?.patient?.uuid,
+        visitUuid: visit?.uuid,
+      }));
+      setActiveVisits(rowData);
+      setLoading(false);
+    });
+  }, []);
+
   const searchResults = useMemo(() => {
     if (searchString && searchString.trim() !== '') {
       const search = searchString.toLowerCase();
@@ -93,35 +114,16 @@ const ActiveVisitsTable = (props) => {
       return activeVisits;
     }
   }, [searchString, activeVisits]);
+
   const { goTo, results, currentPage } = usePagination(searchResults, currentPageSize);
+  const handleSearch = useCallback((e) => setSearchString(e.target.value), []);
 
   useEffect(() => {
     if (currentPage !== 1) {
       goTo(1);
     }
   }, [searchString]);
 
-  useEffect(() => {
-    const activeVisits = fetchActiveVisits().subscribe((data) => {
-      const rowData = data.results.map((visit, ind) => ({
-        id: `${ind}`,
-        visitStartTime: formatDatetime(visit.startDatetime),
-        IDNumber: visit?.patient?.identifiers[0]?.identifier,
-        name: visit?.patient?.person?.display,
-        gender: visit?.patient?.person?.gender,
-        age: visit?.patient?.person?.age,
-        visitType: visit?.visitType?.display,
-        patientUuid: visit?.patient?.uuid,
-        visitUuid: visit?.uuid,
-      }));
-      setActiveVisits(rowData);
-      setLoading(false);
-    });
-    return () => activeVisits.unsubscribe();
-  }, []);
-
-  const handleSearch = useCallback((e) => setSearchString(e.target.value), []);
-
   return !loading ? (
     <div className={styles.activeVisitsContainer}>
       <div className={styles.activeVisitsDetailHeaderContainer}>
@@ -185,7 +187,7 @@ const ActiveVisitsTable = (props) => {
             </Table>
             {rows.length === 0 && (
               <p
-                style={{ height: desktopView ? '2rem' : '3rem' }}
+                style={{ height: desktopView ? '2rem' : '3rem', marginLeft: desktopView ? '2rem' : '3rem' }}
                 className={`${styles.emptyRow} ${styles.bodyLong01}`}>
                 {t('noVisitsFound', 'No visits found')}
               </p>

diff --git a/packages/esm-active-visits-app/src/active-visits-widget/active-visits.resource.tsx b/packages/esm-active-visits-app/src/active-visits-widget/active-visits.resource.tsx
@@ -1,5 +1,4 @@
-import { FetchResponse, openmrsFetch, openmrsObservableFetch, OpenmrsResource, Visit } from '@openmrs/esm-framework';
-import { take, map } from 'rxjs/operators';
+import { openmrsFetch, Visit } from '@openmrs/esm-framework';
 
 export interface ActiveVisitRow {
   id: string;
@@ -18,11 +17,5 @@ export function fetchActiveVisits() {
     'custom:(uuid,patient:(uuid,identifiers:(identifier,uuid),person:(age,display,gender,uuid)),' +
     'visitType:(uuid,name,display),location:(uuid,name,display),startDatetime,' +
     'stopDatetime)';
-  return openmrsObservableFetch(`/ws/rest/v1/visit?includeInactive=false&v=${v}`, {
-    headers: {
-      contentType: 'application/json',
-    },
-  })
-    .pipe(take(1))
-    .pipe(map((response: FetchResponse<{ results: Array<Visit> }>) => response.data));
+  return openmrsFetch<{ results: Visit[] }>(`/ws/rest/v1/visit?includeInactive=false&v=${v}`);
 }
diff --git a/packages/esm-active-visits-app/src/root.scss b/packages/esm-active-visits-app/src/root.scss
@@ -12,3 +12,19 @@
 .bodyLong01 {
   @include carbon--type-style("body-long-01");
 }
+
+.caption01 {
+  @include carbon--type-style("caption-01");
+}
+
+.bodyShort02 {
+  @include carbon--type-style("body-short-02");
+}
+
+.text02 {
+  color: #525252;
+}
+
+.text01 {
+  color: #161616;
+}
diff --git a/packages/esm-active-visits-app/src/visits-summary/visit-detail-overview.scss b/packages/esm-active-visits-app/src/visits-summary/visit-detail-overview.scss
@@ -3,36 +3,6 @@
 @import "~carbon-components/src/globals/scss/mixins";
 @import "../root.scss";
 
-// Typography
-
-.caption01 {
-  @include carbon--type-style("caption-01");
-}
-
-.bodyShort02 {
-  @include carbon--type-style("body-short-02");
-}
-
-.productiveHeading01 {
-  @include carbon--type-style("productive-heading-01");
-}
-
-.productiveHeading03 {
-  @include carbon--type-style("productive-heading-03");
-}
-
-.bodyLong01 {
-  @include carbon--type-style("body-long-01");
-}
-
-.text02 {
-  color: #525252;
-}
-
-.text01 {
-  color: #161616;
-}
-
 .container  {
   display: flex;
   flex-direction: column;
@@ -165,10 +135,6 @@
   border-left: 3px solid #e0e0e0 !important;
 }
 
-tab > button:first {
-  margin-left: 10px;
-}
-
 .tab > button, .tab > button:focus, .tab > button:active {
   outline: 0 !important;
   outline-offset: 0 !important;
@@ -225,4 +191,5 @@ tab > button:first {
 
 .testSummaryExtension p {
   @include carbon--type-style("body-long-01");
+  color: #525252
 }
diff --git a/packages/esm-active-visits-app/src/visits-summary/visit-detail.component.tsx b/packages/esm-active-visits-app/src/visits-summary/visit-detail.component.tsx
@@ -37,14 +37,9 @@ const VisitDetailComponent: React.FC<VisitDetailComponentProps> = ({ visitUuid,
   );
 
   useEffect(() => {
-    const abortController = new AbortController();
-    const sub = fetchVisit(visitUuid, abortController).subscribe(({ data }) => {
+    fetchVisit(visitUuid).then(({ data }) => {
       setVisit(data);
     }, createErrorHandler());
-    return () => {
-      abortController.abort();
-      sub.unsubscribe();
-    };
   }, []);
 
   return visit ? (

diff --git a/packages/esm-active-visits-app/src/visits-summary/visit.resource.ts b/packages/esm-active-visits-app/src/visits-summary/visit.resource.ts
@@ -1,6 +1,4 @@
-import { Observable } from 'rxjs';
-import { map, take } from 'rxjs/operators';
-import { FetchResponse, openmrsObservableFetch, Visit } from '@openmrs/esm-framework';
+import { openmrsFetch, Visit } from '@openmrs/esm-framework';
 
 export interface Encounter {
   uuid: string;
@@ -127,7 +125,7 @@ export interface OrderItem {
   };
 }
 
-export function fetchVisit(visitUuid: string, abortController: AbortController): Observable<FetchResponse<Visit>> {
+export function fetchVisit(visitUuid: string) {
   const custom =
     'custom:(uuid,encounters:(uuid,encounterDatetime,' +
     'orders:(uuid,dateActivated,' +
@@ -141,19 +139,7 @@ export function fetchVisit(visitUuid: string, abortController: AbortController):
     'encounterProviders:(uuid,display,encounterRole:(uuid,display),' +
     'provider:(uuid,person:(uuid,display)))),visitType:(uuid,name,display),startDatetime';
 
-  return openmrsObservableFetch(`/ws/rest/v1/visit/${visitUuid}?v=${custom}`, {
-    signal: abortController.signal,
-    method: 'GET',
-    headers: {
-      'Content-type': 'application/json',
-    },
-  })
-    .pipe(take(1))
-    .pipe(
-      map((response: FetchResponse<Visit>) => {
-        return response;
-      }),
-    );
+  return openmrsFetch<Visit>(`/ws/rest/v1/visit/${visitUuid}?v=${custom}`);
 }
 
 export function getDosage(strength: string, doseNumber: number) {

diff --git a/...s/esm-active-visits-app/src/visits-summary/visits-components/encounter-list.component.tsx b/...s/esm-active-visits-app/src/visits-summary/visits-components/encounter-list.component.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo, useRef } from 'react';
 import DataTable, {
   TableContainer,
   Table,
@@ -33,28 +33,32 @@ const EncounterListDataTable: React.FC<EncounterListProps> = ({ encounters, visi
   const layout = useLayoutType();
   const isDesktop = layout === 'desktop';
   const [headerWidth, setHeaderWidth] = useState(0);
+  const headerRef = useRef(null);
 
-  const headerData = [
-    {
-      id: 1,
-      header: 'Time',
-      key: 'time',
-    },
-    {
-      id: 2,
-      header: 'Encounter Type',
-      key: 'encounterType',
-    },
-    {
-      id: 3,
-      header: 'Provider',
-      key: 'provider',
-    },
-  ];
+  const headerData = useMemo(
+    () => [
+      {
+        id: 1,
+        header: t('time', 'Time'),
+        key: 'time',
+      },
+      {
+        id: 2,
+        header: t('encounterType', 'Encounter Type'),
+        key: 'encounterType',
+      },
+      {
+        id: 3,
+        header: t('provider', 'Provider'),
+        key: 'provider',
+      },
+    ],
+    [t],
+  );
 
   useEffect(() => {
-    setHeaderWidth(document.getElementById(`header_${visitUuid}_0`)?.clientWidth);
-    const handler = () => setHeaderWidth(document.getElementById(`header_${visitUuid}_0`)?.clientWidth);
+    setHeaderWidth(headerRef?.current?.clientWidth);
+    const handler = () => setHeaderWidth(headerRef?.current?.clientWidth);
     window.addEventListener('resize', handler);
     return () => window.removeEventListener('resize', handler);
   }, []);
@@ -68,18 +72,24 @@ const EncounterListDataTable: React.FC<EncounterListProps> = ({ encounters, visi
               <TableHead>
                 <TableRow>
                   <TableExpandHeader />
-                  {headers.map((header, ind) => (
-                    <TableHeader id={`header_${visitUuid}_${ind}`} {...getHeaderProps({ header })}>
-                      {header.header}
-                    </TableHeader>
-                  ))}
+                  {headers.map((header, ind) =>
+                    ind === 0 ? (
+                      <TableHeader id={`header_${visitUuid}_${ind}`} ref={headerRef} {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ) : (
+                      <TableHeader id={`header_${visitUuid}_${ind}`} {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ),
+                  )}
                 </TableRow>
               </TableHead>
               <TableBody>
                 {rows.map((row, ind) => (
                   <React.Fragment key={row.id}>
                     <TableExpandRow {...getRowProps({ row })}>
-                      {row.cells.map((cell, ind) => (
+                      {row.cells.map((cell) => (
                         <TableCell key={cell.id}>{cell.value}</TableCell>
                       ))}
                     </TableExpandRow>