Add a study home screen (#39)

* add a material ui library and an index screen
sidewalklabs · Sep 4, 2018 · 553c08b · 553c08b
1 parent 75864c9
commit 553c08b
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 57 deletions.
diff --git a/expo_project/.babelrc b/expo_project/.babelrc
@@ -3,6 +3,9 @@
   "env": {
     "development": {
       "plugins": ["transform-react-jsx-source"]
+    },
+    "production": {
+      "plugins": ["react-native-paper/babel"]
     }
   }
 }
diff --git a/expo_project/components/ColoredButton.js b/expo_project/components/ColoredButton.js
diff --git a/expo_project/config/studies.js b/expo_project/config/studies.js
@@ -0,0 +1,14 @@
+// TODO: reconfigure this once backend relations are known
+export default [
+  {
+    studyId: "50Kb9Jfa1ejkURIIE3T2",
+    surveyId: "UaAyBbLNOobGO2prwpsT",
+    studyName: "Thorncliffe Park",
+    studyAuthor: "Park People",
+    surveys: [
+      { type: "activity", title: "Stationary Mapping" },
+      { type: "lineOfSight", title: "Line of Sight (coming soon!)" },
+      { type: "intercept", title: "Intercepts (coming soon!)" }
+    ]
+  }
+];
diff --git a/expo_project/navigation/AppNavigator.js b/expo_project/navigation/AppNavigator.js
@@ -1,14 +1,16 @@
 import React from "react";
 import { createStackNavigator } from "react-navigation";
 import colors from "../constants/Colors";
