Add country key indicators

IFRCGo · Jan 12, 2024 · 25563bf · 25563bf
1 parent 697c3f6
commit 25563bf
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 45 deletions.
diff --git a/src/components/domain/CountryPageEmptyMessage/i18n.json b/src/components/domain/CountryPageEmptyMessage/i18n.json
diff --git a/src/components/domain/CountryPageEmptyMessage/index.tsx b/src/components/domain/CountryPageEmptyMessage/index.tsx
diff --git a/src/components/domain/CountryPageEmptyMessage/styles.module.css b/src/components/domain/CountryPageEmptyMessage/styles.module.css
diff --git a/src/views/CountryProfile/styles.module.css b/src/views/CountryProfile/styles.module.css
@@ -1,6 +1,6 @@
 .country-profile {
     display: flex;
     flex-direction: column;
-    padding: var(--go-ui-spacing-2xl) 0;
     gap: var(--go-ui-spacing-2xl);
+    padding: var(--go-ui-spacing-2xl) 0;
 }
diff --git a/src/views/CountryProfileOverview/i18n.json b/src/views/CountryProfileOverview/i18n.json
@@ -1,6 +1,13 @@
 {
     "namespace": "countryProfileOverview",
     "strings": {
-        "pageTitle": "Country Profile Overview"
+        "countryIndicatorsTitle": "Country Key Indicators",
+        "countryIndicatorsPopulationLabel": "Population",
+        "countryIndicatorsUrbanPopulationLabel": "Urban Pop",
+        "countryIndicatorsGDPLabel": "GDP",
+        "countryIndicatorsPovertyLabel": "Poverty (%POP)",
+        "countryIndicatorsLifeExpectancyLabel": "Life Expectancy",
+        "countryIndicatorsLiteracyLabel": "Literacy",
+        "countryIndicatorsCapitaLabel": "GNI/Capita"
     }
 }
diff --git a/src/views/CountryProfileOverview/index.tsx b/src/views/CountryProfileOverview/index.tsx
@@ -1,16 +1,85 @@
-import CountryPageEmptyMessage from '#components/domain/CountryPageEmptyMessage';
+import { useOutletContext } from 'react-router-dom';
+import { isDefined, isNotDefined } from '@togglecorp/fujs';
+
+import BlockLoading from '#components/BlockLoading';
+import Container from '#components/Container';
+import TextOutput from '#components/TextOutput';
 import useTranslation from '#hooks/useTranslation';
+import { type CountryOutletContext } from '#utils/outletContext';
+import { useRequest } from '#utils/restRequest';
 
 import i18n from './i18n.json';
+import styles from './styles.module.css';
 
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const strings = useTranslation(i18n);
 
+    const { countryId } = useOutletContext<CountryOutletContext>();
+
+    const {
+        pending: indicatorPending,
+        response: indicatorResponse,
+    } = useRequest({
+        url: '/api/v2/country/{id}/databank/',
+        skip: isNotDefined(countryId),
+        pathVariables: isDefined(countryId) ? {
+            id: Number(countryId),
+        } : undefined,
+    });
+
     return (
-        <CountryPageEmptyMessage
-            title={strings.pageTitle}
-        />
+        <Container
+            className={styles.countryIndicators}
+            childrenContainerClassName={styles.indicatorContent}
+            heading={strings.countryIndicatorsTitle}
+            headingLevel={4}
+            withHeaderBorder
+        >
+            {indicatorPending && <BlockLoading className={styles.loading} />}
+            <TextOutput
+                label={strings.countryIndicatorsPopulationLabel}
+                value={indicatorResponse?.population}
+                valueType="number"
+                strongValue
+            />
+            <TextOutput
+                label={strings.countryIndicatorsUrbanPopulationLabel}
+                value={`${indicatorResponse?.urban_population} %`}
+                valueType="text"
+                strongValue
+            />
+            <TextOutput
+                label={strings.countryIndicatorsGDPLabel}
+                value={indicatorResponse?.gdp}
+                valueType="number"
+                strongValue
+            />
+            <TextOutput
+                label={strings.countryIndicatorsCapitaLabel}
+                value={indicatorResponse?.gnipc}
+                valueType="number"
+                strongValue
+            />
+            <TextOutput
+                label={strings.countryIndicatorsPovertyLabel}
+                value={`${indicatorResponse?.poverty} %`}
+                valueType="text"
+                strongValue
+            />
+            <TextOutput
+                label={strings.countryIndicatorsLifeExpectancyLabel}
+                value={indicatorResponse?.life_expectancy}
+                valueType="number"
+                strongValue
+            />
+            <TextOutput
+                label={strings.countryIndicatorsLiteracyLabel}
+                value={`${indicatorResponse?.literacy} %`}
+                valueType="text"
+                strongValue
+            />
+        </Container>
     );
 }
 

diff --git a/src/views/CountryProfileOverview/styles.module.css b/src/views/CountryProfileOverview/styles.module.css
@@ -0,0 +1,27 @@
+.country-indicators {
+    .indicator-content {
+        display: grid;
+        border-radius: var(--go-ui-border-radius-lg);
+        box-shadow: var(--go-ui-box-shadow-md);
+        background-color: var(--go-ui-color-background);
+        padding: var(--go-ui-spacing-md);
+        grid-gap: var(--go-ui-spacing-md);
+        grid-template-columns: 1fr 1fr 1fr;
+
+        @media screen and (max-width: 60rem) {
+            grid-template-columns: 1fr 1fr;
+        }
+
+        @media screen and (max-width: 30rem) {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .loading {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+}