Add tabs and refactor alert table component

src/views/AlertTable/i18n.json

@@ -2,12 +2,12 @@
     "namespace": "allOngoingAlerts",
     "strings": {
         "allOngoingAlertTitle":"All Alerts ",
-        "alertTableEvent":"Event" ,
-        "alertTableCategory":"Event Categories",
-        "alertTableRegion":"Region",
-        "alertTablecounteries":"Country",
-        "alertTableviewDetailsTitle":"View Details",
-        "alertTableAdmins":"Admin1s",
-        "alertTableSent":"Sent"
+        "alertTableEventTitle":"Event" ,
+        "alertTableCategoryTitle":"Event Categories",
+        "alertTableRegionTitle":"Region",
+        "alertTableCountryTitle":"Country",
+        "alertTableViewDetailsTitle":"View Details",
+        "alertTableAdminsTitle":"Admin1s",
+        "alertTableSentLabel":"Sent"
     }
-}
+}

src/views/AlertTable/index.tsx

@@ -15,6 +15,7 @@ import {
     createStringColumn,
 } from '@ifrc-go/ui/utils';
 import { isNotDefined } from '@togglecorp/fujs';
+import { removeNull } from '@togglecorp/toggle-form';
 
 import {
     AlertInformationsQuery,
@@ -24,17 +25,14 @@ import useFilterState from '#hooks/useFilterState';
 import { createLinkColumn } from '#utils/domain/tableHelpers';
 
 import i18n from './i18n.json';
-import styles from './styles.module.css';
-
-type AlertType = NonNullable<NonNullable<NonNullable<AlertInformationsQuery['public']>['alerts']>['items']>[number];
-const alertKeySelector = (item: AlertType) => item.id;
 
 const ALERT_INFORMATIONS = gql`
     query AlertInformations($pagination: OffsetPaginationInput) {
         public {
             alerts(pagination: $pagination) {
                 limit
                 offset
+                count
                 items {
                     id
                     country {
@@ -50,9 +48,10 @@ const ALERT_INFORMATIONS = gql`
                         }
                     }
                     sent
-                    url
-                    infos {
+                    info {
+                        id
                         event
+                        alertId
                         category
                     }
                 }
@@ -61,8 +60,14 @@ const ALERT_INFORMATIONS = gql`
     }
 `;
 
