Add add a note flow (#47)

expo_project/components/MapWithMarkers.js

@@ -6,6 +6,7 @@ import { AnimatedCircularProgress } from 'react-native-circular-progress';
 import { iconColors } from '../constants/Colors';
 import MapConfig from '../constants/Map';
 import PersonIcon from '../components/PersonIcon';
+import * as _ from 'lodash';
 
 // NOTE: A longPress is more like 500ms,
 // however there's a delay between when the longPress is registered
@@ -22,21 +23,22 @@ class MapWithMarkers extends React.Component {
     this.state = {
       region: MapConfig.defaultRegion,
       circularProgressLocation: null,
-      nextMarkerColor: this.getRandomIconColor(),
+      nextMarkerColor: null,
     };
   }
 
   getRandomIconColor = () => {
-    const iconOptions = Object.values(iconColors);
-    return iconOptions[Math.floor(Math.random() * iconOptions.length)];
-  };
-
-  setNextColor = () => {
-    this.setState({ nextMarkerColor: this.getRandomIconColor() });
+    // enforce next color is not current color
+    const iconColorOptions = _.filter(
+      _.values(iconColors),
+      color => color !== this.state.nextMarkerColor,
+    );
+    return _.sample(iconColorOptions);
   };
 
   startProgressAnimation = (locationX, locationY) => {
     this.setState({
+      nextMarkerColor: this.getRandomIconColor(),
       circularProgressLocation: {
         top: locationY - CIRCULAR_PROGRESS_SIZE / 2,
         left: locationX - CIRCULAR_PROGRESS_SIZE / 2,
@@ -47,7 +49,6 @@ class MapWithMarkers extends React.Component {
   stopProgressAnimation = () => {
     this.setState({
       circularProgressLocation: null,
-      nextMarkerColor: this.getRandomIconColor(),
     });
   };
 

expo_project/components/NoteModal.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Modal, StyleSheet, Text, View } from 'react-native';
+import { Button, TextInput } from 'react-native-paper';
+import PropTypes from 'prop-types';
+
+class NoteModal extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      text: props.initialValue,
+    };
+  }
+
+  render() {
+    return (
+      <Modal animationType="none" visible={true}>
+        <View style={styles.modalHeader}>
+          <Button
+            onPress={() => {
+              this.props.onClose(this.props.initialValue);
+            }}>
+            <Text>Cancel</Text>
+          </Button>
+          <Button
+            onPress={() => {
+              this.props.onClose(this.state.text);
+            }}>
+            <Text>Done</Text>
+          </Button>
+        </View>
+        <View style={styles.modalBody}>
+          <View>
+            <TextInput
+              label="Add a note"
+              returnKeyLabel="Done"
+              autoFocus
+              value={this.state.text}
+              onChangeText={text => this.setState({ text })}
+              onSubmitEditing={() => {
+                this.props.onClose(this.state.text);
+              }}
+            />
+            <View style={styles.buttonWrapper}>
+              <Button
+                raised
+                primary
+                dark
+                onPress={() => {
+                  this.props.onClose(this.state.text);
+                }}>
+                <Text>Done</Text>
+              </Button>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: 'white',
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  modalBody: {
+    padding: 20,
+  },
+  buttonWrapper: {
+    marginTop: 20,
+  },
+});
+
+NoteModal.propTypes = {
+  initialValue: PropTypes.string,
+  onClose: PropTypes.func,
+};
+
+NoteModal.defaultProps = {
+  initialValue: '',
+  onClose: () => null,
+};
+
+export default NoteModal;

expo_project/components/PersonIcon.js

@@ -48,8 +48,12 @@ const styles = StyleSheet.create({
 
 PersonIcon.propTypes = {
   size: PropTypes.number.isRequired,
-  backgroundColor: PropTypes.string.isRequired,
+  backgroundColor: PropTypes.string,
   shadow: PropTypes.bool,
 };
 
+PropTypes.defaultProps = {
+  backgroundColor: 'white',
+};
+
 export default PersonIcon;

expo_project/components/Selectable.js

@@ -64,7 +64,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     backgroundColor: '#FAFAFA',
     borderRadius: 3,
-    borderColor: 'rgba(0, 0, 0, 0.0980392)',
+    borderColor: 'rgba(0, 0, 0, 0.12)',
     padding: 5,
     marginRight: 5,
     marginTop: 10,

expo_project/components/Survey.js

@@ -11,10 +11,6 @@ class Survey extends React.Component {
     const { activeMarker, onSelect } = this.props;
     return (
       <View>
-        <View style={styles.titleContainer}>
-          <Text style={styles.title}>{activeMarker.title}</Text>
-          <Text>{activeMarker.dateLabel}</Text>
-        </View>
         {_.map(QUESTION_CONFIG, question => {
           const { questionKey, questionLabel, options } = question;
           return (
@@ -30,14 +26,31 @@ class Survey extends React.Component {
             />
           );
         })}
+        {activeMarker.note && (
+          <View style={styles.noteContainer}>
+            <Text style={styles.noteTitle}>Note</Text>
+            <Text style={[styles.noteBody, { color: activeMarker.color }]}>
+              {activeMarker.note}
+            </Text>
+          </View>
+        )}
       </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
-  titleContainer: { paddingVertical: 10, paddingHorizontal: 20 },
-  title: { fontWeight: 'bold' },
+  noteContainer: { paddingVertical: 10 },
+  noteTitle: {
+    // match selectable style
+    marginBottom: 5,
+    paddingHorizontal: 20,
+  },
+  noteBody: {
+    fontFamily: 'monaco',
+    marginVertical: 10,
+    marginHorizontal: 20,
+  },
 });
 
 Survey.propTypes = {

expo_project/components/SurveyHeader.js

@@ -31,7 +31,7 @@ const styles = StyleSheet.create({
   text: {
     color: '#fff',
     fontWeight: '600',
-    fontSize: 24,
+    fontSize: 18,
     fontFamily: Theme.fonts.medium,
   },
 });

expo_project/config/studies.js

@@ -8,19 +8,9 @@ export default [
     surveys: [
       {
         type: 'activity',
-        title: 'Stationary Mapping tool',
+        title: '2pm - 3pm shift',
         routeName: 'SurveyScreen',
       },
-      {
-        type: 'lineOfSight',
-        title: 'Line of Sight tool',
-        routeName: 'ComingSoonScreen',
-      },
-      {
-        type: 'intercept',
-        title: 'Intercept study tool',
-        routeName: 'ComingSoonScreen',
-      },
     ],
   },
 ];

expo_project/screens/StudyIndexScreen.js

@@ -21,14 +21,14 @@ class SurveyIndexScreen extends React.Component {
         <ScrollView style={[styles.container]} stickyHeaderIndices={[0]}>
           <Caption style={styles.sectionTitle}>Your studies</Caption>
           {studies.map(study => (
-            <Card elevation={3}>
+            <Card elevation={3} key={study.studyId}>
               <CardContent style={styles.studyHeader}>
                 <Title>{study.studyName}</Title>
                 <Paragraph>by {study.studyAuthor}</Paragraph>
               </CardContent>
               {study.surveys.map(survey => {
                 return (
-                  <View>
+                  <View key={survey.title}>
                     <Divider />
                     <CardContent style={styles.surveyRow}>
                       <View style={styles.contentWrapper}>
@@ -78,7 +78,6 @@ const styles = StyleSheet.create({
   },
   sectionTitle: {
     backgroundColor: 'white',
-    fontWeight: 'bold',
     marginBottom: 10,
   },
   surveyRow: {