diff --git a/client/src/app/(landing)/countries/page.tsx b/client/src/app/(landing)/countries/page.tsx index 3a282145..e7ec9147 100644 --- a/client/src/app/(landing)/countries/page.tsx +++ b/client/src/app/(landing)/countries/page.tsx @@ -11,7 +11,7 @@ export const metadata: Metadata = { export default function Countries() { return ( -
+

Country Profile

diff --git a/client/src/app/(landing)/datasets/page.tsx b/client/src/app/(landing)/datasets/page.tsx index 72f85041..ba54b726 100644 --- a/client/src/app/(landing)/datasets/page.tsx +++ b/client/src/app/(landing)/datasets/page.tsx @@ -11,7 +11,7 @@ export const metadata: Metadata = { export default function DatasetsPage() { return ( -
+

Datasets

diff --git a/client/src/app/(landing)/projects/page.tsx b/client/src/app/(landing)/projects/page.tsx index 173aa729..9599a80a 100644 --- a/client/src/app/(landing)/projects/page.tsx +++ b/client/src/app/(landing)/projects/page.tsx @@ -14,7 +14,7 @@ import ProjectsTabs from '@/containers/projects/tabs'; export default function Projects() { return ( -
+

Projects

diff --git a/client/src/components/ui/loader.tsx b/client/src/components/ui/loader.tsx index 231fbd3c..1b83aee6 100644 --- a/client/src/components/ui/loader.tsx +++ b/client/src/components/ui/loader.tsx @@ -27,7 +27,7 @@ const ContentLoader = ({ isError, }: ContentLoaderProps) => { return ( -
+
{isFetching && !isFetched && (
(({ className, children, ...props }, ref) => ( - + {children} diff --git a/client/src/containers/countries/detail/panel.tsx b/client/src/containers/countries/detail/panel.tsx index 141cc790..234af744 100644 --- a/client/src/containers/countries/detail/panel.tsx +++ b/client/src/containers/countries/detail/panel.tsx @@ -141,7 +141,7 @@ export default function CountryDetailPanel() { } return ( -
+
- -
- {data?.data?.attributes?.iso && ( - - )} -

- {data?.data?.attributes?.name} -

-
- -

- -

- - - -
Read more
- - - -
-
- {data?.data?.attributes?.iso && ( - - )} -

{data?.data?.attributes?.name}

-
-
-
- - {data?.data?.attributes?.description} - -
-
+
+
+ +
+ {data?.data?.attributes?.iso && ( + + )} +

+ {data?.data?.attributes?.name} +

- - - - -
- - {indicators && ( -
- {PANEL_OVERVIEW_ITEMS.map(({ title, value, note, percentage }) => { - const unitValue = indicators[value]['unit']; - return ( -
-

- {title} ({unitValue}) -

-
-

- {formatCompactNumber(Math.round(indicators[value]['value']))}{' '} -

-

- {percentage && ({Math.round(indicators[percentage]['value'])}%} - {note} -

+

+ +

+ + + +
Read more
+ + + +
+
+ {data?.data?.attributes?.iso && ( + + )} +

{data?.data?.attributes?.name}

+
+
+
+ + {data?.data?.attributes?.description} + +
- ); - })} -
- {RESUME_ITEMS.map(({ title, icon, value }) => { - const unit = indicators[value]['unit']; - return ( -
-
-
-

- {indicators[value]['value']} + + + + +

+ + {indicators && ( +
+ {PANEL_OVERVIEW_ITEMS.map(({ title, value, note, percentage }) => { + const unitValue = indicators[value]['unit']; + return ( +
+

+ {title} ({unitValue}) +

+
+

+ {formatCompactNumber(Math.round(indicators[value]['value']))}{' '}

- {unit && ( -

{unit}

- )} +

+ {percentage && ( + ({Math.round(indicators[percentage]['value'])}% + )} + {note} +

+
+
+ ); + })} +
+ {RESUME_ITEMS.map(({ title, icon, value }) => { + const unit = indicators[value]['unit']; + return ( +
+
+
+

+ {indicators[value]['value']} +

+ + {unit && ( +

+ {unit} +

+ )} +
+

{title}

+
+ {title}
-

{title}

+ ); + })} +
+ +
+
+
+

+ Total funding{' '} + {indicators.country_funding.unit && ( + ({indicators.country_funding.unit}) + )} +

+ + + + + + +

+ + The total areas of project activities conducted in the AFoCO Member + Countries. + +

+ + +
+
+
- {title}
- ); - })} -
-
-
-
-

- Total funding{' '} - {indicators.country_funding.unit && ( - ({indicators.country_funding.unit}) - )} -

- - - - - - -

- - The total areas of project activities conducted in the AFoCO Member - Countries. - -

- - -
-
- -
-
+
+
+

Total intervention area

+ + + + + +

+ + The total areas of project activities conducted in the AFoCO Member + Countries. + +

+ + +
-
-
-

Total intervention area

- - - - - -

- - The total areas of project activities conducted in the AFoCO Member - Countries. - -

- - -
+

+ {formatCompactNumber(indicators.intervention_area_total['value'])}{' '} + {indicators.intervention_area_total['unit']} +

-

- {formatCompactNumber(indicators.intervention_area_total['value'])}{' '} - {indicators.intervention_area_total['unit']} -

+
+ {totalInterventionArea.map(({ name, value }) => ( +
+
+

{name}

+ +
+
+ +

+ {indicators[value]['value']} +

+
+ ))} +
+

+ {indicators.area_plantation_total['unit']} +

+
+
+
-
- {totalInterventionArea.map(({ name, value }) => ( -
-
-

{name}

+
+
+

Total beneficiaries

+ + + + + + +

+ + The total number of short- and long-term jobs generated by the + project interventions in the AFoCO Member Countries + +

+ + +
-
+ {formatCompactNumber(indicators.beneficiaries_total['value'])} +

+ {indicators.beneficiaries && ( +
+ ({ + year, + uv, + }) + )} + barDataKey="uv" + barRadius={[20, 20, 20, 20]} + fillBar="#70CCB0" + margin={{ + top: 2, + right: 10, + left: -20, + bottom: -4, }} + xAxisDataKey="year" />
- -

- {indicators[value]['value']} -

+ )} +
+
+
+

Total jobs

+ + + + + + +

+ + The total number of short- and long-term jobs generated by the + project interventions in the AFoCO Member Countries. + +

+ +
- ))} -
-

- {indicators.area_plantation_total['unit']} + +

+ {formatCompactNumber(indicators.jobs_total['value'])}

+ {indicators.jobs && ( +
+ ({ + year, + uv, + }))} + barDataKey="uv" + barRadius={[20, 20, 20, 20]} + fillBar="#70B6CC" + margin={{ + top: 2, + right: 20, + left: -20, + bottom: -4, + }} + xAxisDataKey="year" + /> +
+ )}
-
-
- -
-
-

Total beneficiaries

- - - - - - -

- - The total number of short- and long-term jobs generated by the project - interventions in the AFoCO Member Countries - -

- - -
-

- {formatCompactNumber(indicators.beneficiaries_total['value'])} -

- {indicators.beneficiaries && ( -
- ({ - year, - uv, - }) - )} - barDataKey="uv" - barRadius={[20, 20, 20, 20]} - fillBar="#70CCB0" - margin={{ - top: 2, - right: 10, - left: -20, - bottom: -4, - }} - xAxisDataKey="year" - /> +
+

Useful links

+ {usefulLinks.map(({ title, description, link }) => { + const href = + link === 'gfw_link' + ? data?.data?.attributes?.gfw_link + : link === 'country_information_link' + ? data?.data?.attributes?.country_information_link + : link === 'p&p_link' + ? 'https://afocosec.org/programs-projects/projects/' + : link.startsWith('http') + ? link + : undefined; + + return href ? ( +
+ +

{title}

+ + + + {description && ( +

{description}

+ )} +
+ ) : null; + })}
- )} -
-
-
-

Total jobs

- - - - - - -

- - The total number of short- and long-term jobs generated by the project - interventions in the AFoCO Member Countries. - -

- -
- -

- {formatCompactNumber(indicators.jobs_total['value'])} -

- {indicators.jobs && ( -
- ({ - year, - uv, - }))} - barDataKey="uv" - barRadius={[20, 20, 20, 20]} - fillBar="#70B6CC" - margin={{ - top: 2, - right: 20, - left: -20, - bottom: -4, - }} - xAxisDataKey="year" - /> -
- )} -
- -
-

Useful links

- {usefulLinks.map(({ title, description, link }) => { - const href = - link === 'gfw_link' - ? data?.data?.attributes?.gfw_link - : link === 'country_information_link' - ? data?.data?.attributes?.country_information_link - : link === 'p&p_link' - ? 'https://afocosec.org/programs-projects/projects/' - : link.startsWith('http') - ? link - : undefined; - - return href ? ( -
- -

{title}

- - - - {description &&

{description}

} -
- ) : null; - })}
-
-
- )} - + )} + +
+
); diff --git a/client/src/containers/countries/list.tsx b/client/src/containers/countries/list.tsx index 058d42e3..5201f5cb 100644 --- a/client/src/containers/countries/list.tsx +++ b/client/src/containers/countries/list.tsx @@ -26,7 +26,7 @@ export default function CountriesList() { }); return ( -
+
{/*
-
+

Select a country

- -
- {data?.data?.map((country) => ( - - ))} +
+
+ +
+ {data?.data?.map((country) => ( + + ))} +
+
- +
diff --git a/client/src/containers/datasets/list.tsx b/client/src/containers/datasets/list.tsx index 1c220ab2..b31030ac 100644 --- a/client/src/containers/datasets/list.tsx +++ b/client/src/containers/datasets/list.tsx @@ -25,21 +25,25 @@ export default function DatasetsList() { isError={isError} loaderClassName="mt-40" > - -

Activate data layers on the map

-
- {layers - .sort((a, b) => { - if (a?.attributes?.slug === 'projects') return -1; - if (b?.attributes?.slug === 'projects') return 1; - return 0; - }) - .map((l) => { - if (!l.id || !l.attributes) return null; - return ; - })} +
+
+ +

Activate data layers on the map

+
+ {layers + .sort((a, b) => { + if (a?.attributes?.slug === 'projects') return -1; + if (b?.attributes?.slug === 'projects') return 1; + return 0; + }) + .map((l) => { + if (!l.id || !l.attributes) return null; + return ; + })} +
+
- +
); } diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx index 40f4f294..ca6f32f3 100644 --- a/client/src/containers/map/index.tsx +++ b/client/src/containers/map/index.tsx @@ -6,7 +6,7 @@ import { LngLatBoundsLike, MapLayerMouseEvent, useMap, Marker } from 'react-map- import dynamic from 'next/dynamic'; import Image from 'next/image'; -import { useParams, usePathname, useRouter } from 'next/navigation'; +import { useRouter } from 'next/navigation'; import bbox from '@turf/bbox'; import { useAtomValue, useSetAtom, useAtom } from 'jotai'; @@ -68,8 +68,6 @@ export default function MapContainer() { const { [id]: map } = useMap(); const { push } = useRouter(); - const params = useParams<{ id: string }>(); - const pathname = usePathname(); const layersInteractiveIds = useAtomValue(layersInteractiveIdsAtom); const setHoveredProjectMap = useSetAtom(hoveredProjectMapAtom); @@ -262,7 +260,7 @@ export default function MapContainer() { ); return ( -
+
{ const sortable = layers?.length > 1; return ( -
+
{openLegend && ( - + { )} + {layers.length > 0 && (