Add alert info in map

.unimportedrc.json

@@ -1,15 +1,22 @@
 {
     "entry": ["./src/index.tsx"],
-    "ignorePatterns": ["**/node_modules/**", "build/**"],
+    "ignorePatterns": ["**/node_modules/**", "build/**", "**/generated/**"],
     "ignoreUnimported": ["**/*.d.ts", "**/*.test.*", "**/generated/**"],
     "ignoreUnused": [
         "@apollo/client",
         "@graphql-codegen/introspection",
         "@graphql-codegen/typescript-operations",
-        "@togglecorp/re-map",
+        "patch-package",
         "@sentry/react"
     ],
-    "ignoreUnresolved": ["@graphql-typed-document-node/core"],
+    "ignoreUnresolved": [
+        [
+            "@graphql-typed-document-node/core",
+            [
+                "generated/types/graphql.ts"
+            ]
+        ]
+    ],
     "extensions": [".ts", ".js", ".tsx", ".jsx"],
     "aliases": {
         "#utils/*": ["./src/utils/*"],

package.json

@@ -15,20 +15,23 @@
         "lint:fix": "yarn lint:js --fix && yarn lint:css --fix",
         "test": "vitest",
         "test:coverage": "vitest run --coverage",
-        "typecheck": "tsc"
+        "typecheck": "tsc",
+        "postinstall": "patch-package"
     },
     "dependencies": {
         "@apollo/client": "^3.9.9",
         "@graphql-codegen/introspection": "^4.0.3",
         "@graphql-codegen/typescript-operations": "^4.2.0",
         "@ifrc-go/icons": "^1.3.3",
-        "@ifrc-go/ui": "^1.0.0",
+        "@ifrc-go/ui": "^1.1.0",
         "@mapbox/mapbox-gl-draw": "^1.4.3",
         "@sentry/react": "^7.81.1",
         "@togglecorp/fujs": "^2.1.1",
         "@togglecorp/re-map": "^0.2.0-beta-6",
+        "@turf/bbox": "^6.5.0",
         "graphql": "^16.8.1",
         "mapbox-gl": "^1.13.0",
+        "patch-package": "^8.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.22.3"

src/views/Home/AlertsTable/i18n.json

@@ -7,6 +7,7 @@
         "alertTableRegionTitle":"Region",
         "alertTableCountryTitle":"Country",
         "alertTableViewDetailsTitle":"View Details",
+        "alertTableActionsTitle":"Actions",
         "alertTableAdminsTitle":"Admin1s",
         "alertTableSentLabel":"Sent"
     }

src/views/Home/AlertsTable/index.tsx

@@ -1,4 +1,8 @@
-import { useMemo } from 'react';
+import {
+    ComponentType,
+    HTMLProps,
+    useMemo,
+} from 'react';
 import {
     gql,
     useQuery,
@@ -12,6 +16,7 @@ import { SortContext } from '@ifrc-go/ui/contexts';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     createDateColumn,
+    createListDisplayColumn,
     createStringColumn,
 } from '@ifrc-go/ui/utils';
 import { isNotDefined } from '@togglecorp/fujs';
@@ -24,6 +29,7 @@ import useFilterState from '#hooks/useFilterState';
 import { createLinkColumn } from '#utils/domain/tableHelpers';
 
 import i18n from './i18n.json';
+import styles from './styles.module.css';
 
 const ALERT_INFORMATIONS = gql`
     query AlertInformations($pagination: OffsetPaginationInput) {
@@ -60,9 +66,11 @@ const ALERT_INFORMATIONS = gql`
 `;
 
 type AlertType = NonNullable<NonNullable<NonNullable<AlertInformationsQuery['public']>['alerts']>['items']>[number];
+type Country = AlertType['country'];
+type Admin1 = Country['admin1s'][number];
 
 const alertKeySelector = (item: AlertType) => item.id;
-const PAGE_SIZE = 10;
+const PAGE_SIZE = 20;
 
 function AlertsTable() {
     const strings = useTranslation(i18n);
@@ -111,44 +119,59 @@ function AlertsTable() {
                 'event',
                 strings.alertTableEventTitle,
                 (item) => item.info?.event,
-                { sortable: true },
+                {
+                    sortable: true,
+                    columnClassName: styles.event,
+                },
             ),
             createStringColumn<AlertType, string>(
                 'category',
                 strings.alertTableCategoryTitle,
                 (item) => item.info?.category,
+                { columnClassName: styles.category },
             ),
             createStringColumn<AlertType, string>(
                 'region',
                 strings.alertTableRegionTitle,
                 (item) => (item.country.region.name),
+                { columnClassName: styles.region },
 
             ),
             createStringColumn<AlertType, string>(
-                'countries_details',
+                'country',
                 strings.alertTableCountryTitle,
                 (item) => (item.country.name),
-                { sortable: true },
+                {
+                    sortable: true,
+                    columnClassName: styles.country,
+                },
             ),
-
-            createStringColumn<AlertType, string>(
-                'admin',
+            createListDisplayColumn<AlertType, string, Admin1, HTMLProps<HTMLSpanElement>>(
+                'admin1s',
                 strings.alertTableAdminsTitle,
-                (item) => item.country.admin1s?.map((admin) => admin?.name)?.join(', '),
+                (item) => ({
+                    list: item.country.admin1s,
+                    keySelector: ({ id }) => id,
+                    renderer: 'span' as unknown as ComponentType<HTMLProps<HTMLSpanElement>>,
+                    rendererParams: ({ name }) => ({ children: name }),
+                }),
+                { columnClassName: styles.admins },
             ),
             createDateColumn<AlertType, string>(
                 'sent',
                 strings.alertTableSentLabel,
                 (item) => (item.sent),
+                { columnClassName: styles.sent },
             ),
             createLinkColumn<AlertType, string>(
-                'view_details',
-                strings.alertTableViewDetailsTitle,
+                'actions',
+                strings.alertTableActionsTitle,
                 () => strings.alertTableViewDetailsTitle,
                 (item) => ({
                     to: '/',
                     urlParams: { detailId: item.id },
                 }),
+                { columnClassName: styles.actions },
             ),
         ]),
         [
@@ -158,12 +181,14 @@ function AlertsTable() {
             strings.alertTableCountryTitle,
             strings.alertTableAdminsTitle,
             strings.alertTableSentLabel,
+            strings.alertTableActionsTitle,
             strings.alertTableViewDetailsTitle,
         ],
     );
 
     return (
         <Container
+            className={styles.alertsTable}
             heading={strings.allOngoingAlertTitle}
             withHeaderBorder
             withGridViewInFilter

src/views/Home/AlertsTable/styles.module.css

@@ -0,0 +1,31 @@
+.alerts-table {
+    .event {
+        width: 0%;
+        min-width: 8rem;
+    }
+
+    .category {
+        width: 0%;
+        min-width: 5rem;
+    }
+
+    .region {
+        width: 0%;
+        min-width: 5rem;
+    }
+
+    .country {
+        width: 0%;
+        min-width: 6rem;
+    }
+
+    .admins {
+        min-width: 14rem;
+    }
+
+    .actions,
+    .sent {
+        width: 7%;
+        min-width: 7rem;
+    }
+}

src/views/Home/AlertsView/AlertContext.tsx

@@ -0,0 +1,67 @@
+import { createContext } from 'react';
+
+type Id = string;
+// type SetStateFn<T> = React.Dispatch<React.SetStateAction<T | undefined>>;
+type SetStateFn<T> = (newValue: T | undefined) => void;
+
+export interface AlertContextProps {
+    bbox: unknown;
+    setBbox: SetStateFn<unknown>;
+    activeCountryName: string | undefined;
+
+    activeCountryId: Id | undefined;
+    activeAdmin1Id: Id | undefined;
+    activeAlertId: Id | undefined;
+
+    activeGoCountryId: Id | undefined;
+    activeGoAdmin1Id: Id | undefined;
+
+    setActiveCountryId: SetStateFn<Id>;
+    setActiveAdmin1Id: SetStateFn<Id>;
+
+    setActiveGoCountryId: SetStateFn<Id>;
+    setActiveGoAdmin1Id: SetStateFn<Id>;
+
+    setActiveAlertId: SetStateFn<Id>;
+    setActiveCountryName: SetStateFn<string>;
+}
+
+const AlertContext = createContext<AlertContextProps>({
+    bbox: undefined,
+    activeCountryId: undefined,
+    activeGoCountryId: undefined,
+    activeCountryName: undefined,
+    activeAdmin1Id: undefined,
+    activeGoAdmin1Id: undefined,
+    activeAlertId: undefined,
+    setBbox: () => {
+        // eslint-disable-next-line no-console
+        console.warn('AlertContext::setBbox called without provider');
+    },
+    setActiveAdmin1Id: () => {
+        // eslint-disable-next-line no-console
+        console.warn('AlertContext::setActiveAlertId called without provider');
+    },
+    setActiveGoAdmin1Id: () => {
+        // eslint-disable-next-line no-console
+        console.warn('AlertContext::setActiveGoAlertId called without provider');
+    },
+    setActiveGoCountryId: () => {
+        // eslint-disable-next-line no-console
+        console.warn('AlertContext::setActiveGoCountryId called without provider');
+    },
+    setActiveCountryId: () => {
+        // eslint-disable-next-line no-console
+        console.warn('AlertContext::setActiveCountryId called without provider');
+    },
+    setActiveAlertId: () => {
+        // eslint-disable-next-line no-console
+        console.warn('AlertContext::setActiveAlertId called without provider');
+    },
+    setActiveCountryName: () => {
+        // eslint-disable-next-line no-console
+        console.warn('AlertContext::setActiveCountryName called without provider');
+    },
+});
+
+export default AlertContext;