fixing issue - markers showing on map

src/App.js

@@ -24,7 +24,8 @@ export default function App() {
   
   const restoreUser = async () => {
     const user = await authStorage.getUser();
-    global.location = await getLocation();
+    global.location ={"lat":-10.0173780726763,
+     "long": -67.8170775249999} // await getLocation();
     if (user) setUser(user);
   };
 

src/app/hooks/useFiltering.js

@@ -6,7 +6,6 @@ function useFiltering(location) {
         "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" +
           `type=FLOODZONES_FORM&lat=-9.9740&lon=-67.8098&buffer=5000&limit=5`
       ),
-      response: null,
     },
     {
       name: "rain",
@@ -14,7 +13,6 @@ function useFiltering(location) {
         "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" +
           `type=RAIN_FORM&lat=-9.9740&lon=-67.8098&buffer=5000&limit=5`
       ),
-      response: null,
     },
     {
       name: "riverFlood",
@@ -22,7 +20,6 @@ function useFiltering(location) {
         "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" +
           `type=RIVERFLOOD_FORM&-9.9740&lon=-67.8098&buffer=5000&limit=5`
       ),
-      response: null,
     },
     {
       name: "pluviometer",
@@ -30,7 +27,6 @@ function useFiltering(location) {
         "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" +
           `type=PLUVIOMETER_REGISTRATION&lat=${location.lat}&lon=${location.long}&buffer=5000&limit=5`
       ),
-      response: null,
     },
     {
       name: "susceptibilityAreas",
@@ -38,7 +34,6 @@ function useFiltering(location) {
         "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" +
           `type=FLOODZONES_FORM&lat=${location.lat}&lon=${location.long}&buffer=5000&limit=5`
       ),
-      response: null,
     },
     {
       name: "automaticPluviometer",
@@ -46,7 +41,6 @@ function useFiltering(location) {
         "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" +
           `type=PLUVIOMETERS_OFFICIAL&lat=${location.lat}&lon=${location.long}&buffer=5000&limit=5`
       ),
-      response: null,
     },
   ];
 

src/app/hooks/useSocketMarkers.js

@@ -1,5 +1,4 @@
 import { useState, useEffect, useReducer, useContext } from "react";
-
 import assets from "../config/assets";
 import PinIntransitavel from "../assets/floodZonesAssets/PinIntransitavel";
 import PinTransitavel from "../assets/floodZonesAssets/PinTransitavel";
@@ -15,6 +14,7 @@ const custom_assets = {
     return assets.rainLevel[key];
   }),
 };
+
 const custom_assets_pin = {
   pluviometer: assets.pluviometer_pin,
   officialPluviometer: assets.officialPluviometer_pin,
@@ -36,6 +36,7 @@ const custom_assets_pin = {
     return assets.rainLevel[key];
   }),
 };
+
 const initialState = { markers: new Map() };
 
 function getImage(name, situation) {
@@ -87,14 +88,11 @@ function buildPolygonsObject(response, name) {
   const arrayCoordinates = JSON.parse(formsanswersgeom)["coordinates"][0];
   var n = Object.keys(arrayCoordinates).length;
 
-  // console.log(arrayCoordinates);
-
   for (let i = 0; i < n; i++) {
     var lat = arrayCoordinates[i][1];
     var lon = arrayCoordinates[i][0];
     coordinate.push([lat, lon]);
   }
-  //  console.log(coordinate);
   var polygonObject = {
     ID: response.formsanswersid,
     name: name,
@@ -115,9 +113,9 @@ function buildMarkerObject(response, name) {
   const r = JSON.parse(response);
   const resposta = r.formsanswersgeom;
   const formsanswersgeom = JSON.parse(resposta).coordinates;
-  
+
   return {
-    ID: 3168, //response.formsanswersid,
+    ID: r.formsanswersid, //response.formsanswersid,
     name: name,
     title: "Titulo", //response.fieldsanswerssituation
     address: "Endereço", //response.fieldsanswerseventaddress,
@@ -141,27 +139,25 @@ function verifyResponse(response, name) {
     if (answer.success == true) {
       const formAnswer = answer.responseData.array_to_json;
 
-      answer.responseData.array_to_json.forEach(
-        (r) => 
-          r.formcode == "FLOODZONES_OFFICIAL"
-           ? markers.push(buildPolygonsObject(r, name))
-           : markers.push(buildMarkerObject(JSON.stringify(r), name))
+      answer.responseData.array_to_json.forEach((r) =>
+        r.formcode == "FLOODZONES_OFFICIAL"
+          ? markers.push(buildPolygonsObject(r, name))
+          : markers.push(buildMarkerObject(JSON.stringify(r), name))
       );
     }
   }
-    //console.log("\n--------------------------------------------\n"+JSON.stringify(markers)+"\n--------------------------------------------\n");
   return markers;
 }
 
 function getFormsAnswers(socketObject, dispatch) {
-  //console.log("\n\n-------------\n"+(socketObject.name +" : " + socketObject.socketUrl.readyState));
-  //const []
+  const [socketResponse, setSocketResponse] = useState();
+
+  socketObject.socketUrl.onmessage = ({ data }) => {
+    setSocketResponse(data);
+  };
   useEffect(() => {
-    socketObject.socketUrl.onmessage = ({ data }) => {
-      //   console.log(data)
-      dispatch({ increment: verifyResponse(data, socketObject.name) });
-    };
-  }, []);
+    dispatch({ increment: verifyResponse(socketResponse, socketObject.name) });
+  }, [socketResponse]);
 }
 
 function reducer(state = initialState, action) {
@@ -169,15 +165,12 @@ function reducer(state = initialState, action) {
     state.markers.set(val.ID, val);
   });
 
-  return {
-    markers: state.markers,
-  };
+  return { markers: state.markers };
 }
+
 export default function useSocketMarkers() {
   const [state, dispatch] = useReducer(reducer, initialState);
   global.formsSockets.forEach((socket) => getFormsAnswers(socket, dispatch));
 
-  // console.log("\n\n========================================================== STATE:\n"+JSON.stringify(state.markers));
-
   return state;
 }

src/app/screens/MapFeedScreen.js

@@ -16,10 +16,8 @@ export default function MapFeedScreen(props) {
 
   const focusChanged = attachFocusToQuery();
   //const [error, setError] = useState(false);
- const markersdb = useMarkers(focusChanged);// (apagar useMarker - não será mais usado)
+ //const markersdb = useMarkers(focusChanged);// (apagar useMarker - não será mais usado)
  
- //console.log(markersdb);
-
   const [dataOptionsToShow, setDataOptionsToShow] = useState({
     oficial: {
       automaticPluviometer: false,
@@ -35,14 +33,6 @@ export default function MapFeedScreen(props) {
   });  
 
   const markers = useSocketMarkers();
-  console.log("\n\n============================================Markers:\n "+JSON.stringify(markers));
-  //console.log(markers);
-  //const markers = getFormsAnswers(dataOptionsToShow, focusChanged);
-  // useEffect(() => {
-  //  setMarkers(getFormsAnswers(dataOptionsToShow, focusChanged, data));
-  // }, [dataOptionsToShow, focusChanged]);
-  //console.log(markers);
-
 
   // useEffect(() => {
   //   loadForms();