From da724a9b36af37ab8b4caa701beb23cf17cb586f Mon Sep 17 00:00:00 2001
From: GabrielTrettel <gabrielmtrettel@gmail.com>
Date: Mon, 21 Dec 2020 18:25:03 -0300
Subject: [PATCH] fixing an error that occurred when two markers with the same
 key were placed on the map

---
 src/app/components/MapMarker.js  | 6 +++---
 src/app/hooks/selectFromDB.js    | 8 ++++++--
 src/app/screens/MapFeedScreen.js | 6 ++----
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/app/components/MapMarker.js b/src/app/components/MapMarker.js
index 4c644cb..fe6d5e6 100644
--- a/src/app/components/MapMarker.js
+++ b/src/app/components/MapMarker.js
@@ -4,10 +4,10 @@ import MapView from "react-native-maps";
 
 const markerSize = 30;
 
-export default function MapMarker({ ID, title, image, coordinate, ...props }) {
-  console.log(ID);
+export default function MapMarker({ title, image, coordinate, ...props }) {
+  // console.log({ title, image, coordinate, ...props });
   return (
-    <MapView.Marker key={ID} coordinate={coordinate} title={title} {...props}>
+    <MapView.Marker coordinate={coordinate} title={title} {...props}>
       <View>
         <Image style={styles.markerPoint} source={image} resizeMode="stretch" />
       </View>
diff --git a/src/app/hooks/selectFromDB.js b/src/app/hooks/selectFromDB.js
index abc64c4..229d4d7 100644
--- a/src/app/hooks/selectFromDB.js
+++ b/src/app/hooks/selectFromDB.js
@@ -114,11 +114,15 @@ function genericSelect(dispatch, query, parseFunction) {
   }, []);
 }
 
-const initialState = { markers: [] };
+const initialState = { markers: new Set() };
 
 function reducer(state = initialState, action) {
+  action.increment.map((val) => {
+    state.markers.add(val);
+  });
+
   return {
-    markers: [...state.markers, ...action.increment],
+    markers: state.markers,
   };
 }
 
diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js
index 2550b30..fd79bb6 100644
--- a/src/app/screens/MapFeedScreen.js
+++ b/src/app/screens/MapFeedScreen.js
@@ -16,8 +16,6 @@ function MapFeedScreen(props) {
 
   const markers = useMarkers();
 
-  console.log(markers.markers);
-
   return (
     <View style={styles.container}>
       <MapView
@@ -35,8 +33,8 @@ function MapFeedScreen(props) {
           longitudeDelta: 0.0421,
         }}
       >
-        {markers.markers.map((val) => {
-          return <MapMarker {...val} />;
+        {[...markers.markers].map(({ ID, ...val }) => {
+          return <MapMarker key={ID.toString()} {...val} />;
         })}
       </MapView>
     </View>