fix: type related issues

.github/workflows/ci.yml

@@ -71,24 +71,23 @@ jobs:
 
       - name: Css Lint
         run: yarn lint:css
-  # typecheck:
-  #   name: Typecheck
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - uses: actions/checkout@v4
-  #     - uses: actions/setup-node@v4
-  #       with:
-  #         node-version: 20
-  #         cache: 'yarn'
+  typecheck:
+    name: Typecheck
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'yarn'
 
-  #     - name: Install dependencies
-  #       run: yarn install
+      - name: Install dependencies
+        run: yarn install
 
-  #     - name: Typecheck
-  #       run: yarn typecheck
+      - name: Typecheck
+        run: yarn typecheck
   build:
     name: Build
-    # needs: [lint, css-lint, typecheck, test]
     needs: [lint, css-lint, typecheck, test]
     runs-on: ubuntu-latest
     steps:

env.ts

@@ -1,6 +1,7 @@
 import { defineConfig, Schema } from '@julr/vite-plugin-validate-env';
 
+// TODO: Integrate .env for CI and remove optional() call on required fields
 export default defineConfig({
     APP_TITLE: Schema.string.optional(),
-    APP_MAPBOX_ACCESS_TOKEN: Schema.string(),
+    APP_MAPBOX_ACCESS_TOKEN: Schema.string.optional(),
 })

package.json

@@ -26,9 +26,8 @@
         "@sentry/react": "^7.81.1",
         "@togglecorp/fujs": "^2.1.1",
         "@togglecorp/re-map": "^0.1.4",
-        "@turf/bbox": "^6.5.0",
         "graphql": "^16.8.1",
-        "mapbox-gl": "^3.2.0",
+        "mapbox-gl": "^1.13.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.22.3"
@@ -82,4 +81,4 @@
         "vite-tsconfig-paths": "^4.2.2",
         "vitest": "^1.1.0"
     }
-}
+}

src/components/GlobalFooter/styles.module.css

