fix: show Local name when available and use English name as fallback

Author: samshara

.changeset/great-carrots-remain.md

@@ -0,0 +1,5 @@
+---
+"go-web-app": patch
+---
+
+Show Local name when available and use English name as fallback for local units data

app/src/utils/common.ts

@@ -1,6 +1,7 @@
 import {
     compareNumber,
     isNotDefined,
+    isTruthyString,
 } from '@togglecorp/fujs';
 
 import type { GoApiResponse } from '#utils/restRequest';
@@ -75,3 +76,16 @@ export function downloadFile(
 
     URL.revokeObjectURL(url);
 }
+
+export function chooseName(
+    primaryName: string | null | undefined,
+    secondaryName: string | null | undefined,
+) {
+    if (isTruthyString(primaryName)) {
+        return primaryName;
+    }
+    if (isTruthyString(secondaryName)) {
+        return secondaryName;
+    }
+    return '--';
+}

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx

@@ -36,6 +36,7 @@ import MapContainerWithDisclaimer from '#components/MapContainerWithDisclaimer';
 import MapPopup from '#components/MapPopup';
 import useAuth from '#hooks/domain/useAuth';
 import useFilterState from '#hooks/useFilterState';
+import { chooseName } from '#utils/common';
 import {
     COLOR_DARK_GREY,
     COLOR_PRIMARY_BLUE,
@@ -330,6 +331,16 @@ function LocalUnitsMap() {
         && countryResponse.emails.length > 0;
     const hasContactDetails = hasAddress || hasEmails;
 
+    const localUnitName = useMemo(() => chooseName(
+        localUnitDetail?.local_branch_name,
+        localUnitDetail?.english_branch_name,
+    ), [localUnitDetail?.local_branch_name, localUnitDetail?.english_branch_name]);
+
+    const localUnitAddress = useMemo(() => chooseName(
+        localUnitDetail?.address_loc,
+        localUnitDetail?.address_en,
+    ), [localUnitDetail?.address_loc, localUnitDetail?.address_en]);
+
     return (
         <Container
             className={styles.localUnitsMap}
@@ -410,9 +421,7 @@ function LocalUnitsMap() {
                             popupClassName={styles.mapPopup}
                             coordinates={clickedPointProperties.lngLat}
                             onCloseButtonClick={handlePointClose}
-                            heading={isTruthyString(localUnitDetail?.english_branch_name)
-                                ? localUnitDetail?.english_branch_name
-                                : localUnitDetail?.local_branch_name ?? '--'}
+                            heading={localUnitName}
                             contentViewType="vertical"
                             pending={localUnitDetailPending}
                             errored={isDefined(localUnitDetailError)}
@@ -429,8 +438,7 @@ function LocalUnitsMap() {
                             <TextOutput
                                 label={strings.localUnitDetailAddress}
                                 strongLabel
-                                value={localUnitDetail?.address_en
-                                    ?? localUnitDetail?.address_loc}
+                                value={localUnitAddress}
                             />
                             <TextOutput
                                 label={strings.localUnitLocalUnitType}
@@ -507,48 +515,50 @@ function LocalUnitsMap() {
                     </Container>
                 )}
             </div>
-            {isDefined(localUnitsOptions) && (
-                <Container
-                    contentViewType="vertical"
-                    spacing="comfortable"
-                >
-                    <Container
-                        heading={strings.localUnitLegendLocalUnitTitle}
-                        headingLevel={4}
-                        contentViewType="grid"
-                        numPreferredGridContentColumns={5}
-                        spacing="compact"
-                    >
-                        {localUnitsOptions?.type.map((legendItem) => (
-                            <LegendItem
-                                key={legendItem.id}
-                                iconSrc={legendItem.image_url}
-                                iconClassName={styles.legendIcon}
-                                color={legendItem.colour ?? COLOR_DARK_GREY}
-                                label={legendItem.name}
-                            />
-                        ))}
-                    </Container>
+            {
+                isDefined(localUnitsOptions) && (
                     <Container
-                        heading={strings.localUnitLegendHealthCareTitle}
-                        headingLevel={5}
-                        contentViewType="grid"
-                        numPreferredGridContentColumns={5}
-                        spacing="compact"
+                        contentViewType="vertical"
+                        spacing="comfortable"
                     >
-                        {localUnitsOptions?.health_facility_type.map((legendItem) => (
-                            <LegendItem
-                                key={legendItem.id}
-                                // FIXME: use color from server
-                                color={COLOR_PRIMARY_BLUE}
-                                iconSrc={legendItem.image_url}
-                                iconClassName={styles.legendIcon}
-                                label={legendItem.name}
-                            />
-                        ))}
+                        <Container
+                            heading={strings.localUnitLegendLocalUnitTitle}
+                            headingLevel={4}
+                            contentViewType="grid"
+                            numPreferredGridContentColumns={5}
+                            spacing="compact"
+                        >
+                            {localUnitsOptions?.type.map((legendItem) => (
+                                <LegendItem
+                                    key={legendItem.id}
+                                    iconSrc={legendItem.image_url}
+                                    iconClassName={styles.legendIcon}
+                                    color={legendItem.colour ?? COLOR_DARK_GREY}
+                                    label={legendItem.name}
+                                />
+                            ))}
+                        </Container>
+                        <Container
+                            heading={strings.localUnitLegendHealthCareTitle}
+                            headingLevel={5}
+                            contentViewType="grid"
+                            numPreferredGridContentColumns={5}
+                            spacing="compact"
+                        >
+                            {localUnitsOptions?.health_facility_type.map((legendItem) => (
+                                <LegendItem
+                                    key={legendItem.id}
+                                    // FIXME: use color from server
+                                    color={COLOR_PRIMARY_BLUE}
+                                    iconSrc={legendItem.image_url}
+                                    iconClassName={styles.legendIcon}
+                                    label={legendItem.name}
+                                />
+                            ))}
+                        </Container>
                     </Container>
-                </Container>
-            )}
+                )
+            }
         </Container>
     );
 }

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/index.tsx

@@ -18,6 +18,7 @@ import {
 } from '@togglecorp/fujs';
 
 import useFilterState from '#hooks/useFilterState';
+import { chooseName } from '#utils/common';
 import { type CountryOutletContext } from '#utils/outletContext';
 import {
     type GoApiResponse,
@@ -84,12 +85,12 @@ function LocalUnitsTable() {
             createStringColumn<LocalUnitsTableListItem, number>(
                 'branch_name',
                 strings.localUnitsTableName,
-                (item) => item.local_branch_name ?? item.english_branch_name,
+                (item) => chooseName(item.local_branch_name, item.english_branch_name),
             ),
             createStringColumn<LocalUnitsTableListItem, number>(
                 'address',
                 strings.localUnitsTableAddress,
-                (item) => item.address_loc ?? item.address_en,
+                (item) => chooseName(item.address_loc, item.address_en),
             ),
             createStringColumn<LocalUnitsTableListItem, number>(
                 'type',
@@ -100,7 +101,7 @@ function LocalUnitsTable() {
             createStringColumn<LocalUnitsTableListItem, number>(
                 'focal',
                 strings.localUnitsTableFocal,
-                (item) => item.focal_person_en,
+                (item) => chooseName(item.focal_person_loc, item.focal_person_en),
             ),
             createStringColumn<LocalUnitsTableListItem, number>(
                 'phone',