fix: show capacity information only when it is available

IFRCGo · Jan 4, 2024 · ec17c59 · ec17c59
1 parent 226d252
commit ec17c59
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 67 deletions.
diff --git a/src/views/CountryNsOverviewCapacity/CountryNsOrganisationalCapacity/index.tsx b/src/views/CountryNsOverviewCapacity/CountryNsOrganisationalCapacity/index.tsx
@@ -1,3 +1,4 @@
+import { isDefined } from '@togglecorp/fujs';
 import { useOutletContext } from 'react-router-dom';
 
 import Container from '#components/Container';
@@ -12,67 +13,57 @@ function CountryNsOrganisationalCapacity() {
 
     const { countryResponse } = useOutletContext<CountryOutletContext>();
 
-    const leaderCapacity = countryResponse?.organizational_capacity.map(
-        (capacity) => capacity.leadership_capacity,
-    );
-
-    const youthCapacity = countryResponse?.organizational_capacity.map(
-        (capacity) => capacity.youth_capacity,
-    );
-
-    const volunteerCapacity = countryResponse?.organizational_capacity.map(
-        (capacity) => capacity.volunteer_capacity,
-    );
-
-    const financialCapacity = countryResponse?.organizational_capacity.map(
-        (capacity) => capacity.financial_capacity,
-    );
+    const [organizationalCapacity] = countryResponse?.organizational_capacity ?? [];
 
     return (
         <Container
             className={styles.organisationalCapacity}
             heading={strings.countryNsOrganisationalCapacityHeading}
+            childrenContainerClassName={styles.content}
             contentViewType="grid"
             numPreferredGridContentColumns={2}
             withHeaderBorder
         >
-            {/* // TODO: Hide if there is null value for capacity */}
-            <Container
-                className={styles.capacityCard}
-                childrenContainerClassName={styles.figures}
-                headingLevel={5}
-                withHeaderBorder
-                heading={strings.countryNsLeadershipCapacityLabel}
-            >
-                {leaderCapacity}
-            </Container>
-            <Container
-                className={styles.capacityCard}
-                childrenContainerClassName={styles.figures}
-                headingLevel={5}
-                withHeaderBorder
-                heading={strings.countryNsYouthCapacityLabel}
-            >
-                {youthCapacity}
-            </Container>
-            <Container
-                className={styles.capacityCard}
-                childrenContainerClassName={styles.figures}
-                headingLevel={5}
-                withHeaderBorder
-                heading={strings.countryNsVolunteerCapacityLabel}
-            >
-                {volunteerCapacity}
-            </Container>
-            <Container
-                className={styles.capacityCard}
-                childrenContainerClassName={styles.figures}
-                headingLevel={5}
-                withHeaderBorder
-                heading={strings.countryNsFinancialCapacityLabel}
-            >
-                {financialCapacity}
-            </Container>
+            {isDefined(organizationalCapacity?.leadership_capacity) && (
+                <Container
+                    className={styles.capacityCard}
+                    headingLevel={5}
+                    withHeaderBorder
+                    heading={strings.countryNsLeadershipCapacityLabel}
+                >
+                    {organizationalCapacity.leadership_capacity}
+                </Container>
+            )}
+            {isDefined(organizationalCapacity?.youth_capacity) && (
+                <Container
+                    className={styles.capacityCard}
+                    headingLevel={5}
+                    withHeaderBorder
+                    heading={strings.countryNsYouthCapacityLabel}
+                >
+                    {organizationalCapacity.youth_capacity}
+                </Container>
+            )}
+            {isDefined(organizationalCapacity?.volunteer_capacity) && (
+                <Container
+                    className={styles.capacityCard}
+                    headingLevel={5}
+                    withHeaderBorder
+                    heading={strings.countryNsVolunteerCapacityLabel}
+                >
+                    {organizationalCapacity.volunteer_capacity}
+                </Container>
+            )}
+            {isDefined(organizationalCapacity?.financial_capacity) && (
+                <Container
+                    className={styles.capacityCard}
+                    headingLevel={5}
+                    withHeaderBorder
+                    heading={strings.countryNsFinancialCapacityLabel}
+                >
+                    {organizationalCapacity.financial_capacity}
+                </Container>
+            )}
         </Container>
     );
 }

diff --git a/src/views/CountryNsOverviewCapacity/CountryNsOrganisationalCapacity/styles.module.css b/src/views/CountryNsOverviewCapacity/CountryNsOrganisationalCapacity/styles.module.css
@@ -1,14 +1,8 @@
 .organisational-capacity {
-    .capacity-card {
-        border-radius: var(--go-ui-border-radius-lg);
-        box-shadow: var(--go-ui-box-shadow-md);
-        padding: var(--go-ui-spacing-lg);
-
-        .figures {
-            display: flex;
-            flex-direction: column;
-            gap: var(--go-ui-spacing-xs);
-
+    .content {
+        .capacity-card {
+            border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+            padding: var(--go-ui-spacing-lg);
         }
     }
 }
diff --git a/src/views/CountryNsOverviewCapacity/i18n.json b/src/views/CountryNsOverviewCapacity/i18n.json
@@ -1,14 +1,14 @@
 {
     "namespace": "countryNsOverviewCapacity",
     "strings": {
-        "nsPreparednessHeading": "NS Preparedness and Response Capcity",
+        "nsPreparednessHeading": "NS Preparedness and Response Capacity",
         "nsPreparednessDescription": "The National Society Preparedness for an Effective Response (PER) Approach interact with National Societies' processes in a structured way to contribute to their preparedness and response capacities",
         "perCycleHeading": "Cycle {cycle}: {countryName} PER process",
         "perPhaseLabel": "PER phase",
         "perAssessmentDateLabel": "Assessment date",
         "perStartPerProcess": "Start PER Process",
         "perViewLink": "View",
         "nSOverviewCapacityDescription": "This following are various processes and assessment that the NS has done with IFRC that address National Society development, capacity, preparedness, and others.",
-        "nsOverviewCapacityLink": "IFRC Evaluations database"
+        "nsOverviewCapacityLink": "IFRC Evaluations Database"
     }
 }
diff --git a/src/views/CountryNsOverviewCapacity/index.tsx b/src/views/CountryNsOverviewCapacity/index.tsx
@@ -47,11 +47,11 @@ export function Component() {
             headerDescription={strings.nSOverviewCapacityDescription}
             headerDescriptionContainerClassName={styles.nsOverviewCapacity}
             actions={(
-            // TODO: Add IFRC Evaluation Database Link
                 <Link
-                    to="home"
+                    href="https://www.ifrc.org/evaluations/"
+                    external
+                    withLinkIcon
                     variant="primary"
-                    actions={<ArrowRightUpLineIcon />}
                 >
                     {strings.nsOverviewCapacityLink}
                 </Link>