+type AlertType = NonNullable<NonNullable<NonNullable<AlertInformationsQuery['public']>['alerts']>['items']>[number];
+
+const alertKeySelector = (item: AlertType) => item.id;
+const PAGE_SIZE = 10;
+
 function AlertTable() {
     const strings = useTranslation(i18n);
+
     const {
         sortState,
         page,
@@ -73,120 +78,117 @@ function AlertTable() {
         event?: string,
         eventCategory?: string
     }>({
-        pageSize: 7,
+        pageSize: PAGE_SIZE,
         filter: {},
     });
 
+    const variables = useMemo(() => ({
+        pagination: {
+            offset: page,
+            limit,
+        },
+    }), [
+        page,
+        limit,
+    ]);
+
+    const {
+        loading,
+        previousData,
+        data: alertInfosResponse = previousData,
+    } = useQuery<AlertInformationsQuery, AlertInformationsQueryVariables>(
+        ALERT_INFORMATIONS,
+        {
+            skip: isNotDefined(variables),
+            variables,
+        },
+    );
+
+    const data = removeNull(alertInfosResponse?.public.alerts);
+
     const columns = useMemo(
         () => ([
             createStringColumn<AlertType, string>(
                 'event',
-                strings.alertTableEvent,
-                (item) => (item.infos.map((info: { event: string; }) => info.event).join(', ')),
+                strings.alertTableEventTitle,
+                (item) => item.info?.event,
                 { sortable: true },
             ),
             createStringColumn<AlertType, string>(
                 'category',
-                strings.alertTableCategory,
-                (item) => (item.infos.map((info: { category: string; }) => info.category).join(',')),
+                strings.alertTableCategoryTitle,
+                (item) => item.info?.category,
             ),
             createStringColumn<AlertType, string>(
                 'region',
-                strings.alertTableRegion,
+                strings.alertTableRegionTitle,
                 (item) => (item.country.region.name),
 
             ),
             createStringColumn<AlertType, string>(
                 'countries_details',
-                strings.alertTablecounteries,
+                strings.alertTableCountryTitle,
                 (item) => (item.country.name),
                 { sortable: true },
             ),
 
             createStringColumn<AlertType, string>(
                 'admin',
-                strings.alertTableAdmins,
-                (item) => (item.country.admin1s.map((admin: { name: string; }) => admin.name).join(', ')),
+                strings.alertTableAdminsTitle,
+                // NOTE: adim1s may be multiple
+                // so for now we are using first element
+                (item) => item.country.admin1s?.[0]?.name,
             ),
             createDateColumn<AlertType, string>(
                 'sent',
-                strings.alertTableSent,
+                strings.alertTableSentLabel,
                 (item) => (item.sent),
             ),
             createLinkColumn<AlertType, string>(
                 'view_details',
-                strings.alertTableviewDetailsTitle,
+                strings.alertTableViewDetailsTitle,
                 () => 'View Details',
                 (item) => ({
-                    to: 'detailsLayout',
+                    to: '/',
                     urlParams: { detailId: item.id },
                 }),
             ),
         ]),
         [
-            strings.alertTableEvent,
-            strings.alertTableCategory,
-            strings.alertTableRegion,
-            strings.alertTablecounteries,
-            strings.alertTableAdmins,
-            strings.alertTableSent,
-            strings.alertTableviewDetailsTitle,
+            strings.alertTableEventTitle,
+            strings.alertTableCategoryTitle,
+            strings.alertTableRegionTitle,
+            strings.alertTableCountryTitle,
+            strings.alertTableAdminsTitle,
+            strings.alertTableSentLabel,
+            strings.alertTableViewDetailsTitle,
         ],
     );
 
-    const variables = useMemo(() => ({
-        pagination: {
-            offset: page,
-            limit,
-        },
-    }), [
-        page,
-        limit,
-    ]);
-
-    const {
-        loading,
-        data: alertInfosResponse,
-    } = useQuery<AlertInformationsQuery, AlertInformationsQueryVariables>(
-        ALERT_INFORMATIONS,
-        {
-            skip: isNotDefined(variables),
-            variables,
-        },
-    );
-
-    const itemsCount = alertInfosResponse?.public.alerts.count || 0;
-    const items = alertInfosResponse?.public.alerts.items;
-
     return (
-        <div className={styles.alertTable}>
-            <Container
-                className={styles.alertTable}
-                heading={strings.allOngoingAlertTitle}
-                withHeaderBorder
-                childrenContainerClassName={styles.content}
-                withGridViewInFilter
-                footerActions={(
-                    <Pager
-                        activePage={page}
-                        itemsCount={itemsCount}
-                        maxItemsPerPage={limit}
-                        onActivePageChange={setPage}
-                    />
-                )}
-            >
-                <SortContext.Provider value={sortState}>
-                    <Table
-                        pending={loading}
-                        filtered={filtered}
-                        className={styles.table}
-                        columns={columns}
-                        keySelector={alertKeySelector}
-                        data={items}
-                    />
-                </SortContext.Provider>
-            </Container>
-        </div>
+        <Container
+            heading={strings.allOngoingAlertTitle}
+            withHeaderBorder
+            withGridViewInFilter
+            footerActions={(
+                <Pager
+                    activePage={page}
+                    itemsCount={data?.count ?? 0}
+                    maxItemsPerPage={limit}
+                    onActivePageChange={setPage}
+                />
+            )}
+        >
+            <SortContext.Provider value={sortState}>
+                <Table
+                    pending={loading}
+                    filtered={filtered}
+                    columns={columns}
+                    keySelector={alertKeySelector}
+                    data={data?.items}
+                />
+            </SortContext.Provider>
+        </Container>
     );
 }
 export default AlertTable;

src/views/Home/index.tsx

@@ -1,3 +1,10 @@
+import { useState } from 'react';
+import {
+    Tab,
+    TabList,
+    TabPanel,
+    Tabs,
+} from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import Page from '#components/Page';
@@ -8,26 +15,40 @@ import AlertTable from '../AlertTable';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
+export type TabKeys = 'map' | 'table';
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const strings = useTranslation(i18n);
+    const [activeTab, setActiveTab] = useState<TabKeys>('map');
 
     return (
-        <>
-            <Page
-                title={strings.homeTitle}
-                className={styles.home}
-                heading={strings.homeHeading}
-                description={strings.homeDescription}
-                descriptionContainerClassName={styles.headingDescription}
-                mainSectionClassName={styles.content}
+        <Page
+            title={strings.homeTitle}
+            className={styles.home}
+            heading={strings.homeHeading}
+            description={strings.homeDescription}
+            descriptionContainerClassName={styles.headingDescription}
+            mainSectionClassName={styles.content}
+        >
+            <Tabs
+                value={activeTab}
+                onChange={setActiveTab}
+                variant="secondary"
             >
-                <OngoingAlertMap
-                    bbox={undefined}
-                />
-            </Page>
-            <AlertTable />
-        </>
+                <TabList>
+                    <Tab name="map"> Map </Tab>
+                    <Tab name="table"> Table </Tab>
+                </TabList>
+                <TabPanel name="map">
+                    <OngoingAlertMap
+                        bbox={undefined}
+                    />
+                </TabPanel>
+                <TabPanel name="table">
+                    <AlertTable />
+                </TabPanel>
+            </Tabs>
+        </Page>
     );
 }