Add alerts info

package.json

@@ -20,17 +20,21 @@
     },
     "dependencies": {
         "@apollo/client": "^3.9.9",
+        "@graphql-codegen/cli": "^5.0.2",
         "@graphql-codegen/introspection": "^4.0.3",
+        "@graphql-codegen/typescript": "^4.0.6",
         "@graphql-codegen/typescript-operations": "^4.2.0",
         "@ifrc-go/icons": "^1.3.3",
         "@ifrc-go/ui": "^1.0.0",
-        "@mapbox/mapbox-gl-draw": "^1.4.3",
-        "@sentry/react": "^7.81.1",
+        "@mapbox/mapbox-gl-draw": "^1.2.0",
         "@togglecorp/fujs": "^2.1.1",
         "@togglecorp/re-map": "^0.2.0-beta-6",
         "@togglecorp/toggle-form": "^2.0.4",
+        "@turf/bbox": "^6.5.0",
+        "@turf/buffer": "^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/AlertMap/AlertListItem/AlertDetail/index.tsx

@@ -0,0 +1,37 @@
+import { Link } from 'react-router-dom';
+import { Container } from '@ifrc-go/ui';
+
+import { CountryAlertsListQuery } from '#generated/types';
+
+type CountryAlertType = NonNullable<NonNullable<CountryAlertsListQuery['public']['alerts']['items'][number]>>;
+
+export interface AlertProps {
+    data: CountryAlertType;
+    onExpandClick: (alertId: string | undefined) => void;
+}
+
+function AlertDetail(props: AlertProps) {
+    const {
+        data,
+        onExpandClick,
+    } = props;
+
+    return (
+        <Container>
+            {data?.infos?.map((alert) => (
+                <Link
+                    to="www.ifrc.com"
+                >
+                    <div>
+                        {alert?.event}
+                    </div>
+                    <div>
+                        {alert?.category}
+                    </div>
+                </Link>
+            ))}
+        </Container>
+    )
+}
+
+export default AlertDetail;

src/views/Home/AlertMap/AlertListItem/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "alertDetails",
+    "strings": {
+        "alertViewDetails": "Alert List Details"
+    }
+}

src/views/Home/AlertMap/AlertListItem/index.tsx

