create socket only for requested data through the menu

src/app/api/Websockets/SocketClient.js

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+import { useFiltering } from '../../hooks/useFiltering';
+
+function isRequestedValue(item, renderOptions) {
+  if (
+    (item.name == "pluviometer" && renderOptions.citzen.pluviometer) ||
+    (item.name == "officialPluviometer" && renderOptions.oficial.automaticPluviometer) ||
+    (item.name == "rain" && renderOptions.citzen.rain) ||
+    (item.name == "riverFlood" && renderOptions.citzen.riverFlood) ||
+    (item.name == "floodZones" && renderOptions.citzen.floodRisk)
+  ) {
+    return true;
+
+  }
+}
+
+function verify_existingSockets(formType, renderOptions) {
+  if (formType.response == null && isRequestedValue(formType, renderOptions)) {
+    console.log("Resposta é null");
+    const socket = new WebSocket("wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + formType.endpoint);
+
+    socket.onmessage = ({ data }) => {
+      formType.response = data;
+    }
+  }
+  else {
+    console.log("\nresposta preenchida");
+  }
+}
+
+
+export default function SocketClient(dataOptionObject, focusChanged) {
+  const [data, setData] = useState(useFiltering());
+
+
+  useEffect(() => {
+    data.citizen.map((e) => verify_existingSockets(e, dataOptionObject));
+    data.oficial.map((e) => verify_existingSockets(e, dataOptionObject));
+
+  }, [dataOptionObject, focusChanged]);
+
+  return data;
+};
+
+

src/app/hooks/useFormsAswers.js

@@ -26,13 +26,11 @@ function buildMarkersArray(markers, answer) {
 
 }
 
-const getFormsAnswers = (dataOptionObject) => {
+const getFormsAnswers = (dataOptionObject, focusChanged) => {
   var markers = { markers: new Map() };
   const answers = (SocketClient(dataOptionObject));
   answers.citizen.forEach((r) => buildMarkersArray(markers.markers, r));
 
-  console.log(markers);
-
   return markers;
 
 }

src/app/screens/MapFeedScreen.js

@@ -6,13 +6,33 @@ import { MapMarkerList } from "../components/MapMarkerList";
 import formsApi from "../api/getforms";
 import useMarkers from "../hooks/selectFromDB";
 import HeaderBarMenu from "../components/HeaderBarMenu";
+import { getFormsAnswers } from "../hooks/useFormsAswers";
+import SocketClient from "../api/Websockets/SocketClient";
 
 export default function MapFeedScreen(props) {
   HeaderBarMenu(props.navigation);
 
   const focusChanged = attachFocusToQuery();
-  const [error, setError] = useState(false);
-  const markers = useMarkers(focusChanged);
+  //const [error, setError] = useState(false);
+ const markersdb = useMarkers(focusChanged);// (apagar useMarker - não será mais usado)
+// console.log(markersdb);
+
+  const [dataOptionsToShow, setDataOptionsToShow] = useState({
+    oficial: {
+      automaticPluviometer: true,
+      susceptibilityAreas: false,
+    },
+    citzen: {
+      floodRisk: true,
+      pluviometer: true,
+      rain: true,
+      floodZones: true,
+      riverFlood: true,
+    },
+  });  
+  const markers = getFormsAnswers(dataOptionsToShow, focusChanged);
+  //console.log(markers);
+
 
   // useEffect(() => {
   //   loadForms();
@@ -34,6 +54,8 @@ export default function MapFeedScreen(props) {
       <OpenStreetMap
         markers={markers}
         centerUserLocation={true}
+        dataOptionsToShow={dataOptionsToShow}
+        setDataOptionsToShow={setDataOptionsToShow}
       />
     </View>
   );