trying to fix issue - markers are not showing on map

src/app/api/Websockets/SocketClient.js

@@ -1,5 +1,15 @@
-import { useEffect, useState } from 'react';
-import { useFiltering } from '../../hooks/useFiltering';
+import { useEffect, useState } from "react";
+import { useFiltering } from "../../hooks/useFiltering";
+
+function createSocketObject(data, validos, response) {
+  //console.log("criando valuidos");
+  var socketObject = {
+    name: data.name,
+    socket: response,
+  };
+  validos.push(socketObject);
+  //  console.log(validos);
+}
 
 function isRequestedValue(item, renderOptions) {
   if (
@@ -7,39 +17,55 @@ function isRequestedValue(item, renderOptions) {
     (item.name == "automaticPluviometer" &&
       renderOptions.oficial.automaticPluviometer) ||
     (item.name == "rain" && renderOptions.citzen.rain) ||
-    (item.name == "riverFlood" && renderOptions.citzen.riverFlood ) ||
+    (item.name == "riverFlood" && renderOptions.citzen.riverFlood) ||
     (item.name == "floodZones" && renderOptions.citzen.floodRisk) ||
-    (item.name == "susceptibilityAreas" && renderOptions.oficial.susceptibilityAreas)
+    (item.name == "susceptibilityAreas" &&
+      renderOptions.oficial.susceptibilityAreas)
   ) {
     return true;
-
   }
 }
 
-function verify_existingSockets(formType, renderOptions) {
+function verify_existingSockets(formType, renderOptions, validos) {
   if (formType.response == null && isRequestedValue(formType, renderOptions)) {
-    console.log("Criou socket: "+formType.name);
-    const socket = new WebSocket("wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + formType.endpoint);
-
-    socket.onmessage = ({ data }) => {
-      formType.response = data;
-    }
+    //console.log("Criou socket: " + formType.name);
+    const socket = new WebSocket(
+      "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" +
+        formType.endpoint
+    );
+    formType.socketUrl = socket;
+    createSocketObject(formType, validos, socket);
+    return socket;
+  } else {
+    return null;
   }
- /* else {
-    console.log("\nresposta preenchida");
-  }*/
 }
 
+export default function SocketClient(dataOptionObject, focusChanged) {
+  const [data, setData] = useState(useFiltering().forms);
+  var validos = [];
+  const socket = verify_existingSockets(data[1], dataOptionObject, validos);  
+  const [dados, setDado] = useState();
 
-export default function SocketClient(dataOptionObject, focusChanged, data) {
-  
-
- // useEffect(() => {
-    data.map((e) => verify_existingSockets(e, dataOptionObject));
-
-//  }, []);
-  console.log("data socket client: "+ JSON.stringify(data));
-  return data;
-};
 
+  useEffect(() => {
+    console.log(dados);
+    //  data.map((e) => verify_existingSockets(e, dataOptionObject, validos));
+    if (socket && dados != 'undefined') {
+    console.log("ESTÁ PASSANDO AQUI!!");
+      data[1].socketUrl.onmessage = ({ data }) => {
+       // data[1].response = data
+        setDado(data);
+        //   console.log("pegou espostas");
+      };
+    } else {
+      setDado(null);
+    }
 
+    //console.log(dados);
+  }, [dataOptionObject, focusChanged]);
+  return dados;
+  //
+  //console.log("data socket client: "+ JSON.stringify(data));
+  // return data.response;
+}

src/app/components/MapMarkerList.js

@@ -15,13 +15,10 @@ function isRequestedValue(item, renderOptions) {
 function MapMarkerList({ markers, renderOptions }) {
   if (!markers) return null;
 
-  const [selectedMarkers, _] = useState(new Map());
-  markers.markers.forEach((item,key) => {
-    if (isRequestedValue(item, renderOptions))
-      selectedMarkers.set(key, item);
-  })
 
-  return selectedMarkers
+  return [...markers.markers].filter(([_, item]) => {
+    return isRequestedValue(item, renderOptions);
+  });
 }
 
 export { MapMarkerList };

src/app/components/map/OpenStreetMap.js

@@ -65,21 +65,24 @@ export default function OpenStreetMap({
   //     insertMarker(mapRef, val.ID, val.coordinate, val.image);
   //   });
 
-  useEffect(() => {
-    if (markersList && mapRef) {
-      deleteAllMarkers(mapRef);
+  useEffect(() => {if (markersList && mapRef) {
+    deleteAllMarkers(mapRef);
+  // console.log("MARKERLIST: "+ markersList);
+
+    notEmpy(markersList) &&
+      markersList.forEach((val, k) => {
+     //     console.log(val[1].name);
+        if (val[1].name == "susceptibilityAreas") {
+        //  console.log("floodzones")
+          insertPolygon(mapRef, val[1].ID, val[1].coordinate);
+        }
+        else {
+          insertMarker(mapRef, val[1].ID, val[1].coordinate, val[1].image);
+        }
+      });
+  }
+}, [markersList, dataOptionsToShow]);
 
-      notEmpy(markersList) &&
-        markersList.forEach((val, k) => {
-          if (val.name == "susceptibilityAreas") {
-            insertPolygon(mapRef, val.ID, val.coordinate);
-          }
-          else {
-            insertMarker(mapRef, val.ID, val.coordinate, val.image);
-          }
-        });
-    }
-  }, [markersList, dataOptionsToShow]);
 
   return (
     <View flex={1}>

src/app/config/globals.js

@@ -1,6 +1,7 @@
 // FIXME: convert this to Context kkkkkkk
 global.userDataBase = undefined;
 global.location = undefined;
+global.formsSockets = undefined;
 //Endereço do evento
 //global.eventAddress =  " ";
 //global.eventCoordinates = undefined;

src/app/hooks/useFiltering.js

@@ -1,41 +1,56 @@
-function useFiltering() {
-    const filters = {
-        "forms": [
-            {
-                name: "floodZones",
-                endpoint: "type=FLOODZONES_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
-                response: null,
+function useFiltering(location) {
+  const filters = [
+    {
+      name: "floodZones",
+      socketUrl: new WebSocket(
+        "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",
+      socketUrl: new WebSocket(
+        "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",
+      socketUrl: new WebSocket(
+        "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",
+      socketUrl: new WebSocket(
+        "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",
+      socketUrl: new WebSocket(
+        "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",
+      socketUrl: new WebSocket(
+        "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" +
+          `type=PLUVIOMETERS_OFFICIAL&lat=${location.lat}&lon=${location.long}&buffer=5000&limit=5`
+      ),
+      response: null,
+    },
+  ];
 
-            }, {
-                name: "rain",
-                endpoint: "type=RAIN_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
-                response: null,
-            },
-            {
-                name: "riverFlood",
-                endpoint: "type=RIVERFLOOD_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
-                response: null,
-            },
-            {
-                name: "pluviometer",
-                endpoint: "type=PLUVIOMETER_REGISTRATION&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
-                response: null,
-            },
-            {
-                name: "susceptibilityAreas",
-                endpoint: "type=FLOODZONES_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
-                response: null,
-            },
-            {
-                name: "automaticPluviometer",
-                endpoint: "type=PLUVIOMETERS_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
-                response: null,
-            }
-        ]
-
-    }
-
-    return filters;
+  return filters;
 }
 
 export { useFiltering };

src/app/hooks/useFormsAswers.js

@@ -1,11 +1,21 @@
 import React, { useEffect, useState } from "react";
-import * as Location from 'expo-location';
+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";
 
-
+const custom_assets = {
+  pluviometer: assets.pluviometer,
+  officialPluviometer: assets.officialPluviometer,
+  floodZones: assets.floodZones,
+  riverLevel: ["low", "normal", "high", "flooding"].map((key) => {
+    return assets.riverLevel[key];
+  }),
+  rainLevel: ["rain_0_5", "rain_1_5", "rain_2_5", "rain_3_5"].map((key) => {
+    return assets.rainLevel[key];
+  }),
+};
 const custom_assets_pin = {
   pluviometer: assets.pluviometer_pin,
   officialPluviometer: assets.officialPluviometer_pin,
@@ -74,47 +84,55 @@ function getImage(name, situation) {
 function buildPolygonsObject(markers, response, name) {
   var coordinate = [];
   var formsanswersgeom = response.formsanswersgeom;
-  const arrayCoordinates = (JSON.parse(formsanswersgeom)["coordinates"][0]);
+  const arrayCoordinates = JSON.parse(formsanswersgeom)["coordinates"][0];
   var n = Object.keys(arrayCoordinates).length;
 
- // console.log(arrayCoordinates);
+  // 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);
+  //  console.log(coordinate);
   var polygonObject = {
     ID: response.formsanswersid,
     name: name,
-     title: "Titulo", //response.fieldsanswerssituation
-     address: "Endereço",//response.fieldsanswerseventaddress,
+    title: "Titulo", //response.fieldsanswerssituation
+    address: "Endereço", //response.fieldsanswerseventaddress,
     coordinate: { coordinate },
-     date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
+    date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
     description: "comentário", //response.fielsanswercomment,
-    image: "",//getMarkerImage(answer.name),
-  }
+    logo: custom_assets.pluviometer,
+    pictures: null,
+    image: "", //getMarkerImage(answer.name),
+  };
 
   markers.set(polygonObject.ID, polygonObject);
 }
 
 function buildMarkerObject(markers, response, name) {
-  const formsanswersgeom = JSON.parse(response.formsanswersgeom)["coordinates"];
+  //console.log(JSON.parse(response).responseData);
+  const resposta = JSON.parse(response).responseData.array_to_json[1].formsanswersgeom;
+//  console.log("\n\nresposta "+ (resposta.formsanswersid));
+  const formsanswersgeom = JSON.parse(resposta).coordinates;
+ // console.log("\n\n ====================================\n"+JSON.stringify(formsanswersgeom));
 
   var markerObject = {
-    ID: response.formsanswersid,
+    ID: 3168,//response.formsanswersid,
     name: name,
     title: "Titulo", //response.fieldsanswerssituation
-    address: "Endereço",//response.fieldsanswerseventaddress,
+    address: "Endereço", //response.fieldsanswerseventaddress,
     coordinate: {
       latitude: formsanswersgeom[1],
-      longitude: formsanswersgeom[0],
+      longitude:formsanswersgeom[0],
     },
     date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
     description: "comentário", //response.fielsanswercomment,
-    image: getImage(name, "situação"),//getMarkerImage(answer.name),
-  }
+    logo: custom_assets.pluviometer,
+    pictures: null,
+    image: getImage(name, "situação"), //getMarkerImage(answer.name),
+  };
 
   markers.set(markerObject.ID, markerObject);
 
@@ -122,30 +140,24 @@ function buildMarkerObject(markers, response, name) {
 
 function verifyResponse(markers, data) {
   // console.log(data.response);
-  if (data.response != null) {
-    const response = JSON.parse(data.response).responseData.array_to_json;
-    response.forEach((r) => r.formcode == "FLOODZONES_OFFICIAL" ? buildPolygonsObject(markers.markers, r, data.name) : buildMarkerObject(markers.markers, r, data.name));
-
+  if (data) {
+    // const response = JSON.parse(data).responseData.array_to_json;
+    //  response.forEach((r) => r.formcode == "FLOODZONES_OFFICIAL" ? buildPolygonsObject(markers.markers, r, "rain") :
+    buildMarkerObject(markers.markers, data, "rain");
   }
-
 }
 
-const getFormsAnswers = (dataOptionObject, focusChanged, data) => {
+const getFormsAnswers = (dataOptionObject, focusChanged) => {
   var markers = { markers: new Map() };
-  const answers = SocketClient(dataOptionObject, focusChanged, data);
+  const answers = SocketClient(dataOptionObject, focusChanged);
 
-  // console.log("\n\nAnswers: " + JSON.stringify(answers));
-
-  answers.forEach((r) => verifyResponse(markers, r));//buildMarkerObject(markers.markers, r));
- // console.log("\n\nMarkers: " + JSON.stringify(markers));
+  //answers.forEach((r) =>
+  if (answers) {
+   // console.log("\n\nAnswers: " + answers);
+    verifyResponse(markers, answers); //buildMarkerObject(markers.markers, r));
+    //  return answers;
+  }
   return markers;
-
-}
-
-
-
-
-
-
+};
 
 export { getFormsAnswers };

src/app/hooks/useSocketMarkers.js

@@ -0,0 +1,183 @@
+import { useState, useEffect, useReducer, useContext } from "react";
+
+import assets from "../config/assets";
+import PinIntransitavel from "../assets/floodZonesAssets/PinIntransitavel";
+import PinTransitavel from "../assets/floodZonesAssets/PinTransitavel";
+
+const custom_assets = {
+  pluviometer: assets.pluviometer,
+  officialPluviometer: assets.officialPluviometer,
+  floodZones: assets.floodZones,
+  riverLevel: ["low", "normal", "high", "flooding"].map((key) => {
+    return assets.riverLevel[key];
+  }),
+  rainLevel: ["rain_0_5", "rain_1_5", "rain_2_5", "rain_3_5"].map((key) => {
+    return assets.rainLevel[key];
+  }),
+};
+const custom_assets_pin = {
+  pluviometer: assets.pluviometer_pin,
+  officialPluviometer: assets.officialPluviometer_pin,
+  floodZones: {
+    passable: PinTransitavel,
+    not_passable: PinIntransitavel,
+  },
+  riverLevel: ["low_pin", "normal_pin", "high_pin", "flooding_pin"].map(
+    (key) => {
+      return assets.riverLevel[key];
+    }
+  ),
+  rainLevel: [
+    "rain_0_5_pin",
+    "rain_1_5_pin",
+    "rain_2_5_pin",
+    "rain_3_5_pin",
+  ].map((key) => {
+    return assets.rainLevel[key];
+  }),
+};
+const initialState = { markers: new Map() };
+
+function getImage(name, situation) {
+  if (name == "automaticPluviometer") {
+    return custom_assets_pin.pluviometer;
+  }
+
+  if (name == "pluviometer") {
+    return custom_assets_pin.pluviometer;
+  }
+
+  if (name == "rain") {
+    if (situation == "sem chuva") {
+      return custom_assets_pin.rainLevel[0];
+    } else if (situation == "chuva fraca") {
+      return custom_assets_pin.rainLevel[1];
+    } else if (situation == "chuva moderada") {
+      return custom_assets_pin.rainLevel[2];
+    } else if (situation == "chuva forte") {
+      return custom_assets_pin.rainLevel[3];
+    }
+    return custom_assets_pin.rainLevel[3];
+  }
+
+  if (name == "riverFlood") {
+    if (situation == "baixo") {
+      return custom_assets_pin.riverLevel[0];
+    } else if (situation == "normal") {
+      return custom_assets_pin.riverLevel[1];
+    } else if (situation == "alto") {
+      return custom_assets_pin.riverLevel[2];
+    } else if (situation == "inundar") {
+      return custom_assets_pin.riverLevel[3];
+    }
+    return custom_assets_pin.riverLevel[0];
+  }
+  if (name == "floodZones") {
+    if (situation == "transitavel") {
+      return custom_assets_pin.floodZones.passable;
+    } else {
+      return custom_assets_pin.floodZones.not_passable;
+    }
+  }
+}
+
+function buildPolygonsObject(response, name) {
+  var coordinate = [];
+  var formsanswersgeom = response.formsanswersgeom;
+  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,
+    title: "Titulo", //response.fieldsanswerssituation
+    address: "Endereço", //response.fieldsanswerseventaddress,
+    coordinate: { coordinate },
+    date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
+    description: "comentário", //response.fielsanswercomment,
+    logo: custom_assets.pluviometer,
+    pictures: null,
+    image: "", //getMarkerImage(answer.name),
+  };
+
+  return polygonObject;
+}
+
+function buildMarkerObject(response, name) {
+  const r = JSON.parse(response);
+  const resposta = r.formsanswersgeom;
+  const formsanswersgeom = JSON.parse(resposta).coordinates;
+  
+  return {
+    ID: 3168, //response.formsanswersid,
+    name: name,
+    title: "Titulo", //response.fieldsanswerssituation
+    address: "Endereço", //response.fieldsanswerseventaddress,
+    coordinate: {
+      latitude: formsanswersgeom[1],
+      longitude: formsanswersgeom[0],
+    },
+    date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
+    description: "comentário", //response.fielsanswercomment,
+    logo: custom_assets.pluviometer,
+    pictures: null,
+    image: getImage(name, "situação"), //getMarkerImage(answer.name),
+  };
+}
+
+function verifyResponse(response, name) {
+  var markers = [];
+
+  if (response) {
+    const answer = JSON.parse(response);
+    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))
+      );
+    }
+  }
+    //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 []
+  useEffect(() => {
+    socketObject.socketUrl.onmessage = ({ data }) => {
+      //   console.log(data)
+      dispatch({ increment: verifyResponse(data, socketObject.name) });
+    };
+  }, []);
+}
+
+function reducer(state = initialState, action) {
+  action.increment.map((val) => {
+    state.markers.set(val.ID, val);
+  });
+
+  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

@@ -9,6 +9,7 @@ import HeaderBarMenu from "../components/HeaderBarMenu";
 import { getFormsAnswers } from "../hooks/useFormsAswers";
 import SocketClient from "../api/Websockets/SocketClient";
 import { useFiltering } from "../hooks/useFiltering";
+import useSocketMarkers from "../hooks/useSocketMarkers";
 
 export default function MapFeedScreen(props) {
   HeaderBarMenu(props.navigation);
@@ -16,7 +17,7 @@ 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 [data, _] = useState(useFiltering().forms);
+ 
  //console.log(markersdb);
 
   const [dataOptionsToShow, setDataOptionsToShow] = useState({
@@ -32,11 +33,15 @@ export default function MapFeedScreen(props) {
       riverFlood: false,
     },
   });  
-  const [markers, setMarkers] = useState(getFormsAnswers(dataOptionsToShow, focusChanged, data));
-   useEffect(() => {
-    setMarkers(getFormsAnswers(dataOptionsToShow, focusChanged, data));
-   }, [dataOptionsToShow, focusChanged]);
-  console.log(markers);
+
+  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(() => {