Browse Source

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

requires.
master
GabrielTrettel 4 years ago
parent
commit
b0830b2841
  1. 23
      src/app/config/assets.js
  2. 45
      src/app/hooks/selectFromDB.js
  3. 13
      src/app/screens/RainSharingDataScreen.js
  4. 20
      src/app/screens/RiverFloodSharingDataScreen.js
  5. 13
      src/app/screens/SharingDataScreen.js
  6. 5
      src/app/screens/SharingFloodZonesScreen.js

23
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"),
};

45
src/app/hooks/selectFromDB.js

@ -1,27 +1,28 @@
import { useEffect, useReducer } from "react"; import { useEffect, useReducer } from "react";
import "../config/globals"; 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: [ 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 offset = 0.001;
var displacement = 0; var displacement = 0;
@ -56,7 +57,7 @@ function partsePluviometer(row) {
latitude: row["Latitude"] + displacement, latitude: row["Latitude"] + displacement,
longitude: row["Longitude"], longitude: row["Longitude"],
}, },
image: assets.pluviometer,
image: custom_assets.pluviometer,
description: row["Pluviometer"], description: row["Pluviometer"],
}; };
} }
@ -74,7 +75,7 @@ function parseFloodZones(row) {
latitude: row["Latitude"], latitude: row["Latitude"],
longitude: row["Longitude"] + displacement, longitude: row["Longitude"] + displacement,
}, },
image: assets.floodZones,
image: custom_assets.floodIcon,
description: row["Description"], description: row["Description"],
}; };
} }
@ -94,7 +95,7 @@ function parseRiverLevel(row) {
latitude: row["Latitude"], latitude: row["Latitude"],
longitude: row["Longitude"] + displacement, longitude: row["Longitude"] + displacement,
}, },
image: assets.riverLevel[riverIdx],
image: custom_assets.riverLevel[riverIdx],
description: riverLevel[riverIdx], description: riverLevel[riverIdx],
}; };
} }
@ -121,7 +122,7 @@ function parseRainLevel(row) {
latitude: row["Latitude"], latitude: row["Latitude"],
longitude: row["Longitude"] + displacement, longitude: row["Longitude"] + displacement,
}, },
image: assets.rainLevel[rainIdx],
image: custom_assets.rainLevel[rainIdx],
description: rainLevel[rainIdx], description: rainLevel[rainIdx],
}; };
} }

13
src/app/screens/RainSharingDataScreen.js

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

20
src/app/screens/RiverFloodSharingDataScreen.js

@ -11,7 +11,8 @@ import colors from "../config/colors";
import { TouchableNativeFeedback } from "react-native-gesture-handler"; import { TouchableNativeFeedback } from "react-native-gesture-handler";
import { insertRiverData } from "../database/databaseLoader"; import { insertRiverData } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message"; 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({ const validationSchema = Yup.object().shape({
images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"), images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
@ -39,7 +40,8 @@ function RiverFloodSharingDataScreen(props) {
<KeyboardAwareScrollView <KeyboardAwareScrollView
resetScrollToCoords={{ x: 0, y: 0 }} resetScrollToCoords={{ x: 0, y: 0 }}
contentContainerStyle={styles.container} contentContainerStyle={styles.container}
scrollEnabled={true}>
scrollEnabled={true}
>
<Form <Form
initialValues={{ initialValues={{
images: [], images: [],
@ -67,7 +69,7 @@ function RiverFloodSharingDataScreen(props) {
> >
<Image <Image
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/rio_baixo.png")}
source={assets.riverLevel.low}
/> />
<Text style={styles.text}>Baixo</Text> <Text style={styles.text}>Baixo</Text>
</View> </View>
@ -80,7 +82,7 @@ function RiverFloodSharingDataScreen(props) {
> >
<Image <Image
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/rio_normal.png")}
source={assets.riverLevel.normal}
/> />
<Text style={styles.text}>Rio normal</Text> <Text style={styles.text}>Rio normal</Text>
</View> </View>
@ -88,7 +90,11 @@ function RiverFloodSharingDataScreen(props) {
</View> </View>
<View <View
style={{ marginTop: 10, flexDirection: "row", justifyContent: "space-around" }}
style={{
marginTop: 10,
flexDirection: "row",
justifyContent: "space-around",
}}
> >
<TouchableNativeFeedback onPress={() => setRiverScale(2)}> <TouchableNativeFeedback onPress={() => setRiverScale(2)}>
<View <View
@ -97,7 +103,7 @@ function RiverFloodSharingDataScreen(props) {
> >
<Image <Image
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/rio_alto.png")}
source={assets.riverLevel.high}
/> />
<Text style={styles.text}>Alto</Text> <Text style={styles.text}>Alto</Text>
</View> </View>
@ -110,7 +116,7 @@ function RiverFloodSharingDataScreen(props) {
> >
<Image <Image
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/rio_transbordando.png")}
source={assets.riverLevel.flooding}
/> />
<Text style={styles.text}>Transbordando</Text> <Text style={styles.text}>Transbordando</Text>
</View> </View>

13
src/app/screens/SharingDataScreen.js

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

5
src/app/screens/SharingFloodZonesScreen.js

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

Loading…
Cancel
Save