working on map functionality

platform/src/common/components/Map/AirQoMap.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
 import mapboxgl from 'mapbox-gl';
 import LayerIcon from '@/icons/map/layerIcon';
 import RefreshIcon from '@/icons/map/refreshIcon';
@@ -18,6 +19,20 @@ const AirQoMap = ({
   const [mapStyle, setMapStyle] = useState('mapbox://styles/mapbox/streets-v11');
   const [isOpen, setIsOpen] = useState(false);
   const [refresh, setRefresh] = useState(false);
+  const urls = new URL(window.location.href);
+  const urlParams = new URLSearchParams(urls.search);
+  const gridData = useSelector((state) => state.grids.gridLocationDetails);
+  let filteredGridsData = {};
+
+  if (gridData) {
+    filteredGridsData = {
+      centers: gridData.grids[0].centers,
+      sites: gridData.grids[0].sites,
+      _id: gridData.grids[0]._id,
+    };
+  }
+
+  console.log(filteredGridsData);
 
   const mapStyles = [
     { url: 'mapbox://styles/mapbox/streets-v11', name: 'Streets' },
@@ -29,13 +44,18 @@ const AirQoMap = ({
   ];
 
   useEffect(() => {
+    // this will capture the lat, lng and zoom from the URL
+    const lat = urlParams.get('lat');
+    const lng = urlParams.get('lng');
+    const zm = urlParams.get('zm');
+
     mapboxgl.accessToken = mapboxApiAccessToken;
 
     const map = new mapboxgl.Map({
       container: mapContainerRef.current,
       style: mapStyle,
-      center: [longitude, latitude],
-      zoom: zoom,
+      center: [lng || longitude, lat || latitude],
+      zoom: zm || zoom,
     });
 
     mapRef.current = map;

platform/src/core/apis/DeviceRegistry.js

@@ -1,5 +1,11 @@
 import createAxiosInstance from './axiosConfig';
-import { SITES_URL, ANALYTICS_URL, GRIDS_URL, DEVICES } from '../urls/deviceRegistry';
+import {
+  SITES_URL,
+  ANALYTICS_URL,
+  GRIDS_URL,
+  DEVICES,
+  GRID_LOCATIONS_URL,
+} from '../urls/deviceRegistry';
 
 // Get grid locations
 export const getAllGridLocationsApi = async () => {
@@ -11,6 +17,16 @@ export const getAllGridLocationsApi = async () => {
   }
 };
 
+// Get grid location details
+export const getGridLocationDetails = async (gridID) => {
+  try {
+    const response = await createAxiosInstance().get(`${GRID_LOCATIONS_URL}/${gridID}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
 // Get Sites Summary
 export const getSiteSummaryDetails = async () => {
   try {

platform/src/core/urls/deviceRegistry.js

@@ -7,6 +7,8 @@ export const DEVICES = `${BASE_DEVICE_REGISTRY_URL}/devices`;
 
 export const GRIDS_URL = `${BASE_DEVICE_REGISTRY_URL}/devices/grids/summary`;
 
+export const GRID_LOCATIONS_URL = `${BASE_DEVICE_REGISTRY_URL}/devices/grids`;
+
 export const SITES_URL = `${BASE_DEVICE_REGISTRY_URL}/devices/sites`;
 
 export const ANALYTICS_URL = `${BASE_DEVICE_REGISTRY_URL}/analytics/dashboard/chart/d3/data`;

platform/src/lib/store/services/deviceRegistry/GridsSlice.js

@@ -1,14 +1,24 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
-import { getAllGridLocationsApi, getSiteSummaryDetails } from '@/core/apis/DeviceRegistry';
+import {
+  getAllGridLocationsApi,
+  getSiteSummaryDetails,
+  getGridLocationDetails,
+} from '@/core/apis/DeviceRegistry';
 
 const initialState = {
+  gridLocationDetails: {},
   gridLocations: [],
   sitesSummary: [],
   success: false,
   errors: null,
   selectedLocations: [],
 };
 
+export const getGridLocation = createAsyncThunk('/get/grid', async (gridID) => {
+  const response = await getGridLocationDetails(gridID);
+  return response;
+});
+
 export const getAllGridLocations = createAsyncThunk('/get/grids', async () => {
   const response = await getAllGridLocationsApi();
   return response;
@@ -50,6 +60,17 @@ export const gridsSlice = createSlice({
       .addCase(getSitesSummary.rejected, (state, action) => {
         state.errors = action.payload;
         state.success = false;
+      })
+      .addCase(getGridLocation.fulfilled, (state, action) => {
+        state.gridLocationDetails = action.payload;
+        state.success = action.payload.success;
+      })
+      .addCase(getGridLocation.pending, (state) => {
+        state.success = false;
+      })
+      .addCase(getGridLocation.rejected, (state, action) => {
+        state.errors = action.payload;
+        state.success = false;
       });
   },
 });

platform/src/pages/map/index.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 import Layout from '@/components/Layout';
 import CloseIcon from '@/icons/close_icon';
 import LocationIcon from '@/icons/LocationIcon';
@@ -9,6 +10,11 @@ import HomeIcon from '@/icons/map/homeIcon';
 import { useRouter } from 'next/router';
 import { AirQualityLegend } from '@/components/Map/components/Legend';
 import allCountries from '@/components/Map/components/countries';
+import {
+  clearGridLocationDetails,
+  getGridLocation,
+  getAllGridLocations,
+} from '@/lib/store/services/deviceRegistry/GridsSlice';
 
 const MAP_ACCESS_TOKEN = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN;
 
@@ -106,11 +112,18 @@ const CountryList = ({ selectedCountry, setSelectedCountry }) => (
 );
 
 const index = () => {
+  const dispatch = useDispatch();
   const router = useRouter();
-  const [location, setLocation] = useState();
   const [showSideBar, setShowSideBar] = useState(true);
   const [selectedTab, setSelectedTab] = useState('locations');
   const [selectedCountry, setSelectedCountry] = useState(null);
+  const gridsData = useSelector((state) => state.grids.gridLocations);
+
+  useEffect(() => {
+    if (gridsData.length === 0) {
+      dispatch(getAllGridLocations());
+    }
+  }, []);
 
   useEffect(() => {
     const handleResize = () => {
@@ -131,6 +144,12 @@ const index = () => {
     return () => window.removeEventListener('resize', handleResize);
   }, [router.pathname]);
 
+  const filteredGrids = gridsData.map((grid) => ({
+    _id: grid._id,
+    admin_level: grid.admin_level,
+    long_name: grid.long_name,
+  }));
+
   const handleHomeClick = () => {
     router.push('/Home');
   };
@@ -139,38 +158,10 @@ const index = () => {
     setSelectedTab(tab);
   };
 
-  const handleLocationSelect = () => {
-    setLocation();
+  const handleLocationSelect = (gridID) => {
+    dispatch(getGridLocation(gridID));
   };
 
-  const locations = [
-    {
-      id: 1,
-      name: 'Kampala',
-      country: 'Central, Uganda',
-    },
-    {
-      id: 2,
-      name: 'Nairobi',
-      country: 'Central, Kenya',
-    },
-    {
-      id: 3,
-      name: 'kiambu',
-      country: 'Eastern, Kenya',
-    },
-    {
-      id: 4,
-      name: 'Kitgum',
-      country: 'Northern, Uganda',
-    },
-    {
-      id: 5,
-      name: 'Kigaali',
-      country: 'Central, Rwanda',
-    },
-  ];
-
   return (
     <Layout noTopNav={false}>
       <div className='relative'>
@@ -204,25 +195,25 @@ const index = () => {
                     setSelectedCountry={setSelectedCountry}
                   />
                 </div>
-                <div className='space-y-2'>
+                <div className='space-y-2 max-h-[445px] overflow-y-scroll'>
                   <label className='font-medium text-gray-600 text-sm'>Suggestions</label>
                   <hr />
-                  {locations.map((location) => (
+                  {filteredGrids.map((grid) => (
                     <div
-                      key={location.id}
+                      key={grid._id}
                       className='flex flex-row justify-start items-center mb-0.5 text-sm w-full hover:cursor-pointer hover:bg-blue-100 p-2 rounded-lg'
                       onClick={() => {
-                        handleLocationSelect();
+                        handleLocationSelect(grid._id);
                       }}>
                       <div className='p-2 rounded-full bg-gray-100'>
                         <LocationIcon />
                       </div>
                       <div className='ml-3 flex flex-col item-start border-b w-full'>
                         <span className='font-normal text-black capitalize text-lg'>
-                          {location.name}
+                          {grid.long_name}
                         </span>
                         <span className='font-normal text-gray-500 capitalize text-sm mb-2'>
-                          {location.country}
+                          {grid.admin_level}
                         </span>
                       </div>
                     </div>