Styling/form labels

ApiCalls.js

@@ -136,3 +136,25 @@ export const deleteFish = async (fishId) => {
     console.error(error);
   }
 };
+
+// Image upload for species identification:
+export const uploadPhoto = async (photo) => {
+  try {
+    const response = await fetch(
+      "https://my-fly-box-api.herokuapp.com/api/v1/images",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json;charset=utf-8",
+        },
+        body: JSON.stringify({
+          base_64: photo,
+        }),
+      }
+    );
+    const imageResponse = await response.json();
+    return imageResponse;
+  } catch (error) {
+    console.error(error);
+  }
+};

components/FlyForm.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { StyleSheet, View, TextInput } from "react-native";
+import { StyleSheet, View, TextInput, Text } from "react-native";
 import { updateFlyEntry, clearFlyEntry } from "../actions";
 import { connect } from "react-redux";
 
@@ -19,25 +19,28 @@ class FlyForm extends Component {
   handleChange = (property, text) => {
     this.setState({ property: text });
     this.props.updateFlyEntry(property, text);
-  }
+  };
 
   render() {
     return (
       <View style={styles.container}>
+        <Text style={styles.label}>Fly Name:</Text>
         <TextInput
           style={styles.input}
           placeholder="Enter Fly Name"
           value={this.props.currentFlyEntry.name}
           onChangeText={(text) => this.handleChange("name", text)}
         />
 
+        <Text style={styles.label}>Fly Color:</Text>
         <TextInput
           style={styles.input}
           placeholder="Enter Fly Color"
           value={this.props.currentFlyEntry.color}
           onChangeText={(text) => this.handleChange("color", text)}
         />
 
+        <Text style={styles.label}>Fly Size:</Text>
         <TextInput
           style={styles.input}
           placeholder="Enter Fly Size"
@@ -46,13 +49,15 @@ class FlyForm extends Component {
           onChangeText={(text) => this.handleChange("size", text)}
         />
 
+        <Text style={styles.label}>Type of Fly:</Text>
         <TextInput
           style={styles.input}
-          placeholder="Enter Fly Category"
+          placeholder="Enter Fly Type"
           value={this.props.currentFlyEntry.category}
           onChangeText={(text) => this.handleChange("category", text)}
         />
 
+        <Text style={styles.label}>Quantity:</Text>
         <TextInput
           style={styles.input}
           placeholder="Enter Fly Amount"
@@ -70,7 +75,15 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    paddingTop: 45,
+    paddingTop: 10,
+    marginVertical: "10%",
+  },
+
+  label: {
+    color: "#212326",
+    fontSize: 14,
+    fontWeight: "500",
+    marginBottom: 5,
   },
 
   input: {

components/PhotoSelector.js

@@ -1,17 +1,13 @@
 import React, { Component } from "react";
-import {
-  Text,
-  View,
-  TouchableOpacity,
-  Platform,
-} from "react-native";
+import { Text, View, TouchableOpacity, Platform } from "react-native";
 import { Camera } from "expo-camera";
 import * as Permissions from "expo-permissions";
 import { FontAwesome, Ionicons } from "@expo/vector-icons";
 import * as ImagePicker from "expo-image-picker";
 import * as FileSystem from "expo-file-system";
 import { connect } from "react-redux";
 import { updateFishEntry } from "../actions";
+import { uploadPhoto } from "../ApiCalls";
 
 class PhotoSelector extends Component {
   constructor(props) {
@@ -46,7 +42,8 @@ class PhotoSelector extends Component {
         encoding: "base64",
       });
       await this.props.updateFishEntry("image", base64);
-      // this.uploadPhoto(base64);
+      // This is where we would then call the uploadPhoto post request to send the image to identify the species. This is working properly in development, but not on Heroku on a production level. Commenting out the invocation to avoid errors while this error is being researched.
+      // uploadPhoto(base64);
       this.props.navigation.navigate("AddFish");
     }
   };
@@ -59,28 +56,11 @@ class PhotoSelector extends Component {
       encoding: "base64",
     });
     await this.props.updateFishEntry("image", base64);
-    // this.uploadPhoto(base64);
+    // This is where we would then call the uploadPhoto post request to send the image to identify the species. This is working properly in development, but not on Heroku on a production level. Commenting out the invocation to avoid errors while this error is being researched.
+    // uploadPhoto(base64);
     this.props.navigation.navigate("AddFish");
   };
 
-  uploadPhoto = async (photo) => {
-    const response = await fetch(
-      "https://my-fly-box-api.herokuapp.com/api/v1/images",
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json;charset=utf-8",
-        },
-        body: JSON.stringify({
-          base_64: photo,
-        }),
-      }
-    );
-
-    const imageResponse = await response.json();
-    console.log(imageResponse);
-  };
-
   render() {
     const { hasPermission } = this.state;
     if (hasPermission === null) {

containers/AddFly.js

@@ -73,7 +73,7 @@ const styles = StyleSheet.create({
     fontFamily: "Helvetica Neue",
     fontWeight: "bold",
     color: "#0b7d83",
-    marginBottom: 10,
+    marginBottom: "15%",
   },
 
   buttonContainer: {

containers/EditFly.js

@@ -34,7 +34,6 @@ class EditFly extends Component {
   render() {
     return (
       <View style={styles.container}>
-
         <Text style={styles.intro}>Make changes to the selected fly:</Text>
 
         <FlyForm />
@@ -71,15 +70,15 @@ const styles = StyleSheet.create({
     paddingTop: 45,
     backgroundColor: "#f8f8ff",
   },
-  
+
   intro: {
     flex: 0.2,
     alignSelf: "center",
     fontSize: 20,
     fontFamily: "Helvetica Neue",
     fontWeight: "bold",
     color: "#0b7d83",
-    marginBottom: 10,
+    marginBottom: "15%",
   },
 
   buttonContainer: {