@@ -0,0 +1,175 @@
+import {
+    useCallback,
+    useMemo,
+    useState,
+} from 'react';
+import { isDefined } from '@togglecorp/fujs';
+import { gql, useQuery } from '@apollo/client';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    Button,
+    Container,
+    Pager,
+    TextOutput,
+} from '@ifrc-go/ui';
+
+import {
+    CountryAlertsListQuery,
+    CountryAlertsListQueryVariables,
+} from '#generated/types';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+import { ChevronLeftLineIcon } from '@ifrc-go/icons';
+
+const COUNTRY_ALERTS_LIST = gql`
+  query CountryAlertsList(
+    $country: ID!,
+    $pagination: OffsetPaginationInput
+    ) {
+    public {
+      alerts(
+        filters: {
+         country: {
+            pk: $country
+            }
+        }
+        pagination: $pagination
+        ) {
+        items {
+          id
+          info {
+            event
+            category
+            alertId
+          }
+        }
+      }
+    }
+  }
+`;
+
+const defaultMaxItemsPerPage = 10;
+
+type CountryAlertType = NonNullable<NonNullable<CountryAlertsListQuery['public']['alerts']['items'][number]>>;
+
+const countryAlertKeySelector = (alert: CountryAlertType) => alert.id;
+
+export interface Props {
+    countryId: string;
+    handleAlertClick: (countryId: string | undefined) => void;
+    activeAlertId: string | undefined;
+}
+
+function AlertDetail(props: Props) {
+    const {
+        countryId,
+        handleAlertClick,
+        activeAlertId,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const [activePage, setActivePage] = useState(1);
+
+    const variables = useMemo(() => ({
+        country: countryId,
+        pagination: {
+            offset: (activePage - 1) * defaultMaxItemsPerPage,
+            limit: defaultMaxItemsPerPage,
+        },
+    }), [activePage]);
+
+    const {
+        data: countryAlertsResponse,
+        loading: countryAlertsLoading,
+    } = useQuery<CountryAlertsListQuery, CountryAlertsListQueryVariables>(
+        COUNTRY_ALERTS_LIST, {
+        variables,
+    });
+
+    // const setActiveCountryIdSafe = useCallback(
+    //     (countryId: string | undefined) => {
+    //         setActiveCountryId(countryId);
+    //         onActiveCountryChange(countryId);
+    //     },
+    //     [onActiveCountryChange, setActiveCountryId],
+    // );
+
+    // const alertListRendererParams = useCallback(
+    //     (_: string | number, alert: CountryAlertType): Props => ({
+    //         countryId: activeCountryId,
+    //         onActiveCountryChange: setActiveCountryIdSafe,
+    //     }),
+    //     [activeCountryId, setActiveCountryIdSafe],
+    // );
+
+    console.log('alert', activeAlertId);
+
+    return (
+        <Container
+            className={styles.alerts}
+            childrenContainerClassName={styles.content}
+            headingLevel={4}
+            spacing="compact"
+            heading={strings.alertViewDetails}
+            footerActions={(
+                <Pager
+                    activePage={activePage}
+                    // FIXME: Add items count
+                    itemsCount={100}
+                    maxItemsPerPage={defaultMaxItemsPerPage}
+                    onActivePageChange={setActivePage}
+                />
+            )}
+            contentViewType="vertical"
+        // actions={isDefined(countryId) && (
+        //     <Button
+        //         name={undefined}
+        //         onClick={setActiveCountryIdSafe}
+        //         variant="tertiary"
+        //         icons={(
+        //             <ChevronLeftLineIcon className={styles.icon} />
+        //         )}
+        //     >
+        //         Back
+        //     </Button>
+        // )}
+        >
+            {/* <Link
+                            to={''}
+                            className={styles.alertButtons}
+                        >
+                            {alert.event}
+                            {alert.category}
+                        </Link> */}
+            {countryAlertsResponse?.public?.alerts?.items?.map((alerts) => (
+                <div className={styles.alerts}>
+                    <Button
+                        name={alerts.id}
+                        onClick={handleAlertClick}
+                        variant="tertiary"
+                    >
+                        {alerts?.info?.event} - {alerts?.info?.category}
+                    </Button>
+                </div>
+            ))}
+            {/* {countryAlertsLoading && <BlockLoading />}
+            {isDefined(countryAlertsResponse) && (
+                <List
+                    className={styles.countryList}
+                    filtered={false}
+                    pending={countryAlertsLoading}
+                    errored={false}
+                    data={countryAlertsResponse?.public?.alerts.items}
+                    keySelector={countryAlertKeySelector}
+                    renderer={AlertDetail}
+                    rendererParams={alertListRendererParams}
+                    emptyMessage="No data found"
+                />
+            )} */}
+        </Container>
+    );
+}
+
+export default AlertDetail;

src/views/Home/AlertMap/AlertListItem/styles.module.css

@@ -0,0 +1,3 @@
+.alerts {
+    display: flex;
+}

src/views/AlertMap/CountryListItem/index.tsx → src/views/Home/AlertMap/CountryListItem/index.tsx

@@ -10,25 +10,27 @@ import { CountryListQuery } from '#generated/types';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
-type CountryType = NonNullable<NonNullable<NonNullable<CountryListQuery['public']>['countries']>['items']>[number];
+type CountryType = NonNullable<NonNullable<CountryListQuery['public']>['allCountries']>[number];
 
 export interface CountryProps {
     data: CountryType;
     onExpandClick: (alertId: string | undefined) => void;
+    bbox?: number[][] | undefined;
 }
 
 function CountryListItem(props: CountryProps) {
     const {
         data,
         onExpandClick,
+        bbox,
     } = props;
 
     const strings = useTranslation(i18n);
 
     return (
         <Container
             className={styles.countryInfo}
-            heading={data.name ?? '--'}
+            heading={`${data.name ?? '--'} (${data.alertCount})`}
             headerClassName={styles.CountryListItem}
             headingLevel={5}
             key={data.name}

src/views/AlertMap/RegionListItem/index.tsx → src/views/Home/AlertMap/RegionListItem/index.tsx

@@ -67,7 +67,7 @@ function RegionListItem(props: RegionProps) {
             {admin1ListLoading && <BlockLoading />}
             <div className={styles.alertDetails}>
                 {filteredAdmins.map((name) => (
-                    <div>
+                    <div key={name}>
                         {name}
                     </div>
                 ))}