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

requires.
4 years ago · b0830b2841
6 changed files with 147 additions and 118 deletions
--- a/src/app/config/assets.js
+++ b/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"),
+};
--- a/src/app/hooks/selectFromDB.js
+++ b/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],
  };
 }
--- a/src/app/screens/RainSharingDataScreen.js
+++ b/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>
--- a/src/app/screens/RiverFloodSharingDataScreen.js
+++ b/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>
--- a/src/app/screens/SharingDataScreen.js
+++ b/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>
--- a/src/app/screens/SharingFloodZonesScreen.js
+++ b/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>