From 25563bf66468d9ade62cfb970712df9ea1731d60 Mon Sep 17 00:00:00 2001 From: barshathakuri Date: Thu, 28 Dec 2023 13:37:16 +0545 Subject: [PATCH] Add country key indicators --- .../domain/CountryPageEmptyMessage/i18n.json | 6 -- .../domain/CountryPageEmptyMessage/index.tsx | 30 -------- .../CountryPageEmptyMessage/styles.module.css | 3 - src/views/CountryProfile/styles.module.css | 2 +- src/views/CountryProfileOverview/i18n.json | 9 ++- src/views/CountryProfileOverview/index.tsx | 77 ++++++++++++++++++- .../CountryProfileOverview/styles.module.css | 27 +++++++ 7 files changed, 109 insertions(+), 45 deletions(-) delete mode 100644 src/components/domain/CountryPageEmptyMessage/i18n.json delete mode 100644 src/components/domain/CountryPageEmptyMessage/index.tsx delete mode 100644 src/components/domain/CountryPageEmptyMessage/styles.module.css create mode 100644 src/views/CountryProfileOverview/styles.module.css diff --git a/src/components/domain/CountryPageEmptyMessage/i18n.json b/src/components/domain/CountryPageEmptyMessage/i18n.json deleted file mode 100644 index 52285369f..000000000 --- a/src/components/domain/CountryPageEmptyMessage/i18n.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "namespace": "common", - "strings": { - "countryPageWipMessage": "This page is currently under construction!" - } -} diff --git a/src/components/domain/CountryPageEmptyMessage/index.tsx b/src/components/domain/CountryPageEmptyMessage/index.tsx deleted file mode 100644 index 17052f9dd..000000000 --- a/src/components/domain/CountryPageEmptyMessage/index.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { PaintBrushLineIcon } from '@ifrc-go/icons'; - -import Message from '#components/Message'; -import useTranslation from '#hooks/useTranslation'; - -import i18n from './i18n.json'; -import styles from './styles.module.css'; - -interface Props { - title?: string; -} - -function CountryPageEmptyMessage(props: Props) { - const { - title, - } = props; - - const strings = useTranslation(i18n); - - return ( - } - description={strings.countryPageWipMessage} - /> - ); -} - -export default CountryPageEmptyMessage; diff --git a/src/components/domain/CountryPageEmptyMessage/styles.module.css b/src/components/domain/CountryPageEmptyMessage/styles.module.css deleted file mode 100644 index 60091ad39..000000000 --- a/src/components/domain/CountryPageEmptyMessage/styles.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.country-page-empty-message { - min-height: 24rem; -} diff --git a/src/views/CountryProfile/styles.module.css b/src/views/CountryProfile/styles.module.css index 8079a60ac..bfd2c039d 100644 --- 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 index 93a09aceb..93bb2feb4 100644 --- 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 index a9d5f2012..6c850c2a9 100644 --- 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(); + + const { + pending: indicatorPending, + response: indicatorResponse, + } = useRequest({ + url: '/api/v2/country/{id}/databank/', + skip: isNotDefined(countryId), + pathVariables: isDefined(countryId) ? { + id: Number(countryId), + } : undefined, + }); + return ( - + + {indicatorPending && } + + + + + + + + ); } diff --git a/src/views/CountryProfileOverview/styles.module.css b/src/views/CountryProfileOverview/styles.module.css new file mode 100644 index 000000000..488cf7ddb --- /dev/null +++ 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%; + } +}