From 12eeb3e3866051e051d6181f90d6ec47dee303c8 Mon Sep 17 00:00:00 2001 From: analuizaff Date: Fri, 10 Sep 2021 20:30:03 -0300 Subject: [PATCH] fixing issue - markers showing on map --- src/App.js | 3 ++- src/app/hooks/useFiltering.js | 6 ----- src/app/hooks/useSocketMarkers.js | 41 +++++++++++++------------------ src/app/screens/MapFeedScreen.js | 12 +-------- 4 files changed, 20 insertions(+), 42 deletions(-) diff --git a/src/App.js b/src/App.js index 4679cbb..44bc028 100644 --- a/src/App.js +++ b/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); }; diff --git a/src/app/hooks/useFiltering.js b/src/app/hooks/useFiltering.js index 68ada2d..9b085dc 100644 --- a/src/app/hooks/useFiltering.js +++ b/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, }, ]; diff --git a/src/app/hooks/useSocketMarkers.js b/src/app/hooks/useSocketMarkers.js index 525762b..18245f0 100644 --- a/src/app/hooks/useSocketMarkers.js +++ b/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; } diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js index 58b156e..4654f9d 100644 --- a/src/app/screens/MapFeedScreen.js +++ b/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();