Starting to replace local database with API data

package-lock.json

@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}

src/app/components/MapMarkerList.js

@@ -4,14 +4,15 @@ function isRequestedValue(item, renderOptions) {
     (item.name == "officialPluviometer" &&
       renderOptions.oficial.automaticPluviometer) ||
     (item.name == "rain" && renderOptions.citzen.rain) ||
-    (item.name == "river" && renderOptions.citzen.riverFlood) ||
-    (item.name == "flood" && renderOptions.citzen.floodRisk)
+    (item.name == "riverFlood" && renderOptions.citzen.riverFlood) ||
+    (item.name == "floodZones" && renderOptions.citzen.floodRisk)
   );
 }
 
 function MapMarkerList({ markers, renderOptions }) {
   if (!markers) return null;
 
+
   return [...markers.markers].filter(([_, item]) => {
     return isRequestedValue(item, renderOptions);
   });

src/app/components/map/LeafLetMap.js

@@ -79,7 +79,7 @@ async function insertMarker(mapRef, ID, coordinate, icon) {
   // Check if there is no other marker with same ID already in map
   if (!(${ID} in markers)) {
     // Creates marker object
-    markers[${ID}] = L.marker([${coordinate.latitude}, ${coordinate.longitude}], {icon: customIcon, ID: ${ID}});
+    markers[${ID}] = L.marker([${coordinate.latitude}, ${coordinate.longitude}], { ID: ${ID}});
 
     // Add marker to map and bind callback event to its function
     markers[${ID}].addTo(map).on('click', onPopupClick);

src/app/components/map/OpenStreetMap.js

@@ -41,21 +41,10 @@ export default function OpenStreetMap({
   markers,
   clickListener,
   moveEndListener,
+  dataOptionsToShow,
+  setDataOptionsToShow,
   isForm = false,
 }) {
-  const [dataOptionsToShow, setDataOptionsToShow] = useState({
-    oficial: {
-      automaticPluviometer: false,
-      susceptibilityAreas: false,
-    },
-    citzen: {
-      floodRisk: true,
-      pluviometer: true,
-      rain: false,
-      floodZones: true,
-      riverFlood: true,
-    },
-  });
 
   const [mapRef, setMapRef] = useState(null);
   const webviewContent = html_content;

src/app/hooks/useFiltering.js

@@ -0,0 +1,59 @@
+function useFiltering() {
+    const filters = {
+        "citizen":
+            [
+                {
+                    name: "floodZones",
+                    endpoint: "type=FLOODZONES_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=3",
+                    response: null,
+                
+                }, {
+                    name: "rain",
+                    endpoint: "type=RAIN_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1",                    
+                    response: null,
+                },
+                {
+                    name: "riverFlood",
+                    endpoint: "type=RIVERFLOOD_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1",
+                    response: null,
+                },
+                {
+                    name: "pluviometer",
+                    endpoint: "type=PLUVIOMETER_REGISTRATION&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1",
+                    response: null,
+                }
+            ],
+        "oficial":
+            [
+                {
+                    name: "susceptibilityAreas",
+                    endpoint: "type=FLOODZONES_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1",
+                    response: null,
+                },
+                {
+                    name: "automaticPluviometer",
+                    endpoint: "type=PLUVIOMETERS_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1",                    
+                    response: null,
+                }
+            ]
+    }
+
+    return filters;
+}
+
+const endPoint_susceptibilityAreas = () => {
+    return "type=FLOODZONES_OFFICIAL"
+        + "&lat=-9.98132"
+        + "&lon=-67.81544"
+        + "&buffer=5000"
+        + "&limit=1"
+}
+
+const endPoint_automaticPluviometer = () => {
+    return "type=PLUVIOMETERS_OFFICIAL"
+        + "&lat=-9.98132"
+        + "&lon=-67.81544"
+        + "&buffer=5000"
+        + "&limit=1"
+}
+export { endPoint_susceptibilityAreas, endPoint_automaticPluviometer, useFiltering };

src/app/hooks/useFormsAswers.js

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from "react";
+import * as Location from 'expo-location';
+import SocketClient from "../api/Websockets/SocketClient";
+import assets from "../config/assets";
+import PinIntransitavel from "../assets/floodZonesAssets/PinIntransitavel";
+import PinTransitavel from "../assets/floodZonesAssets/PinTransitavel";
+
+function buildMarkersArray(markers, answer) {
+  if (answer.response) {
+    const response = JSON.parse(answer.response).responseData.array_to_json[0];
+    var markerObject = {
+      ID: response.formsanswersid,
+      name: answer.name,
+      address: "",//response.fieldsanswerseventaddress,
+      coordinate: {
+        latitude: response.formsanswerslatitude,
+        longitude: response.formsanswerslongitude,
+      },
+      date: response.fias[0].fieldsanswersdtfilling, //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
+      description: "", //response.fielsanswercomment,
+      image: "",//getMarkerImage(answer.name),
+      title: "", //response.fieldsanswerssituation
+    }
+    markers.set(markerObject.ID, markerObject);
+  }
+
+}
+
+const getFormsAnswers = (dataOptionObject) => {
+  var markers = { markers: new Map() };
+  const answers = (SocketClient(dataOptionObject));
+  answers.citizen.forEach((r) => buildMarkersArray(markers.markers, r));
+
+  console.log(markers);
+
+  return markers;
+
+}
+
+
+
+
+
+
+
+export { getFormsAnswers };