fixing 'Dados' issues

src/App.js

@@ -14,6 +14,7 @@ import CurrentLocationProvider from "./app/context/CurrentLocationContext";
 import AuthNavigator from "./app/navigation/AuthNavigator";
 import { AuthContext } from "./app/auth/context";
 import authStorage from "./app/auth/storage";
+import MapDataProvider from "./app/context/MapDataContext";
 
 export default function App() {
   const [user, setUser] = useState();
@@ -41,10 +42,12 @@ export default function App() {
     >
       <CurrentLocationProvider>
         <EventLocationProvider>
+          <MapDataProvider>
             <NavigationContainer theme={navigationTheme}>
               {user ? <AppNavigator /> : <AuthNavigator />}
               <FlashMessage position="top" />
             </NavigationContainer>
+          </MapDataProvider>
         </EventLocationProvider>
       </CurrentLocationProvider>
     </AuthContext.Provider>

src/app/components/DataMenu.js

@@ -1,142 +0,0 @@
-import React, { Component, useRef, useState } from "react";
-import { StyleSheet, Text, TouchableOpacity, View, CheckBox } from "react-native";
-import { FontAwesome5 } from '@expo/vector-icons';
-
-import colors from "../config/colors";
-import { FlatList } from "react-native-gesture-handler";
-import { Fontisto } from '@expo/vector-icons';
-import { dimensions } from "../config/dimensions";
-
-import { Dimensions } from "react-native";
-
-
-export default class DataMenu extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            layers: [
-                {
-                    id: 1,
-                    name: 'Chuva',
-                },
-                {
-                    id: 2,
-                    name: 'Ponto de alagamento',
-                },
-                {
-                    id: 3,
-                    name: 'Pluviômetro artesanal',
-                },
-                {
-                    id: 4,
-                    name: 'Pluviômetro oficial',
-                },
-                {
-                    id: 5,
-                    name: 'Água no rio',
-                },
-                {
-                    id: 6,
-                    name: 'Área de inundação',                    
-                },
-            ],
-            selectedValue: {},
-        }
-    }
-    toggleItem = (itemId) => {
-        const { selectedValue } = this.state;
-        const isSelected = selectedValue[itemId];
-        selectedValue[itemId] = !isSelected;
-
-
-        this.setState({
-            selectedValue: { ...selectedValue },
-        })
-    }
-
-    render() {
-        const screenHeight = Dimensions.get("window").height;
-        const screenWidth = Dimensions.get("window").width;
-        const { layers, selectedValue } = this.state;
-        return (
-
-            <View style={styles.container} >
-
-                <View style={{
-                    flex: 1,
-                    height: screenHeight * 0.70,//solução temporária, procurar soluções pro menu se ajustar melhor ao layout
-                    paddingTop:  (screenHeight > 600 ? 0 : screenHeight * 0.09)
-                }}>
-                    <FlatList
-                        data={layers}
-                        keyExtractor={(datas) => datas.id.toString()}
-                        renderItem={({ item }) => {
-                            const isSelected = selectedValue[item.id];
-                            return (
-                                <View style={{ flexDirection: "row", flex: 1, marginTop: 15, }}>
-                                    <View style={{ flexDirection: "row", flex: 0.80 }}>
-                                        <Fontisto name="rain" color={colors.lightBlue} size={20} />
-                                        <Text style={styles.item}> {item.name} </Text>
-                                    </View>
-                                    <View
-                                        style={{ flex: 0.20, alignSelf: "flex-end", flexDirection: "row" }}>
-                                        <CheckBox
-                                            value={isSelected}
-                                            onChange={() => this.toggleItem(item.id)}
-                                            tintColors={{ true: colors.lightBlue, false: 'black' }}
-                                        />
-                                    </View>
-                                </View>
-                            );
-                        }}
-                        extraData={[selectedValue]}
-                    />
-                    <View style={styles.submit_btn}>
-                        <TouchableOpacity onPress={() => console.log("Aplicar camadas")}>
-                            <View style={styles.button}>
-                                <Text style={styles.text}>Confirmar</Text>
-                            </View>
-                        </TouchableOpacity>
-                    </View>
-                </View>
-            </View>
-        )
-    };
-
-
-};
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        flexDirection: "row",
-        alignSelf: "flex-end",        
-    backgroundColor: colors.white,
-    },
-    submit_btn: {
-        bottom: 0,
-        width: "100%",
-        padding: 20,
-    },
-    button: {
-        backgroundColor: "#1976D2",
-        borderRadius: 20,
-        justifyContent: "center",
-        alignItems: "center",
-        width: "100%",
-        height: 42,
-        textAlign: "center",
-    },
-    text: {
-        color: colors.white,
-        fontSize: 16,
-        textTransform: "uppercase",
-        fontWeight: "bold",
-    },
-    item: {
-        color: colors.lightBlue,
-        fontSize: dimensions.text.tertiary,
-        fontWeight: "bold",
-    }
-
-});
-

