Add Tab for Map and Table

package.json

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

src/App/index.tsx

@@ -5,15 +5,26 @@ import {
 import mapboxgl from 'mapbox-gl';
 
 import { mbtoken } from '#config';
+import RouteContext from '#contexts/route';
 
-import { unwrappedRoutes } from './routes';
+import {
+    unwrappedRoutes,
+    wrappedRoutes,
+} from './routes';
 
 const router = createBrowserRouter(unwrappedRoutes);
-mapboxgl.accessToken = mbtoken;
-
+mapboxgl.accessToken = mbtoken || '';
+mapboxgl.setRTLTextPlugin(
+    'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
+    // eslint-disable-next-line no-console
+    (err) => { console.error(err); },
+    true,
+);
 function App() {
     return (
-        <RouterProvider router={router} />
+        <RouteContext.Provider value={wrappedRoutes}>
+            <RouterProvider router={router} />
+        </RouteContext.Provider>
     );
 }
 

src/App/routes.tsx

@@ -50,10 +50,28 @@ const preferences = myWrapRoute({
     parent: root,
 });
 
+const map = myWrapRoute({
+    title: '',
+    path: 'map',
+    component: () => import('#views/Home'),
+    componentProps: {},
+    parent: root,
+});
+
+const table = myWrapRoute({
+    title: '',
+    path: 'table',
+    component: () => import('#views/Home'),
+    componentProps: {},
+    parent: root,
+});
+
 export const wrappedRoutes = {
     root,
     home,
     preferences,
+    map,
+    table,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

src/contexts/domain.tsx

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+const DomainContext = createContext({
+    // eslint-disable-next-line no-console
+    register: () => { console.warn('DomainContext::register called before it was initialized'); },
+    // eslint-disable-next-line no-console
+    invalidate: () => { console.warn('DomainContext::invalidate called before it was initialized'); },
+});
+
+export default DomainContext;

src/contexts/route.tsx

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+import type { WrappedRoutes } from '../App/routes';
+
+const RouteContext = createContext<WrappedRoutes>(
+    // NOTE: we will make sure the route information is passed
+    {} as WrappedRoutes,
+);
+
+export default RouteContext;

src/contexts/user.tsx

@@ -0,0 +1,38 @@
+import { createContext } from 'react';
+
+export interface UserAuth {
+    id: number;
+    // FIXME: why do we not use displayName for other users?
+    displayName: string;
+    token: string;
+    expires: string;
+
+    username: string;
+    firstName: string | undefined;
+    lastName: string | undefined;
+}
+
+export interface UserContextProps {
+    userAuth: UserAuth | undefined,
+    setUserAuth: (userDetails: UserAuth) => void,
+    hydrateUserAuth: () => void;
+    removeUserAuth: () => void;
+}
+
+const UserContext = createContext<UserContextProps>({
+    setUserAuth: () => {
+        // eslint-disable-next-line no-console
+        console.warn('UserContext::setUser called without provider');
+    },
+    hydrateUserAuth: () => {
+        // eslint-disable-next-line no-console
+        console.warn('UserContext::hydrateUser called without provider');
+    },
+    removeUserAuth: () => {
+        // eslint-disable-next-line no-console
+        console.warn('UserContext::removeUser called without provider');
+    },
+    userAuth: undefined,
+});
+
+export default UserContext;

src/views/AlertMap/index.tsx

@@ -15,6 +15,7 @@
     DURATION_MAP_ZOOM,
 } from '#utils/constants';
 import { adminFillLayerOptions } from '#utils/map';
+import AlertTab from '#views/AlertTab';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
@@ -24,7 +25,7 @@
     bbox: LngLatBoundsLike | undefined;
 }
 
-function OngoingAlertMap(props: Props) {
+export function Component(props: Props) {
     const {
         className,
         bbox,
@@ -47,6 +48,7 @@
                 </Link>
             )}
         >
+            <AlertTab />
             <BaseMap
                 baseLayers={(
                     <MapLayer
@@ -69,4 +71,4 @@
     );
 }
 
-export default OngoingAlertMap;
+export default Component;

src/views/AlertTab/i18n.json

@@ -0,0 +1,8 @@
+{
+    "namespace": "AlertTab",
+    "strings": {
+        "ongoingAlertMapTabTitle": "Map",
+        "ongoingAlertTableTabTitle": "Table"
+    }
+
+}

src/views/AlertTab/index.tsx

@@ -0,0 +1,43 @@
+import {
+    useCallback,
+    useState,
+} from 'react';
+import {
+    Tab,
+    TabList,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type TabKeys = 'map' | 'table';
+
+export function AlertTab() {
+    const strings = useTranslation(i18n);
+    const [activeTab, setActiveTab] = useState<TabKeys>('map');
+
+    const handleTabChange = useCallback((newTab: TabKeys) => {
+        setActiveTab(newTab);
+    }, []);
+
+    return (
+        <TabList className={styles.tabList}>
+            <Tab
+                value={activeTab}
+                name="map"
+                onChange={() => handleTabChange('map')}
+            >
+                {strings.ongoingAlertMapTabTitle}
+            </Tab>
+            <Tab
+                value={activeTab}
+                name="table"
+                onChange={() => handleTabChange('table')}
+            >
+                {strings.ongoingAlertTableTabTitle}
+            </Tab>
+        </TabList>
+    );
+}
+export default AlertTab;

src/views/AlertTab/styles.module.css

@@ -0,0 +1,4 @@
+.tabList {
+    display: flex;
+    justify-content: flex-start;
+}