Browse Source

Refactoring MapMarkers to a new component

master
GabrielTrettel 4 years ago
parent
commit
bb70852649
  1. 48
      src/app/components/MapMarkerList.js
  2. 4
      src/app/hooks/selectFromDB.js
  3. 11
      src/app/screens/MapFeedScreen.js

48
src/app/components/MapMarkerList.js

@ -0,0 +1,48 @@
import { StyleSheet, View } from "react-native";
import React from "react";
import useMarkers from "../hooks/selectFromDB";
import MapMarker from "../components/MapMarker";
function isRequestedValue(
item,
renderRain,
renderFlood,
renderRiver,
renderPluviometer
) {
return (
(item.name == "pluviometer" && renderPluviometer) ||
(item.name == "rain" && renderRain) ||
(item.name == "river" && renderRiver) ||
(item.name == "flood" && renderFlood)
);
}
function MapMarkerList({
reload = null,
renderRain = true,
renderFlood = true,
renderRiver = true,
renderPluviometer = true,
}) {
const markers = useMarkers(reload);
return (
<>
{[...markers.markers]
.filter((item) =>
isRequestedValue(
item,
renderRain,
renderFlood,
renderRiver,
renderPluviometer
)
)
.map(({ ID, ...val }) => {
return <MapMarker key={ID.toString()} {...val} />;
})}
</>
);
}
export { MapMarkerList };

4
src/app/hooks/selectFromDB.js

@ -53,6 +53,7 @@ function partsePluviometer(row) {
// displacement += offset; // displacement += offset;
const i = { const i = {
ID: ++ID, ID: ++ID,
name: "pluviometer",
title: "Pluviometro", title: "Pluviometro",
coordinate: { coordinate: {
latitude: row["Latitude"] + displacement, latitude: row["Latitude"] + displacement,
@ -77,6 +78,7 @@ function parseFloodZones(row) {
// displacement += offset; // displacement += offset;
return { return {
ID: ++ID, ID: ++ID,
name: "flood",
title: row["Passable"] == 1 ? "Transponível" : "Intransponível", title: row["Passable"] == 1 ? "Transponível" : "Intransponível",
coordinate: { coordinate: {
latitude: row["Latitude"], latitude: row["Latitude"],
@ -103,6 +105,7 @@ function parseRiverLevel(row) {
const riverIdx = row["RiverIdx"]; const riverIdx = row["RiverIdx"];
return { return {
ID: ++ID, ID: ++ID,
name: "river",
title: "Rio " + riverLevel[riverIdx], title: "Rio " + riverLevel[riverIdx],
coordinate: { coordinate: {
latitude: row["Latitude"], latitude: row["Latitude"],
@ -135,6 +138,7 @@ function parseRainLevel(row) {
return { return {
ID: ++ID, ID: ++ID,
name: "rain",
title: rainLevel[rainIdx], title: rainLevel[rainIdx],
coordinate: { coordinate: {
latitude: row["Latitude"], latitude: row["Latitude"],

11
src/app/screens/MapFeedScreen.js

@ -4,18 +4,15 @@ import MapView from "react-native-maps";
import colors from "../config/colors"; import colors from "../config/colors";
import { screen_width, screen_height } from "../config/dimensions"; import { screen_width, screen_height } from "../config/dimensions";
import useMarkers from "../hooks/selectFromDB";
import MapMarker from "../components/MapMarker";
import attachFocusToQuery from "../hooks/useFocus"; import attachFocusToQuery from "../hooks/useFocus";
import { CurrentLocationContext } from "../context/CurrentLocationContext"; import { CurrentLocationContext } from "../context/CurrentLocationContext";
import HeaderBarMenu from "../components/HeaderBarMenu"; import HeaderBarMenu from "../components/HeaderBarMenu";
import { MapMarkerList } from "../components/MapMarkerList";
function MapFeedScreen(props) { function MapFeedScreen(props) {
const context = useContext(CurrentLocationContext); const context = useContext(CurrentLocationContext);
const location = context.currentCoordinates; const location = context.currentCoordinates;
const hasToQuery = attachFocusToQuery();
const markers = useMarkers(hasToQuery);
const focusChanged = attachFocusToQuery();
const default_location = { const default_location = {
latitude: -12.901799, latitude: -12.901799,
@ -44,9 +41,7 @@ function MapFeedScreen(props) {
...lat_long_delta, ...lat_long_delta,
}} }}
> >
{[...markers.markers].map(({ ID, ...val }) => {
return <MapMarker key={ID.toString()} {...val} />;
})}
<MapMarkerList reload={focusChanged} />
</MapView> </MapView>
</View> </View>
); );

Loading…
Cancel
Save