Add historical alerts table

src/App/routes/index.tsx

@@ -127,6 +127,19 @@ const preferences = customWrapRoute({
     },
 });
 
+const historicalAlerts = customWrapRoute({
+    parent: rootLayout,
+    path: 'historical-alerts',
+    component: {
+        render: () => import('#views/HistoricalAlerts'),
+        props: {},
+    },
+    context: {
+        title: 'Historical Alerts',
+        visibility: 'anything',
+    },
+});
+
 const about = customWrapRoute({
     parent: rootLayout,
     path: 'about',
@@ -261,6 +274,7 @@ const wrappedRoutes = {
     resendValidationEmail,
     mySubscription,
     cookiePolicy,
+    historicalAlerts,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

src/components/Navbar/i18n.json

@@ -6,6 +6,7 @@
         "appAbout": "About",
         "appResources": "Resources",
         "headerMenuHome": "Home",
-        "headerMenuMySubscription": "My Subscriptions"
+        "headerMenuMySubscription": "My Subscriptions",
+        "historicalAlerts": "Historical Alerts"
     }
 }

src/components/Navbar/index.tsx

@@ -79,11 +79,17 @@ function Navbar(props: Props) {
                     >
                         {strings.headerMenuHome}
                     </NavigationTab>
+
                     <NavigationTab
                         to="mySubscription"
                     >
                         {strings.headerMenuMySubscription}
                     </NavigationTab>
+                    <NavigationTab
+                        to="historicalAlerts"
+                    >
+                        {strings.historicalAlerts}
+                    </NavigationTab>
                 </NavigationTabList>
             </PageContainer>
         </nav>

src/views/HistoricalAlerts/AlertActions/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "alertActions",
+    "strings": {
+        "alertTableViewDetailsTitle": "View Details"
+    }
+}

src/views/HistoricalAlerts/AlertActions/index.tsx

@@ -0,0 +1,56 @@
+import { useCallback } from 'react';
+import { generatePath } from 'react-router-dom';
+import { CopyLineIcon } from '@ifrc-go/icons';
+import { Button } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import Link from '#components/Link';
+import { AlertInformationsQuery } from '#generated/types/graphql';
+import useAlert from '#hooks/useAlert';
+import routes from '#routes';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type AlertType = NonNullable<NonNullable<NonNullable<AlertInformationsQuery['public']>['alerts']>['items']>[number];
+
+export interface Props {
+    data: AlertType;
+}
+function AlertActions(props: Props) {
+    const { data } = props;
+    const strings = useTranslation(i18n);
+    const alert = useAlert();
+
+    const url = generatePath(
+        routes.alertDetails.absolutePath,
+        { alertId: data.id },
+    );
+
+    const handleClick = useCallback(() => {
+        navigator.clipboard.writeText(`${window.location.origin}${url}`);
+        alert.show('Link copied to clipboard');
+    }, [url, alert]);
+
+    return (
+        <div className={styles.alertActions}>
+            <Link
+                className={styles.viewDetailsCopyLink}
+                to="alertDetails"
+                urlParams={{ alertId: data.id }}
+            >
+                {strings.alertTableViewDetailsTitle}
+            </Link>
+            <Button
+                name={undefined}
+                onClick={handleClick}
+                variant="tertiary"
+                title="Copy alert URL"
+            >
+                <CopyLineIcon />
+            </Button>
+        </div>
+    );
+}
+
+export default AlertActions;

src/views/HistoricalAlerts/AlertActions/styles.module.css

@@ -0,0 +1,6 @@
+.alert-actions{
+    display: flex;
+    gap: var(--go-ui-spacing-sm);
+}
+
+

src/views/HistoricalAlerts/i18n.json

@@ -0,0 +1,33 @@
+{
+    "namespace": "historicalAlerts",
+    "strings": {
+        "allOngoingAlertTitle":"Past 3 Months Alerts ({numAppeals}) ",
+        "historicalAlertTableEventTitle":"Event" ,
+        "historicalAlertTableCategoryTitle":"Event Categories",
+        "historicalAlertTableRegionTitle":"Region",
+        "historicalAlertTableCountryTitle":"Country",
+        "historicalAlertTableActionsTitle":"Actions",
+        "historicalAlertTableAdminsTitle":"Admin1s",
+        "historicalAlertTableSentLabel":"Sent",
+        "tableViewAllSources": "View All Sources",
+        "historicalAlertTitle": "IFRC Alert Hub - Historical Alerts",
+        "historicalAlert": "Historical Alerts",
+        "filterCountriesPlaceholder": "All Countries",
+        "filterAdmin1Placeholder": "All Admin1",
+        "filterUrgencyPlaceholder": "All Urgency Types",
+        "filterSeverityPlaceholder": "All Severity Types",
+        "filterCertaintyPlaceholder": "All Certainty Types",
+        "filterCountriesLabel": "Country",
+        "filterAdmin1Label": "Admin1",
+        "filterUrgencyLabel": "Urgency Level",
+        "filterSeverityLabel": "Severity Level",
+        "filterCertaintyLabel": "Certainty Level",
+        "filterRegionsLabel": "Regions",
+        "filterRegionsPlaceholder": "All Regions",
+        "filterCategoriesLabel": "Event Categories",
+        "filterCategoriesPlaceholder": "All Event Categories",
+        "filterStartDateFrom":"Start date from",
+        "filterStartDateTo":"Start date To",
+        "historicalAlertDescription": "IFRC Alert Hub provides global emergency alerts, empowering communities to protect lives and livelihoods. Easily access and filter past alerts from the latest months to stay informed."
+    }
+}