Browse Source

create socket only for requested data through the menu

master
analuizaff 3 years ago
parent
commit
0f81d482d1
  1. 45
      src/app/api/Websockets/SocketClient.js
  2. 4
      src/app/hooks/useFormsAswers.js
  3. 26
      src/app/screens/MapFeedScreen.js

45
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;
};

4
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;
}

26
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>
);

Loading…
Cancel
Save