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,32 +10,40 @@ 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 = "";
   switch (fone?.length) {
     case 12:
-      _mask = "(999) 99999-9999" ;
+      _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" }}>
-      <Avatar width={60} height={60}/>
+    <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>
         <Text style={styles.text}>{fone ? fone_mask : ""}</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,35 +118,32 @@ 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 = [
-   {
+    {
       icon: "lock",
       show: true,
       IconProvider: MaterialCommunityIcons,
       title: "alterar senha",
       onPress: () => {
-        props.navigation.navigate("PasswordRecovery", {user: user});
+        props.navigation.navigate("PasswordRecovery", { user: user });
       },
     },
     {
       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
@@ -189,7 +199,7 @@ function AccountScreen(props) {
             padding: 16,
           }}
         >
-          <UserHeader name={user.nickname} fone={user.username}/>
+          <UserHeader name={user.nickname} fone={user.username} />
 
           <View style={{ marginTop: 24 }}>
             {profileItems.map(
@@ -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,91 +30,95 @@ function SharingDataScreen({ navigation }) {
   };
 
   return (
-    <View style={styles.container}>
-      <ConfirmationModal
-        show={showLogPluv}
-        icon={"md-warning-outline"}
-        description="Para enviar um dado pluviométrico, cadastre um pluviômetro"
-        confirmationLabel="Cadastrar"
-        onConfirm={() => onConfirmPluv()} //{setShowLogPluv(false), navigation.navigate("Perfil")}}
-        onDecline={() => setShowLogPluv(false)}
-      />
-      <ConfirmationModal
-        show={showLog}
-        icon={"md-warning-outline"}
-        description={
-          "Para enviar uma informação," + "\n" + "faça o login ou cadastre-se"
-        }
-        confirmationLabel="LOGIN"
-        onConfirm={() => authContext.setUser(false)}
-        onDecline={() => setShowLog(false)}
-      />
-      <ScrollView>
-        <View
-          style={{
-            flexDirection: "row",
-            justifyContent: "center",
-            alignItems: "center",
-            marginTop: 30,
-          }}
-        >
-          <SvgLabeledButton
-            label={"ÁREA DE \nALAGAMENTO"}
-            style={{ marginRight: 24 }}
-            SvgImage={assets.floodZones.FloodZonesIcon}
-            onPress={() =>
-              navigation.navigate("FloodSharingData", { user: currentUser })
-            }
-            active={isRegistered && connection}
-            inactiveOnPress={() => setShowLog(true)}
-          />
+    <View style={{flex:1, width: "100%"}}>
     
-          <SvgLabeledButton
-            label={"CHUVA"}
-            onPress={() =>
-              navigation.navigate("RainSharingData", { user: currentUser })
-            }
-            SvgImage={assets.rainLevel.RainIcon}
-            active={isRegistered && connection}
-            inactiveOnPress={() => setShowLog(true)}
-          />
-        </View>
+    <ConnectionWarning />
+      <View style={styles.container}>
+        <ConfirmationModal
+          show={showLogPluv}
+          icon={"md-warning-outline"}
+          description="Para enviar um dado pluviométrico, cadastre um pluviômetro"
+          confirmationLabel="Cadastrar"
+          onConfirm={() => onConfirmPluv()} //{setShowLogPluv(false), navigation.navigate("Perfil")}}
+          onDecline={() => setShowLogPluv(false)}
+        />
+        <ConfirmationModal
+          show={showLog}
+          icon={"md-warning-outline"}
+          description={
+            "Para enviar uma informação," + "\n" + "faça o login ou cadastre-se"
+          }
+          confirmationLabel="LOGIN"
+          onConfirm={() => authContext.setUser(false)}
+          onDecline={() => setShowLog(false)}
+        />
+        <ScrollView>
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "center",
+              alignItems: "center",
+              marginTop: 30,
+            }}
+          >
+            <SvgLabeledButton
+              label={"ÁREA DE \nALAGAMENTO"}
+              style={{ marginRight: 24 }}
+              SvgImage={assets.floodZones.FloodZonesIcon}
+              onPress={() =>
+                navigation.navigate("FloodSharingData", { user: currentUser })
+              }
+              active={isRegistered && connection}
+              inactiveOnPress={() => setShowLog(true)}
+            />
+
+            <SvgLabeledButton
+              label={"CHUVA"}
+              onPress={() =>
+                navigation.navigate("RainSharingData", { user: currentUser })
+              }
+              SvgImage={assets.rainLevel.RainIcon}
+              active={isRegistered && connection}
+              inactiveOnPress={() => setShowLog(true)}
+            />
+          </View>
 
-        <View
-          style={{
-            flexDirection: "row",
-            justifyContent: "center",
-            flex: 1,
-            marginVertical: 24,
-          }}
-        >
-          <SvgLabeledButton
-            style={{ marginRight: 24 }}
-            label={"DIÁRIO DO\nPLUVIÔMETRO"}
-            onPress={() =>
-              navigation.navigate("PluviometerSharingData", {
-                user: currentUser,
-              })
-            }
-            SvgImage={assets.PluviometricDataIcon}
-            active={isRegistered && pluviometer && connection}
-            inactiveOnPress={() => {
-              setShowLog(!isRegistered),
-                setShowLogPluv(!pluviometer && isRegistered);
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "center",
+              flex: 1,
+              marginVertical: 24,
             }}
-          />
+          >
+            <SvgLabeledButton
+              style={{ marginRight: 24 }}
+              label={"DIÁRIO DO\nPLUVIÔMETRO"}
+              onPress={() =>
+                navigation.navigate("PluviometerSharingData", {
+                  user: currentUser,
+                })
+              }
+              SvgImage={assets.PluviometricDataIcon}
+              active={isRegistered && pluviometer && connection}
+              inactiveOnPress={() => {
+                setShowLog(!isRegistered),
+                  setShowLogPluv(!pluviometer && isRegistered);
+              }}
+            />
 
-          <SvgLabeledButton
-            label={"NÍVEL ÁGUA\nNO RIO"}
-            onPress={() =>
-              navigation.navigate("RiverFloodData", { user: currentUser })
-            }
-            SvgImage={assets.riverLevel.RiverIcon}
-            active={isRegistered && connection}
-            inactiveOnPress={() => setShowLog(true)}
-          />
-        </View>
-      </ScrollView>
+            <SvgLabeledButton
+              label={"NÍVEL ÁGUA\nNO RIO"}
+              onPress={() =>
+                navigation.navigate("RiverFloodData", { user: currentUser })
+              }
+              SvgImage={assets.riverLevel.RiverIcon}
+              active={isRegistered && connection}
+              inactiveOnPress={() => setShowLog(true)}
+            />
+          </View>
+        </ScrollView>
+      </View>
     </View>
   );
 }