Browse Source

Updating MapFeedScreen markers when screen changes its focus to active

master
GabrielTrettel 4 years ago
parent
commit
bfd3d1e726
  1. 58
      src/app/hooks/selectFromDB.js
  2. 25
      src/app/hooks/useFocus.js
  3. 6
      src/app/screens/MapFeedScreen.js

58
src/app/hooks/selectFromDB.js

@ -1,4 +1,5 @@
import { useEffect, useReducer } from "react"; import { useEffect, useReducer } from "react";
import "../config/globals"; import "../config/globals";
const assets = { const assets = {
@ -26,7 +27,27 @@ var displacement = 0;
var ID = 0; var ID = 0;
var fetched_data = new Map([
["pluv", new Set()],
["flood", new Set()],
["rain", new Set()],
["river", new Set()],
]);
function is_valid(id, category) {
if (fetched_data.get(category).has(id)) {
return false;
} else {
fetched_data.get(category).add(id);
}
return true;
}
function partsePluviometer(row) { function partsePluviometer(row) {
if (!is_valid(row["Id"], "pluv")) {
return null;
}
displacement += offset; displacement += offset;
return { return {
ID: ++ID, ID: ++ID,
@ -41,6 +62,10 @@ function partsePluviometer(row) {
} }
function parseFloodZones(row) { function parseFloodZones(row) {
if (!is_valid(row["Id"], "flood")) {
return null;
}
displacement += offset; displacement += offset;
return { return {
ID: ++ID, ID: ++ID,
@ -55,6 +80,10 @@ function parseFloodZones(row) {
} }
function parseRiverLevel(row) { function parseRiverLevel(row) {
if (!is_valid(row["Id"], "river")) {
return null;
}
displacement += offset; displacement += offset;
const riverLevel = ["Baixo", "Rio normal", "Alto", "Transfordando"]; const riverLevel = ["Baixo", "Rio normal", "Alto", "Transfordando"];
const riverIdx = row["RiverIdx"]; const riverIdx = row["RiverIdx"];
@ -71,6 +100,10 @@ function parseRiverLevel(row) {
} }
function parseRainLevel(row) { function parseRainLevel(row) {
if (!is_valid(row["Id"], "rain")) {
return null;
}
displacement += offset; displacement += offset;
const rainLevel = [ const rainLevel = [
"Sem chuva", "Sem chuva",
@ -98,20 +131,26 @@ function parseResult(db_result, parseRow) {
for (let i = 0; i < db_result.rows.length; ++i) { for (let i = 0; i < db_result.rows.length; ++i) {
var row = db_result.rows.item(i); var row = db_result.rows.item(i);
warnings.push(parseRow(row));
const data = parseRow(row);
if (data !== null) {
warnings.push(data);
}
} }
return warnings; return warnings;
} }
function genericSelect(dispatch, query, parseFunction) {
function genericSelect(queriesToParsersMapper, dispatch, isFocused) {
useEffect(() => { useEffect(() => {
global.userDataBase.transaction((tx) => {
tx.executeSql(query, [], (tx, results) => {
dispatch({ increment: parseResult(results, parseFunction) });
console.log("requesting data");
queriesToParsersMapper.forEach(([query, parser]) => {
global.userDataBase.transaction((tx) => {
tx.executeSql(query, [], (tx, results) => {
dispatch({ increment: parseResult(results, parser) });
});
}); });
}); });
}, []);
}, [isFocused]);
} }
const initialState = { markers: new Set() }; const initialState = { markers: new Set() };
@ -126,7 +165,7 @@ function reducer(state = initialState, action) {
}; };
} }
function useMarkers() {
function useMarkers(isFocused) {
const [state, dispatch] = useReducer(reducer, initialState); const [state, dispatch] = useReducer(reducer, initialState);
const queriesToParsersMapper = [ const queriesToParsersMapper = [
@ -136,10 +175,7 @@ function useMarkers() {
["SELECT * FROM RainLevel;", parseRainLevel], ["SELECT * FROM RainLevel;", parseRainLevel],
]; ];
queriesToParsersMapper.forEach(([query, parser]) => {
console.log(query);
genericSelect(dispatch, query, parser);
});
genericSelect(queriesToParsersMapper, dispatch, isFocused);
return state; return state;
} }

25
src/app/hooks/useFocus.js

@ -0,0 +1,25 @@
import { useEffect, useState } from "react";
import { useIsFocused } from "@react-navigation/native";
/*
NOTE: This hook is used this way because react-navigation/native
IsFocused change its state when screen focus changes, so it would
trigger an event to query the database when screen loose focus.
But, what we want is to change its focus only when it is being
focused.
*/
export default function attachFocusToQuery() {
const isFocused = useIsFocused();
const [hasToQuery, setHasToQuery] = useState(null);
useEffect(() => {
if (isFocused == true) {
setHasToQuery(!hasToQuery);
}
}, [isFocused]);
return hasToQuery;
}

6
src/app/screens/MapFeedScreen.js

@ -1,4 +1,4 @@
import React from "react";
import React, { useEffect, useState } from "react";
import { StyleSheet, View } from "react-native"; import { StyleSheet, View } from "react-native";
import MapView from "react-native-maps"; import MapView from "react-native-maps";
@ -7,6 +7,7 @@ import colors from "../config/colors";
import useLocation from "../hooks/useLocation"; import useLocation from "../hooks/useLocation";
import useMarkers from "../hooks/selectFromDB"; import useMarkers from "../hooks/selectFromDB";
import MapMarker from "../components/MapMarker"; import MapMarker from "../components/MapMarker";
import attachFocusToQuery from "../hooks/useFocus";
function MapFeedScreen(props) { function MapFeedScreen(props) {
const location = useLocation({ const location = useLocation({
@ -14,7 +15,8 @@ function MapFeedScreen(props) {
longitude: -51.3948396, longitude: -51.3948396,
}); });
const markers = useMarkers();
const hasToQuery = attachFocusToQuery();
const markers = useMarkers(hasToQuery);
return ( return (
<View style={styles.container}> <View style={styles.container}>

Loading…
Cancel
Save