Add readme and snippets to the React Native getting started

doc/7/getting-started/.react-native/App.js

@@ -1,34 +1,39 @@
+/* snippet:start:1 */
 import React from 'react';
 import Login from './screens/Login/Login';
 import ChatClient from './screens/Chat/ChatClient';
+/* snippet:end */
 
- class App extends React.Component { 
+/* snippet:start:2 */
+export default class App extends React.Component {
   constructor(props) {
-    super(props); 
-    this.handleSubmitName = this.onSubmitName.bind(this); 
-    this.state = { 
+    super(props);
+    this.handleSubmitName = this.onSubmitName.bind(this);
+    this.state = {
       hasName: false
     };
   }
-
-  onSubmitName(e) { 
+  /* snippet:end */
+  /* snippet:start:3 */
+  onSubmitName(e) {
     const name = e.nativeEvent.text;
     this.setState({
       name,
       hasName: true
     });
   }
-
+  /* snippet:end */
+  /* snippet:start:4 */
   render() {
     if (this.state.hasName) {
       return (
-        <ChatClient name={ this.state.name } />
+        <ChatClient name={this.state.name} />
       );
     } else {
       return (
-        <Login onSubmitName={ this.handleSubmitName } />
+        <Login onSubmitName={this.handleSubmitName} />
       );
     }
   }
 }
-export default App;
+/* snippet:end */

doc/7/getting-started/.react-native/screens/Chat/ChatClient.js

@@ -1,7 +1,10 @@
+/* snippet:start:1 */
 import React from 'react';
 import ChatView from './ChatView';
 import kuzzle from '../../services/kuzzle';
+/* snippet:end */
 
+/* snippet:start:2 */
 class ChatClient extends React.Component {
     constructor(props) {
         super(props);
@@ -28,6 +31,9 @@ class ChatClient extends React.Component {
             await kuzzle.collection.create("chat", "messages");
         }
     }
+    /* snippet:end */
+
+    /* snippet:start:4 */
     displayDate(previousDate, currentDate) {
         if (previousDate === null) {// Message is the first of the array so need to display the date
             return true;
@@ -41,6 +47,9 @@ class ChatClient extends React.Component {
         // Previous message and current has same dates so doesn't need to display the date
         return false;
     }
+    /* snippet:end */
+
+    /* snippet:start:5 */
     getMessage(msg, displayDate) {
         const message = {
             // The unique id of the document containing the message
@@ -58,6 +67,9 @@ class ChatClient extends React.Component {
         // and only the hours on each messages
         return message;
     }
+    /* snippet:end */
+
+    /* snippet:start:6 */
     async fetchMessages() {
         // Call the search method of the document controller
         const results = await this.kuzzle.document.search(
@@ -79,15 +91,17 @@ class ChatClient extends React.Component {
             })
         });
     }
+    /* snippet:end */
 
+    /* snippet:start:7 */
     async subscribeMessages() {
         // Call the subscribe method of the realtime controller and receive the roomId
         const roomId = await this.kuzzle.realtime.subscribe(
             "chat", // Id of the index
             "messages", // Id of the collection
             {}, // Filter
             // Callback to receive notifications
-            notification => {
+            async notification => {
                 // Check if the notification interest us (only document creation)
                 if (notification.type !== "document") return;
                 if (notification.action !== "create") return;
@@ -99,15 +113,17 @@ class ChatClient extends React.Component {
                     displayDate = this.displayDate(this.state.messages[length - 1].date, notification.result._source._kuzzle_info.createdAt);
                 }
                 // Add the new message to our array
-                this.setState({
+                await this.setState({
                     messages: [...this.state.messages.slice(), this.getMessage(notification.result, displayDate)]
                 });
             }
         );
         // Save the id of our subscription (we could need it to unsubscribe)
         this.setState({ roomId: roomId });
     }
+    /* snippet:end */
 
+    /* snippet:start:8 */
     async onSendMessage(message) {
         await kuzzle.document.create(
             "chat",
@@ -119,7 +135,9 @@ class ChatClient extends React.Component {
             }
         );
     }
+    /* snippet:end */
 
+    /* snippet:start:9 */
     render() {
         const messages = this.state.messages;
         return (
@@ -128,3 +146,4 @@ class ChatClient extends React.Component {
     }
 }
 export default ChatClient;
+/* snippet:end */

doc/7/getting-started/.react-native/screens/Chat/ChatView.js

@@ -1,3 +1,4 @@
+/* snippet:start:1 */
 import React from 'react';
 import {
     StyleSheet,
@@ -8,22 +9,25 @@ import {
     SafeAreaView,
     KeyboardAvoidingView
 } from 'react-native';
-
+/* snippet:end */
+/* snippet:start:2 */
 class ChatView extends React.Component {
     constructor(props) {
         super(props);
         this.handleSendMessage = this.onSendMessage.bind(this);
     }
-
     onSendMessage = e => {
         this.props.onSendMessage(e.nativeEvent.text);
         this.refs.input.clear();
     }
+    /* snippet:end */
+    /* snippet:start:4 */
     getDate(timestamp) {
         const date = new Date(timestamp);
         return date.toTimeString().split('GMT')[0];
     }
-
+    /* snippet:end */
+    /* snippet:start:5 */
     render() {
         return (
             <SafeAreaView style={{ flex: 1 }}>
@@ -32,14 +36,14 @@ class ChatView extends React.Component {
                         style={styles.list}
                         data={this.props.messages}
                         ref={ref => this.flatList = ref}
-                        onContentSizeChange={() => this.flatList.scrollToEnd({animated: true})}
+                        onContentSizeChange={() => this.flatList.scrollToEnd({ animated: true })}
                         renderItem={({ item }) =>
                             <View>
                                 <View>
                                     {
-                                        item.displayDate ? 
-                                        <Text style={styles.date}>{new Date(item.date).toDateString()}</Text> : 
-                                       null
+                                        item.displayDate ?
+                                            <Text style={styles.date}>{new Date(item.date).toDateString()}</Text> :
+                                            null
                                     }
                                 </View>
                                 <View
@@ -61,6 +65,8 @@ class ChatView extends React.Component {
                         }
                         keyExtractor={item => item.id}
                     />
+                    {/* snippet:end */}
+                    {/* snippet:start:6 */}
                     <TextInput
                         style={styles.inputMessage}
                         placeholder='Send message...'
@@ -71,11 +77,15 @@ class ChatView extends React.Component {
                         blurOnSubmit={false}
                         ref="input"
                     />
+                    {/* snippet:end */}
+                    {/* snippet:start:7 */}
                 </KeyboardAvoidingView>
             </SafeAreaView>
         );
     }
 }
+/* snippet:end */
+/* snippet:start:8 */
 const offset = 24;
 const styles = StyleSheet.create({
     name: {
@@ -121,4 +131,5 @@ const styles = StyleSheet.create({
         paddingHorizontal: offset,
     }
 });
-export default ChatView;
+export default ChatView;
+/* snippet:end */

doc/7/getting-started/.react-native/screens/Login/Login.js

@@ -1,6 +1,8 @@
+/* snippet:start:1 */
 import React from 'react';
 import { StyleSheet, Text, TextInput, KeyboardAvoidingView } from 'react-native';
-
+/* snippet:end */
+/* snippet:start:2 */
 export default class Login extends React.Component {
     render() {
         return (
@@ -21,7 +23,8 @@ export default class Login extends React.Component {
         );
     }
 }
-
+/* snippet:end */
+/* snippet:start:3 */
 const styles = StyleSheet.create({
     container: {
         flex: 1,
@@ -33,4 +36,5 @@ const styles = StyleSheet.create({
         alignSelf: 'stretch',
         textAlign: 'center'
     }
-});
+});
+/* snippet:end */