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 "../config/globals";
const assets = {
@ -26,7 +27,27 @@ var displacement = 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) {
if (!is_valid(row["Id"], "pluv")) {
return null;
}
displacement += offset;
return {
ID: ++ID,
@ -41,6 +62,10 @@ function partsePluviometer(row) {
}
function parseFloodZones(row) {
if (!is_valid(row["Id"], "flood")) {
return null;
}
displacement += offset;
return {
ID: ++ID,
@ -55,6 +80,10 @@ function parseFloodZones(row) {
}
function parseRiverLevel(row) {
if (!is_valid(row["Id"], "river")) {
return null;
}
displacement += offset;
const riverLevel = ["Baixo", "Rio normal", "Alto", "Transfordando"];
const riverIdx = row["RiverIdx"];
@ -71,6 +100,10 @@ function parseRiverLevel(row) {
}
function parseRainLevel(row) {
if (!is_valid(row["Id"], "rain")) {
return null;
}
displacement += offset;
const rainLevel = [
"Sem chuva",
@ -98,20 +131,26 @@ function parseResult(db_result, parseRow) {
for (let i = 0; i < db_result.rows.length; ++i) {
var row = db_result.rows.item(i);
warnings.push(parseRow(row));
const data = parseRow(row);
if (data !== null) {
warnings.push(data);
}
}
return warnings;
}
function genericSelect(dispatch, query, parseFunction) {
function genericSelect(queriesToParsersMapper, dispatch, isFocused) {
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() };
@ -126,7 +165,7 @@ function reducer(state = initialState, action) {
};
}
function useMarkers() {
function useMarkers(isFocused) {
const [state, dispatch] = useReducer(reducer, initialState);
const queriesToParsersMapper = [
@ -136,10 +175,7 @@ function useMarkers() {
["SELECT * FROM RainLevel;", parseRainLevel],
];
queriesToParsersMapper.forEach(([query, parser]) => {
console.log(query);
genericSelect(dispatch, query, parser);
});
genericSelect(queriesToParsersMapper, dispatch, isFocused);
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 MapView from "react-native-maps";
@ -7,6 +7,7 @@ import colors from "../config/colors";
import useLocation from "../hooks/useLocation";
import useMarkers from "../hooks/selectFromDB";
import MapMarker from "../components/MapMarker";
import attachFocusToQuery from "../hooks/useFocus";
function MapFeedScreen(props) {
const location = useLocation({
@ -14,7 +15,8 @@ function MapFeedScreen(props) {
longitude: -51.3948396,
});
const markers = useMarkers();
const hasToQuery = attachFocusToQuery();
const markers = useMarkers(hasToQuery);
return (
<View style={styles.container}>

Loading…
Cancel
Save