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

Add my subscription page

src/App/routes/index.tsx

@@ -57,6 +57,20 @@ const homeLayout = customWrapRoute({
     },
 });
 
+const mySubscription = customWrapRoute({
+    parent: rootLayout,
+    path: 'subscriptions',
+    component: {
+        render: () => import('#views/MySubscription'),
+        props: {},
+    },
+    context: {
+        title: 'My Subscriptions',
+        // TODO: Change visibility after login feature
+        visibility: 'anything',
+    },
+});
+
 const homeIndex = customWrapRoute({
     parent: homeLayout,
     index: true,
@@ -177,6 +191,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 +244,8 @@ const wrappedRoutes = {
     pageNotFound,
     login,
     recoverAccount,
+    mySubscription,
+    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

@@ -9,6 +9,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 +22,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 +61,22 @@ function Navbar(props: Props) {
                     >
                         {strings.appResources}
                     </NavigationTab>
-                    <Link
-                        variant="primary"
-                        to="login"
-                    >
-                        {strings.appLogin}
-                    </Link>
+                    {!isAuthenticated && (
+                        <>
+                            <Link
+                                variant="primary"
+                                to="login"
+                            >
+                                {strings.appLogin}
+                            </Link>
+                            <Link
+                                to="register"
+                                variant="primary"
+                            >
+                                {strings.appRegister}
+                            </Link>
+                        </>
+                    )}
                 </NavigationTabList>
             </PageContainer>
             <PageContainer
@@ -79,9 +91,15 @@ function Navbar(props: Props) {
                     >
                         {strings.headerMenuHome}
                     </NavigationTab>
+                    <NavigationTab
+                        to="mySubscription"
+                    >
+                        {strings.headerMenuMySubscription}
+                    </NavigationTab>
                 </NavigationTabList>
             </PageContainer>
         </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"
     }
 }