Creating pluviometer register screen

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

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,

src/app/navigation/AccountNavigator.js

@@ -76,6 +76,7 @@ const AccountNavigator = () => (
     <Stack.Screen
       name="FormMap"
       component={MapFormScreen}
+      initialParams={{ setLocationAddr: null }}
       options={{
         title: "Voltar",
         headerStyle: {

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);
   };
 

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",