Merge pull request #40 from IFRCGo/fix/home-route

Fix home route

package.json

@@ -29,6 +29,7 @@
         "@togglecorp/fujs": "^2.1.1",
         "@togglecorp/re-map": "^0.2.0-beta-6",
         "@turf/bbox": "^6.5.0",
+        "@turf/circle": "^6.5.0",
         "graphql": "^16.8.1",
         "mapbox-gl": "^1.13.0",
         "patch-package": "^8.0.0",

patches/@turf+circle+6.5.0.patch

@@ -0,0 +1,17 @@
+diff --git a/node_modules/@turf/circle/package.json b/node_modules/@turf/circle/package.json
+index 9842f2f..6dd2af8 100644
+--- a/node_modules/@turf/circle/package.json
++++ b/node_modules/@turf/circle/package.json
+@@ -29,11 +29,11 @@
+   "exports": {
+     "./package.json": "./package.json",
+     ".": {
++      "types": "./dist/js/index.d.ts",
+       "import": "./dist/es/index.js",
+       "require": "./dist/js/index.js"
+     }
+   },
+-  "types": "dist/js/index.d.ts",
+   "sideEffects": false,
+   "files": [
+     "dist"

src/App/routes/index.tsx

@@ -105,11 +105,10 @@ const alertDetails = myWrapRoute({
     parent: root,
 });
 
-// TODO: rename this route and view name to "AllSources" or just "Sources"
-const viewAllSource = myWrapRoute({
+const allSourcesFeeds = myWrapRoute({
     path: 'sources',
     component: {
-        render: () => import('#views/SourcesList'),
+        render: () => import('#views/AllSourcesFeeds'),
         props: {},
     },
     context: {
@@ -125,7 +124,7 @@ const wrappedRoutes = {
     preferences,
     alertDetails,
     resource,
-    viewAllSource,
+    allSourcesFeeds,
     about,
 };
 

src/components/Navbar/index.tsx

@@ -19,14 +19,11 @@ import styles from './styles.module.css';
 interface Props {
     className?: string;
 }
-
 function Navbar(props: Props) {
     const {
         className,
     } = props;
-
     const strings = useTranslation(i18n);
-
     return (
         <nav className={_cs(styles.navbar, className)}>
             <PageContainer
@@ -91,5 +88,4 @@ function Navbar(props: Props) {
         </nav>
     );
 }
-
 export default Navbar;

src/components/Navbar/styles.module.css

@@ -22,6 +22,7 @@
                 .go-icon {
                     height: var(--go-ui-height-brand-icon);
                 }
+
                 .alert-hub-title {
                     display: flex;
                     align-items: center;
@@ -42,6 +43,17 @@
         gap: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg);
         padding: var(--go-ui-spacing-md) var(--go-ui-spacing-lg);
 
+        .menu-item {
+            text-decoration: none;
+            color: var(--go-ui-color-text);
+            font-weight: var(--go-ui-font-weight-medium);
+        }
+
+        .menu-item:hover {
+            text-decoration: underline;
+            color: var(--go-ui-color-primary-red);
+        }
+
         .search-container {
             flex-basis: 30rem;
             flex-grow: 0.5;

src/utils/map.ts

@@ -5,7 +5,6 @@ import type {
     SymbolLayer,
 } from 'mapbox-gl';
 
-// 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 = {
@@ -17,17 +16,21 @@ export const defaultNavControlPosition: ControlPosition = 'top-right';
 
 export const defaultMapOptions: Omit<mapboxgl.MapboxOptions, 'style' | 'container'> = {
     logoPosition: 'bottom-left' as const,
-    zoom: 1,
-    minZoom: 0,
+    zoom: 1.5,
+    minZoom: 1,
     maxZoom: 18,
     scrollZoom: false,
     pitchWithRotate: false,
     dragRotate: false,
     renderWorldCopies: true,
     attributionControl: false,
     preserveDrawingBuffer: true,
-    // NOTE: Sets the initial center coordinates of the map.
-    center: [34, 39],
+    // interactive: false,
+};
+
+export const pointColorMap: {
+  [key: number]: string;
+} = {
 };
 
 const DEFAULT_CIRCLE_SIZE = 'medium';
@@ -64,6 +67,48 @@ 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,