From e2d015eb66615f6849f8d648befeee145b7a073a Mon Sep 17 00:00:00 2001
From: GabrielTrettel <gabrielmtrettel@gmail.com>
Date: Thu, 19 Aug 2021 16:54:00 -0300
Subject: [PATCH 1/3] Weather forecast screen adjusted when error occours

---
 src/app/api/weather_forecast.js   |  2 +-
 src/app/screens/ForecastScreen.js | 24 ++++++++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/app/api/weather_forecast.js b/src/app/api/weather_forecast.js
index 0e600e2..a332448 100644
--- a/src/app/api/weather_forecast.js
+++ b/src/app/api/weather_forecast.js
@@ -28,7 +28,7 @@ function getWeatherForecast() {
         rain_fall_mm: 0,
       },
       {
-        week_day: " Terça ",
+        week_day: "Terça",
         date: "20/03",
         weather_index: 2,
         rain_fall_mm: 5,
diff --git a/src/app/screens/ForecastScreen.js b/src/app/screens/ForecastScreen.js
index 2f0492d..4eed66d 100644
--- a/src/app/screens/ForecastScreen.js
+++ b/src/app/screens/ForecastScreen.js
@@ -114,7 +114,6 @@ function renderTodayForecast(forecast) {
   );
 }
 
