Refactoring old code for reusability purposes

src/app/components/MapModal.js

@@ -24,7 +24,7 @@ function notImplemented() {
   });
 }
 
-function topBar(setMarkerToRender) {
+function topBar(setShowModal) {
   return (
     <View style={styles.topBar}>
       <TouchableOpacity
@@ -53,7 +53,7 @@ function topBar(setMarkerToRender) {
 
       <TouchableOpacity
         style={styles.topBarIcon}
-        onPress={() => setMarkerToRender(null)}
+        onPress={() => setShowModal(null)}
       >
         <MaterialCommunityIcons
           name="close"
@@ -205,21 +205,21 @@ function isPluviometer(name) {
   return name === "pluviometer" || name === "officialPluviometer";
 }
 
-function MapModal({markerToRender, setMarkerToRender, markers}) {
+function MapModal({showModal, setShowModal, markers}) {
   var currentMarker = undefined;
-  if (markers && markerToRender != null && markers.has(markerToRender)) {
-    currentMarker = markers.get(markerToRender);
+  if (markers && showModal != null && markers.has(showModal)) {
+    currentMarker = markers.get(showModal);
   }
 
-  if (currentMarker != undefined && markerToRender != null) {
+  if (currentMarker != undefined && showModal != null) {
   return (
     <SelfClosingModal
       animationType="slide"
       transparent={true}
-      markerToRender={markerToRender}
-      setMarkerToRender={setMarkerToRender}
+      showModal={showModal}
+      setShowModal={setShowModal}
     >
-      {topBar(setMarkerToRender)}
+      {topBar(setShowModal)}
       {componentBody(currentMarker)}
       {isPluviometer(currentMarker.name) ? moreInfo(currentMarker) : null}
       {!isPluviometer(currentMarker.name) ? reviews(currentMarker) : null}

src/app/components/SelfClosingModal.js

@@ -14,10 +14,10 @@ export default function SelfClosingModal(props) {
       <Modal
         animationType={props.animationType}
         transparent={props.transparent}
-        visible={props.markerToRender != null}
+        visible={props.showModal != null}
       >
         <TouchableWithoutFeedback
-          onPress={() => props.setMarkerToRender(null)}
+          onPress={() => props.setShowModal(null)}
         >
           <View style={styles.modalOverlay} />
         </TouchableWithoutFeedback>

src/app/components/map/OpenStreetMap.js

@@ -83,8 +83,8 @@ export default function OpenStreetMap({
       )}
       <View>
         <MapModal
-          markerToRender={markerListener}
-          setMarkerToRender={setMarkerListener}
+          showModal={markerListener}
+          setShowModal={setMarkerListener}
           markers={markersList}
         />
       </View>