-import HomeScreen from "../screens/HomeScreen";
+import SurveyScreen from "../screens/SurveyScreen";
+import StudyIndexScreen from "../screens/StudyIndexScreen";
 
 export default createStackNavigator(
   {
-    Home: HomeScreen
+    SurveyScreen,
+    StudyIndexScreen
   },
   {
-    initialRouteName: "Home",
+    initialRouteName: "StudyIndexScreen",
     navigationOptions: {
       headerStyle: {
         backgroundColor: colors.colorPrimary

diff --git a/expo_project/package.json b/expo_project/package.json
@@ -17,6 +17,7 @@
     "react": "16.3.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz",
     "react-native-circular-progress": "^1.0.1",
+    "react-native-paper": "^1.12.0",
     "react-native-svg": "^6.5.2",
     "react-navigation": "2.3.1"
   },

diff --git a/expo_project/screens/StudyIndexScreen.js b/expo_project/screens/StudyIndexScreen.js
@@ -0,0 +1,92 @@
+import React from "react";
+import { ScrollView, StyleSheet, Text, View } from "react-native";
+import { withNavigation } from "react-navigation";
+
+import studies from "../config/studies";
+import {
+  Button,
+  Caption,
+  Card,
+  CardContent,
+  Divider,
+  Title,
+  Paragraph
+} from "react-native-paper";
+
+class SurveyIndexScreen extends React.Component {
+  static navigationOptions = {
+    title: "Studies"
+  };
+
+  render() {
+    return (
+      <View style={[styles.container]}>
+        <ScrollView stickyHeaderIndices={[0]}>
+          <Caption style={styles.sectionTitle}>Your studies</Caption>
+          {studies.map(study => (
+            <Card elevation={3}>
+              <CardContent style={styles.studyHeader}>
+                <Title>{study.studyName}</Title>
+                <Paragraph>by {study.studyAuthor}</Paragraph>
+              </CardContent>
+              {study.surveys.map(survey => {
+                return (
+                  <View>
+                    <Divider />
+                    <CardContent style={styles.surveyRow}>
+                      <Text style={styles.surveyTitle}>{survey.title}</Text>
+                      <Button
+                        dark
+                        raised
+                        primary
+                        onPress={() =>
+                          this.props.navigation.navigate("SurveyScreen", {
+                            studyId: study.studyId,
+                            surveyId: study.surveyId,
+                            studyName: study.studyName,
+                            studyAuthor: study.studyAuthor,
+                            surveyType: survey.type,
+                            surveyTitle: survey.title
+                          })
+                        }
+                      >
+                        Start
+                      </Button>
+                    </CardContent>
+                  </View>
+                );
+              })}
+            </Card>
+          ))}
+        </ScrollView>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "white",
+    flex: 1,
+    padding: 10
+  },
+  studyHeader: {
+    paddingBottom: 10
+  },
+  sectionTitle: {
+    backgroundColor: "white",
+    fontWeight: "bold",
+    marginBottom: 10
+  },
+  surveyRow: {
+    paddingVertical: 10,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  surveyTitle: {
+    fontWeight: "bold"
+  }
+});
+
+export default withNavigation(SurveyIndexScreen);
diff --git a/expo_project/screens/HomeScreen.js → expo_project/screens/SurveyScreen.js b/expo_project/screens/HomeScreen.js → expo_project/screens/SurveyScreen.js
@@ -14,18 +14,16 @@ import moment from "moment";
 import MapWithMarkers from "../components/MapWithMarkers";
 import MarkerCarousel from "../components/MarkerCarousel";
 import Survey from "../components/Survey";
-import ColoredButton from "../components/ColoredButton";
 import Layout from "../constants/Layout";
 
+import { Button } from "react-native-paper";
+
 // TODO (Ananta): shouold be dynamically set
 const INITIAL_DRAWER_TRANSLATE_Y = Layout.drawer.height;
 const MIN_DRAWER_TRANSLATE_Y = 0;
 const MID_DRAWER_TRANSLATE_Y = Layout.drawer.height - 300;
 const MAX_DRAWER_TRANSLATE_Y = Layout.drawer.height - 95; // mostly collapsed, with just the header peaking out
 
-const studyId = "50Kb9Jfa1ejkURIIE3T2"; // todo should be dynamically set
-const surveyId = "UaAyBbLNOobGO2prwpsT"; // todo should be dynamically set
-
 function _markerToDataPoint(marker) {
   const dataPoint = {};
   fields = ["gender", "groupSize", "mode", "object", "posture", "timestamp"];
@@ -51,7 +49,7 @@ class Indicator extends React.Component {
   }
 }
 
-class HomeScreen extends React.Component {
+class SurveyScreen extends React.Component {
   static navigationOptions = {
     title: "Long press map to add a pin"
   };
@@ -178,6 +176,8 @@ class HomeScreen extends React.Component {
     const marker = _.find(markersCopy, {
       id
     });
+    const studyId = this.props.navigation.getParam("studyId");
+    const surveyId = this.props.navigation.getParam("surveyId");
 
     if (marker) {
       marker[key] = value;
@@ -233,6 +233,8 @@ class HomeScreen extends React.Component {
   }
 
   createNewMarker(coordinate, color) {
+    const studyId = this.props.navigation.getParam("studyId");
+    const surveyId = this.props.navigation.getParam("surveyId");
     const markersCopy = [...this.state.markers];
     const date = moment();
     const dateLabel = date.format("HH:mm");
@@ -268,6 +270,8 @@ class HomeScreen extends React.Component {
 
   setMarkerLocation(id, coordinate) {
     // TODO: add logic for updating in db
+    const studyId = this.props.navigation.getParam("studyId");
+    const surveyId = this.props.navigation.getParam("surveyId");
     const markersCopy = [...this.state.markers];
     const marker = _.find(markersCopy, { id });
 
@@ -333,13 +337,15 @@ class HomeScreen extends React.Component {
                 activeMarker={activeMarker}
                 onSelect={this.setFormResponse}
               />
-              <ColoredButton
-                style={{ marginHorizontal: 20 }}
-                backgroundColor={activeMarker.color}
-                color="white"
+              <Button
+                primary
+                raised
+                dark
                 onPress={() => this.resetDrawer()}
-                label="Done"
-              />
+                style={{ margin: 20 }}
+              >
+                Done
+              </Button>
             </ScrollView>
           )}
           <View style={styles.bottomGuard} />
@@ -400,4 +406,4 @@ const styles = StyleSheet.create({
   }
 });
 
-export default withNavigation(HomeScreen);
+export default withNavigation(SurveyScreen);
diff --git a/expo_project/yarn.lock b/expo_project/yarn.lock
@@ -2282,6 +2282,13 @@ create-react-context@^0.2.1:
     fbjs "^0.8.0"
     gud "^1.0.0"
 
+create-react-context@^0.2.2:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
+  dependencies:
+    fbjs "^0.8.0"
+    gud "^1.0.0"
+
 cross-spawn@^5.0.1, cross-spawn@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -2368,6 +2375,10 @@ deepmerge@^1.3.0:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
 
+deepmerge@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.1.1.tgz#e862b4e45ea0555072bf51e7fd0d9845170ae768"
+
 default-require-extensions@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-2.0.0.tgz#f5f8fbb18a7d6d50b21f641f649ebb522cfe24f7"
@@ -5549,6 +5560,16 @@ [email protected]:
     babel-plugin-module-resolver "^2.3.0"
     babel-preset-react-native "1.9.0"
 
+react-native-paper@^1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-1.12.0.tgz#1d891b2068cda4193b42fc527779aa379605ca11"
+  dependencies:
+    color "^2.0.1"
+    create-react-context "^0.2.2"
+    deepmerge "^2.1.0"
+    hoist-non-react-statics "^2.5.0"
+    react-lifecycles-compat "^3.0.4"
+
 react-native-platform-touchable@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/react-native-platform-touchable/-/react-native-platform-touchable-1.1.1.tgz#fde4acc65eea585d28b164d0c3716a42129a68e4"