From 553c08b722540fbb982b73e5cdce23c1b9e2fd38 Mon Sep 17 00:00:00 2001 From: Ananta Pandey Date: Tue, 4 Sep 2018 23:03:09 +0200 Subject: [PATCH] Add a study home screen (#39) * add a material ui library and an index screen --- expo_project/.babelrc | 3 + expo_project/components/ColoredButton.js | 42 --------- expo_project/config/studies.js | 14 +++ expo_project/navigation/AppNavigator.js | 8 +- expo_project/package.json | 1 + expo_project/screens/StudyIndexScreen.js | 92 +++++++++++++++++++ .../{HomeScreen.js => SurveyScreen.js} | 30 +++--- expo_project/yarn.lock | 21 +++++ 8 files changed, 154 insertions(+), 57 deletions(-) delete mode 100644 expo_project/components/ColoredButton.js create mode 100644 expo_project/config/studies.js create mode 100644 expo_project/screens/StudyIndexScreen.js rename expo_project/screens/{HomeScreen.js => SurveyScreen.js} (94%) diff --git a/expo_project/.babelrc b/expo_project/.babelrc index 2bcd546..ac38464 100644 --- 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 deleted file mode 100644 index 767bffc..0000000 --- a/expo_project/components/ColoredButton.js +++ /dev/null @@ -1,42 +0,0 @@ -import PropTypes from "prop-types"; -import React from "react"; - -import { StyleSheet, Text, TouchableOpacity } from "react-native"; - -class ColoredButton extends React.Component { - render() { - const { style, backgroundColor, color, onPress, label } = this.props; - return ( - - {label} - - ); - } -} - -const styles = StyleSheet.create({ - button: { - padding: 12, - marginVertical: 20, - justifyContent: "center", - alignItems: "center" - }, - text: { fontWeight: "bold" } -}); - -ColoredButton.propTypes = { - style: PropTypes.object, - color: PropTypes.string, - backgroundColor: PropTypes.string -}; - -ColoredButton.defaultProps = { - style: {}, - backgroundColor: "blue", - color: "#5B93D9" -}; - -export default ColoredButton; diff --git a/expo_project/config/studies.js b/expo_project/config/studies.js new file mode 100644 index 0000000..2bd3b70 --- /dev/null +++ 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 index 4b52af9..05033e6 100644 --- 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 index 9207b98..e73a62e 100644 --- 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 new file mode 100644 index 0000000..1cdc341 --- /dev/null +++ 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 ( + + + Your studies + {studies.map(study => ( + + + {study.studyName} + by {study.studyAuthor} + + {study.surveys.map(survey => { + return ( + + + + {survey.title} + + + + ); + })} + + ))} + + + ); + } +} + +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 b/expo_project/screens/SurveyScreen.js similarity index 94% rename from expo_project/screens/HomeScreen.js rename to expo_project/screens/SurveyScreen.js index 77e7a2a..38503e6 100644 --- a/expo_project/screens/HomeScreen.js +++ b/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} /> - this.resetDrawer()} - label="Done" - /> + style={{ margin: 20 }} + > + Done + )} @@ -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 index 3d3aa70..d6b3d0b 100644 --- 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 @@ react-native-maps@0.21.0: 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"