Fetch and store data

Author: Alex Alexeev

App.js

@@ -5,41 +5,90 @@
  */
 
 import React, { Component } from 'react';
-import {
-  Platform,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
-
-import surveys from './survey/default_surveys';
-import Survey from './survey';
+import { Platform, StyleSheet, Text, View, AsyncStorage } from 'react-native';
+import uuid from 'react-native-uuid';
+import { Toast, Root } from 'native-base';
 
+import surveys from './src/default_surveys';
+import Survey from './src/Survey';
 
 const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' +
-    'Cmd+D or shake for dev menu',
-  android: 'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
+  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
+  android:
+    'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu'
 });
 
-export default class App extends Component<{}> {
+// @TODO: add specific types
+type State = {
+  survey: ?Object,
+  error: ?Object
+};
+
+export default class App extends Component<{}, State> {
+  state: State = {
+    survey: null,
+    error: null
+  };
+
+  async componentDidMount() {
+    await this.getSurveyData();
+  }
+
+  getSurveyData = async () => {
+    const remoteJSON = await fetch(
+      'https://surveyjs-data-3cv0xvjbs.now.sh/questions-paged.json',
+      {}
+    )
+      .then(response => response.json())
+      .catch(error => {
+        throw new Error('Error fetching a survey', error);
+      });
+    if (remoteJSON) {
+      await this.storeData(remoteJSON.data);
+    }
+  };
+
+  storeData = async survey => {
+    try {
+      const id = uuid.v1();
+      const key = `@Surveys:${id}`;
+      await AsyncStorage.setItem(key, JSON.stringify({ ...survey, id }));
+      const storedSurvey = await AsyncStorage.getItem(key);
+      const surveyJSON = JSON.parse(storedSurvey);
+      Toast.show({
+        text: `Successfully stored the survey with id ${
+          surveyJSON.id
+        } and title "${surveyJSON.title}"`,
+        buttonText: 'Okay'
+      });
+      this.setState({ survey: surveyJSON });
+    } catch (error) {
+      throw new Error('Error storing a survey', error);
+    }
+  };
 
   onSurveyCompleted(ownProps, nextProps) {
     //TODO: Readers hooks go here.
-    alert("Nested Survey was completed!");
+    alert('Nested Survey was completed!');
   }
 
-
   render() {
     return (
-        <Survey
-        surveyJSON={surveys.example3PagePatientSatisfactionSurvey}
-        title="My Custom Survey Title"
-        navigation={this.props.navigation}
-        surveyResponseDateString={''}
-        onSurveyComplete={this.onSurveyCompleted}
-        data={{}}/>
+      <Root>
+        {this.state.survey ? (
+          <Survey
+            surveyJSON={this.state.survey}
+            title={this.state.survey.title}
+            navigation={this.props.navigation}
+            surveyResponseDateString={''}
+            onSurveyComplete={this.onSurveyCompleted}
+            data={{}}
+          />
+        ) : (
+          <Text>Loading survey...</Text>
+        )}
+      </Root>
     );
   }
 }
@@ -49,16 +98,16 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#F5FCFF',
+    backgroundColor: '#F5FCFF'
   },
   welcome: {
     fontSize: 20,
     textAlign: 'center',
-    margin: 10,
+    margin: 10
   },
   instructions: {
     textAlign: 'center',
     color: '#333333',
-    marginBottom: 5,
-  },
+    marginBottom: 5
+  }
 });

index.js

@@ -1,4 +1,7 @@
 import { AppRegistry } from 'react-native';
 import App from './App';
 
-AppRegistry.registerComponent('SurveyJSInWebViewWithReactAndReactNative', () => App);
+AppRegistry.registerComponent(
+  'SurveyJSInWebViewWithReactAndReactNative',
+  () => App
+);

package.json

