adding a 'wait' message to MapModal

src/app/components/MapModal.js

@@ -26,12 +26,25 @@ function notImplemented() {
   });
 }
 
-function topBar(props, setShowModal) {
+function loadingData() {
+  return (
+    <View>
+      <Text>Carregando dados...</Text>
+    </View>
+  );
+}
+
+function onCloseModal(setShowModal, setCurrentMarker) {
+  setShowModal(null);
+  setCurrentMarker(undefined);
+}
+
+function topBar(props, setShowModal, setCurrentMarker) {
   return (
     <View style={styles.topBar}>
       <View style={{ alignContent: "center", flex: 1, marginHorizontal: 10 }}>
         <Text style={[styles.bodyTitle, { color: "white" }]}>
-          {props.title}
+          {props ? props.title : "Aguarde..."}
         </Text>
       </View>
 
@@ -62,7 +75,7 @@ function topBar(props, setShowModal) {
 
         <TouchableOpacity
           style={styles.topBarIcon}
-          onPress={() => setShowModal(null)}
+          onPress={() => onCloseModal(setShowModal, setCurrentMarker)}
         >
           <MaterialCommunityIcons
             name="close"
@@ -249,8 +262,7 @@ function MapModal({ showModal, setShowModal, markers }) {
     }
 
     const result = await getFieldsAnswers.fieldsAnswers(timeFilter, id);
-    if (result.data) {
-      console.log(timeFilter);
+    if (result.data && showModal && currentMarker == undefined) {
       setCurrentMarker(
         AssembleModalObject(
           JSON.stringify(result.data.responseData.array_to_json),
@@ -265,22 +277,48 @@ function MapModal({ showModal, setShowModal, markers }) {
     getAnswers(showModal, markers.get(showModal).name);
   }
 
-  if (currentMarker != undefined && showModal != null) {
+  if (showModal != null) {
     return (
       <SelfClosingModal
         style={{ position: "absolute" }}
         animationType="slide"
         transparent={true}
         showModal={showModal}
-        setShowModal={setShowModal}
+        setShowModal={() => onCloseModal(setShowModal, setCurrentMarker)}
       >
-        {topBar(currentMarker, setShowModal)}
+        {topBar(currentMarker, setShowModal, setCurrentMarker)}
+
+        {currentMarker != undefined && (
+          <View>
             <View style={{ padding: 16 }}>
               {componentBody(currentMarker)}
-          {isPluviometer(currentMarker.name) ? moreInfo(currentMarker) : null}
+              {isPluviometer(currentMarker.name)
+                ? moreInfo(currentMarker)
+                : null}
               {/* {!isPluviometer(currentMarker.name) ? reviews(currentMarker) : null} */}
               {userMessage(currentMarker)}
             </View>
+          </View>
+        )}
+        {currentMarker == undefined && (
+          <View style={styles.bodyInfo}>
+            <View style={{ padding: dimensions.spacing.big_padding }}>
+              <MaterialCommunityIcons
+                name="sync"
+                size={48}
+                color={colors.primary}
+                style={{
+                  alignSelf: "center",
+                  alignItems: "center",
+                  marginBottom: 12,
+                }}
+              />
+              <Text style={styles.textWait}>
+                Aguarde um momento enquanto os dados são carregados
+              </Text>
+            </View>
+          </View>
+        )}
       </SelfClosingModal>
     );
   } else {
@@ -338,6 +376,13 @@ const styles = StyleSheet.create({
     fontWeight: "500",
     fontSize: dimensions.text.default,
   },
+  textWait: {
+    fontSize: dimensions.text.secondary,
+    textAlign: "center",
+    color: colors.primary,
+    fontWeight: "bold",
+    paddingBottom: dimensions.spacing.big_padding,
+  },
 });
 
 export default MapModal;