Refactoring code to use app/config/assets constant for all images

requires.

src/app/config/assets.js

@@ -0,0 +1,23 @@
+export default {
+  floodZones: {
+    floodIcon: require("../assets/pontos_alagamento_peq.png"),
+    passable: require("../assets/floodZonesAssets/passable_icon.png"),
+    notPassable: require("../assets/floodZonesAssets/not_passable_icon.png"),
+  },
+  riverLevel: {
+    riverIcon: require("../assets/nivel_rio.png"),
+    low: require("../assets/rio_baixo.png"),
+    normal: require("../assets/rio_normal.png"),
+    high: require("../assets/rio_alto.png"),
+    flooding: require("../assets/rio_transbordando.png"),
+  },
+  rainLevel: {
+    rain_0_5: require("../assets/sem_chuva.png"),
+    rain_1_5: require("../assets/chuva_fraca.png"),
+    rain_2_5: require("../assets/chuva_peq.png"),
+    rain_3_5: require("../assets/chuva_forte.png"),
+    rain_4_5: require("../assets/chuva_muito_forte.png"),
+    rain_5_5: require("../assets/chuva_pancadas.png"),
+  },
+  pluviometer: require("../assets/diario_pluviometrico.png"),
+};

src/app/hooks/selectFromDB.js

@@ -1,27 +1,28 @@
 import { useEffect, useReducer } from "react";
 
 import "../config/globals";
-
-const assets = {
-  floodZones: require("../assets/pontos_alagamento_peq.png"),
-  riverLevel: [
-    require("../assets/rio_baixo.png"),
-    require("../assets/rio_normal.png"),
-    require("../assets/rio_alto.png"),
-    require("../assets/rio_transbordando.png"),
-  ],
+import assets from "../config/assets";
+
+const custom_assets = {
+  pluviometer: assets.pluviometer,
+  floodZones: assets.floodZones.floodIcon,
+  riverLevel: ["low", "normal", "high", "flooding"].map((key) => {
+    return assets.riverLevel[key];
+  }),
   rainLevel: [
-    require("../assets/sem_chuva.png"),
-    require("../assets/chuva_peq.png"),
-    require("../assets/chuva_peq.png"),
-    require("../assets/chuva_forte.png"),
-    require("../assets/chuva_muito_forte.png"),
-    require("../assets/chuva_pancadas.png"),
-  ],
-  pluviometer: require("../assets/diario_pluviometrico.png"),
+    "rain_0_5",
+    "rain_1_5",
+    "rain_2_5",
+    "rain_3_5",
+    "rain_4_5",
+    "rain_5_5",
+  ].map((key) => {
+    return assets.rainLevel[key];
+  }),
 };
 
-// NOTE: For debug pourposes
+// NOTE: For debug pourposes, every icon will be placed some `offset` from
+// another. In final release, offset must be assigned to 0.0
 var offset = 0.001;
 var displacement = 0;
 
@@ -56,7 +57,7 @@ function partsePluviometer(row) {
       latitude: row["Latitude"] + displacement,
       longitude: row["Longitude"],
     },
-    image: assets.pluviometer,
+    image: custom_assets.pluviometer,
     description: row["Pluviometer"],
   };
 }
@@ -74,7 +75,7 @@ function parseFloodZones(row) {
       latitude: row["Latitude"],
       longitude: row["Longitude"] + displacement,
     },
-    image: assets.floodZones,
+    image: custom_assets.floodIcon,
     description: row["Description"],
   };
 }
@@ -94,7 +95,7 @@ function parseRiverLevel(row) {
       latitude: row["Latitude"],
       longitude: row["Longitude"] + displacement,
     },
-    image: assets.riverLevel[riverIdx],
+    image: custom_assets.riverLevel[riverIdx],
     description: riverLevel[riverIdx],
   };
 }
@@ -121,7 +122,7 @@ function parseRainLevel(row) {
       latitude: row["Latitude"],
       longitude: row["Longitude"] + displacement,
     },