@@ -4,8 +4,8 @@
 
     .content {
         display: flex;
-        gap: var(--go-ui-spacing-2xl);
         flex-wrap: wrap;
+        gap: var(--go-ui-spacing-2xl);
 
         .section {
             display: flex;

src/components/Navbar/i18n.json

@@ -1,7 +1,7 @@
 {
     "namespace": "common",
     "strings": {
-        "headerAppName": "Alert Hub",
+        "headerAppName": "ALERT HUB",
         "headerLogoAltText": "Alert Hub logo",
         "appLogin": "Login",
         "appAbout": "About",

src/components/Navbar/index.tsx

@@ -45,7 +45,7 @@ function Navbar(props: Props) {
                         <Heading
                             level={2}
                         >
-                            ALERT HUB
+                            {strings.headerAppName}
                         </Heading>
                     </Link>
                 </div>
@@ -54,12 +54,14 @@ function Navbar(props: Props) {
                     variant="tertiary"
                 >
                     <LangaugeDropdown />
+                    {/* // FIXME: Add About route */}
                     <Link
                         className={styles.actionItem}
                         to="/"
                     >
                         {strings.appAbout}
                     </Link>
+                    {/* // FIXME: Add Resource route */}
                     <Link
                         className={styles.actionItem}
                         to="/"

src/components/Navbar/styles.module.css

@@ -7,17 +7,17 @@
 
         .top-content {
             display: flex;
-            align-items: center;
-            gap: var(--go-ui-spacing-md) var(--go-ui-spacing-lg);
             flex-wrap: wrap;
+            gap: var(--go-ui-spacing-md) var(--go-ui-spacing-lg);
+            align-items: center;
             padding: var(--go-ui-spacing-md) var(--go-ui-spacing-lg);
 
             .brand {
                 display: flex;
-                align-items: top;
                 flex-grow: 1;
                 flex-wrap: wrap;
                 gap: var(--go-ui-spacing-sm);
+                align-items: top;
 
                 .go-icon {
                     height: var(--go-ui-height-brand-icon);
@@ -32,8 +32,8 @@
 
             .actions {
                 display: flex;
-                align-items: center;
                 flex-wrap: wrap;
+                align-items: center;
 
                 .action-item {
                     text-decoration: none;

src/components/Page/index.tsx

@@ -24,7 +24,8 @@ import useCurrentLanguage from '#hooks/domain/useCurrentLanguage';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
-type TranslationModuleOriginalLanguageEnum = components<'read'>['schemas']['TranslationModuleOriginalLanguageEnum'];
+// TODO use enum field from alert hub api
+type TranslationModuleOriginalLanguageEnum = 'en' | 'es' | 'ar' | 'fr';
 
 interface Props {
     className?: string;

src/declarations/env.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+type ImportMetaEnvAugmented = import('@julr/vite-plugin-validate-env').ImportMetaEnvAugmented<
+  typeof import('../../env').default
+>
+
+interface ImportMetaEnv extends ImportMetaEnvAugmented {
+    // The custom environment variables that are passed through the vite
+    APP_COMMIT_HASH: string;
+    APP_VERSION: string;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}

src/utils/constants.ts

@@ -1,45 +1,9 @@
-export const defaultChartMargin = {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-};
-
-export const defaultChartPadding = {
-    top: 10,
-    right: 10,
-    bottom: 10,
-    left: 10,
-};
-
 // Map
 export const DURATION_MAP_ZOOM = 1000;
 export const DEFAULT_MAP_PADDING = 50;
 
-// Storage
-
-export const KEY_USER_STORAGE = 'user';
-export const KEY_LANGUAGE_STORAGE = 'language';
-
-// Search page
-
-export const KEY_URL_SEARCH = 'keyword';
-export const SEARCH_TEXT_LENGTH_MIN = 3;
-
 // Colors
 
 export const COLOR_WHITE = '#ffffff';
 export const COLOR_TEXT = '#313131';
-export const COLOR_TEXT_ON_DARK = COLOR_WHITE;
-export const COLOR_LIGHT_GREY = '#e0e0e0';
-export const COLOR_DARK_GREY = '#a5a5a5';
-export const COLOR_BLACK = '#000000';
-export const COLOR_LIGHT_YELLOW = '#ffd470';
-export const COLOR_YELLOW = '#ff9e00';
-export const COLOR_BLUE = '#4c5d9b';
-export const COLOR_LIGHT_BLUE = '#c7d3e0';
-export const COLOR_ORANGE = '#ff8000';
-export const COLOR_RED = '#f5333f';
-export const COLOR_DARK_RED = '#730413';
-export const COLOR_PRIMARY_BLUE = '#011e41';
 export const COLOR_PRIMARY_RED = '#f5333f';

src/utils/map.ts

@@ -1,16 +1,11 @@
-import getBbox from '@turf/bbox';
 import type {
     FillLayer,
     Map,
     NavigationControl,
     SymbolLayer,
 } from 'mapbox-gl';
 
-import {
-    COLOR_DARK_GREY,
-    COLOR_LIGHT_GREY,
-} from '#utils/constants';
-
+// TODO: Verify if we are using the ifrc go mapbox api and styles
 export const defaultMapStyle = 'mapbox://styles/go-ifrc/ckrfe16ru4c8718phmckdfjh0';
 type NavControlOptions = NonNullable<ConstructorParameters<typeof NavigationControl>[0]>;
 export const defaultNavControlOptions: NavControlOptions = {
@@ -68,48 +63,6 @@ export function getPointCirclePaint(
     };
 }
 
-export function getPointCircleHaloPaint(
-    color: string,
-    scaleProp: string,
-    maxScaleValue: number,
-): mapboxgl.CirclePaint {
-    // NOTE: setting this value as 2 because there are already stops of 0
-    // and 1
-    const maxScale = Math.max(maxScaleValue, 2);
-
-    return {
-        ...getPointCirclePaint(color),
-        'circle-opacity': 0.4,
-        'circle-radius': [
-            'interpolate',
-            ['linear'],
-            ['zoom'],
-            3, [
-                'interpolate',
-                ['exponential', 1],
-                ['number', ['get', scaleProp]],
-                0,
-                0,
-                1,
-                10,
-                maxScale,
-                15,
-            ],
-            8, [
-                'interpolate',
-                ['exponential', 1],
-                ['number', ['get', scaleProp]],
-                0,
-                0,
-                1,
-                20,
-                maxScale,
-                40,
-            ],
-        ],
-    };
-}
-
 export const defaultTooltipOptions: mapboxgl.PopupOptions = {
     closeButton: false,
     offset: 10,
@@ -155,24 +108,6 @@ export const adminFillLayerOptions: Omit<FillLayer, 'id'> = {
         'fill-color': [
             'case',
             ['boolean', ['feature-state', 'hovered'], false],
-            COLOR_DARK_GREY,
-            COLOR_LIGHT_GREY,
         ],
     },
 };
-
-export function getCountryListBoundingBox(countryList: Country[]) {
-    if (countryList.length < 1) {
-        return undefined;
-    }
-
-    const collection = {
-        type: 'FeatureCollection' as const,
-        features: countryList.map((country) => ({
-            type: 'Feature' as const,
-            geometry: country.bbox,
-        })),
-    };
-
-    return getBbox(collection);
-}

src/views/AlertMap/index.tsx

@@ -41,6 +41,7 @@ function OngoingAlertMap(props: Props) {
             actions={(
                 <Link
                     className={styles.sources}
+                    // FIXME: Add source route
                     to="/"
                 >
                     {strings.mapViewAllSources}

tsconfig.json

@@ -1,6 +1,7 @@
 {
     "compilerOptions": {
         "paths": {
+            "#generated/*": ["./generated/*"],
             "#assets/*": ["./src/assets/*"],
             "#components/*": ["./src/components/*"],
             "#config": ["./src/config"],