Add redirects from country to region

Author: frozenhelium

src/App/routes/index.tsx

@@ -1,6 +1,12 @@
-import { Navigate, Outlet, useParams } from 'react-router-dom';
+import {
+    Navigate,
+    Outlet,
+    generatePath,
+    useParams,
+} from 'react-router-dom';
 import { isDefined, isTruthyString } from '@togglecorp/fujs';
 
+import { Component as RootLayout } from '#views/RootLayout';
 import {
     wrapRoute,
     unwrapRoute,
@@ -11,8 +17,18 @@ import type {
     MyOutputIndexRouteObject,
     MyOutputNonIndexRouteObject,
 } from '#utils/routes';
-
-import { Component as RootLayout } from '#views/RootLayout';
+import {
+    COUNTRY_AFRICA_REGION,
+    COUNTRY_AMERICAS_REGION,
+    COUNTRY_ASIA_REGION,
+    COUNTRY_EUROPE_REGION,
+    COUNTRY_MENA_REGION,
+    REGION_AFRICA,
+    REGION_AMERICAS,
+    REGION_ASIA,
+    REGION_EUROPE,
+    REGION_MENA,
+} from '#utils/constants';
 
 import Auth from '../Auth';
 import PageError from '../PageError';
@@ -342,24 +358,56 @@ const countriesLayout = customWrapRoute({
     },
 });
 
-const countryIndex = customWrapRoute({
-    parent: countriesLayout,
-    index: true,
-    component: {
-        eagerLoad: true,
-        render: SmartNavigate,
-        props: {
-            to: 'operations' satisfies DefaultCountriesChild,
-            replace: true,
-            hashToRouteMap: {
+// eslint-disable-next-line react-refresh/only-export-components
+function CountryNavigate() {
+    const params = useParams<{ countryId: string }>();
+    const countryIdToRegionIdMap: Record<number, number> = {
+        [COUNTRY_AFRICA_REGION]: REGION_AFRICA,
+        [COUNTRY_AMERICAS_REGION]: REGION_AMERICAS,
+        [COUNTRY_ASIA_REGION]: REGION_ASIA,
+        [COUNTRY_EUROPE_REGION]: REGION_EUROPE,
+        [COUNTRY_MENA_REGION]: REGION_MENA,
+    };
+
+    const countryId = isTruthyString(params.countryId) ? parseInt(params.countryId, 10) : undefined;
+    const regionId = isDefined(countryId) ? countryIdToRegionIdMap[countryId] : undefined;
+
+    if (isDefined(regionId)) {
+        const regionPath = generatePath(
+            regionIndex.absoluteForwardPath,
+            { regionId },
+        );
+        return (
+            <Navigate
+                to={regionPath}
+                replace
+            />
+        );
+    }
+
+    return (
+        <SmartNavigate
+            to={'operations' satisfies DefaultCountriesChild}
+            replace
+            hashToRouteMap={{
                 '#3w': 'three-w',
                 '#operations': 'operations',
                 '#risk-watch': 'risk-watch',
                 '#preparedness': 'preparedness',
                 '#country-plan': 'plan',
                 '#additional': 'additional-info',
-            },
-        },
+            }}
+        />
+    );
+}
+
+const countryIndex = customWrapRoute({
+    parent: countriesLayout,
+    index: true,
+    component: {
+        eagerLoad: true,
+        render: CountryNavigate,
+        props: {},
     },
     context: {
         title: 'Country',

src/utils/constants.ts

@@ -141,3 +141,15 @@ export type DisasterCategory = components<'read'>['schemas']['DisasterCategoryEn
 export const DISASTER_CATEGORY_YELLOW = 0 satisfies DisasterCategory;
 export const DISASTER_CATEGORY_ORANGE = 1 satisfies DisasterCategory;
 export const DISASTER_CATEGORY_RED = 2 satisfies DisasterCategory;
+
+export const COUNTRY_AMERICAS_REGION = 282;
+export const COUNTRY_ASIA_REGION = 283;
+export const COUNTRY_AFRICA_REGION = 285;
+export const COUNTRY_EUROPE_REGION = 286;
+export const COUNTRY_MENA_REGION = 287;
+export type Region = components<'read'>['schemas']['ApiRegionNameEnum'];
+export const REGION_AFRICA = 0;
+export const REGION_AMERICAS = 1;
+export const REGION_ASIA = 2;
+export const REGION_EUROPE = 3;
+export const REGION_MENA = 4;

src/views/Country/index.tsx

@@ -9,7 +9,12 @@ import {
     AppealsTwoIcon,
     PencilFillIcon,
 } from '@ifrc-go/icons';
-import { isDefined, isNotDefined, isTruthyString } from '@togglecorp/fujs';
+import {
+    isDefined,
+    isNotDefined,
+    isTruthyString,
+    isFalsyString,
+} from '@togglecorp/fujs';
 
 import { resolveUrl } from '#utils/resolveUrl';
 import BlockLoading from '#components/BlockLoading';
@@ -104,6 +109,19 @@ export function Component() {
         );
     }
 
+    if (isDefined(countryResponse) && isFalsyString(countryResponse.iso3)) {
+        return (
+            <Page
+                title={pageTitle}
+                className={styles.country}
+            >
+                <Message
+                    title={strings.countryLoadingErrorMessage}
+                />
+            </Page>
+        );
+    }
+
     return (
         <Page
             className={styles.country}

src/views/RegionOperations/RecentEmergenciesTable/index.tsx

@@ -152,6 +152,7 @@ function EventItemsTable(props: Props) {
         <Container
             className={styles.recentEmergenciesTable}
             heading={heading}
+            withHeaderBorder
             actions={(
                 <Link
                     to="allEmergencies"