(refactor) Use classNames for conditional classes

openmrs · Nov 4, 2023 · bb4cdc2 · bb4cdc2
1 parent 31634d8
commit bb4cdc2
Show file tree

Hide file tree

Showing 55 changed files with 288 additions and 177 deletions.
diff --git a/packages/esm-generic-patient-widgets-app/src/obs-graph/obs-graph.component.tsx b/packages/esm-generic-patient-widgets-app/src/obs-graph/obs-graph.component.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Tab, Tabs, TabList } from '@carbon/react';
 import { LineChart } from '@carbon/charts-react';
@@ -26,7 +27,7 @@ interface ObsGraphProps {
 const ObsGraph: React.FC<ObsGraphProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
   const config = useConfig();
-  const { data: obss, error, isLoading, isValidating } = useObs(patientUuid);
+  const { data: obss } = useObs(patientUuid);
 
   const [selectedConcept, setSelectedConcept] = React.useState<ConceptDescriptor>({
     label: config.data[0]?.label,
@@ -45,6 +46,7 @@ const ObsGraph: React.FC<ObsGraphProps> = ({ patientUuid }) => {
     if (config.graphOldestFirst) {
       chartRecords.reverse();
     }
+
     return chartRecords;
   }, [obss, config.graphOldestFirst, selectedConcept.uuid, selectedConcept.label]);
 
@@ -83,12 +85,14 @@ const ObsGraph: React.FC<ObsGraphProps> = ({ patientUuid }) => {
           <Tabs id="concept-tab-group" className={styles.verticalTabs} type="default">
             <TabList className={styles.tablist} aria-label="Obs tabs">
               {config.data.map(({ concept, label }, index) => {
+                const tabClasses = classNames(styles.tab, styles.bodyLong01, {
+                  [styles.selectedTab]: selectedConcept.label === label,
+                });
+
                 return (
                   <Tab
-                    key={index}
-                    className={`${styles.tab} ${styles.bodyLong01} ${
-                      selectedConcept.label === label && styles.selectedTab
-                    }`}
+                    key={concept}
+                    className={tabClasses}
                     onClick={() =>
                       setSelectedConcept({
                         label,

diff --git a/packages/esm-generic-patient-widgets-app/src/obs-table/obs-table.component.tsx b/packages/esm-generic-patient-widgets-app/src/obs-table/obs-table.component.tsx
@@ -101,7 +101,7 @@ const ObsTable: React.FC<ObsTableProps> = ({ patientUuid }) => {
                 <TableRow>
                   {headers.map((header) => (
                     <TableHeader
-                      className={`${styles.tableHeader}`}
+                      className={styles.tableHeader}
                       {...getHeaderProps({
                         header,
                         isSortable: header.isSortable,

diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
@@ -59,7 +60,7 @@ const AllergiesDetailedSummary: React.FC<AllergiesDetailedSummaryProps> = ({ pat
                 <use xlinkHref="#omrs-icon-important-notification" />
               </svg>
             )}
-            <span className={`${allergy.criticality === 'high' && styles.allergySeverityHigh}`}>
+            <span className={classNames({ [styles.allergySeverityHigh]: allergy.criticality === 'high' })}>
               {allergy.criticality}
             </span>
           </span>
@@ -95,7 +96,7 @@ const AllergiesDetailedSummary: React.FC<AllergiesDetailedSummaryProps> = ({ pat
                   <TableRow>
                     {headers.map((header) => (
                       <TableHeader
-                        className={`${styles.productiveHeading01} ${styles.text02}`}
+                        className={classNames(styles.productiveHeading01, styles.text02)}
                         {...getHeaderProps({
                           header,
                           isSortable: header.isSortable,

diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
@@ -183,7 +184,7 @@ function AllergyForm({ closeWorkspace, patientUuid }: DefaultWorkspaceProps) {
           <ExtensionSlot className={styles.content} name="patient-details-header-slot" state={patientState} />
         </Row>
       ) : null}
-      <div className={`${styles.form} ${isTablet ? styles.tablet : styles.desktop}`}>
+      <div className={classNames(styles.form, isTablet ? styles.tablet : styles.desktop)}>
         {/* This <div> is necessary for the styling in the `.form` class to work */}
         <div>
           <h1 className={styles.heading}>{t('allergensAndReactions', 'Allergens and reactions')}</h1>
@@ -196,7 +197,7 @@ function AllergyForm({ closeWorkspace, patientUuid }: DefaultWorkspaceProps) {
               subtitle={t('tryReopeningTheForm', 'Please try launching the form again')}
             />
           ) : null}
-          <div className={`${styles.container} ${isTablet ? styles.tabletContainer : styles.desktopContainer}`}>
+          <div className={classNames(styles.container, isTablet ? styles.tabletContainer : styles.desktopContainer)}>
             <section className={styles.section}>
               <h2 className={styles.sectionHeading}>{t('selectAllergens', 'Select the allergens')}</h2>
               <Tabs onSelectionChange={handleTabChange}>
@@ -310,7 +311,7 @@ function AllergyForm({ closeWorkspace, patientUuid }: DefaultWorkspaceProps) {
             </section>
           </div>
           <h1 className={styles.heading}>{t('severityAndOnsetDate', 'Severity and date of onset')}</h1>
-          <div className={`${styles.container} ${isTablet ? styles.tabletContainer : styles.desktopContainer}`}>
+          <div className={classNames(styles.container, isTablet ? styles.tabletContainer : styles.desktopContainer)}>
             <section className={styles.section}>
               <h2 className={styles.sectionHeading}>{t('severityOfWorstReaction', 'Severity of worst reaction')}</h2>
               <div className={styles.wrapper}>

diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-overview.component.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-overview.component.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import {
   DataTableSkeleton,
   DataTable,
@@ -90,7 +91,7 @@ const AllergiesOverview: React.FC<AllergiesOverviewProps> = ({ patient }) => {
                   <TableRow>
                     {headers.map((header) => (
                       <TableHeader
-                        className={`${styles.productiveHeading01} ${styles.text02}`}
+                        className={classNames(styles.productiveHeading01, styles.text02)}
                         {...getHeaderProps({
                           header,
                           isSortable: header.isSortable,

diff --git a/packages/esm-patient-appointments-app/src/appointments/appointments-table.component.tsx b/packages/esm-patient-appointments-app/src/appointments/appointments-table.component.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo } from 'react';
+import classNames from 'classnames';
 import dayjs from 'dayjs';
 const utc = require('dayjs/plugin/utc');
 dayjs.extend(utc);
@@ -83,7 +84,7 @@ const AppointmentsTable: React.FC<AppointmentTableProps> = ({
                 <TableRow>
                   {headers.map((header) => (
                     <TableHeader
-                      className={`${styles.productiveHeading01} ${styles.text02}`}
+                      className={classNames(styles.productiveHeading01, styles.text02)}
                       {...getHeaderProps({
                         header,
                         isSortable: header.isSortable,

diff --git a/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx b/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { SkeletonPlaceholder } from '@carbon/react';
 import { Attachment } from '../attachments-types';
 import AttachmentThumbnail from './attachment-thumbnail.component';
@@ -48,7 +49,7 @@ const AttachmentsGridOverview: React.FC<AttachmentsGridOverviewProps> = ({
           <div key={indx}>
             <AttachmentThumbnail imageProps={imageProps} item={item} />
             <p className={styles.bodyLong01}>{attachment.title}</p>
-            <p className={`${styles.bodyLong01} ${styles.muted}`}>{attachment.dateTime}</p>
+            <p className={classNames(styles.bodyLong01, styles.muted)}>{attachment.dateTime}</p>
           </div>
         );
       })}

diff --git a/packages/esm-patient-attachments-app/src/attachments/image-preview.component.tsx b/packages/esm-patient-attachments-app/src/attachments/image-preview.component.tsx
@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { Close } from '@carbon/react/icons';
+import { useLayoutType } from '@openmrs/esm-framework';
 import { Attachment } from '../attachments-types';
 import styles from './image-preview.scss';
-import { useLayoutType } from '@openmrs/esm-framework';
 
 interface AttachmentPreviewProps {
   closePreview: any;
@@ -67,7 +68,7 @@ const AttachmentPreview: React.FC<AttachmentPreviewProps> = ({
       <div className={styles.rightPanel}>
         <h4 className={styles.productiveHeading02}>{attachmentToPreview.title}</h4>
         {attachmentToPreview?.description ? (
-          <p className={`${styles.bodyLong01} ${styles.imageDescription}`}>{attachmentToPreview.description}</p>
+          <p className={classNames(styles.bodyLong01, styles.imageDescription)}>{attachmentToPreview.description}</p>
         ) : null}
       </div>
     </div>

diff --git a/packages/esm-patient-banner-app/src/banner/patient-banner.component.tsx b/packages/esm-patient-banner-app/src/banner/patient-banner.component.tsx
@@ -1,4 +1,5 @@
 import React, { MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Button, Tag } from '@carbon/react';
 import { ChevronDown, ChevronUp, OverflowMenuVertical } from '@carbon/react/icons';
@@ -106,19 +107,22 @@ const PatientBanner: React.FC<PatientBannerProps> = ({
 
   return (
     <div
-      className={`${styles.container} ${isDeceased ? styles.deceasedPatientContainer : styles.activePatientContainer}`}
+      className={classNames(
+        styles.container,
+        isDeceased ? styles.deceasedPatientContainer : styles.activePatientContainer,
+      )}
       role="banner"
       ref={patientBannerRef}
     >
       <div
+        className={classNames(styles.patientBanner, { [styles.patientAvatarButton]: onClick })}
         onClick={handleNavigateToPatientChart}
-        tabIndex={0}
         role="button"
-        className={`${styles.patientBanner} ${onClick && styles.patientAvatarButton}`}
+        tabIndex={0}
       >
         {patientAvatar}
         <div className={styles.patientInfo}>
-          <div className={`${styles.row} ${styles.patientNameRow}`}>
+          <div className={classNames(styles.row, styles.patientNameRow)}>
             <div className={styles.flexRow}>
               <span className={styles.patientName}>{patientName}</span>
               <ExtensionSlot

diff --git a/packages/esm-patient-banner-app/src/ui-components/overflow-menu.component.tsx b/packages/esm-patient-banner-app/src/ui-components/overflow-menu.component.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react';
+import classNames from 'classnames';
 import { useLayoutType } from '@openmrs/esm-framework';
 import styles from './overflow-menu.scss';
 
@@ -47,11 +48,16 @@ const CustomOverflowMenuComponent: React.FC<CustomOverflowMenuComponentProps> =
   }, [wrapperRef]);
 
   return (
-    <div data-overflow-menu className={`cds--overflow-menu ${styles.container}`} ref={wrapperRef}>
+    <div data-overflow-menu className={classNames('cds--overflow-menu', styles.container)} ref={wrapperRef}>
       <button
-        className={`cds--btn cds--btn--ghost cds--overflow-menu__trigger ${showMenu && 'cds--overflow-menu--open'} ${
-          deceased && styles.deceased
-        } ${styles.overflowMenuButton}`}
+        className={classNames(
+          'cds--btn',
+          'cds--btn--ghost',
+          'cds--overflow-menu__trigger',
+          { 'cds--overflow-menu--open': showMenu },
+          { [styles.deceased]: deceased },
+          styles.overflowMenuButton,
+        )}
         aria-haspopup="true"
         aria-expanded={showMenu}
         id="custom-actions-overflow-menu-trigger"
@@ -61,14 +67,18 @@ const CustomOverflowMenuComponent: React.FC<CustomOverflowMenuComponentProps> =
         {menuTitle}
       </button>
       <div
-        className={`cds--overflow-menu-options cds--overflow-menu--flip ${styles.menu} ${showMenu && styles.show}`}
+        className={classNames('cds--overflow-menu-options', 'cds--overflow-menu--flip', styles.menu, {
+          [styles.show]: showMenu,
+        })}
         tabIndex={0}
         data-floating-menu-direction="bottom"
         role="menu"
         aria-labelledby="custom-actions-overflow-menu-trigger"
         id="custom-actions-overflow-menu"
       >
-        <ul className={`cds--overflow-menu-options__content ${isTablet && 'cds--overflow-menu-options--lg'}`}>
+        <ul
+          className={classNames('cds--overflow-menu-options__content', { 'cds--overflow-menu-options--lg': isTablet })}
+        >
           {children}
         </ul>
         <span />

diff --git a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-chart.component.tsx b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-chart.component.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Tab, Tabs, TabList } from '@carbon/react';
 import { LineChart } from '@carbon/charts-react';
@@ -108,10 +109,10 @@ const BiometricsChart: React.FC<BiometricsChartProps> = ({ patientBiometrics, co
               { id: 'bmi', label: `${t('bmi', 'BMI')} (${bmiUnit})` },
             ].map(({ id, label }) => (
               <Tab
+                className={classNames(styles.tab, styles.bodyLong01, {
+                  [styles.selectedTab]: selectedBiometrics.title === label,
+                })}
                 key={id}
-                className={`${styles.tab} ${styles.bodyLong01} ${
-                  selectedBiometrics.title === label && styles.selectedTab
-                }`}
                 onClick={() =>
                   setSelectedBiometrics({
                     title: label,

diff --git a/packages/esm-patient-chart-app/src/deceased/base-concept-answer.component.tsx b/packages/esm-patient-chart-app/src/deceased/base-concept-answer.component.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
 import debounce from 'lodash-es/debounce';
 import isEmpty from 'lodash-es/isEmpty';
 import { Layer, RadioButton, RadioButtonGroup, Search } from '@carbon/react';
@@ -35,9 +36,10 @@ const BaseConceptAnswer: React.FC<BaseConceptAnswerProps> = ({ onChange, isPatie
 
   return (
     <div
-      className={`${styles.conceptAnswerOverviewWrapper} ${
-        isTablet ? styles.conceptAnswerOverviewWrapperTablet : styles.conceptAnswerOverviewWrapperDesktop
-      }`}
+      className={classNames(
+        styles.conceptAnswerOverviewWrapper,
+        isTablet ? styles.conceptAnswerOverviewWrapperTablet : styles.conceptAnswerOverviewWrapperDesktop,
+      )}
     >
       <ResponsiveWrapper isTablet={isTablet}>
         <Search

diff --git a/packages/esm-patient-chart-app/src/patient-chart/patient-chart.component.tsx b/packages/esm-patient-chart-app/src/patient-chart/patient-chart.component.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import {
   ExtensionSlot,
   setCurrentVisit,
@@ -9,13 +10,13 @@ import {
 } from '@openmrs/esm-framework';
 import { useParams } from 'react-router-dom';
 import { changeWorkspaceContext, useAutoCreatedOfflineVisit, useWorkspaces } from '@openmrs/esm-patient-common-lib';
-import ChartReview from '../patient-chart/chart-review/chart-review.component';
+import { spaBasePath } from '../constants';
+import { LayoutMode } from './chart-review/dashboard-view.component';
 import ActionMenu from './action-menu/action-menu.component';
+import ChartReview from '../patient-chart/chart-review/chart-review.component';
 import Loader from '../loader/loader.component';
 import WorkspaceNotification from '../workspace/workspace-notification.component';
 import styles from './patient-chart.scss';
-import { spaBasePath } from '../constants';
-import { LayoutMode } from './chart-review/dashboard-view.component';
 
 const PatientChart: React.FC = () => {
   const { patientUuid, view: encodedView } = useParams();
@@ -51,12 +52,13 @@ const PatientChart: React.FC = () => {
   }, [leftNavBasePath]);
 
   return (
-    <main className={`omrs-main-content ${styles.chartContainer}`}>
+    <main className={classNames('omrs-main-content', styles.chartContainer)}>
       <>
         <div
-          className={`${styles.innerChartContainer} ${
-            workspaceWindowState === 'normal' && active ? styles.closeWorkspace : styles.activeWorkspace
-          }`}
+          className={classNames(
+            styles.innerChartContainer,
+            workspaceWindowState === 'normal' && active ? styles.closeWorkspace : styles.activeWorkspace,
+          )}
         >
           <ExtensionSlot name="breadcrumbs-slot" />
           {isLoadingPatient ? (
@@ -69,7 +71,7 @@ const PatientChart: React.FC = () => {
                 <ExtensionSlot name="patient-info-slot" state={state} />
               </aside>
               <div className={styles.grid}>
-                <div className={`${styles.chartReview} ${layoutMode == 'contained' ? styles.widthContained : ''}`}>
+                <div className={classNames(styles.chartReview, { [styles.widthContained]: layoutMode == 'contained' })}>
                   <ChartReview {...state} view={view} setDashboardLayoutMode={setLayoutMode} />
                   <WorkspaceNotification />
                 </div>

diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/base-visit-type.component.tsx b/packages/esm-patient-chart-app/src/visit/visit-form/base-visit-type.component.tsx
@@ -1,13 +1,14 @@
 import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useFormContext, Controller } from 'react-hook-form';
+import classNames from 'classnames';
 import debounce from 'lodash-es/debounce';
 import isEmpty from 'lodash-es/isEmpty';
 import { Layer, RadioButtonGroup, RadioButton, Search, StructuredListSkeleton } from '@carbon/react';
-import { EmptyState, PatientChartPagination } from '@openmrs/esm-patient-common-lib';
+import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
 import { useLayoutType, usePagination, VisitType } from '@openmrs/esm-framework';
-import styles from './visit-type-overview.scss';
-import { useFormContext, Controller } from 'react-hook-form';
 import { VisitFormData } from './visit-form.component';
+import styles from './visit-type-overview.scss';
 
 interface BaseVisitTypeProps {
   visitTypes: Array<VisitType>;
@@ -32,7 +33,7 @@ const BaseVisitType: React.FC<BaseVisitTypeProps> = ({ visitTypes }) => {
   const { results, currentPage, goTo } = usePagination(searchResults, 5);
 
   return (
-    <div className={`${styles.visitTypeOverviewWrapper} ${isTablet ? styles.tablet : styles.desktop}`}>
+    <div className={classNames(styles.visitTypeOverviewWrapper, isTablet ? styles.tablet : styles.desktop)}>
       {visitTypes.length ? (
         <>
           {isTablet ? (