Merge pull request #1803 from airqo-platform/staging

move to production
airqo-platform · Jan 14, 2024 · 1773aff · 1773aff
2 parents 08f61b2 + 9c2447d
commit 1773aff
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 81 deletions.
diff --git a/k8s/netmanager/values-prod.yaml b/k8s/netmanager/values-prod.yaml
@@ -1,7 +1,7 @@
 replicaCount: 2
 image:
   repository: eu.gcr.io/airqo-250220/airqo-platform-frontend
-  tag: prod-70433dfc-1704731932
+  tag: prod-08f61b20-1705146189
   pullPolicy: Always
 imagePullSecrets: []
 nameOverride: ''

diff --git a/k8s/netmanager/values-stage.yaml b/k8s/netmanager/values-stage.yaml
@@ -1,7 +1,7 @@
 replicaCount: 2
 image:
   repository: eu.gcr.io/airqo-250220/airqo-stage-platform-frontend
-  tag: stage-9200751c-1704731823
+  tag: stage-b3fad96d-1705261931
   pullPolicy: Always
 imagePullSecrets: []
 nameOverride: ''

diff --git a/netmanager/src/AppRoutes.js b/netmanager/src/AppRoutes.js
@@ -154,7 +154,6 @@ const AppRoutes = ({ auth, logoutUser }) => {
             <PrivateRoute exact path="/sites" component={SiteRegistry} layout={MainLayout} />
             <PrivateRoute exact path="/sites/:id" component={SiteView} layout={MainLayout} />
             <PrivateRoute exact path="/sim" component={SimRegistry} layout={MainLayout} />
-            <PrivateRoute exact path="/heatMap" component={HeatMapOverlay} layout={MainLayout} />
 
             <PrivateRoute exact path="/overview" component={Overview} layout={MainLayout} />
             <PrivateRoute

diff --git a/netmanager/src/config/urls/deviceRegistry.js b/netmanager/src/config/urls/deviceRegistry.js
@@ -61,3 +61,6 @@ export const SEND_DEVICE_HOST_MONEY = `${BASE_DEVICE_REGISTRY_URL_V2}/incentives
 export const GET_TRANSACTION_HISTORY = `${BASE_DEVICE_REGISTRY_URL_V2}/incentives/transactions/payments/hosts`;
 
 export const GET_AIRQLOUDS_SUMMARY = `${BASE_DEVICE_REGISTRY_URL_V2}/devices/airqlouds/summary`;
+
+// new map READINGS
+export const GET_MAP_READING_URI = `${BASE_DEVICE_REGISTRY_URL_V2}/devices/readings/map`;
diff --git a/netmanager/src/views/apis/deviceRegistry.js b/netmanager/src/views/apis/deviceRegistry.js
@@ -19,7 +19,8 @@ import {
   CREATE_DEVICE_HOST,
   UPDATE_DEVICE_HOST,
   SEND_DEVICE_HOST_MONEY,
-  GET_TRANSACTION_HISTORY
+  GET_TRANSACTION_HISTORY,
+  GET_MAP_READING_URI
 } from 'config/urls/deviceRegistry';
 import { DEVICE_MAINTENANCE_LOG_URI } from 'config/urls/deviceMonitoring';
 import { DEVICE_RECENT_FEEDS } from 'config/urls/dataManagement';
@@ -136,7 +137,7 @@ export const deleteDevicePhotos = async (deviceId, urls) => {
 
 export const getEventsApi = async () => {
   return await createAxiosInstance(false)
-    .get(EVENTS)
+    .get(GET_MAP_READING_URI)
     .then((response) => response.data);
 };
 

diff --git a/netmanager/src/views/layouts/common/Sidebar/Sidebar.js b/netmanager/src/views/layouts/common/Sidebar/Sidebar.js
@@ -100,7 +100,7 @@ const allMainPages = [
   },
   {
     title: 'Map',
-    href: '/heatMap',
+    href: '/map',
     icon: <MapIcon />
   },
   {

diff --git a/netmanager/src/views/pages/Map/OverlayMap.js b/netmanager/src/views/pages/Map/OverlayMap.js
@@ -32,6 +32,7 @@ import StreetModeIcon from '@material-ui/icons/Traffic';
 // prettier-ignore
 // eslint-disable-next-line import/no-webpack-loader-syntax
 mapboxgl.workerClass = require("worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker").default;
+mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN;
 
 const markerDetailsPM2_5 = {
   0.0: ['marker-good', 'Good'],
@@ -70,23 +71,19 @@ const markerDetailsMapper = {
 };
 
 const getMarkerDetail = (markerValue, markerKey) => {
-  if (markerValue === null || markerValue === undefined) return ['marker-unknown', 'uncategorised'];
+  if (!markerValue) return ['marker-unknown', 'uncategorised'];
 
   const markerDetails = markerDetailsMapper[markerKey] || markerDetailsPM2_5;
-  let keys = Object.keys(markerDetails);
-  // in-place reverse sorting
-  keys.sort((key1, key2) => -(key1 - key2));
+  const keys = Object.keys(markerDetails).sort((a, b) => b - a);
 
-  for (let i = 0; i < keys.length; i++) {
-    if (markerValue >= keys[i]) {
-      return markerDetails[keys[i]];
+  for (const key of keys) {
+    if (markerValue >= key) {
+      return markerDetails[key];
     }
   }
   return ['marker-unknown', 'uncategorised'];
 };
 
-mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN;
-
 const MapControllerPosition = ({ className, children, position }) => {
   const positions = {
     topLeft: { top: 0, left: 0 },
@@ -388,15 +385,20 @@ export const OverlayMap = ({ center, zoom, heatMapData, monitoringSiteData }) =>
   const [showSensors, setShowSensors] = useState(true);
   const [showCalibratedValues, setShowCalibratedValues] = useState(false);
   const [showHeatMap, setShowHeatMap] = useState(false);
+  const mapContainerRef = useRef(null);
   const initialShowPollutant = {
-    pm2_5: handleLocalStorage.get('pollutant') === 'pm2_5',
-    no2: handleLocalStorage.get('pollutant') === 'no2',
-    pm10: handleLocalStorage.get('pollutant') === 'pm10'
+    pm2_5: false,
+    no2: false,
+    pm10: false
   };
 
-  const [showPollutant, setShowPollutant] = useState(initialShowPollutant);
+  // Set initial values in localStorage if not already present
+  if (!handleLocalStorage.get('pollutant')) {
+    handleLocalStorage.set('pollutant', 'pm2_5');
+  }
 
-  const mapContainerRef = useRef(null);
+  // Use state to keep track of the current pollutant
+  const [showPollutant, setShowPollutant] = useState(initialShowPollutant);
 
   useEffect(() => {
     const pollutant = handleLocalStorage.get('pollutant');
@@ -527,78 +529,61 @@ export const OverlayMap = ({ center, zoom, heatMapData, monitoringSiteData }) =>
   };
 
   const adjustMarkerSize = (zoom, el, pollutantValue) => {
-    let size;
-    if (pollutantValue === undefined || pollutantValue === false) {
-      size = 6;
-    } else {
-      size = zoom <= 5 ? 30 : zoom <= 10 ? 35 : zoom <= 15 ? 35 : 30;
-    }
+    const size = pollutantValue === undefined || pollutantValue === false ? 6 : zoom <= 5 ? 30 : 35;
     el.style.width = `${size}px`;
     el.style.height = `${size}px`;
   };
 
   const createMarker = (feature) => {
     try {
       const [seconds, duration] = getFirstDuration(feature.properties.time);
+
       let pollutantValue = null;
       let markerKey = '';
 
       for (const property in showPollutant) {
-        if (showPollutant[property]) {
-          markerKey = property;
-          pollutantValue = feature.properties[property] && feature.properties[property].value;
-          if (showCalibratedValues) {
-            pollutantValue =
-              feature.properties[property] && feature.properties[property].calibratedValue;
-          }
-          break;
+        if (!showPollutant[property]) continue;
+        markerKey = property;
+        pollutantValue = feature.properties[property]?.value;
+        if (showCalibratedValues) {
+          pollutantValue = feature.properties[property]?.calibratedValue;
         }
+        if (pollutantValue !== null) break;
       }
 
       const [markerClass, desc] = getMarkerDetail(pollutantValue, markerKey);
 
       const el = document.createElement('div');
-      el.className = `marker ${pollutantValue ? markerClass : 'marker-unknown'} `;
-      el.style.display = 'flex';
-      el.style.justifyContent = 'center';
-      el.style.alignItems = 'center';
-      el.style.fontSize = '12px';
-      el.style.padding = '8px';
-      el.style.borderRadius = '50%';
-      el.style.zIndex = '2';
+      el.className = `marker ${markerClass}`;
+      el.style.cssText = `display: flex; justify-content: center; align-items: center; font-size: 12px; padding: 8px; border-radius: 50%; z-index: ${
+        pollutantValue ? '2' : '1'
+      };`;
       el.innerHTML = pollutantValue ? Math.floor(pollutantValue) : '';
 
       adjustMarkerSize(map.getZoom(), el, pollutantValue);
 
-      if (pollutantValue === null || pollutantValue === undefined) {
-        el.style.zIndex = '1';
-      }
-
       if (
-        feature.geometry.coordinates.length >= 2 &&
-        feature.geometry.coordinates[0] &&
-        feature.geometry.coordinates[1]
-      ) {
-        const marker = new mapboxgl.Marker(el)
-          .setLngLat(feature.geometry.coordinates)
-          .setPopup(
-            new mapboxgl.Popup({
-              offset: 25,
-              className: 'map-popup'
-            }).setHTML(
-              MapPopup(feature, showPollutant, pollutantValue, desc, duration, seconds, markerClass)
-            )
+        feature.geometry.coordinates.length < 2 ||
+        !feature.geometry.coordinates[0] ||
+        !feature.geometry.coordinates[1]
+      )
+        return;
+
+      const marker = new mapboxgl.Marker(el)
+        .setLngLat(feature.geometry.coordinates)
+        .setPopup(
+          new mapboxgl.Popup({
+            offset: 25,
+            className: 'map-popup'
+          }).setHTML(
+            MapPopup(feature, showPollutant, pollutantValue, desc, duration, seconds, markerClass)
           )
-          .addTo(map);
-
-        map.on('zoom', function () {
-          adjustMarkerSize(map.getZoom(), el, pollutantValue);
-        });
+        )
+        .addTo(map);
 
-        map.on('idle', function () {
-          adjustMarkerSize(map.getZoom(), el, pollutantValue);
-        });
-      }
+      const adjustMarkerOnEvent = () => adjustMarkerSize(map.getZoom(), el, pollutantValue);
+      map.on('zoom', adjustMarkerOnEvent);
+      map.on('idle', adjustMarkerOnEvent);
     } catch (error) {
       console.error('Error creating marker:', error);
     }
@@ -655,21 +640,20 @@ const getStoredData = () => {
   return { storedData, storedTimeStamp };
 };
 
+const ONE_DAY_IN_MS = 24 * 60 * 60 * 1000;
+
 const MapContainer = () => {
   const dispatch = useDispatch();
   const heatMapData = usePM25HeatMapData();
   const apiData = useEventsMapData();
   const { storedData, storedTimeStamp } = useMemo(getStoredData, []);
   const currentTimeStamp = useMemo(() => new Date().getTime(), []);
-  const oneDayInMilliseconds = 24 * 60 * 60 * 1000;
-
   const [monitoringSiteData, setMonitoringSiteData] = useState({});
 
   const updateLocalStorage = useCallback(
     (data) => {
       try {
-        const dataCopy = { ...data };
-        dataCopy.features = dataCopy.features.slice(0, 100);
+        const dataCopy = { ...data, features: data.features.slice(0, 100) };
         localStorage.setItem('monitoringSiteData', JSON.stringify(dataCopy));
         localStorage.setItem('monitoringSiteDataTimeStamp', currentTimeStamp.toString());
       } catch (error) {
@@ -680,7 +664,7 @@ const MapContainer = () => {
   );
 
   useEffect(() => {
-    if (storedData) {
+    if (storedData && storedData !== 'undefined') {
       try {
         const parsedData = JSON.parse(storedData);
         setMonitoringSiteData(parsedData);
@@ -698,7 +682,7 @@ const MapContainer = () => {
     } else {
       setMonitoringSiteData(apiData);
 
-      if (!storedTimeStamp || currentTimeStamp - storedTimeStamp >= oneDayInMilliseconds) {
+      if (!storedTimeStamp || currentTimeStamp - storedTimeStamp >= ONE_DAY_IN_MS) {
         updateLocalStorage(apiData);
       }
     }
@@ -714,12 +698,14 @@ const MapContainer = () => {
     }
   }, [dispatch]);
 
+  const zoom = window.innerWidth <= 768 ? 2.0 : 2.4;
+
   return (
     <ErrorBoundary>
       <div className="map-new-container">
         <OverlayMap
           center={[22.5600613, 0.8341424]}
-          zoom={window.innerWidth <= 768 ? 2.0 : window.innerWidth <= 1440 ? 2.4 : 2.4}
+          zoom={zoom}
           heatMapData={heatMapData}
           monitoringSiteData={monitoringSiteData}
         />

diff --git a/netmanager/src/views/pages/Settings/components/GenerateToken/GenerateToken.js b/netmanager/src/views/pages/Settings/components/GenerateToken/GenerateToken.js
@@ -81,7 +81,6 @@ const RegisterClient = (props) => {
         user_id: userID
       };
 
-      // Add clientIP to the data if it's provided
       if (clientIP) {
         data.ip_address = clientIP;
       }
@@ -100,6 +99,7 @@ const RegisterClient = (props) => {
         setClientName('');
         setClientIP('');
       } else {
+        onClose();
         dispatch(
           updateMainAlert({
             message: 'Client registration failed',
@@ -110,6 +110,7 @@ const RegisterClient = (props) => {
       }
     } catch (error) {
       console.error(error);
+      onClose();
       dispatch(
         updateMainAlert({
           message: 'Client registration failed',
@@ -320,11 +321,18 @@ const GenerateToken = (props) => {
   }
 
   useEffect(() => {
-    if (!isEmpty(mappedAuth) && mappedAuth.user) {
-      getUserDetails(userID).then((res) => {
-        setClientData(res.users[0].clients);
-      });
-    }
+    const fetchUserDetails = async () => {
+      try {
+        if (!isEmpty(mappedAuth) && mappedAuth.user) {
+          const res = await getUserDetails(userID);
+          setClientData(res.users[0].clients);
+        }
+      } catch (error) {
+        console.error('Error fetching user details:', error);
+      }
+    };
+
+    fetchUserDetails();
   }, [refresh, mappedAuth]);
 
   useEffect(() => {