src/app/components/FloatButton.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useContext, useRef, useState } from "react";
 import {
   StyleSheet,
   Text,
@@ -6,18 +6,15 @@ import {
   View,
   Animated,
   TouchableWithoutFeedback,
+  Dimensions,
 } from "react-native";
+import { FlatList } from "react-native-gesture-handler";
 
 import colors from "../config/colors";
-import ActionButton from "react-native-action-button";
-import { AntDesign, Entypo } from "@expo/vector-icons";
-import { Colors } from "react-native/Libraries/NewAppScreen";
-import { FlatList } from "react-native-gesture-handler";
-import { Fontisto } from "@expo/vector-icons";
-import DataMenu from "./DataMenu";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
-
-import { Dimensions } from "react-native";
+import { dimensions } from "../config/dimensions";
+import { MapDataContext } from "../context/MapDataContext";
+import MenuItens from "./MenuItens";
 
 const screenWidth = Dimensions.get("window").width;
 const screenHeight = Dimensions.get("window").height;
@@ -25,7 +22,9 @@ const screenHeight = Dimensions.get("window").height;
 
 function FloatButton(props) {
   const animation = useRef(new Animated.Value(0)).current;
+
   const [open, setOpen] = useState(false);
+  const context = useContext(MapDataContext);
 
   const toggleMenu = () => {
     const value = open ? 0 : 1;
@@ -35,45 +34,115 @@ function FloatButton(props) {
       friction: 6,
       useNativeDriver: true,
     }).start();
-    console.log(open);
 
     setOpen(!open);
   };
-  const rotation = {
-    transform: [
+
+  /*--------------------------------------------------------MENU----------------------------------------------------- */
+  const [changed, setChanged] = useState(true);
+  const [layers, setLayers] = useState({
+    values:
+      [
         {
-        rotate: animation.interpolate({
-          inputRange: [0, 1],
-          outputRange: ["0deg", "0deg"],
-        }),
+          id: 1,
+          name: 'Chuva',
+          isSelected: context.layers.values[0].isSelected,
+        },
+        {
+          id: 2,
+          name: 'Ponto de alagamento',
+          isSelected: context.layers.values[1].isSelected,
+        },
+        {
+          id: 3,
+          name: 'Pluviômetro artesanal',
+          isSelected: context.layers.values[2].isSelected,
+        },
+        {
+          id: 4,
+          name: 'Pluviômetro oficial',
+          isSelected: context.layers.values[3].isSelected
+        },
+        {
+          id: 5,
+          name: 'Água no rio',
+          isSelected: context.layers.values[4].isSelected,
         },
-    ],
-  };
-
-  const menuStyle = {
-    transform: [
-      { scale: animation },
         {
-        translateY: animation.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, 30],
-        }),
+          id: 6,
+          name: 'Área de inundação',
+          isSelected: context.layers.values[5].isSelected,
         },
-    ],
+      ]
+  });
+
+  const selectedItens = (item) => {
+    
+    item.isSelected = !item.isSelected;
+    setChanged(!changed);
+  }
+
+  const renderItem = ({ item }) => {
+    const icon = item.isSelected ? "check-box" : "check-box-outline-blank";
+
+    return (
+      <MenuItens
+        item={item}
+        onPress={() => selectedItens(item)}
+        icon={icon}
+      />
+    );
   };
