Add cards for subscription and use api

IFRCGo · Dec 4, 2024 · eee48e0 · eee48e0
1 parent a7c2db9
commit eee48e0
Show file tree

Hide file tree

Showing 9 changed files with 176 additions and 131 deletions.
diff --git a/src/assets/icons/alerthub_Logo.png b/src/assets/icons/alerthub_Logo.png
diff --git a/src/assets/icons/alerthub_api.svg b/src/assets/icons/alerthub_api.svg
diff --git a/src/views/Home/AlertsMap/index.tsx b/src/views/Home/AlertsMap/index.tsx
@@ -7,19 +7,12 @@ import {
     gql,
     useQuery,
 } from '@apollo/client';
+import { ChevronRightLineIcon } from '@ifrc-go/icons';
 import {
-    AddLineIcon,
-    ChevronRightLineIcon,
-} from '@ifrc-go/icons';
-import {
-    Button,
     Container,
     InfoPopup,
 } from '@ifrc-go/ui';
-import {
-    useBooleanState,
-    useTranslation,
-} from '@ifrc-go/ui/hooks';
+import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToString } from '@ifrc-go/ui/utils';
 import {
     isDefined,
@@ -35,7 +28,6 @@ import {
     FilteredCountryListQueryVariables,
 } from '#generated/types/graphql';
 import useFilterState from '#hooks/useFilterState';
-import NewSubscriptionModal from '#views/NewSubscriptionModal';
 
 import AlertDataContext from '../AlertDataContext';
 import AlertFilters from '../AlertFilters';
@@ -86,20 +78,12 @@ export function Component() {
     const strings = useTranslation(i18n);
     const alertFilters = useAlertFilters();
 
-    const [showSubscriptionModal, {
-        setTrue: setShowSubscriptionModalTrue,
-        setFalse: setShowSubscriptionModalFalse,
-    }] = useBooleanState(false);
-
     const {
         activeAdmin1Id,
         activeCountryId,
         activeAlertId,
         activeCountryDetails,
         activeAdmin1Details,
-        selectedUrgencyTypes,
-        selectedCertaintyTypes,
-        selectedSeverityTypes,
     } = useContext(AlertDataContext);
 
     // FIXME: We should remove useFilterState as we are not using any feature
@@ -187,20 +171,6 @@ export function Component() {
         [totalAlertCount, activeCountryDetails, activeAdmin1Details, strings],
     );
 
-    const defaultSubscription = useMemo(() => ({
-        filterAlertUrgencies: selectedUrgencyTypes,
-        filterAlertCertainties: selectedCertaintyTypes,
-        filterAlertSeverities: selectedSeverityTypes,
-        filterAlertCountry: activeCountryId || '',
-        filterAlertAdmin1s: activeAdmin1Id ? [activeAdmin1Id] : [],
-    }), [
-        selectedUrgencyTypes,
-        selectedSeverityTypes,
-        selectedCertaintyTypes,
-        activeCountryId,
-        activeAdmin1Id,
-    ]);
-
     return (
         <Container
             className={styles.alertsMap}
@@ -217,19 +187,6 @@ export function Component() {
             childrenContainerClassName={styles.mainContent}
             actions={(
                 <div className={styles.links}>
-                    <Button
-                        className={styles.sources}
-                        onClick={setShowSubscriptionModalTrue}
-                        name={undefined}
-                        variant="tertiary"
-                        actions={(
-                            <AddLineIcon
-                                className={styles.icon}
-                            />
-                        )}
-                    >
-                        {strings.alertNewSubscription}
-                    </Button>
                     <Link
                         className={styles.sources}
                         to="allSourcesFeeds"
@@ -249,13 +206,6 @@ export function Component() {
             numPreferredGridContentColumns={3}
             filters={<AlertFilters variant="map" />}
         >
-            {showSubscriptionModal && (
-                <NewSubscriptionModal
-                    subscription={defaultSubscription}
-                    onCloseModal={setShowSubscriptionModalFalse}
-                    onSuccess={undefined}
-                />
-            )}
             <Map
                 className={styles.alertsMap}
                 countriesWithAlert={countriesWithAlert}

diff --git a/src/views/Home/AlertsTable/index.tsx b/src/views/Home/AlertsTable/index.tsx
@@ -9,12 +9,8 @@ import {
     gql,
     useQuery,
 } from '@apollo/client';
+import { ChevronRightLineIcon } from '@ifrc-go/icons';
 import {
-    AddLineIcon,
-    ChevronRightLineIcon,
-} from '@ifrc-go/icons';
-import {
-    Button,
     Container,
     DateOutput,
     DateOutputProps,
@@ -23,10 +19,7 @@ import {
     Table,
 } from '@ifrc-go/ui';
 import { SortContext } from '@ifrc-go/ui/contexts';
-import {
-    useBooleanState,
-    useTranslation,
-} from '@ifrc-go/ui/hooks';
+import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     createElementColumn,
     createListDisplayColumn,
@@ -47,7 +40,6 @@ import {
 } from '#generated/types/graphql';
 import useFilterState from '#hooks/useFilterState';
 import { DATE_FORMAT } from '#utils/constants';
-import NewSubscriptionModal from '#views/NewSubscriptionModal';
 
 import AlertDataContext from '../AlertDataContext';
 import AlertFilters from '../AlertFilters';
@@ -112,11 +104,6 @@ const DESC = 'DESC';
 export function Component() {
     const strings = useTranslation(i18n);
 
-    const [showSubscriptionModal, {
-        setTrue: setShowSubscriptionModalTrue,
-        setFalse: setShowSubscriptionModalFalse,
-    }] = useBooleanState(false);
-
     const alertFilters = useAlertFilters();
     const {
         activeCountryId,
@@ -125,9 +112,6 @@ export function Component() {
         selectedCategoryTypes,
         startDateFrom,
         startDateTo,
-        selectedUrgencyTypes,
-        selectedCertaintyTypes,
-        selectedSeverityTypes,
     } = useContext(AlertDataContext);
 
     const {
@@ -290,22 +274,6 @@ export function Component() {
         { numAppeals: data?.count ?? '--' },
     );
 
-    const defaultSubscription = useMemo(() => ({
-        filterAlertUrgencies: selectedUrgencyTypes,
-        filterAlertCertainties: selectedCertaintyTypes,
-        filterAlertSeverities: selectedSeverityTypes,
-        filterAlertCategories: selectedCategoryTypes,
-        filterAlertCountry: activeCountryId || '',
-        filterAlertAdmin1s: activeAdmin1Id ? [activeAdmin1Id] : [],
-    }), [
-        selectedUrgencyTypes,
-        selectedSeverityTypes,
-        selectedCertaintyTypes,
-        activeCountryId,
-        activeAdmin1Id,
-        selectedCategoryTypes,
-    ]);
-
     return (
         <Container
             className={styles.alertsTable}
@@ -321,19 +289,6 @@ export function Component() {
             withHeaderBorder
             actions={(
                 <div className={styles.links}>
-                    <Button
-                        className={styles.sources}
-                        onClick={setShowSubscriptionModalTrue}
-                        name={undefined}
-                        variant="tertiary"
-                        actions={(
-                            <AddLineIcon
-                                className={styles.icon}
-                            />
-                        )}
-                    >
-                        {strings.alertNewSubscription}
-                    </Button>
                     <Link
                         className={styles.sources}
                         to="allSourcesFeeds"
@@ -359,13 +314,6 @@ export function Component() {
             )}
             filters={<AlertFilters variant="table" />}
         >
-            {showSubscriptionModal && (
-                <NewSubscriptionModal
-                    onCloseModal={setShowSubscriptionModalFalse}
-                    subscription={defaultSubscription}
-                    onSuccess={undefined}
-                />
-            )}
             <SortContext.Provider value={sortState}>
                 <Table
                     pending={alertInfoLoading}

diff --git a/src/views/Home/i18n.json b/src/views/Home/i18n.json
@@ -5,6 +5,12 @@
         "homeHeading": "IFRC Alert Hub",
         "homeDescription": "IFRC Alert Hub provides global emergency alerts, empowering communities to protect lives and livelihoods.",
         "mapTabTitle": "Map",
-        "tableTabTitle": "Table"
+        "tableTabTitle": "Table",
+        "addSubscription": "Add Subscription to receive real-time alerts ",
+        "addSubscriptionDescription": "With real-time monitoring of potential risks and emergency events, receive timely and accurate alerts.",
+        "useApi": "Use API to rebroadcast CAP alerts",
+        "useApiDescription": "With simple yet powerful API endpoints, you can tailor the alerts to suit your users' needs.",
+        "alertNewSubscription": "Subscribe Alerts ",
+        "alertApiReference": "API Reference"
     }
 }