adding internet connection warning to screens

src/app/config/colors.js

@@ -20,5 +20,6 @@ export default {
   toggle: "#e5eff4",
   grayBG: "#EEECEC",
   blueWarning: "#75BDE0",
-  greenWarning: "#6BC69A"
+  greenWarning: "#6BC69A",
+  grayDisabled:"#838383"
 };

src/app/screens/AccountScreen.js

@@ -10,9 +10,11 @@ import colors from "../config/colors";
 import ConfirmationModal from "../components/ConfirmationModal";
 import utils from "../config/utils";
 import { mask } from "react-native-mask-text";
+import { useNetInfo } from "@react-native-community/netinfo";
+import ConnectionWarning from "../components/ConnectionWarning";
 
 function UserHeader({ name, fone }) {
-  const index  = utils.hashPhoneNumber(fone) % assets.avatar.length || 2
+  const index = utils.hashPhoneNumber(fone) % assets.avatar.length || 2;
   const Avatar = assets.avatar[index];
 
   var _mask = "";
@@ -21,20 +23,26 @@ function UserHeader({ name, fone }) {
       _mask = "(999) 99999-9999";
       break;
     case 11:
-      _mask = "(99) 99999-9999" 
+      _mask = "(99) 99999-9999";
       break;
     case 10:
-      _mask = "(99) 9999-9999" 
+      _mask = "(99) 9999-9999";
       break;
     default:
-      _mask = "(99) 9999-9999" 
+      _mask = "(99) 9999-9999";
       break;
   }
 
   const fone_mask = mask(fone, _mask);
 
   return (
-    <View style={{ flexDirection: "row", alignItems: "center", justifyContent: name ? "flex-start" : "center" }}>
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: name ? "flex-start" : "center",
+      }}
+    >
       <Avatar width={60} height={60} />
       <View style={{ marginLeft: 16 }}>
         <Text style={[styles.text, { fontWeight: "bold" }]}>{name}</Text>
