Creating pluviometer register screen

3 years ago · 56db156650
5 changed files with 138 additions and 79 deletions
--- a/src/app/api/auth.js
+++ b/src/app/api/auth.js
@ -9,7 +9,7 @@ function login(name, password) {
  return {
    ok: true,
    data:
-      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiVXN1w6FyaW8gVGVzdGUiLCJlbWFpbCI6InVzdWFyaW9AdGVzdGUuY29tLmJyIiwiSUQiOiIxIn0.hGrMWzg3EPlmjbga4-hmcMFmkDINFAWVP9kOmebXeAM",
+      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiVXN1w6FyaW8gVGVzdGUiLCJlbWFpbCI6InVzdWFyaW9AdGVzdGUuY29tLmJyIiwiaW5zdGl0dXRpb25OYW1lIjoiRS4gRS4gVmljZW50ZSBMZXBvcmFjZSIsImluc3RpdHV0aW9uVHlwZSI6IkVzY29sYSIsIklEIjoiMSJ9.dk-Nl5VLvAWhT_JUYREpJYYCc98s71SyHJwmwH55ZS4",
  };
 }

--- a/src/app/components/forms/FormLocationPicker.js
+++ b/src/app/components/forms/FormLocationPicker.js
@ -12,11 +12,12 @@ function FormLocationPicker({ subtitle }) {

  return (
      <View style={styles.location}>
+
        <View style={styles.mapIcon}>
          <MaterialIcons
            name="location-on"
-            size={30}
-            color={colors.primary}
+            size={20}
+            color="white"
          />
        </View>

@ -32,6 +33,7 @@ function FormLocationPicker({ subtitle }) {
            {subtitle ? subtitle : "Defina o local no mapa"}
          </Text>
        </View>
+
      </View>
  );
 }
@ -41,14 +43,18 @@ const styles = StyleSheet.create({
    flexDirection: "row",
    alignContent: "space-around",
    justifyContent: "flex-start",
+    marginTop: 24,
  },

  adressText: {
    height: "100%",
-    paddingLeft: 12,
+    paddingLeft: 16,
  },

  mapIcon: {
+    backgroundColor: colors.primary,
+    width: 40,
+    height: 40,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 5,
--- a/src/app/navigation/AccountNavigator.js
+++ b/src/app/navigation/AccountNavigator.js
@ -76,6 +76,7 @@ const AccountNavigator = () => (
    <Stack.Screen
      name="FormMap"
      component={MapFormScreen}
+      initialParams={{ setLocationAddr: null }}
      options={{
        title: "Voltar",
        headerStyle: {
--- a/src/app/screens/MapFormScreen.js
+++ b/src/app/screens/MapFormScreen.js
@ -24,14 +24,21 @@ const MapFormScreen = (props) => {
      var number = address[0].name == null ? "" : ", " + address[0].name;
      var district =
        address[0].district == null ? "" : "\n" + address[0].district;
-      context.saveNewLocation(street + number + district, coordenadas);
+      return street + number + district;
    } else {
      //Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio
-      context.saveNewLocation("Erro ao carregar endereço", coordenadas);
+      return "Erro ao carregar endereço";
    }
  };
+
  const setLocation = () => {
-    getAddress(moveEndListener);
+    getAddress(moveEndListener).then((addr) => {
+      if (props.route.params && props.route.params.setLocationAddr)
+        props.route.params.setLocationAddr(addr);
+      else
+        context.saveNewLocation(addr, moveEndListener);
+    });
+
    props.navigation.goBack(null);
  };

--- a/src/app/screens/PluviometerRegisterScreen.js
+++ b/src/app/screens/PluviometerRegisterScreen.js
@ -1,41 +1,98 @@
-import React, { useState, useContext, useEffect } from "react";
-import { StyleSheet, Text, View, ScrollView } from "react-native";
-import { MaterialCommunityIcons, FontAwesome } from "@expo/vector-icons";
+import React, { useState, useContext } from "react";
+import { MaterialIcons } from "@expo/vector-icons";
+import { StyleSheet, Text, View } from "react-native";
 import { Form, SubmitButton } from "../components/forms";
-import Screen from "../components/Screen";
 import { showMessage } from "react-native-flash-message";
 import { dimensions, scaleDimsFromWidth } from "../config/dimensions";
 import FormDatePicker from "../components/forms/FormDatePicker";
 import colors from "../config/colors/";
 import moment from "moment";
-import FormLocationPicker from "../components/forms/FormLocationPicker";
-import { EventLocationContext } from "../context/EventLocationContext";
-import SchoolPicker from "../components/SchoolPicker";
 import { TouchableOpacity } from "react-native-gesture-handler";
-import DatePicker from "../components/DatePicker";
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import { FontAwesome5 } from "@expo/vector-icons";
+import { AuthContext } from "../auth/context";
+import { Shadow } from "react-native-shadow-2";

 const dims = scaleDimsFromWidth(85, 85, 25);

-function PluviometerRegisterScreen(props) {
-  const context = useContext(EventLocationContext);
+function Institution({ user }) {
+  return (
+    <View style={{ marginTop: 24, marginBottom: 24 }}>
+      <Text style={styles.label}>Tippo de instituição: </Text>
+      <View style={{ flexDirection: "row", marginTop: 16 }}>
+        <FontAwesome5 name="university" size={30} color={colors.primary} />
+        <Text style={styles.subText}>{user.institutionType}</Text>
+      </View>

-  useEffect(() => {
-    context.defaultLocation();
-  }, []);
+      <Text style={[styles.label, { marginTop: 24 }]}>
+        Nome da instituição:
+      </Text>
+      <View style={{ flexDirection: "row" }}>
+        <FontAwesome5 name="university" size={30} color={colors.primary} />
+        <Text style={styles.subText}>{user.institutionName}</Text>
+      </View>
+    </View>
+  );
+}

-  const location = context.eventCoordinates;
-  const address = context.eventLocation;
-  const [date, setDate] = useState(moment());
-  const [time, setTime] = useState(moment());
-  const [school, setSchool] = useState();
+function LocationPicker({ navigation }) {
+  const [location, setLocationAddr] = useState("Defina o endereço no mapa");

  return (
    <View
      style={{
-        padding: 16,
+        flexDirection: "row",
+        alignItems: "center",
+        flexShrink: 1,
      }}
    >
+      <MaterialIcons name="location-on" size={30} color={colors.primary} />
+      <View
+        style={{
+          marginLeft: 16,
+          flex: 1,
+        }}
+      >
+        <Shadow
+          viewStyle={{ width: "100%", height: 48 }}
+          offset={[0, 4]}
+          distance={4}
+          radius={4}
+          startColor="rgba(0, 0, 0, 0.25)"
+          paintInside={true}
+        >
+          <TouchableOpacity
+            onPress={() =>
+              navigation.navigate("FormMap", {
+                setLocationAddr: setLocationAddr,
+              })
+            }
+          >
+            <View
+              style={{
+                paddingLeft: 16,
+                backgroundColor: colors.white,
+                height: 48,
+                borderRadius: 5,
+                flexDirection: "row",
+                alignItems: "center",
+              }}
+            >
+              <Text styles={styles.subText}>{location}</Text>
+            </View>
+          </TouchableOpacity>
+        </Shadow>
+      </View>
+    </View>
+  );
+}
+
+function PluviometerRegisterScreen(props) {
+  const [date, setDate] = useState(moment());
+  const [time, setTime] = useState(moment());
+  const { user, _ } = useContext(AuthContext);
+
+  return (
+    <View>
      <Form
        initialValues={{}}
        onSubmit={() => {
@ -48,21 +105,13 @@ function PluviometerRegisterScreen(props) {
          });
        }}
      >
-        {/* <KeyboardAwareScrollView */}
-        {/* keyboardShouldPersistTaps={"handled"} */}
-        {/* > */}
-        <View
-          style={{
-            height: "100%",
-          }}
-        >
+        <View padding={16}>
          <Text style={styles.title}>Cadastro do Pluviômetro</Text>

-          <View>
          <Text
            style={{
              marginTop: 24,
-                marginBottom: 12,
+              marginBottom: 16,
              fontSize: dimensions.text.secondary,
              fontWeight: "bold",
              textAlign: "left",
@ -74,7 +123,7 @@ function PluviometerRegisterScreen(props) {

          <View
            style={{
-                marginBottom: 24
+              marginBottom: 24,
            }}
          >
            <FormDatePicker
@ -86,24 +135,13 @@ function PluviometerRegisterScreen(props) {
            />
          </View>

-            <TouchableOpacity
-              onPress={() => props.navigation.navigate("FormMap")}
-            >
-              <View>
          <Text style={styles.label}>Endereço do pluviômetro*: </Text>
-                <FormLocationPicker subtitle="Defina o endereço do pluviômetro" />
-              </View>
-            </TouchableOpacity>
+          <LocationPicker navigation={props.navigation} />

-            <View style={{ marginTop: 24, marginBottom: 12 }}>
-              <Text style={styles.label}>Instituição: </Text>
-              <SchoolPicker itemSelected={(value) => setSchool(value)} />
-            </View>
+          {user.institutionType && <Institution user={user} />}

          <SubmitButton title="Cadastrar" paddingHorizontal={0} />
        </View>
-          {/* </KeyboardAwareScrollView> */}
-        </View>
      </Form>
    </View>
  );
@ -123,6 +161,13 @@ const styles = StyleSheet.create({
    textAlign: "left",
    color: colors.secondary,
  },
+  subText: {
+    color: colors.subText,
+    fontSize: 16,
+    alignSelf: "center",
+    fontWeight: "500",
+    paddingLeft: 16,
+  },
  title: {
    fontSize: 18,
    fontWeight: "bold",