-    image: assets.rainLevel[rainIdx],
+    image: custom_assets.rainLevel[rainIdx],
     description: rainLevel[rainIdx],
   };
 }

src/app/screens/RainSharingDataScreen.js

@@ -12,6 +12,7 @@ import { TouchableNativeFeedback } from "react-native-gesture-handler";
 import { insertRainData } from "../database/databaseLoader";
 import { showMessage } from "react-native-flash-message";
 import { scaleDimsFromWidth } from "../config/dimensions";
+import assets from "../config/assets";
 
 const validationSchema = Yup.object().shape({
   images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
@@ -63,7 +64,7 @@ function RainSharingDataScreen(props) {
                 >
                   <Image
                     style={styles.floodingLogo}
-                    source={require("../assets/sem_chuva.png")}
+                    source={assets.rainLevel.rain_0_5}
                   />
                   <Text style={styles.text}>Sem chuva</Text>
                 </View>
@@ -76,7 +77,7 @@ function RainSharingDataScreen(props) {
                 >
                   <Image
                     style={styles.floodingLogo}
-                    source={require("../assets/chuva_fraca.png")}
+                    source={assets.rainLevel.rain_1_5}
                   />
                   <Text style={styles.text}>Chuva fraca</Text>
                 </View>
@@ -89,7 +90,7 @@ function RainSharingDataScreen(props) {
                 >
                   <Image
                     style={styles.floodingLogo}
-                    source={require("../assets/chuva_peq.png")}
+                    source={assets.rainLevel.rain_2_5}
                   />
                   <Text style={styles.text}>Chuva moderada</Text>
                 </View>
@@ -104,7 +105,7 @@ function RainSharingDataScreen(props) {
                 >
                   <Image
                     style={styles.floodingLogo}
-                    source={require("../assets/chuva_forte.png")}
+                    source={assets.rainLevel.rain_3_5}
                   />
                   <Text style={styles.text}>Chuva forte</Text>
                 </View>
@@ -117,7 +118,7 @@ function RainSharingDataScreen(props) {
                 >
                   <Image
                     style={styles.floodingLogo}
-                    source={require("../assets/chuva_muito_forte.png")}
+                    source={assets.rainLevel.rain_4_5}
                   />
                   <Text style={styles.text}>Chuva muito forte</Text>
                 </View>
@@ -130,7 +131,7 @@ function RainSharingDataScreen(props) {
                 >
                   <Image
                     style={styles.floodingLogo}
-                    source={require("../assets/chuva_pancadas.png")}
+                    source={assets.rainLevel.rain_5_5}
                   />
                   <Text style={styles.text}>Pancada de chuva</Text>
                 </View>

src/app/screens/RiverFloodSharingDataScreen.js

@@ -11,7 +11,8 @@ import colors from "../config/colors";
 import { TouchableNativeFeedback } from "react-native-gesture-handler";
 import { insertRiverData } from "../database/databaseLoader";
 import { showMessage } from "react-native-flash-message";
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import assets from "../config/assets";
 
 const validationSchema = Yup.object().shape({
   images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
@@ -37,91 +38,96 @@ function RiverFloodSharingDataScreen(props) {
         Nível da água do rio
       </Text>
       <KeyboardAwareScrollView
-      resetScrollToCoords={{ x: 0, y: 0 }}
-      contentContainerStyle={styles.container}
-      scrollEnabled={true}>
-      <Form
-        initialValues={{
-          images: [],
-        }}
-        onSubmit={(values) => {
-          insertRiverData({ ...values, riverScale, location });
-          showMessage({
-            message: "Informação enviada!",
-            duration: 1950,
-            icon: "success",
-            type: "success",
-          });          
-          props.navigation.goBack(null);
-        }}
-        validationSchema={validationSchema}
+        resetScrollToCoords={{ x: 0, y: 0 }}
+        contentContainerStyle={styles.container}
+        scrollEnabled={true}
       >
-        <View>
-          <View
-            style={{ flexDirection: "row", justifyContent: "space-around" }}
-          >
-            <TouchableNativeFeedback onPress={() => setRiverScale(0)}>
-              <View
-                borderWidth={riverScale == 0 ? borderWidth : 0}
-                style={styles.img_block}
-              >
-                <Image
-                  style={styles.floodingLogo}
-                  source={require("../assets/rio_baixo.png")}
-                />
-                <Text style={styles.text}>Baixo</Text>
-              </View>
-            </TouchableNativeFeedback>
+        <Form
+          initialValues={{
+            images: [],
+          }}
+          onSubmit={(values) => {
+            insertRiverData({ ...values, riverScale, location });
+            showMessage({
+              message: "Informação enviada!",
+              duration: 1950,
+              icon: "success",
+              type: "success",
+            });
+            props.navigation.goBack(null);
+          }}
+          validationSchema={validationSchema}
+        >
+          <View>
+            <View
+              style={{ flexDirection: "row", justifyContent: "space-around" }}
+            >
+              <TouchableNativeFeedback onPress={() => setRiverScale(0)}>
+                <View
+                  borderWidth={riverScale == 0 ? borderWidth : 0}
+                  style={styles.img_block}
+                >
+                  <Image
+                    style={styles.floodingLogo}
+                    source={assets.riverLevel.low}
+                  />
+                  <Text style={styles.text}>Baixo</Text>
+                </View>
+              </TouchableNativeFeedback>
 
-            <TouchableNativeFeedback onPress={() => setRiverScale(1)}>
-              <View
-                borderWidth={riverScale == 1 ? borderWidth : 0}
-                style={styles.img_block}
-              >
-                <Image
-                  style={styles.floodingLogo}
-                  source={require("../assets/rio_normal.png")}
-                />
-                <Text style={styles.text}>Rio normal</Text>
-              </View>
-            </TouchableNativeFeedback>
-          </View>
+              <TouchableNativeFeedback onPress={() => setRiverScale(1)}>
+                <View
+                  borderWidth={riverScale == 1 ? borderWidth : 0}
+                  style={styles.img_block}
+                >
+                  <Image
+                    style={styles.floodingLogo}
+                    source={assets.riverLevel.normal}
+                  />
+                  <Text style={styles.text}>Rio normal</Text>
+                </View>
+              </TouchableNativeFeedback>
+            </View>
 
-          <View
-            style={{ marginTop: 10, flexDirection: "row", justifyContent: "space-around" }}
-          >
-            <TouchableNativeFeedback onPress={() => setRiverScale(2)}>
-              <View
-                borderWidth={riverScale == 2 ? borderWidth : 0}
-                style={styles.img_block}
-              >
-                <Image
-                  style={styles.floodingLogo}
-                  source={require("../assets/rio_alto.png")}
-                />
-                <Text style={styles.text}>Alto</Text>
-              </View>
-            </TouchableNativeFeedback>
+            <View
+              style={{
+                marginTop: 10,
+                flexDirection: "row",
+                justifyContent: "space-around",
+              }}
+            >
+              <TouchableNativeFeedback onPress={() => setRiverScale(2)}>
+                <View
+                  borderWidth={riverScale == 2 ? borderWidth : 0}
+                  style={styles.img_block}
+                >
+                  <Image
+                    style={styles.floodingLogo}
+                    source={assets.riverLevel.high}
+                  />
+                  <Text style={styles.text}>Alto</Text>
+                </View>
+              </TouchableNativeFeedback>
 
-            <TouchableNativeFeedback onPress={() => setRiverScale(3)}>
-              <View
-                borderWidth={riverScale == 3 ? borderWidth : 0}
-                style={styles.img_block}
-              >
-                <Image
-                  style={styles.floodingLogo}
-                  source={require("../assets/rio_transbordando.png")}
-                />
-                <Text style={styles.text}>Transbordando</Text>
-              </View>
-            </TouchableNativeFeedback>
+              <TouchableNativeFeedback onPress={() => setRiverScale(3)}>
+                <View
+                  borderWidth={riverScale == 3 ? borderWidth : 0}
+                  style={styles.img_block}
+                >
+                  <Image
+                    style={styles.floodingLogo}
+                    source={assets.riverLevel.flooding}
+                  />
+                  <Text style={styles.text}>Transbordando</Text>
+                </View>
+              </TouchableNativeFeedback>
+            </View>
           </View>
-        </View>
-        
-        <FormImagePicker backgroundColor="#1976D2" name="images" />
 
-        <SubmitButton title="Enviar" backgroundColor={colors.primary} />
-      </Form>
+          <FormImagePicker backgroundColor="#1976D2" name="images" />
+
+          <SubmitButton title="Enviar" backgroundColor={colors.primary} />
+        </Form>
       </KeyboardAwareScrollView>
     </Screen>
   );

src/app/screens/SharingDataScreen.js

@@ -7,7 +7,7 @@ import RainSharingDataScreen from "../screens/RainSharingDataScreen";
 import SharingFloodZonesScreen from "./SharingFloodZonesScreen";
 import PluviometerSharingDataScreen from "./PluviometerSharingDataScreen";
 import RiverFloodSharingDataScreen from "./RiverFloodSharingDataScreen";
-
+import assets from "../config/assets";
 //1/3
 
 function SharingDataScreen({ navigation }) {
@@ -20,7 +20,7 @@ function SharingDataScreen({ navigation }) {
         >
           <Image
             style={styles.floodingLogo}
-            source={require("../assets/pontos_alagamento_peq.png")}
+            source={assets.floodZones.floodIcon}
           />
           <Text style={styles.text}>Pontos de {"\n"}alagamento</Text>
         </TouchableOpacity>
@@ -31,7 +31,7 @@ function SharingDataScreen({ navigation }) {
         >
           <Image
             style={styles.floodingLogo}
-            source={require("../assets/chuva_peq.png")}
+            source={assets.rainLevel.rain_2_5}
           />
           <Text style={styles.text}>Chuva</Text>
         </TouchableOpacity>
@@ -42,10 +42,7 @@ function SharingDataScreen({ navigation }) {
           style={{ alignItems: "center" }}
           onPress={() => navigation.navigate("PluviometerSharingData")}
         >
-          <Image
-            style={styles.floodingLogo}
-            source={require("../assets/diario_pluviometrico.png")}
-          />
+          <Image style={styles.floodingLogo} source={assets.pluviometer} />
           <Text style={styles.text}>Diário do{"\n"}pluviômetro</Text>
         </TouchableOpacity>
 
@@ -55,7 +52,7 @@ function SharingDataScreen({ navigation }) {
         >
           <Image
             style={styles.floodingLogo}
-            source={require("../assets/nivel_rio.png")}
+            source={assets.riverLevel.riverIcon}
           />
           <Text style={styles.text}>Nível de água {"\n"}no rio</Text>
         </TouchableOpacity>

src/app/screens/SharingFloodZonesScreen.js

@@ -12,6 +12,7 @@ import { insertFloodZone } from "../database/databaseLoader";
 import { showMessage } from "react-native-flash-message";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import Screen from "../components/Screen";
+import assets from "../config/assets";
 
 function submitForm(props) {
   // console.log(props);
@@ -72,7 +73,7 @@ function SharingFloodZonesScreen(props) {
               >
                 <Image
                   style={styles.image}
-                  source={require("../assets/floodZonesAssets/passable_icon.png")}
+                  source={assets.floodZones.passable}
                 />
                 <Text style={styles.text}>Transitável</Text>
               </View>
@@ -85,7 +86,7 @@ function SharingFloodZonesScreen(props) {
               >
                 <Image
                   style={styles.image}
-                  source={require("../assets/floodZonesAssets/not_passable_icon.png")}
+                  source={assets.floodZones.notPassable}
                 />
                 <Text style={styles.text}>Intransitável</Text>
               </View>