Add Footer and Map in home page

.github/workflows/ci.yml

@@ -7,6 +7,7 @@ on:
       - 'develop'
 
 env:
+  APP_MAPBOX_ACCESS_TOKEN: ${{ vars.APP_MAPBOX_ACCESS_TOKEN }}
   GITHUB_WORKFLOW: true
 
 jobs:

.gitignore

@@ -6,7 +6,6 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
-ui
 node_modules
 dist
 dist-ssr

env.ts

@@ -2,4 +2,5 @@ import { defineConfig, Schema } from '@julr/vite-plugin-validate-env';
 
 export default defineConfig({
     APP_TITLE: Schema.string.optional(),
+    APP_MAPBOX_ACCESS_TOKEN: Schema.string(),
 })

package.json

@@ -28,17 +28,17 @@
         "@togglecorp/re-map": "^0.1.4",
         "@turf/bbox": "^6.5.0",
         "graphql": "^16.8.1",
-        "mapbox-gl": "^1.13.0",
+        "mapbox-gl": "^3.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.22.3"
     },
     "devDependencies": {
         "@eslint/eslintrc": "^3.0.2",
         "@julr/vite-plugin-validate-env": "^1.0.1",
-        "@types/mapbox-gl": "^1.13.0",
-        "@types/node": "^20.11.30",
-        "@types/react": "^18.2.70",
+        "@types/mapbox-gl": "^3.1.0",
+        "@types/node": "^20.1.3",
+        "@types/react": "^18.0.28",
         "@types/react-dom": "^18.2.22",
         "@types/react-router-dom": "^5.3.3",
         "@typescript-eslint/eslint-plugin": "^7.4.0",

src/App/index.tsx

@@ -2,10 +2,14 @@ import {
     createBrowserRouter,
     RouterProvider,
 } from 'react-router-dom';
+import mapboxgl from 'mapbox-gl';
+
+import { mbtoken } from '#config';
 
 import { unwrappedRoutes } from './routes';
 
 const router = createBrowserRouter(unwrappedRoutes);
+mapboxgl.accessToken = mbtoken;
 
 function App() {
     return (

src/App/routes.tsx

@@ -57,3 +57,7 @@ export const wrappedRoutes = {
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));
+
+export default wrappedRoutes;
+
+export type WrappedRoutes = typeof wrappedRoutes;

src/components/GlobalFooter/i18n.json

@@ -0,0 +1,16 @@
+{
+    "namespace": "common",
+    "strings": {
+        "footerAboutAlertHub":"About Alert Hub",
+        "footerAboutAlertHubDesc":"The aim of IFRC Alert Hub is to provide timely and effective emergency alerts to communities worldwide, empowering them to protect their lives and livelihoods.",
+        "footerFindOutMore":"Find out more",
+        "footerHelpfulLinks":"Helpful links",
+        "footerOpenSourceCode":"Open Source Code",
+        "footerApiDocumentation":"API Documentation",
+        "footerOtherResources":"Other Resources",
+        "footerContactUs":"Contact Us",
+        "footerIFRC":"© IFRC {year} v{appVersion}",
+        "globalFindOut": "Find Out More",
+        "globalHelpfulLinks": "Helpful links"
+    }
+}

src/components/GlobalFooter/index.tsx

@@ -0,0 +1,132 @@
+import { Link } from 'react-router-dom';
+import {
+    Heading,
+    PageContainer,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { resolveToComponent } from '@ifrc-go/ui/utils';
+import { _cs } from '@togglecorp/fujs';
+
+import {
+    appCommitHash,
+    appVersion,
+} from '#config';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+const date = new Date();
+const year = date.getFullYear();
+
+interface Props {
+    className?: string;
+}
+
+function GlobalFooter(props: Props) {
+    const {
+        className,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const copyrightText = resolveToComponent(
+        strings.footerIFRC,
+        {
+            year,
+            appVersion: (
+                <span title={appCommitHash}>
+                    {appVersion}
+                </span>
+            ),
+        },
+    );
+
+    return (
+        <PageContainer
+            className={_cs(styles.footer, className)}
+            contentClassName={styles.content}
+            containerAs="footer"
+        >
+            <div className={styles.section}>
+                <Heading>
+                    {strings.footerAboutAlertHub}
+                </Heading>
+                <div className={styles.description}>
+                    {strings.footerAboutAlertHubDesc}
+                </div>
+                <div className={styles.copyright}>
+                    {copyrightText}
+                </div>
+            </div>
+            <div className={styles.section}>
+                <Heading>
+                    {strings.globalFindOut}
+                </Heading>
+                <div className={styles.subSection}>
+                    <Link
+                        className={styles.footerLink}
+                        to="https://ifrc.org"
+                        target="_blank"
+                    >
+                        ifrc.org
+                    </Link>
+                    <Link
+                        className={styles.footerLink}
+                        to="https://rcrcsims.org"
+                        target="_blank"
+                    >
+                        rcrcsims.org
+                    </Link>
+                    <Link
+                        className={styles.footerLink}
+                        to="https://data.ifrc.org"
+                        target="_blank"
+                    >
+                        data.ifrc.org
+                    </Link>
+                </div>
+            </div>
+            <div className={styles.section}>
+                <Heading>
+                    {strings.globalHelpfulLinks}
+                </Heading>
+                <div className={styles.subSection}>
+                    <Link
+                        className={styles.footerLink}
+                        to="https://github.com/IFRCGo/alert-hub-web-app"
+                        target="_blank"
+                    >
+                        {strings.footerOpenSourceCode}
+                    </Link>
+                    <Link
+                        className={styles.footerLink}
+                        to="https://github.com/IFRC-Alert-Hub/Alert-Hub-Alert-Manager#api-documentation"
+                        target="_blank"
+                    >
+                        {strings.footerApiDocumentation}
+                    </Link>
+                    {/* // FIXME: Add Resource route */}
+                    <Link
+                        className={styles.footerLink}
+                        to="/"
+                        target="_blank"
+                    >
+                        {strings.footerOtherResources}
+                    </Link>
+                </div>
+            </div>
+            <div className={styles.section}>
+                <Heading>
+                    {strings.footerContactUs}
+                </Heading>
+                <Link
+                    className={styles.contactButton}
+                    to="mailto:[email protected]"
+                >
+                    [email protected]
+                </Link>
+            </div>
+        </PageContainer>
+    );
+}
+
+export default GlobalFooter;

src/components/GlobalFooter/styles.module.css

@@ -0,0 +1,53 @@
+.footer {
+    background-color: var(--go-ui-color-primary-gray);
+    color: var(--go-ui-color-white);
+
+    .content {
+        display: flex;
+        gap: var(--go-ui-spacing-2xl);
+        flex-wrap: wrap;
+
+        .section {
+            display: flex;
+            flex-basis: 12rem;
+            flex-direction: column;
+            flex-grow: 1;
+            gap: var(--go-ui-spacing-lg);
+
+            .sub-section {
+                display: flex;
+                flex-direction: column;
+                gap: var(--go-ui-spacing-sm);
+
+                .footer-link {
+                    text-decoration: none;
+                    color: var(--go-ui-color-white);
+                    font-weight: var(--go-ui-font-weight-medium);
+                }
+
+                .footer-link:hover {
+                    text-decoration: underline;
+                    color: var(--go-ui-color-red-hover);
+                }
+            }
+
+            .contact-button {
+                border-radius: var(--go-ui-border-radius-2xl);
+                background-color: var(--go-ui-color-primary-red);
+                padding: var(--go-ui-spacing-2xs) var(--go-ui-spacing-xl);
+                width: fit-content;
+                text-decoration: none;
+                color: var(--go-ui-color-white);
+                font-weight: var(--go-ui-font-weight-medium);
+            }
+
+            .contact-button:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
+    @media print {
+        display: none;
+    }
+}

src/components/Navbar/i18n.json

@@ -5,6 +5,8 @@
         "headerLogoAltText": "Alert Hub logo",
         "appLogin": "Login",
         "appAbout": "About",
-        "appResources": "Resources"
+        "appResources": "Resources",
+        "headerMenuHome": "Home",
+        "headerMenuMySubscription": "My Subscription"
     }
 }

src/components/Navbar/index.tsx

@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom';
 import {
     Button,
+    Heading,
     NavigationTabList,
     PageContainer,
 } from '@ifrc-go/ui';
@@ -32,12 +33,20 @@ function Navbar(props: Props) {
                 contentClassName={styles.topContent}
             >
                 <div className={styles.brand}>
-                    <Link to="home">
+                    <Link
+                        className={styles.alertHubTitle}
+                        to="home"
+                    >
                         <img
                             className={styles.goIcon}
                             src={goLogo}
                             alt={strings.headerLogoAltText}
                         />
+                        <Heading
+                            level={2}
+                        >
+                            ALERT HUB
+                        </Heading>
                     </Link>
                 </div>
                 <NavigationTabList
@@ -66,6 +75,21 @@ function Navbar(props: Props) {
                     </Button>
                 </NavigationTabList>
             </PageContainer>
+            <PageContainer
+                contentClassName={styles.bottom}
+            >
+                <NavigationTabList
+                    className={styles.menuItem}
+                    variant="tertiary"
+                >
+                    <Link
+                        to="/"
+                        className={styles.menuItem}
+                    >
+                        {strings.headerMenuHome}
+                    </Link>
+                </NavigationTabList>
+            </PageContainer>
         </nav>
     );
 }