From 59a00c8200298e062ac8b3e33d29ce342f9dc885 Mon Sep 17 00:00:00 2001 From: Berthier Date: Thu, 9 Jan 2020 16:41:28 +0100 Subject: [PATCH 1/7] Add readme and snippets --- doc/7/getting-started/.react-native/App.js | 25 ++- .../.react-native/screens/Chat/ChatClient.js | 35 +++- .../.react-native/screens/Chat/ChatView.js | 31 +-- .../.react-native/screens/Login/Login.js | 10 +- doc/7/getting-started/react-native/index.md | 187 ++++++++++++++++++ .../react-native/snippets/App.js.snippet | 1 + .../snippets/ChatClient.js.snippet | 1 + .../react-native/snippets/ChatView.js.snippet | 1 + .../react-native/snippets/Login.js.snippet | 1 + .../react-native/snippets/kuzzle.js.snippet | 1 + 10 files changed, 260 insertions(+), 33 deletions(-) create mode 100644 doc/7/getting-started/react-native/index.md create mode 120000 doc/7/getting-started/react-native/snippets/App.js.snippet create mode 120000 doc/7/getting-started/react-native/snippets/ChatClient.js.snippet create mode 120000 doc/7/getting-started/react-native/snippets/ChatView.js.snippet create mode 120000 doc/7/getting-started/react-native/snippets/Login.js.snippet create mode 120000 doc/7/getting-started/react-native/snippets/kuzzle.js.snippet diff --git a/doc/7/getting-started/.react-native/App.js b/doc/7/getting-started/.react-native/App.js index c5e9c20a9..d388bff5f 100644 --- a/doc/7/getting-started/.react-native/App.js +++ b/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 ( - + ); } else { return ( - + ); } } } -export default App; \ No newline at end of file +/* snippet:end */ \ No newline at end of file diff --git a/doc/7/getting-started/.react-native/screens/Chat/ChatClient.js b/doc/7/getting-started/.react-native/screens/Chat/ChatClient.js index 32ed52b84..42cc11feb 100644 --- a/doc/7/getting-started/.react-native/screens/Chat/ChatClient.js +++ b/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); @@ -10,7 +13,7 @@ class ChatClient extends React.Component { }; this.kuzzle = kuzzle; this.initConnection(); - this.handleSendMessage = this.onSendMessage.bind(this); // (9) + this.handleSendMessage = this.onSendMessage.bind(this); } async initConnection() { @@ -25,19 +28,25 @@ class ChatClient extends React.Component { await this.fetchMessages(); await this.subscribeMessages(); } - displayDate(previousDate, currentDate) { + /* 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; } const d1 = new Date(previousDate).toDateString() const d2 = new Date(currentDate).toDateString() if (d1 !== d2) { - // Previous message and current has different dates so need to display the date - return true + // Previous message and current has different dates so need to display the date + return true }; // Previous message and current has same dates so doesn't need to display the date return false; } + /* snippet:end */ + + /* snippet:start:5 */ getMessage(hit, idx, array) { // display will be set to true only if the previous message is from another day in goal to display only one time the dates // and only the hours on each messages @@ -47,9 +56,9 @@ class ChatClient extends React.Component { if (length == 0) { display = false; } else if (idx === null || array === null) { - display = this.displayDate( this.state.messages[length - 1].date, hit._source._kuzzle_info.createdAt) + display = this.displayDate(this.state.messages[length - 1].date, hit._source._kuzzle_info.createdAt) } else { // idx and array provided -> call from fetch - display = idx === 0? true : this.displayDate(array[idx - 1]._source._kuzzle_info.createdAt , hit._source._kuzzle_info.createdAt); + display = idx === 0 ? true : this.displayDate(array[idx - 1]._source._kuzzle_info.createdAt, hit._source._kuzzle_info.createdAt); } const message = { // The unique id of the document containing the message @@ -65,6 +74,9 @@ class ChatClient extends React.Component { }; return message; } + /* snippet:end */ + + /* snippet:start:6 */ async fetchMessages() { // Call the search method of the document controller const results = await this.kuzzle.document.search( @@ -78,7 +90,9 @@ class ChatClient extends React.Component { messages: results.hits.reverse().map((hit, idx, array) => this.getMessage(hit, idx, array)) }); } + /* 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( @@ -91,7 +105,7 @@ class ChatClient extends React.Component { if (notification.type !== "document") return; if (notification.action !== "create") return; // Add the new message to our array - this.setState({ + await this.setState({ messages: [...this.state.messages.slice(), this.getMessage(notification.result, null, null)] }); } @@ -99,7 +113,9 @@ class ChatClient extends React.Component { // Save the id of our subscription (we could need it to unsubscribe) this.setState({ roomId: roomId }); } + /* snippet:end */ + /* snippet:start:8 */ async onSendMessage(text) { await kuzzle.document.create( "chat", @@ -111,7 +127,9 @@ class ChatClient extends React.Component { } ); } + /* snippet:end */ + /* snippet:start:9 */ render() { const messages = this.state.messages; return ( @@ -119,4 +137,5 @@ class ChatClient extends React.Component { ); } } -export default ChatClient; \ No newline at end of file +export default ChatClient; + /* snippet:end */ \ No newline at end of file diff --git a/doc/7/getting-started/.react-native/screens/Chat/ChatView.js b/doc/7/getting-started/.react-native/screens/Chat/ChatView.js index c6fbab0ab..4ea71e0ab 100644 --- a/doc/7/getting-started/.react-native/screens/Chat/ChatView.js +++ b/doc/7/getting-started/.react-native/screens/Chat/ChatView.js @@ -1,3 +1,4 @@ +/* snippet:start: 1 */ import React from 'react'; import { StyleSheet, @@ -8,24 +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); - this.state = { - } } - 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 ( @@ -34,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 }) => { - item.displayDate ? - {new Date(item.date).toDateString()} : - null + item.displayDate ? + {new Date(item.date).toDateString()} : + null } item.id} /> + {/* snippet:end */} + {/* snippet:start:6 */} + {/* snippet:end */} + {/* snippet:start:7 */} ); } } -let lastDate = null; - +/* snippet:end */ +/* snippet:start:8 */ const offset = 24; const styles = StyleSheet.create({ name: { @@ -125,4 +131,5 @@ const styles = StyleSheet.create({ paddingHorizontal: offset, } }); -export default ChatView; \ No newline at end of file +export default ChatView; +/* snippet:end */ \ No newline at end of file diff --git a/doc/7/getting-started/.react-native/screens/Login/Login.js b/doc/7/getting-started/.react-native/screens/Login/Login.js index 2883c1320..f51ec5741 100644 --- a/doc/7/getting-started/.react-native/screens/Login/Login.js +++ b/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' } -}); \ No newline at end of file +}); +/* snippet:end */ diff --git a/doc/7/getting-started/react-native/index.md b/doc/7/getting-started/react-native/index.md new file mode 100644 index 000000000..6160fb2f3 --- /dev/null +++ b/doc/7/getting-started/react-native/index.md @@ -0,0 +1,187 @@ +--- +type: page +code: false +title: React Native +description: Getting started with Kuzzle and React Native using Expo +order: 400 +--- + + +# Getting Started with Kuzzle and React Native + +This section deals with **Kuzzle** (+ **Javascript SDK**) and **React Native**. We will create **documents** in Kuzzle and subscribe to [document notifications](/sdk/js/7/essentials/realtime-notifications/#document-messages) to develop a realtime chat. + + +## Requirements + +- **Node.js** >= 8.0.0 ([install here](https://nodejs.org/en/download/)) +- **Expo CLI** ([install here](https://docs.expo.io/versions/v36.0.0/get-started/installation/)) +- **Running Kuzzle Stack** ([instructions here](/core/2/guides/getting-started/running-kuzzle/)) + +## Prepare your environment + +Create your React Native app with Expo CLI. +```bash +expo init getting-started-kuzzle +``` +You can use yarn to install dependancies if you want. +Then choose a blank project, type 'Kuzzle' and type y. + +Install Kuzzle's Javascript SDK: +```bash +cd getting-started-kuzzle +npm install kuzzle-sdk +``` + +Now, you can run your app and access if by different way: + + - To test it on your smartphone, you'll need to download the + expo application and scan the displayed qrCode after running this command: + ```bash + expo start + ``` + - To test it in your browser, you can run the following command: + ```bash + expo start --web + ``` + +## Get the username +First of all, we need to know the user's name. +Let's start by creating the following file _screens/Login/Login.js_ and add some imports. + +<<< ./snippets/Login.js.snippet:1[js] + +Then we must to export our `Login` class with the render function: + +<<< ./snippets/Login.js.snippet:2[js] + +As you can see, this component has no state. It'll send the typed username +to his parent composent by a `onSubmitName` method passed as props. + +To finish, we can add some style properties to let our login page looks better. + +<<< ./snippets/Login.js.snippet:3[js] + +This parent component of _Login.js_ will be _App.js_ so let's work on it. + +You can delete all the code from the _App.js_ file, we will rewrite it. + +First, add the following imports: + +<<< ./snippets/App.js.snippet:1[js] + +Then we need to do three changes: + - In first, we must export our *App* class: + <<< ./snippets/App.js.snippet:2[js] + - In second, we need to create our `onSubmitName` function: + <<< ./snippets/App.js.snippet:3[js] + - To finish, we will create our render function: + <<< ./snippets/App.js.snippet:4[js] + +You can see that we will have to create a new component, *ChatClient*. +That new component will contain the link to our kuzzle backend so we need first declare our kuzzle service. + + +## Instantiating Kuzzle SDK and Adding logical part + +We have to connect the server so that our client can interact with it. + +To do this, we have to create a _/services/kuzzle.js_ file to put our kuzzle instance declaration: + +<<< ./snippets/kuzzle.js.snippet[js] + +Note that if you are running your application on your smartphone, you must be connected on the same network and you'll need to change the `localhost` in the previous snippet by your computer ip address. + +We can now create a _screens/Chat/ChatClient.js_ file to use our kuzzle service. + +Like in our previous components, we'll first need to add our imports: + +<<< ./snippets/ChatClient.js.snippet:1[js] + +Then we will create our state that will contains our messages and call the function that will initialize our kuzzle by [establish the connection](/sdk/js/7/core-classes/kuzzle/connect/) to kuzzle and create, if they don't [exist](sdk/js/6/controllers/index/exists/), the [index](sdk/js/6/controllers/index/create/) and [collection](sdk/js/6/controllers/collection/create/) of our chat. + +<<< ./snippets/ChatClient.js.snippet:2[js] + +You can see that we are calling two functions at the end: +`fetchMessages()` and `subscribeMessages()`, let's write them. + +Create the following function to fetch the messages: + +<<< ./snippets/ChatClient.js.snippet:6[js] + +The function `fetchMessage()` will [search](/sdk/js/7/controllers/document/search/) for the first hundred newest messages and store them in our state, before subscribing to changes in the `messages` collection. + +Then, create the `subscribeMessages()` function. +It will call the Kuzzle's realtime controller to allow us to [receive notifications](/sdk/js/7/controllers/realtime/subscribe/) on message creations: + +<<< ./snippets/ChatClient.js.snippet:7[js] + +You can see in the two function we just wrote a call to a `getMessage()` function when we are adding a new message to the state. This function will format our kuzzle's notification/response. + +<<< ./snippets/ChatClient.js.snippet:5[js] + +Note: The first part of this function is optionnal and can be replace by a set of the `display` variable to false. + +If you decided to add the optionnal part, you'll need to implement the `displayDate()` function: + +<<< ./snippets/ChatClient.js.snippet:4[js] + +In the constructor of this component, we setted a `handleSendMessage` property to a binded `onSendMessage` function. Let's implement that function: + +<<< ./snippets/ChatClient.js.snippet:8[js] + +This simple method will [create](/sdk/js/7/controllers/document/create/) a new message document in Kuzzle. + +As you can see we don't push the new message in our array on message creation. + +Indeed, we will receive notifications from Kuzzle each time we modify our message collection (even if it is a message creation on our part) that we will use to add the messages in our array. + +Since this component is used to do the connection to Kuzzle, it will render another one that will display the messages _screens/Chat/ChatView.js_. +To finish, we just need to add the `render()` function: + +<<< ./snippets/ChatClient.js.snippet:9[js] + +As you can see, we are passing as props the fetched messages, the client username and the handleSendMessage function. + +## Display and Send messages + +In this part we'll work on another component, so we need to create the _screens/Chat/ChatView.js_ file. + +Then, just add the following imports: + +<<< ./snippets/ChatView.js.snippet:1[js] + +Now we need to create ou `ChatView` class and bind a `handleSendMessage` property to an `onSendMessage` function that will call the props parent function. + +<<< ./snippets/ChatView.js.snippet:2[js] + +There is no logic in this component so let's work on the render function: + +<<< ./snippets/ChatView.js.snippet:5[js] + +In the previous snippet, you can see that we are using a Flatlist to display the messages passed as props from the `ChatClient` component. +The first view part in the Flatlist to the previous optionnal part. It is used to display the date only once for each message sended at the same date. + +Then just add the TextInput part with a call to our `handleSendMessage` property: + +<<< ./snippets/ChatView.js.snippet:6[js] + +And don't forget to close the opened tags: + +<<< ./snippets/ChatView.js.snippet:7[js] + +To finish, just add the style part to make it beautiful: + +<<< ./snippets/ChatView.js.snippet:8[js] + +You can now add new messages to Kuzzle and receive the creation notification to update your state and display the new messages. + +## Where do we go from here? + +Now that you're more familiar with Kuzzle, dive even deeper to learn how to leverage its full capabilities: + +- discover what this SDK has to offer by browsing other sections of this documentation +- learn more about Kuzzle [realtime engine](/core/2/guides/essentials/real-time/) +- follow our guide to learn how to [manage users, and how to set up fine-grained access control](/core/2/guides/essentials/security/) +- lean how to use Kuzzle [Admin Console](/core/2/guides/essentials/admin-console/) to manage your users and data +- learn how to perform a [basic authentication](/sdk/js/7/controllers/auth/login) diff --git a/doc/7/getting-started/react-native/snippets/App.js.snippet b/doc/7/getting-started/react-native/snippets/App.js.snippet new file mode 120000 index 000000000..a08efb8f9 --- /dev/null +++ b/doc/7/getting-started/react-native/snippets/App.js.snippet @@ -0,0 +1 @@ +../../.react-native/App.js \ No newline at end of file diff --git a/doc/7/getting-started/react-native/snippets/ChatClient.js.snippet b/doc/7/getting-started/react-native/snippets/ChatClient.js.snippet new file mode 120000 index 000000000..3773d18d9 --- /dev/null +++ b/doc/7/getting-started/react-native/snippets/ChatClient.js.snippet @@ -0,0 +1 @@ +../../.react-native/screens/Chat/ChatClient.js \ No newline at end of file diff --git a/doc/7/getting-started/react-native/snippets/ChatView.js.snippet b/doc/7/getting-started/react-native/snippets/ChatView.js.snippet new file mode 120000 index 000000000..de47a09e1 --- /dev/null +++ b/doc/7/getting-started/react-native/snippets/ChatView.js.snippet @@ -0,0 +1 @@ +../../.react-native/screens/Chat/ChatView.js \ No newline at end of file diff --git a/doc/7/getting-started/react-native/snippets/Login.js.snippet b/doc/7/getting-started/react-native/snippets/Login.js.snippet new file mode 120000 index 000000000..c84d1cfad --- /dev/null +++ b/doc/7/getting-started/react-native/snippets/Login.js.snippet @@ -0,0 +1 @@ +../../.react-native/screens/Login/Login.js \ No newline at end of file diff --git a/doc/7/getting-started/react-native/snippets/kuzzle.js.snippet b/doc/7/getting-started/react-native/snippets/kuzzle.js.snippet new file mode 120000 index 000000000..db6b05758 --- /dev/null +++ b/doc/7/getting-started/react-native/snippets/kuzzle.js.snippet @@ -0,0 +1 @@ +../../.react-native/services/kuzzle.js \ No newline at end of file From 4d912b9dceba7653fd80a89b127d0e6ad461d201 Mon Sep 17 00:00:00 2001 From: Berthier Date: Fri, 10 Jan 2020 10:02:50 +0100 Subject: [PATCH 2/7] add await setState --- .../getting-started/.react-native/screens/Chat/ChatClient.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/doc/7/getting-started/.react-native/screens/Chat/ChatClient.js b/doc/7/getting-started/.react-native/screens/Chat/ChatClient.js index fc6509dbc..c287e9d3f 100644 --- a/doc/7/getting-started/.react-native/screens/Chat/ChatClient.js +++ b/doc/7/getting-started/.react-native/screens/Chat/ChatClient.js @@ -100,12 +100,12 @@ class ChatClient extends React.Component { "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; // Add the new message to our array - this.setState({ + await this.setState({ messages: [...this.state.messages.slice(), this.getMessage(notification.result, null, null)] }); } From 7be143a484881a8f4eb29481f9cb56b1cb24c29a Mon Sep 17 00:00:00 2001 From: Berthier Esteban <44427849+berthieresteban@users.noreply.github.com> Date: Wed, 15 Jan 2020 10:51:05 +0100 Subject: [PATCH 3/7] Apply suggestions from code review Co-Authored-By: Adrien Maret Co-Authored-By: Yoann-Abbes <44844010+Yoann-Abbes@users.noreply.github.com> Co-Authored-By: Luca Marchesini --- doc/7/getting-started/react-native/index.md | 46 ++++++++++----------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/doc/7/getting-started/react-native/index.md b/doc/7/getting-started/react-native/index.md index 6160fb2f3..8700f8f1d 100644 --- a/doc/7/getting-started/react-native/index.md +++ b/doc/7/getting-started/react-native/index.md @@ -14,7 +14,7 @@ This section deals with **Kuzzle** (+ **Javascript SDK**) and **React Native**. ## Requirements -- **Node.js** >= 8.0.0 ([install here](https://nodejs.org/en/download/)) +- **Node.js** >= 12.0.0 ([install here](https://nodejs.org/en/download/)) - **Expo CLI** ([install here](https://docs.expo.io/versions/v36.0.0/get-started/installation/)) - **Running Kuzzle Stack** ([instructions here](/core/2/guides/getting-started/running-kuzzle/)) @@ -24,7 +24,7 @@ Create your React Native app with Expo CLI. ```bash expo init getting-started-kuzzle ``` -You can use yarn to install dependancies if you want. +You can use yarn to install dependencies if you want. Then choose a blank project, type 'Kuzzle' and type y. Install Kuzzle's Javascript SDK: @@ -33,7 +33,7 @@ cd getting-started-kuzzle npm install kuzzle-sdk ``` -Now, you can run your app and access if by different way: +Now, you can run your app and access it by different ways: - To test it on your smartphone, you'll need to download the expo application and scan the displayed qrCode after running this command: @@ -47,18 +47,18 @@ Now, you can run your app and access if by different way: ## Get the username First of all, we need to know the user's name. -Let's start by creating the following file _screens/Login/Login.js_ and add some imports. +Let's start creating the following file _screens/Login/Login.js_ and add some imports. <<< ./snippets/Login.js.snippet:1[js] -Then we must to export our `Login` class with the render function: +Then we must export our `Login` class with the render function: <<< ./snippets/Login.js.snippet:2[js] As you can see, this component has no state. It'll send the typed username -to his parent composent by a `onSubmitName` method passed as props. +to his parent component by a `onSubmitName` method passed as props. -To finish, we can add some style properties to let our login page looks better. +To finish, we can add some style properties to let our login page looks prettier. <<< ./snippets/Login.js.snippet:3[js] @@ -71,22 +71,22 @@ First, add the following imports: <<< ./snippets/App.js.snippet:1[js] Then we need to do three changes: - - In first, we must export our *App* class: + - First, we must export our *App* class: <<< ./snippets/App.js.snippet:2[js] - - In second, we need to create our `onSubmitName` function: + - Then we need to create our `onSubmitName` function: <<< ./snippets/App.js.snippet:3[js] - - To finish, we will create our render function: + - Finally we will create our render function: <<< ./snippets/App.js.snippet:4[js] -You can see that we will have to create a new component, *ChatClient*. -That new component will contain the link to our kuzzle backend so we need first declare our kuzzle service. +You can see that we will have to create a new component, `ChatClient`. +That new component will contain the link to our Kuzzle backend so we need first declare our Kuzzle service. ## Instantiating Kuzzle SDK and Adding logical part -We have to connect the server so that our client can interact with it. +We have to connect the server so our client can interact with it. -To do this, we have to create a _/services/kuzzle.js_ file to put our kuzzle instance declaration: +To do this, we have to create a _/services/kuzzle.js_ file to put our Kuzzle instance declaration: <<< ./snippets/kuzzle.js.snippet[js] @@ -98,7 +98,7 @@ Like in our previous components, we'll first need to add our imports: <<< ./snippets/ChatClient.js.snippet:1[js] -Then we will create our state that will contains our messages and call the function that will initialize our kuzzle by [establish the connection](/sdk/js/7/core-classes/kuzzle/connect/) to kuzzle and create, if they don't [exist](sdk/js/6/controllers/index/exists/), the [index](sdk/js/6/controllers/index/create/) and [collection](sdk/js/6/controllers/collection/create/) of our chat. +Then we will create our state that will contains our messages and call the function that will initialize our kuzzle by [establish the connection](/sdk/js/7/core-classes/kuzzle/connect/) to kuzzle and create, if they don't [exist](sdk/js/7/controllers/index/exists/), the [index](sdk/js/6/controllers/index/create/) and [collection](sdk/js/7/controllers/collection/create/) of our chat. <<< ./snippets/ChatClient.js.snippet:2[js] @@ -116,17 +116,17 @@ It will call the Kuzzle's realtime controller to allow us to [receive notificati <<< ./snippets/ChatClient.js.snippet:7[js] -You can see in the two function we just wrote a call to a `getMessage()` function when we are adding a new message to the state. This function will format our kuzzle's notification/response. +You can see in the two function we just wrote a call to a `getMessage()` function when we are adding a new message to the state. This function will format our Kuzzle's notification/response. <<< ./snippets/ChatClient.js.snippet:5[js] -Note: The first part of this function is optionnal and can be replace by a set of the `display` variable to false. +Note: The first part of this function is optional and can be replaced by a set of the `display` variable to false. -If you decided to add the optionnal part, you'll need to implement the `displayDate()` function: +If you decided to add the optional part, you'll need to implement the `displayDate()` function: <<< ./snippets/ChatClient.js.snippet:4[js] -In the constructor of this component, we setted a `handleSendMessage` property to a binded `onSendMessage` function. Let's implement that function: +In the constructor of this component, we set a `handleSendMessage` property to a bound `onSendMessage` function. Let's implement that function: <<< ./snippets/ChatClient.js.snippet:8[js] @@ -141,7 +141,7 @@ To finish, we just need to add the `render()` function: <<< ./snippets/ChatClient.js.snippet:9[js] -As you can see, we are passing as props the fetched messages, the client username and the handleSendMessage function. +As you can see, we are passing as props the fetched messages, the client username and the `handleSendMessage` function. ## Display and Send messages @@ -159,10 +159,10 @@ There is no logic in this component so let's work on the render function: <<< ./snippets/ChatView.js.snippet:5[js] -In the previous snippet, you can see that we are using a Flatlist to display the messages passed as props from the `ChatClient` component. -The first view part in the Flatlist to the previous optionnal part. It is used to display the date only once for each message sended at the same date. +In the previous snippet, you can see that we are using a `Flatlist` to display the messages passed as props from the `ChatClient` component. +The first view part in the `Flatlist` to the previous optional part. It is used to display the date only once for each message sent at the same date. -Then just add the TextInput part with a call to our `handleSendMessage` property: +Then just add the `TextInput` part with a call to our `handleSendMessage` property: <<< ./snippets/ChatView.js.snippet:6[js] From 9b3bac76edd2b2e61c0f2e2574dcf4b5e0b3f16f Mon Sep 17 00:00:00 2001 From: Berthier Date: Wed, 15 Jan 2020 11:13:42 +0100 Subject: [PATCH 4/7] add link to sdk and descr of expo --- doc/7/getting-started/react-native/index.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/doc/7/getting-started/react-native/index.md b/doc/7/getting-started/react-native/index.md index 8700f8f1d..99e796a2b 100644 --- a/doc/7/getting-started/react-native/index.md +++ b/doc/7/getting-started/react-native/index.md @@ -9,14 +9,16 @@ order: 400 # Getting Started with Kuzzle and React Native -This section deals with **Kuzzle** (+ **Javascript SDK**) and **React Native**. We will create **documents** in Kuzzle and subscribe to [document notifications](/sdk/js/7/essentials/realtime-notifications/#document-messages) to develop a realtime chat. +This section deals with **Kuzzle** (+ [**Javascript SDK**](/sdk/js/7/)) and **React Native**. We will create **documents** in Kuzzle and subscribe to [document notifications](/sdk/js/7/essentials/realtime-notifications/#document-messages) to develop a realtime chat. ## Requirements - **Node.js** >= 12.0.0 ([install here](https://nodejs.org/en/download/)) -- **Expo CLI** ([install here](https://docs.expo.io/versions/v36.0.0/get-started/installation/)) - **Running Kuzzle Stack** ([instructions here](/core/2/guides/getting-started/running-kuzzle/)) +- **Expo CLI** ([install here](https://docs.expo.io/versions/v36.0.0/get-started/installation/)) + +[Expo](https://docs.expo.io/versions/latest/) is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase. ## Prepare your environment From 65b857b613c789bcf1e2807840cd8969ace91e51 Mon Sep 17 00:00:00 2001 From: Berthier Date: Wed, 15 Jan 2020 11:14:47 +0100 Subject: [PATCH 5/7] quotes --- doc/7/getting-started/react-native/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/7/getting-started/react-native/index.md b/doc/7/getting-started/react-native/index.md index 99e796a2b..af8a69224 100644 --- a/doc/7/getting-started/react-native/index.md +++ b/doc/7/getting-started/react-native/index.md @@ -18,7 +18,7 @@ This section deals with **Kuzzle** (+ [**Javascript SDK**](/sdk/js/7/)) and **Re - **Running Kuzzle Stack** ([instructions here](/core/2/guides/getting-started/running-kuzzle/)) - **Expo CLI** ([install here](https://docs.expo.io/versions/v36.0.0/get-started/installation/)) -[Expo](https://docs.expo.io/versions/latest/) is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase. +"[Expo](https://docs.expo.io/versions/latest/) is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase." ## Prepare your environment From 3a696b21d8532f9c7e635e01a2adafb6ce67ef2b Mon Sep 17 00:00:00 2001 From: Berthier Date: Wed, 15 Jan 2020 11:15:39 +0100 Subject: [PATCH 6/7] remove spaces before snippets --- doc/7/getting-started/react-native/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/doc/7/getting-started/react-native/index.md b/doc/7/getting-started/react-native/index.md index af8a69224..09d7e833f 100644 --- a/doc/7/getting-started/react-native/index.md +++ b/doc/7/getting-started/react-native/index.md @@ -74,11 +74,11 @@ First, add the following imports: Then we need to do three changes: - First, we must export our *App* class: - <<< ./snippets/App.js.snippet:2[js] +<<< ./snippets/App.js.snippet:2[js] - Then we need to create our `onSubmitName` function: - <<< ./snippets/App.js.snippet:3[js] +<<< ./snippets/App.js.snippet:3[js] - Finally we will create our render function: - <<< ./snippets/App.js.snippet:4[js] +<<< ./snippets/App.js.snippet:4[js] You can see that we will have to create a new component, `ChatClient`. That new component will contain the link to our Kuzzle backend so we need first declare our Kuzzle service. From 21512c7463d9da2108c06b044420ba9459153da7 Mon Sep 17 00:00:00 2001 From: Berthier Date: Wed, 22 Jan 2020 10:21:55 +0100 Subject: [PATCH 7/7] fix broken snippets --- .../.react-native/screens/Chat/ChatView.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/doc/7/getting-started/.react-native/screens/Chat/ChatView.js b/doc/7/getting-started/.react-native/screens/Chat/ChatView.js index 4ea71e0ab..e7c648a5e 100644 --- a/doc/7/getting-started/.react-native/screens/Chat/ChatView.js +++ b/doc/7/getting-started/.react-native/screens/Chat/ChatView.js @@ -1,4 +1,4 @@ -/* snippet:start: 1 */ +/* snippet:start:1 */ import React from 'react'; import { StyleSheet, @@ -65,7 +65,7 @@ class ChatView extends React.Component { } keyExtractor={item => item.id} /> - {/* snippet:end */} + {/* snippet:end */} {/* snippet:start:6 */} - {/* snippet:end */} + {/* snippet:end */} {/* snippet:start:7 */} ); } } -/* snippet:end */ +/* snippet:end */ /* snippet:start:8 */ const offset = 24; const styles = StyleSheet.create({ @@ -132,4 +132,4 @@ const styles = StyleSheet.create({ } }); export default ChatView; -/* snippet:end */ \ No newline at end of file +/* snippet:end */