@@ -7,12 +7,14 @@
     "test": "jest"
   },
   "dependencies": {
+    "buffer": "^5.2.1",
     "lodash": "4.17.11",
     "moment": "^2.23.0",
     "native-base": "^2.10.0",
     "prop-types": "15.6.2",
     "react": "16.6.3",
     "react-native": "0.57.8",
+    "react-native-uuid": "^1.4.9",
     "react-native-webview-bridge": "^0.40.1",
     "react-navigation": "3.0.9",
     "react-redux": "6.0.0",

src/Survey.js

@@ -0,0 +1,153 @@
+import React, { Component } from 'react';
+import { Dimensions, AsyncStorage } from 'react-native';
+import WebViewBridge from 'react-native-webview-bridge';
+import {
+  StyleProvider,
+  Container,
+  Text,
+  Button,
+  Footer,
+  Toast
+} from 'native-base';
+import { SourceCode } from 'NativeModules';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import moment from 'moment';
+import _ from 'lodash';
+import uuid from 'react-native-uuid';
+
+function prepareForBridge(message) {
+  //Replaces the singlequote character with symbol we can fix on the other side.
+  return JSON.stringify(message).replace(/'/g, '__@@__');
+}
+
+//Android/iOS specific file loading our html assets:
+let VIEW;
+const scriptURL = SourceCode.scriptURL;
+if (scriptURL.indexOf('file://') > -1) {
+  const _bundleSourcePath = scriptURL.substring(
+    7,
+    scriptURL.lastIndexOf('/') + 1
+  );
+  const name = require('./prodViewUri');
+  const fileURI = `${_bundleSourcePath}${name}`;
+  VIEW = { uri: fileURI };
+} else {
+  VIEW = require('../webviews/surveyIndex.html');
+}
+
+export default class Survey extends Component {
+  static propTypes = {
+    navigation: PropTypes.object,
+    actions: PropTypes.object,
+    data: PropTypes.object.isRequired,
+    errorMessage: PropTypes.string,
+    surveyJSON: PropTypes.object.isRequired,
+    title: PropTypes.string,
+    onSurveyComplete: PropTypes.func,
+    surveyResponseDateString: PropTypes.string.isRequired //Pass in existing response data if you want survey to show existing data.
+  };
+
+  constructor(props) {
+    super(props);
+    this.onLoad = this.onLoad.bind(this);
+  }
+
+  onLoad() {
+    //Replace \n with <br/> to keep survey library happy:
+    var surveyString1 = JSON.stringify(this.props.surveyJSON)
+      .split('\\n')
+      .join('<br/>');
+    var surveyObj = JSON.parse(surveyString1);
+
+    //Load response data for specified survey date if it exists:
+    var surveyResponseObj = this.getResponseForDate(
+      this.props.surveyResponseDateString
+    );
+
+    setTimeout(
+      () =>
+        this.refs.webviewbridge.sendToBridge(
+          prepareForBridge({
+            action: 'LOAD',
+            survey: surveyObj,
+            surveydata: surveyResponseObj
+          })
+        ),
+      500
+    );
+  }
+
+  onBridgeMessage = async msg => {
+    const message = JSON.parse(msg);
+
+    if (message.action && message.action === 'COMPLETESURVEY') {
+      var singleSurveyMap = {};
+      singleSurveyMap[this.props.title] = [message.surveydata];
+      message.surveydata.CompletionDate = moment().toISOString();
+
+      if (!message.surveydata.DataDate) {
+        message.surveydata.DataDate = message.surveydata.CompletionDate;
+      }
+      try {
+        const id = uuid.v1();
+
+        // TODO: use optional chaining propsal to check for nulls
+        const key = `@Responses:${id}${(message.surveydata &&
+          message.surveydata.email) ||
+          ''}`;
+        Toast.show({
+          text: `before set, ${key}`,
+          buttonText: 'Okay'
+        });
+        await AsyncStorage.setItem(
+          key,
+          JSON.stringify({ ...message.surveydata, id })
+        );
+        Toast.show({
+          text: `after set`,
+          buttonText: 'Okay'
+        });
+        const storedResponses = await AsyncStorage.getItem(key);
+
+        if (storedResponses) {
+          const responsesJSON = JSON.parse(storedResponses);
+          Toast.show({
+            text: `Successfully stored responsn with id ${
+              responsesJSON.id
+            } and user email ${responsesJSON.email}`,
+            buttonText: 'Okay'
+          });
+        }
+      } catch (error) {
+        throw new Error('Error storing responses', error);
+      }
+      //TODO: Exercise left to the reader :)
+    }
+  };
+
+  //Get saved survey response from user data if it exists already and survey versions are the same.
+  getResponseForDate(dateString) {
+    //TODO: If you want the survey to start auto filled out, a SurveyJS JSON response can be placed here.
+
+    return {};
+  }
+
+  render() {
+    const { height: screenHeight } = Dimensions.get('window');
+
+    return (
+      <WebViewBridge
+        ref="webviewbridge"
+        style={{ flex: 1, height: 500, justifyContent: 'center' }}
+        source={VIEW}
+        scalesPageToFit={false}
+        scrollEnabled
+        javaScriptEnabled
+        onLoad={this.onLoad}
+        onBridgeMessage={this.onBridgeMessage}
+      />
+    );
+  }
+}