-// FIXME: The border line must be in full wcreen width.
 function border() {
   return (
     <View
@@ -267,16 +266,33 @@ function renderScreen(forecast) {
 
 function renderErrorScreen() {
   return (
+    <View style={{
+      flex: 1,
+      padding: 17,
+      alignItems: "center",
+      justifyContent: "center"
+      }}>
     <Text
       style={{
+        paddingBottom: 20,
         textAlign: "center",
-        paddingTop: 30,
-        fontSize: dimensions.text.secondary,
+        fontSize: dimensions.text.header,
         fontWeight: "bold",
+        color: colors.primary,
       }}
     >
-      Previsão do tempo não disponível no momento
+      Ops, algo deu errado...
     </Text>
+
+      <Text
+        style={{
+          textAlign: "center",
+          fontSize: dimensions.text.secondary,
+          fontWeight: "bold",
+        }}
+      >Não conseguimos encontrar a previsão do tempo para sua localização</Text>
+      </View>
+
   );
 }
 

From fc47bebb7138496a810d4bf2bdf84badf35a1c5a Mon Sep 17 00:00:00 2001
From: GabrielTrettel <gabrielmtrettel@gmail.com>
Date: Mon, 23 Aug 2021 12:54:02 -0300
Subject: [PATCH 2/3] Refactoring old code for reusability purposes

---
 src/app/components/MapModal.js          | 18 +++++++++---------
 src/app/components/SelfClosingModal.js  |  4 ++--
 src/app/components/map/OpenStreetMap.js |  4 ++--
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/app/components/MapModal.js b/src/app/components/MapModal.js
index c3a1c67..087fd27 100644
--- a/src/app/components/MapModal.js
+++ b/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}
diff --git a/src/app/components/SelfClosingModal.js b/src/app/components/SelfClosingModal.js
index 3819d98..23801db 100644
--- a/src/app/components/SelfClosingModal.js
+++ b/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>
diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js
index ebd3fe1..99c8e1a 100644
--- a/src/app/components/map/OpenStreetMap.js
+++ b/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>

From 190f9489810fd7e8267f6fe3bf27099ae2c70d75 Mon Sep 17 00:00:00 2001
From: GabrielTrettel <gabrielmtrettel@gmail.com>
Date: Mon, 23 Aug 2021 15:40:10 -0300
Subject: [PATCH 3/3] Starting to implement data filter modal

---
 src/app/components/MapDataMenu.js       | 142 ++++++++++++++++++++++++
 src/app/components/map/OpenStreetMap.js |   2 +
 src/app/config/colors.js                |   2 +-
 3 files changed, 145 insertions(+), 1 deletion(-)
 create mode 100644 src/app/components/MapDataMenu.js

diff --git a/src/app/components/MapDataMenu.js b/src/app/components/MapDataMenu.js
new file mode 100644
index 0000000..787e61f
--- /dev/null
+++ b/src/app/components/MapDataMenu.js
@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+
+import { View, StyleSheet, Text, Button, TouchableOpacity } from "react-native";
+import SelfClosingModal from "./SelfClosingModal";
+import colors from "../config/colors";
+import { FontAwesome5 } from '@expo/vector-icons';
+import { MaterialIcons } from "@expo/vector-icons";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { Shadow } from "react-native-shadow-2";
+
+function DataMenuHeader({ setShowModal }) {
+  return (
+    <View
+      style={{
+        backgroundColor: colors.primary,
+        height: 42,
+        justifyContent: "center",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        paddingHorizontal: 16,
+      }}
+    >
+      <Text style={styles.text}>DADOS</Text>
+
+      <TouchableOpacity
+        style={styles.topBarIcon}
+        onPress={() => setShowModal(null)}
+      >
+        <MaterialCommunityIcons name="close" size={24} color={colors.white} />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+function DataOriginSelector() {
+  const [dataOriginToShow, setDataOriginToShow] = useState("oficial")
+  const bgToUse = (selected) => dataOriginToShow == selected ? colors.secondary : colors.gray;
+
+  return (
+    <Shadow
+      viewStyle={{ width: "100%", height: 40 }}
+      offset={[0, 4]}
+      distance={4}
+      radius={0}
+      startColor="rgba(0, 0, 0, 0.25)"
+      paintInside={true}
+    >
+      <View
+        style={{
+          height: 40,
+          justifyContent: "center",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          backgroundColor: colors.secondary,
+        }}
+      >
+        <TouchableOpacity
+          style={[styles.choicesBtn, {backgroundColor: bgToUse("oficial")}]}
+          onPress={() => setDataOriginToShow("oficial")}
+        >
+          <MaterialIcons
+            name="account-balance"
+            size={24}
+            color={colors.white}
+            alignItems="center"
+          />
+          <Text style={[styles.text, {marginLeft: 12}]}>OFICIAL</Text>
+        </TouchableOpacity>
+
+
+        <TouchableOpacity
+          style={[styles.choicesBtn, {backgroundColor: bgToUse("citzen")}]}
+          onPress={() => setDataOriginToShow("citzen")}
+        >
+          <FontAwesome5
+            name="user-alt"
+            size={22}
+            color={colors.white}
+            alignItems="center"
+          />
+          <Text style={[styles.text, {marginLeft: 12}]}>CIDADÃO</Text>
+        </TouchableOpacity>
+      </View>
+    </Shadow>
+  );
+}
+
+function DataMenuBody({ setShowModal }) {
+  return (
+    <View
+      style={{
+        height: "60%",
+        backgroundColor: colors.white,
+      }}
+    >
+      <DataMenuHeader setShowModal={setShowModal} />
+      <DataOriginSelector />
+    </View>
+  );
+}
+
+export default function MapDataMenu(props) {
+  const [showModal, setShowModal] = useState(null);
+  return (
+    <View>
+      <Button
+        title={"VISUALIZAR DADOS NO MAPA"}
+        onPress={() => setShowModal(true)}
+      />
+      <SelfClosingModal
+        animationType="slide"
+        transparent={true}
+        showModal={showModal}
+        setShowModal={setShowModal}
+      >
+        <DataMenuBody setShowModal={setShowModal} />
+      </SelfClosingModal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  choicesBtn: {
+    width: "50%",
+    backgroundColor: colors.secondary,
+    height: "100%",
+    justifyContent: "center",
+    paddingHorizontal: 12,
+    alignItems: "center",
+    justifyContent: "flex-start",
+    flexDirection: "row"
+  },
+  text: {
+    color: colors.white,
+    alignSelf: "center",
+    fontWeight: "500",
+    fontSize: 16,
+  },
+  topBarIcon: {
+    alignSelf: "center",
+  },
+});
diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js
index 99c8e1a..b656daf 100644
--- a/src/app/components/map/OpenStreetMap.js
+++ b/src/app/components/map/OpenStreetMap.js
@@ -8,6 +8,7 @@ import {
 } from "./LeafLetMap";
 import MapModal from "../MapModal";
 import html_content from "./Map.js";
+import MapDataMenu from "../MapDataMenu";
 
 
 function bindEventsToListeners(
@@ -87,6 +88,7 @@ export default function OpenStreetMap({
           setShowModal={setMarkerListener}
           markers={markersList}
         />
+        <MapDataMenu/>
       </View>
     </View>
   );
diff --git a/src/app/config/colors.js b/src/app/config/colors.js
index d6e9cf3..bda41f4 100644
--- a/src/app/config/colors.js
+++ b/src/app/config/colors.js
@@ -1,6 +1,6 @@
 export default {
   primary: "#006493",
-  secondary: "#4ecdc4",
+  secondary: "rgba(74, 141, 183, 0.87)",
   black: "#000",
   white: "#fff",
   medium: "#6e6969",