MapModal to new layout

src/app/components/MapModal.js

@@ -6,7 +6,6 @@ import colors from "../config/colors";
 import { showMessage } from "react-native-flash-message";
 import { dimensions, screen_height } from "../config/dimensions";
 import { Svg, Image as ImageSvg } from "react-native-svg";
-import { ScrollView } from "react-native-gesture-handler";
 import PluviometerGraphics from "./PluviometerGraphics";
 
 const chartHeight = screen_height * 0.3;
@@ -24,44 +23,52 @@ function notImplemented() {
   });
 }
 
-function topBar(setShowModal) {
+function topBar(props, setShowModal) {
   return (
     <View style={styles.topBar}>
-      <TouchableOpacity
-        style={styles.topBarIcon}
-        onPress={() => notImplemented()}
-      >
-        <MaterialCommunityIcons
-          name="pencil"
-          size={20}
-          color={colors.dark}
-          alignItems="center"
-        />
-      </TouchableOpacity>
+      <View style={{ alignContent: "center", flex: 1, marginHorizontal: 10 }}>
+        <Text style={[styles.bodyTitle, { color: "white" }]}>
+          {props.title}
+        </Text>
+      </View>
 
-      <TouchableOpacity
-        style={styles.topBarIcon}
-        onPress={() => notImplemented()}
-      >
-        <MaterialCommunityIcons
-          name="trash-can"
-          size={20}
-          color={colors.dark}
-          alignItems="center"
-        />
-      </TouchableOpacity>
+      <View style={{ flexDirection: "row", alignSelf: "flex-end" }}>
+        <TouchableOpacity
+          style={styles.topBarIcon}
+          onPress={() => notImplemented()}
+        >
+          <MaterialCommunityIcons
+            name="pencil"
+            size={20}
+            color={colors.white}
+            alignItems="center"
+          />
+        </TouchableOpacity>
 
-      <TouchableOpacity
-        style={styles.topBarIcon}
-        onPress={() => setShowModal(null)}
-      >
-        <MaterialCommunityIcons
-          name="close"
-          size={20}
-          color={colors.dark}
-          alignItems="center"
-        />
-      </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.topBarIcon}
+          onPress={() => notImplemented()}
+        >
+          <MaterialCommunityIcons
+            name="trash-can"
+            size={20}
+            color={colors.white}
+            alignItems="center"
+          />
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={styles.topBarIcon}
+          onPress={() => setShowModal(null)}
+        >
+          <MaterialCommunityIcons
+            name="close"
+            size={20}
+            color={colors.white}
+            alignItems="center"
+          />
+        </TouchableOpacity>
+      </View>
     </View>
   );
 }
@@ -73,7 +80,7 @@ function iconTextRow(props) {
         <MaterialCommunityIcons
           name={props.name}
           size={18}
-          color={colors.dark}
+          color={colors.primary}
         />
       </View>
 
@@ -89,19 +96,23 @@ function iconImageRow(props) {
         <MaterialCommunityIcons
           name={props.name}
           size={18}
-          color={colors.dark}
+          color={colors.primary}
         />
       </View>
 
       <View alignSelf="flex-start">
-        <Svg width={100} height={100}>
-          <ImageSvg
-            width="100%"
-            height="100%"
-            preserveAspectRatio="xMinYMin stretch"
-            href={{ uri: props.pic[0] }}
-          />
-        </Svg>
+        {props.pictures > 0 ? (
+          <Svg width={100} height={100}>
+            <ImageSvg
+              width="100%"
+              height="100%"
+              preserveAspectRatio="xMinYMin stretch"
+              href={{ uri: props.pic[0] }}
+            />
+          </Svg>
+        ) : (
+          <Text style={styles.text}>Não há foto</Text>
+        )}
       </View>
     </View>
   );
@@ -190,43 +201,59 @@ function componentBody(props) {
       <Image style={styles.bodyIcon} resizeMode="stretch" source={props.logo} />
 
       <View style={styles.bodyInfo}>
-        <Text style={styles.bodyTitle}>{props.title}</Text>
-
         {iconTextRow({ name: "map-marker", description: address })}
         {iconTextRow({ name: "calendar", description: date })}
         {iconTextRow({ name: "account", description: "Usuário ativo" })}
-        {pictures.length > 0 && iconImageRow({ name: "camera", pic: pictures })}
+        {iconImageRow({ name: "camera", pic: pictures })}
       </View>
     </View>
   );
 }
 
+function userMessage(marker) {
+  if (marker.description == "") return <></>;
+
+  return (
+    <View>
+      <Text
+        style={[styles.text, { color: colors.primary, fontWeight: "bold" }]}
+      >
+        Comentário:
+      </Text>
+      <Text style={styles.text}>{marker.description}</Text>
+    </View>
+  );
+}
+
 function isPluviometer(name) {
   return name === "pluviometer" || name === "officialPluviometer";
 }
 
-function MapModal({showModal, setShowModal, markers}) {
+function MapModal({ showModal, setShowModal, markers }) {
   var currentMarker = undefined;
   if (markers && showModal != null && markers.has(showModal)) {
     currentMarker = markers.get(showModal);
   }
 
   if (currentMarker != undefined && showModal != null) {
-  return (
-    <SelfClosingModal
-      style={{ position: "absolute" }}
-      animationType="slide"
-      transparent={true}
-      showModal={showModal}
-      setShowModal={setShowModal}
-    >
-      {topBar(setShowModal)}
-      {componentBody(currentMarker)}
-      {isPluviometer(currentMarker.name) ? moreInfo(currentMarker) : null}
-      {!isPluviometer(currentMarker.name) ? reviews(currentMarker) : null}
-    </SelfClosingModal>
-  );}
-  else {
+    return (
+      <SelfClosingModal
+        style={{ position: "absolute" }}
+        animationType="slide"
+        transparent={true}
+        showModal={showModal}
+        setShowModal={setShowModal}
+      >
+        {topBar(currentMarker, setShowModal)}
+        <View style={{ padding: 16 }}>
+          {componentBody(currentMarker)}
+          {isPluviometer(currentMarker.name) ? moreInfo(currentMarker) : null}
+          {/* {!isPluviometer(currentMarker.name) ? reviews(currentMarker) : null} */}
+          {userMessage(currentMarker)}
+        </View>
+      </SelfClosingModal>
+    );
+  } else {
     return null;
   }
 }
@@ -240,7 +267,6 @@ const styles = StyleSheet.create({
   bodyTitle: {
     fontWeight: "700",
     fontSize: dimensions.text.secondary,
-    marginBottom: 5,
   },
   bodyInfo: {
     flexDirection: "column",
@@ -248,7 +274,7 @@ const styles = StyleSheet.create({
   },
   bodyIcon: {
     alignSelf: "flex-start",
-    marginHorizontal: 20,
+    marginRight: 20,
     height: 53,
     width: 53,
   },
@@ -264,8 +290,10 @@ const styles = StyleSheet.create({
     marginHorizontal: 10,
   },
   topBar: {
+    backgroundColor: colors.primary,
     flexDirection: "row",
-    alignSelf: "flex-end",
+    width: "100%",
+    alignItems: "center",
   },
   topBarIcon: {
     margin: 10,