+
+  const applyLayers = () => {
+    context.setChanges(layers.values);
+    setOpen(false);
+  }
+
+  const DataMenu = () => {
+    return (
+      <View>
+        <View style={styles.Menucontainer} >
+
+          <View style={{
+            flex: 1,
+            height: screenHeight * 0.70,//solução temporária, procurar soluções pro menu se ajustar melhor ao layout
+            paddingTop: (screenHeight > 600 ? 0 : screenHeight * 0.09)
+          }}>
+            <FlatList
+              data={layers.values}
+              keyExtractor={(datas) => datas.id.toString()}
+              renderItem={renderItem}
+              extraData={changed}
+            />
+            <View style={styles.submit_btn}>
+              <TouchableOpacity onPress={() => applyLayers()}>
+                <View style={styles.button}>
+                  <Text style={styles.textBtn}>Confirmar</Text>
+                </View>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </View>
+    );
+  }
+  /*------------------------------------------------------------------------------------------------------------------------ */
+  
   return (
     <View style={[styles.container]}>
       <View style={{
         width: (open ? screenWidth * 0.70 : 0),
         flex: 1,
       }}>
-        <Animated.View style={[menuStyle]}>
-          <DataMenu />
+        <Animated.View>
+          {DataMenu()}
         </Animated.View>
+
       </View>
       <View style={{ margin: 35, alignSelf: "flex-end" }}>
         <TouchableWithoutFeedback onPress={toggleMenu}>
-          <Animated.View style={[styles.button, styles.menu, rotation]}>
+          <Animated.View style={[styles.floatButton, styles.menu]}>
             <MaterialCommunityIcons
               name="layers-plus"
               size={36}
@@ -93,7 +162,7 @@ const styles = StyleSheet.create({
     bottom: 0,
     right: 0,
   },
-  button: {
+  floatButton: {
     width: 50,
     height: 50,
     borderRadius: 6,
@@ -108,6 +177,42 @@ const styles = StyleSheet.create({
   menu: {
     backgroundColor: colors.primary,
   },
+  Menucontainer: {
+    flex: 1,
+    flexDirection: "row",
+    alignSelf: "flex-end",
+    backgroundColor: colors.white,
+  },
+  submit_btn: {
+    bottom: 0,
+    width: "100%",
+    padding: 20,
+  },
+  button: {
+    backgroundColor: "#1976D2",
+    borderRadius: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: 42,
+    textAlign: "center",
+  },
+  textBtn: {
+    color: colors.white,
+    fontSize: 16,
+    textTransform: "uppercase",
+    fontWeight: "bold",
+  },
+  text: {
+    color: colors.lightBlue,
+    fontSize: 14,
+    fontWeight: "bold",
+  },
+  item: {
+    color: colors.lightBlue,
+    fontSize: dimensions.text.tertiary,
+    fontWeight: "bold",
+  }
 });
 
 export default FloatButton;

src/app/components/MapMarkerList.js

@@ -10,6 +10,7 @@ function isRequestedValue(
   renderRiver,
   renderPluviometer
 ) {
+  
   return (
     (item.name == "pluviometer" && renderPluviometer) ||
     (item.name == "rain" && renderRain) ||
@@ -25,6 +26,7 @@ function MapMarkerList({
   renderRiver = true,
   renderPluviometer = true,
 }) {
+  
   const markers = useMarkers(reload);
   return (
     <>

src/app/components/MenuItens.js

@@ -0,0 +1,51 @@
+import React, { Component, useContext, useState } from "react";
+import { StyleSheet, Text, TouchableOpacity, View, Dimensions } from "react-native";
+import { FontAwesome5 } from '@expo/vector-icons';
+import { MaterialIcons } from '@expo/vector-icons';
+
+import colors from "../config/colors";
+import { dimensions } from "../config/dimensions";
+import { Ionicons } from '@expo/vector-icons';
+
+function MenuItens({ item, onPress, icon }) {   
+    return (
+        <TouchableOpacity onPress={onPress} style={[styles.item]}>
+            <View style={{ flexDirection: "row", flex: 1, marginTop: 12 }}>
+                <View style={{ flexDirection: "row", flex: 0.20 }}>
+                    <Ionicons name="md-rainy" size={24} color={colors.lightBlue} />
+                </View>
+                <View style={{ flexDirection: "row", flex: 0.70 }}>
+                    <Text style={[styles.text]}>{item.name}</Text>
+                </View>
+                <View
+                    style={{ flex: 0.10, alignSelf: "flex-start", flexDirection: "row" }}>
+                    <MaterialIcons name={icon} size={24} color={colors.lightBlue} />
+                </View>
+            </View>
+        </TouchableOpacity>
+    );
+};
+export default MenuItens;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        flexDirection: "row",
+        alignSelf: "flex-end",
+        backgroundColor: colors.white,
+    },
+    text: {
+        color: colors.lightBlue,
+        fontSize: 14,
+        fontWeight: "bold",
+    },
+    item: {
+        color: colors.lightBlue,
+        fontSize: dimensions.text.tertiary,
+        fontWeight: "bold",
+    }
+
+});
+
+
+

src/app/context/MapDataContext.js

@@ -0,0 +1,94 @@
+import React, { useState, createContext } from "react"
+
+
+export const MapDataContext = createContext();
+// 1/3(Ana): Preciso melhorar esse código
+
+const MapDataProvider = ({ children }) => {
+
+    const [layers, setLayers] = useState({
+        values:
+            [
+                {
+                    id: 1,
+                    name: 'Chuva',
+                    isSelected: true,
+                },
+                {
+                    id: 2,
+                    name: 'Ponto de alagamento',
+                    isSelected: true,
+                },
+                {
+                    id: 3,
+                    name: 'Pluviômetro artesanal',
+                    isSelected: true,
+                },
+                {
+                    id: 4,
+                    name: 'Pluviômetro oficial',
+                    isSelected: false
+                },
+                {
+                    id: 5,
+                    name: 'Água no rio',
+                    isSelected: true,
+                },
+                {
+                    id: 6,
+                    name: 'Área de inundação',
+                    isSelected: false,
+                },
+            ]
+    });
+
+
+    //chuva
+    const [rain, setRain] = useState(true);
+
+    //Ponto de alagamento
+    const [flood, setFlood] = useState(true);
+
+    //Pluviometro artesanal
+    const [pluviometer, setPluviometer] = useState(true);
+
+    //Água no rio
+    const [river, setRiver] = useState(true);
+
+    //Pluviometro oficial
+    const [officialPluviometer, setOfficialPluviometer] = useState(false);
+
+
+    //Área de inundação
+    const [floodAreas, setFloodAreas] = useState(false);
+
+    //1/3: harcoding 
+    const setChanges = (data) => {
+       layers.values = data;
+      setRain(layers.values[0].isSelected);
+      setFlood(layers.values[1].isSelected);
+      setPluviometer(layers.values[2].isSelected);
+      //setOfficialPluviometer(layers.values[3].isSelected);
+      setRiver(layers.values[4].isSelected);      
+     //setFloodAreas(layers.values[5].isSelected);
+
+    }
+
+
+    return (
+        <MapDataContext.Provider value={{
+            rain,
+            flood,
+            pluviometer,
+            river,
+            officialPluviometer,
+            floodAreas,
+            layers,
+            setChanges,
+
+        }}>
+            {children}
+        </MapDataContext.Provider>
+    )
+}
+export default MapDataProvider;