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"),
@@ -39,7 +40,8 @@ function RiverFloodSharingDataScreen(props) {
       <KeyboardAwareScrollView
         resetScrollToCoords={{ x: 0, y: 0 }}
         contentContainerStyle={styles.container}
-      scrollEnabled={true}>
+        scrollEnabled={true}
+      >
         <Form
           initialValues={{
             images: [],
@@ -67,7 +69,7 @@ function RiverFloodSharingDataScreen(props) {
                 >
                   <Image
                     style={styles.floodingLogo}
-                  source={require("../assets/rio_baixo.png")}
+                    source={assets.riverLevel.low}
                   />
                   <Text style={styles.text}>Baixo</Text>
                 </View>
@@ -80,7 +82,7 @@ function RiverFloodSharingDataScreen(props) {
                 >
                   <Image
                     style={styles.floodingLogo}
-                  source={require("../assets/rio_normal.png")}
+                    source={assets.riverLevel.normal}
                   />
                   <Text style={styles.text}>Rio normal</Text>
                 </View>
@@ -88,7 +90,11 @@ function RiverFloodSharingDataScreen(props) {
             </View>
 
             <View
-            style={{ marginTop: 10, flexDirection: "row", justifyContent: "space-around" }}
+              style={{
+                marginTop: 10,
+                flexDirection: "row",
+                justifyContent: "space-around",
+              }}
             >
               <TouchableNativeFeedback onPress={() => setRiverScale(2)}>
                 <View
@@ -97,7 +103,7 @@ function RiverFloodSharingDataScreen(props) {
                 >
                   <Image
                     style={styles.floodingLogo}
-                  source={require("../assets/rio_alto.png")}
+                    source={assets.riverLevel.high}
                   />
                   <Text style={styles.text}>Alto</Text>
                 </View>
@@ -110,7 +116,7 @@ function RiverFloodSharingDataScreen(props) {
                 >
                   <Image
                     style={styles.floodingLogo}
-                  source={require("../assets/rio_transbordando.png")}
+                    source={assets.riverLevel.flooding}
                   />
                   <Text style={styles.text}>Transbordando</Text>
                 </View>

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>