Merge pull request #156 from IFRCGo/feature/subscription-table

Add my subscription page

package.json

@@ -94,4 +94,4 @@
     "vite-tsconfig-paths": "^4.2.2",
     "vitest": "^1.1.0"
   }
-}
+}

src/App/routes/index.tsx

@@ -177,6 +177,18 @@ const pageNotFound = customWrapRoute({
         visibility: 'anything',
     },
 });
+const register = customWrapRoute({
+    parent: rootLayout,
+    path: 'register',
+    component: {
+        render: () => import('#views/Register'),
+        props: {},
+    },
+    context: {
+        title: 'Register',
+        visibility: 'is-not-authenticated',
+    },
+});
 
 const login = customWrapRoute({
     parent: rootLayout,
@@ -218,6 +230,7 @@ const wrappedRoutes = {
     pageNotFound,
     login,
     recoverAccount,
+    register,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

src/components/Navbar/i18n.json

@@ -3,9 +3,10 @@
     "strings": {
         "headerLogoAltText": "Alert Hub logo",
         "appLogin": "Login",
+        "appRegister":"Register",
         "appAbout": "About",
         "appResources": "Resources",
         "headerMenuHome": "Home",
-        "headerMenuMySubscription": "My Subscription"
+        "headerMenuMySubscription": "My Subscriptions"
     }
 }

src/components/Navbar/index.tsx

@@ -1,4 +1,5 @@
 import {
+    Button,
     Heading,
     NavigationTabList,
     PageContainer,
@@ -9,6 +10,7 @@ import { _cs } from '@togglecorp/fujs';
 import goLogo from '#assets/icons/go-logo-2020.svg';
 import Link from '#components/Link';
 import NavigationTab from '#components/NavigationTab';
+import useAuth from '#hooks/useAuth';
 
 import LangaugeDropdown from './LanguageDropdown';
 
@@ -21,6 +23,7 @@ interface Props {
 function Navbar(props: Props) {
     const { className } = props;
     const strings = useTranslation(i18n);
+    const { isAuthenticated } = useAuth();
     return (
         <nav className={_cs(styles.navbar, className)}>
             <PageContainer
@@ -59,12 +62,23 @@ function Navbar(props: Props) {
                     >
                         {strings.appResources}
                     </NavigationTab>
-                    <Link
-                        variant="primary"
-                        to="login"
-                    >
-                        {strings.appLogin}
-                    </Link>
+                    {!isAuthenticated && (
+                        <>
+                            <Button
+                                name={undefined}
+                                variant="primary"
+                                onClick={undefined}
+                            >
+                                {strings.appLogin}
+                            </Button>
+                            <Link
+                                to="register"
+                                variant="primary"
+                            >
+                                {strings.appRegister}
+                            </Link>
+                        </>
+                    )}
                 </NavigationTabList>
             </PageContainer>
             <PageContainer
@@ -84,4 +98,5 @@ function Navbar(props: Props) {
         </nav>
     );
 }
+
 export default Navbar;

src/components/Navbar/styles.module.css

@@ -50,7 +50,6 @@
         }
 
         .menu-item:hover {
-            text-decoration: underline;
             color: var(--go-ui-color-primary-red);
         }
 

src/views/Home/AlertFilters/index.tsx

@@ -55,65 +55,65 @@ const categoryLabelSelector = (category: Category) => category.label;
 const ALERT_ENUMS = gql`
 query AlertEnums {
     enums {
-      AlertInfoCertainty {
-        key
-        label
-      }
-      AlertInfoUrgency {
-        label
-        key
-      }
-      AlertInfoSeverity {
-        key
-        label
-      }
-      AlertInfoCategory {
-        key
-        label
-      }
+        AlertInfoCertainty {
+            key
+            label
+        }
+        AlertInfoUrgency {
+            label
+            key
+        }
+        AlertInfoSeverity {
+            key
+            label
+        }
+        AlertInfoCategory {
+            key
+            label
+        }
     }
 }`;
 
 const ADMIN_LIST = gql`
 query FilteredAdminList($filters:Admin1Filter, $pagination: OffsetPaginationInput) {
     public {
-      id
-      admin1s(filters: $filters, pagination: $pagination) {
-        items {
-          id
-          name
-          countryId
-          alertCount
+        id
+        admin1s(filters: $filters, pagination: $pagination) {
+            items {
+                id
+                name
+                countryId
+                alertCount
+            }
         }
-      }
     }
-  }
+}
 `;
 
 const REGION_LIST = gql`
 query RegionList {
     public {
         id
-      regions {
-        items {
-          id
-          name
-          ifrcGoId
+        regions {
+            items {
+                id
+                name
+                ifrcGoId
+            }
         }
-      }
     }
-  }
+}
 `;
 
 const ALL_COUNTRY_LIST = gql`
 query AllCountryList {
-  public {
-    id
-    allCountries {
-      name
-      id
+    public {
+        id
+        allCountries {
+            name
+            id
+        }
     }
-  }
 }
 `;
 

src/views/Home/AlertsMap/Sidebar/CountryDetail/index.tsx

@@ -36,23 +36,23 @@ import styles from './styles.module.css';
 
 const COUNTRY_DETAIL = gql`
 query CountryDetail($countryId: ID!) {
-  public {
-    id
-    country(pk: $countryId) {
-      id
-      bbox
-      name
-      iso3
-      ifrcGoId
-      alertCount
-      admin1s {
+    public {
         id
-        countryId
-        filteredAlertCount
-        name
-      }
+        country(pk: $countryId) {
+            id
+            bbox
+            name
+            iso3
+            ifrcGoId
+            alertCount
+            admin1s {
+                id
+                countryId
+                filteredAlertCount
+                name
+            }
+        }
     }
-  }
 }
 `;
 

src/views/Home/AlertsMap/i18n.json

@@ -6,6 +6,7 @@
         "ongoingAlertCountries": "Ongoing Alert Countries",
         "backToAlertsLabel": "Back to Alerts",
         "alertViewDetails": "View Details",
-        "alertInfo": "The IFRC AlertHub shows current warnings from official alerting agencies. These warnings have a start time (when the event might happen) and an end time (when it's expected to be over). The IFRC Alert Hub shows warnings that are happening right now (their start time has already passed) but aren't finished yet (their end time hasn't come yet)."
+        "alertInfo": "The IFRC AlertHub shows current warnings from official alerting agencies. These warnings have a start time (when the event might happen) and an end time (when it's expected to be over). The IFRC Alert Hub shows warnings that are happening right now (their start time has already passed) but aren't finished yet (their end time hasn't come yet).",
+        "alertNewSubscription": "New Subscription"
     }
 }

src/views/Home/AlertsMap/index.tsx

@@ -7,12 +7,19 @@ 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 { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    useBooleanState,
+    useTranslation,
+} from '@ifrc-go/ui/hooks';
 import { resolveToString } from '@ifrc-go/ui/utils';
 import {
     isDefined,
@@ -28,6 +35,7 @@ import {
     FilteredCountryListQueryVariables,
 } from '#generated/types/graphql';
 import useFilterState from '#hooks/useFilterState';
+import NewSubscriptionModal from '#views/NewSubscriptionModal';
 
 import AlertDataContext from '../AlertDataContext';
 import AlertFilters from '../AlertFilters';
@@ -77,12 +85,21 @@ type AlertPointProperties = {
 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
@@ -170,6 +187,22 @@ export function Component() {
         [totalAlertCount, activeCountryDetails, activeAdmin1Details, strings],
     );
 
+    const defaultSubscription = useMemo(() => ({
+        id: '',
+        title: '',
+        urgency: selectedUrgencyTypes,
+        severity: selectedSeverityTypes,
+        certainty: selectedCertaintyTypes,
+        country: activeCountryId,
+        admin1: activeAdmin1Id,
+    }), [
+        selectedUrgencyTypes,
+        selectedSeverityTypes,
+        selectedCertaintyTypes,
+        activeCountryId,
+        activeAdmin1Id,
+    ]);
+
     return (
         <Container
             className={styles.alertsMap}
@@ -185,15 +218,30 @@ export function Component() {
             withHeaderBorder
             childrenContainerClassName={styles.mainContent}
             actions={(
-                <Link
-                    className={styles.sources}
-                    to="allSourcesFeeds"
-                    actions={(
-                        <ChevronRightLineIcon className={styles.icon} />
-                    )}
-                >
-                    {strings.mapViewAllSources}
-                </Link>
+                <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"
+                        actions={(
+                            <ChevronRightLineIcon className={styles.icon} />
+                        )}
+                    >
+                        {strings.mapViewAllSources}
+                    </Link>
+                </div>
             )}
             overlayPending
             pending={countryListLoading}
@@ -204,6 +252,12 @@ export function Component() {
             filters={<AlertFilters variant="map" />}
             withGridViewInFilter
         >
+            {showSubscriptionModal && (
+                <NewSubscriptionModal
+                    subscription={defaultSubscription}
+                    onCloseModal={setShowSubscriptionModalFalse}
+                />
+            )}
             <Map
                 className={styles.alertsMap}
                 countriesWithAlert={countriesWithAlert}