@@ -45,6 +53,7 @@ function UserHeader({ name, fone }) {
 }
 
 function ProfileItensList({ icon, IconProvider, title, onPress }) {
+  const isConnected = useNetInfo().isConnected;
   return (
     <View>
       <View
@@ -54,7 +63,7 @@ function ProfileItensList({ icon, IconProvider, title, onPress }) {
         }}
       ></View>
 
-      <TouchableOpacity onPress={onPress}>
+      <TouchableOpacity disabled={!isConnected} onPress={onPress}>
         <View
           style={{
             marginVertical: 16,
@@ -62,13 +71,14 @@ function ProfileItensList({ icon, IconProvider, title, onPress }) {
             alignItems: "center",
           }}
         >
-          <IconProvider name={icon} size={18} color={colors.dark} />
+          <IconProvider name={icon} size={18} color={isConnected ? colors.black : colors.gray} />
           <Text
             style={{
               fontSize: 16,
               marginLeft: 16,
               textTransform: "uppercase",
               fontWeight: "500",
+              color: isConnected ? colors.black : colors.gray,
             }}
           >
             {title}
@@ -82,7 +92,7 @@ function ProfileItensList({ icon, IconProvider, title, onPress }) {
             <MaterialCommunityIcons
               name={"chevron-right"}
               size={20}
-              color={colors.dark}
+              color={isConnected ? colors.black : colors.gray}
             />
           </View>
         </View>
@@ -98,9 +108,9 @@ function AccountScreen(props) {
 
   //console.log(user);
   const logout = () => {
-    setShowLog(false)
+    setShowLog(false);
     setUser(true);
-    props.navigation.navigate("Home")
+    props.navigation.navigate("Home");
     authStorage.removeToken();
     authStorage.removeUser();
   };
@@ -108,19 +118,14 @@ function AccountScreen(props) {
   const activationActions = () => {
     if (user?.providerActivationKey)
       props.navigation.navigate("ActivateInstitutionShowCode");
-    else 
-      props.navigation.navigate("ActivateInstitutionCode");
+    else props.navigation.navigate("ActivateInstitutionCode");
   };
 
   const showActivation = () => {
-    if (!isRegistered)
-      return false
-    else if (user.role === "ROLE_CLIENT")
-      return !user.active
-    else
-      return true
-  }
-
+    if (!isRegistered) return false;
+    else if (user.role === "ROLE_CLIENT") return !user.active;
+    else return true;
+  };
 
   const profileItems = [
     {
@@ -136,7 +141,9 @@ function AccountScreen(props) {
       icon: "account",
       show: user.pluviometer != undefined,
       IconProvider: MaterialCommunityIcons,
-      title: user.pluviometer? "Dados do pluviômetro" : "Cadastrar pluviômetro",
+      title: user.pluviometer
+        ? "Dados do pluviômetro"
+        : "Cadastrar pluviômetro",
       onPress: () => {
         props.navigation.navigate("PluviometerRegister");
       },
@@ -182,6 +189,9 @@ function AccountScreen(props) {
   ];
 
   return (
+    <View style={{flex:1, width: "100%"}}>
+    
+    <ConnectionWarning />
     <Screen>
       <ScrollView>
         <View
@@ -218,6 +228,7 @@ function AccountScreen(props) {
         </View>
       </ScrollView>
     </Screen>
+    </View>
   );
 }
 

src/app/screens/MapFeedScreen.js

@@ -8,6 +8,7 @@ import LoadingMarkersModal from "../components/LoadingMarkersModal";
 import NoGPSError from "../components/NoGPSError";
 
 import NetInfo, { useNetInfo } from "@react-native-community/netinfo";
+import ConnectionWarning from "../components/ConnectionWarning";
 
 export default function MapFeedScreen(props) {
   HeaderBarMenu(props.navigation);
@@ -33,7 +34,10 @@ export default function MapFeedScreen(props) {
 
   // console.log("location:  " + JSON.stringify(global.location))
   return (
-    (global.location) ? (
+    <View style={{flex:1, width: "100%"}}>
+    
+    <ConnectionWarning />
+   { (global.location) ? (
     <View style={styles.container}>
       <OpenStreetMap
         markers={markers}
@@ -46,7 +50,8 @@ export default function MapFeedScreen(props) {
     </View>
     ):(
       <NoGPSError/>
-    )
+    )}
+    </View>
   );
 }
 

src/app/screens/SharingDataScreen.js

@@ -7,17 +7,17 @@ import { dimensions } from "../config/dimensions";
 import SvgLabeledButton from "../components/SvgLabeledButton";
 import { AuthContext } from "../auth/context";
 import { useNetInfo } from "@react-native-community/netinfo";
+import ConnectionWarning from "../components/ConnectionWarning";
 
 function SharingDataScreen({ navigation }) {
   const authContext = useContext(AuthContext);
   const [showLog, setShowLog] = useState(false);
   const [showLogPluv, setShowLogPluv] = useState(false);
+  const [showConnectionWarning, setShowConnectionWarning] = useState(false);
   const connection = useNetInfo().isConnected;
-  console.log(connection)
 
   const isRegistered = authContext.user?.username != null;
   const pluviometer = authContext.user?.pluviometer ? true : false;
-  // console.log(authContext.user?.pluviometer);
   const currentUser = authContext.user;
 
   const onConfirmPluv = () => {
@@ -30,6 +30,9 @@ function SharingDataScreen({ navigation }) {
   };
 
   return (
+    <View style={{flex:1, width: "100%"}}>
+    
+    <ConnectionWarning />
       <View style={styles.container}>
         <ConfirmationModal
           show={showLogPluv}
@@ -116,6 +119,7 @@ function SharingDataScreen({ navigation }) {
           </View>
         </ScrollView>
       </View>
+    </View>
   );
 }