feat: Add text entry to create observation (1st pass)

src/frontend/context/DraftObservationContext.js

@@ -4,6 +4,7 @@ import ImageResizer from "react-native-image-resizer";
 import debug from "debug";
 import hoistStatics from "hoist-non-react-statics";
 import pick from "lodash/pick";
+import debounce from "lodash/debounce";
 import AsyncStorage from "@react-native-community/async-storage";
 
 import { getDisplayName } from "../lib/utils";
@@ -107,6 +108,7 @@ class DraftObservationProvider extends React.Component<
     newDraft: this.newDraft.bind(this)
   };
   pending = [];
+  save = debounce(this.save, 500, { leading: true });
 
   async componentDidMount() {
     try {
@@ -121,6 +123,10 @@ class DraftObservationProvider extends React.Component<
   }
 
   componentDidUpdate() {
+    this.save();
+  }
+
+  save() {
     const { photos, value } = this.state;
     try {
       AsyncStorage.setItem(STORE_KEY, JSON.stringify({ photos, value }));

src/frontend/screens/ObservationEdit/Field.js

@@ -0,0 +1,27 @@
+// @flow
+import * as React from "react";
+
+import DraftObservationContext from "../../context/DraftObservationContext";
+
+type Props = {
+  fieldKey: string,
+  children: ({ value: any, onChange: (fieldValue: any) => any }) => React.Node
+};
+
+const Field = ({ fieldKey, children }: Props) => (
+  <DraftObservationContext.Consumer>
+    {({ value: { tags }, setValue }) => {
+      const value = tags[fieldKey];
+      const onChange = fieldValue =>
+        setValue({
+          tags: {
+            ...tags,
+            [fieldKey]: fieldValue
+          }
+        });
+      return children({ value, onChange });
+    }}
+  </DraftObservationContext.Consumer>
+);
+
+export default Field;

src/frontend/screens/ObservationEdit/ObservationEditView.js

@@ -1,13 +1,22 @@
 // @flow
 import React from "react";
-import { ScrollView, View, Text, StyleSheet } from "react-native";
+import {
+  ScrollView,
+  View,
+  Text,
+  StyleSheet,
+  TextInput,
+  Keyboard,
+  KeyboardAvoidingView
+} from "react-native";
 import { TouchableNativeFeedback } from "../../sharedComponents/Touchables";
 
 import LocationField from "../../sharedComponents/LocationField";
 import FormattedCoords from "../../sharedComponents/FormattedCoords";
+import Field from "./Field";
 import { CameraIcon, CategoryCircleIcon } from "../../sharedComponents/icons";
 import ThumbnailScrollView from "../../sharedComponents/ThumbnailScrollView";
-import { VERY_LIGHT_BLUE } from "../../lib/styles";
+import { VERY_LIGHT_BLUE, LIGHT_GREY } from "../../lib/styles";
 import { withDraft } from "../../context/DraftObservationContext";
 
 import type { PresetWithFields } from "../../context/PresetsContext";
@@ -60,6 +69,24 @@ const AddPhotoButton = ({ onPress }) => (
   </TouchableNativeFeedback>
 );
 
+const DescriptionField = () => (
+  <Field fieldKey="notes">
+    {({ value, onChange }) => (
+      <TextInput
+        style={styles.textInput}
+        value={value}
+        onChangeText={onChange}
+        placeholder="I'm a placeholder"
+        placeholderTextColor="silver"
+        underlineColorAndroid="transparent"
+        onBlur={() => console.log("blur")}
+        multiline
+        autoFocus
+      />
+    )}
+  </Field>
+);
+
 type Props = {
   onPressCategory: () => any,
   onPressCamera: () => any,
@@ -79,7 +106,7 @@ export const ObservationEdit = ({
         {fieldProps => <LocationView {...fieldProps} />}
       </LocationField>
       <CategoryView preset={preset} onPress={onPressCategory} />
-      <View style={styles.descriptionContainer} />
+      <DescriptionField />
       <PhotosView />
     </ScrollView>
     <AddPhotoButton onPress={onPressCamera} />
@@ -160,5 +187,17 @@ const styles = StyleSheet.create({
     flex: 1,
     fontWeight: "bold",
     fontSize: 20
+  },
+  textInput: {
+    flex: 1,
+    fontSize: 20,
+    padding: 20,
+    paddingBottom: 30,
+    color: "black",
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    textAlignVertical: "top",
+    backgroundColor: "white",
+    borderColor: LIGHT_GREY
   }
 });