Add React Native getting started #480

berthieresteban · 2020-01-09T13:06:59Z

What does this PR do?

This PR add the react native getting started project with cypress tests.
Like the others getting started this a simple chat with document create and realtime subscription.
The readme will follow in another PR.

⚠️
In the screens/Chat/ChatView.js file, each message only display the author, the messge and the hour. The date of the message is displayed once for each message sended on the same date.

I'm not sure about the fetchMessages() subscribeMessages() and getMessage() functions in screens/Chat/ChatClient.js file because of the little complexity of the code at the top of the getMessage() function.
It's just used to check on each message if the date need to be displayed by checking the previous date message.
It also decrease the readability of the render() function of the screens/Chat/ChatView.js file.
Please tell me if you think it's too much for a simple getting started or if I need to simplify it.
⚠️

How should this be manually tested?

Step 1 : npm i
Step 2 : cd ./doc/7/getting-started/.react-native
Step 3 : npm i
Step 4 : npm run web
In another term from the same folder:
Step 5 : npm run test (if you have the CYPRESS_RECORD_KEY env variable setted)
Step 5bis : node_modules/.bin/cypress run (else)

Other changes

/

Boyscout

In test-docs.sh, use npm install command instead of npm ci because we must use the builded sdk of this repo instead of the one installed with package.json. (cf: package.json -> scripts -> postinstall)

Rename spec files of cypress tests for a better readability on dashboad.cypress.io

codecov · 2020-01-09T13:32:32Z

Codecov Report

Merging #480 into 7-dev will not change coverage by %.
The diff coverage is n/a.

@@           Coverage Diff           @@
##            7-dev     #480   +/-   ##
=======================================
  Coverage   95.57%   95.57%           
=======================================
  Files          32       32           
  Lines        1312     1312           
=======================================
  Hits         1254     1254           
  Misses         58       58

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 84a59f0...11da4d6. Read the comment docs.

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

doc/7/getting-started/.react-native/services/kuzzle.js

.ci/test-docs.sh

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

Co-Authored-By: Adrien Maret <amaret93@gmail.com>

This PR add the snippets and the Readme of the react native getting started.

Aschen · 2020-02-01T16:24:22Z

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

+      );
+    } else {
+      return (
+        <Login onSubmitName={this.handleSubmitName} />


Why not directly pass this.onSubmitName here?

Because function need to be bounded to the context of this class in order to use the this keyword inside the login component.

But i agree that this.handleSubmitName = this.onSubmitName.bind(this); should not be named differently to keep readability of the component. They both should keep the name handleSubmitName

Aschen · 2020-02-01T16:25:27Z

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

@@ -0,0 +1,149 @@
+/* snippet:start:1 */


The indentation of this file is wrong (4 spaces instead of 2)

Aschen · 2020-02-01T16:25:59Z

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

+    render() {
+        const messages = this.state.messages;
+        return (
+            <ChatView messages={messages} onSendMessage={this.handleSendMessage} name={this.props.name} />


Same remark, why don't pass directly this.onSendMessage ?

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

Aschen · 2020-02-01T16:31:02Z

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

@@ -0,0 +1,135 @@
+/* snippet:start:1 */


This file have a wrong indentation (4 spaces instead of 2)

Aschen · 2020-02-01T16:32:02Z

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

+                    <TextInput
+                        style={styles.inputMessage}
+                        placeholder='Send message...'
+                        onSubmitEditing={this.handleSendMessage}


Same remark, why don't just pass this.onSendMessage instead?

Aschen · 2020-02-01T16:32:30Z

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

@@ -0,0 +1,40 @@
+/* snippet:start:1 */


This file have a wrong indentation (4 spaces instead of 2)

rolljee · 2020-02-04T12:51:31Z

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

+      );
+    } else {
+      return (
+        <Login onSubmitName={this.handleSubmitName} />


Because function need to be bounded to the context of this class in order to use the this keyword inside the login component.

But i agree that this.handleSubmitName = this.onSubmitName.bind(this); should not be named differently to keep readability of the component. They both should keep the name handleSubmitName

rolljee · 2020-02-04T12:57:29Z

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

+                            <View>
+                                <View>
+                                    {
+                                        item.displayDate ?


This could be written item.displayDate && .... instead of item.displayDate ? ... : null

rolljee · 2020-02-04T12:59:11Z

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

+        return (
+            <SafeAreaView style={{ flex: 1 }}>
+                <KeyboardAvoidingView style={styles.container} behavior="padding">
+                    <FlatList


For readability purpose you shall put the component inside a dedicated function ?
maybe a function called renderFlatList() {}

Co-Authored-By: Adrien Maret <amaret93@gmail.com>

Aschen

After the failing test pass, 👍

…etting-started-react-native

berthieresteban added 4 commits January 9, 2020 13:32

add gs react native and tests and ci

6b6a27e

clean cypress files

14d65a6

remove useless packages

0568a24

rename tests better readability on cy dashboard

8954db5

berthieresteban added the 7-dev label Jan 9, 2020

berthieresteban self-assigned this Jan 9, 2020

add local expo-cli and use it in package scripts

5126ec6

berthieresteban added the wip label Jan 9, 2020

clean

7238a34

berthieresteban removed the wip label Jan 9, 2020

alexandrebouthinon changed the title ~~add gs react native and tests and ci~~ Add React Native getting started Jan 13, 2020

Aschen suggested changes Jan 14, 2020

View reviewed changes

xbill82 reviewed Jan 14, 2020

View reviewed changes

berthieresteban and others added 9 commits January 15, 2020 09:40

Apply suggestions from code review

daa14f7

Co-Authored-By: Adrien Maret <amaret93@gmail.com>

use npm ci

0a0f6d3

split init fetch subscribe calls and add didMount

0ed8a62

[nit] rename variables

321fc27

remove protperties auto from kuzzle

39794af

change displayDate archi remove reverse and nit

ea6a3b0

add packagelock for gs react

b7a963d

test without ci

2fad36f

comment hack

a91c108

berthieresteban requested review from Aschen and xbill82 January 22, 2020 09:28

berthieresteban and others added 2 commits January 22, 2020 10:31

clean

9584821

Add readme and snippets to the React Native getting started (#481)

e56c494

This PR add the snippets and the Readme of the react native getting started.

xbill82 approved these changes Jan 27, 2020

View reviewed changes

Aschen suggested changes Feb 1, 2020

View reviewed changes

rolljee reviewed Feb 4, 2020

View reviewed changes

berthieresteban and others added 3 commits February 5, 2020 10:34

Apply suggestions from code review

6d62055

Co-Authored-By: Adrien Maret <amaret93@gmail.com>

linter props name and renderFlatListItem

1e10fda

update readme

03b7602

berthieresteban requested review from Aschen and rolljee February 5, 2020 13:06

Aschen approved these changes Feb 5, 2020

View reviewed changes

fix node doc tests

5bd31c6

rolljee approved these changes Feb 7, 2020

View reviewed changes

berthieresteban added 2 commits February 19, 2020 11:47

Merge branch '7-dev' of github.com:kuzzleio/sdk-javascript into add-g…

e00d0f0

…etting-started-react-native

last fix

11da4d6

Aschen merged commit e590c90 into 7-dev Feb 19, 2020

Aschen deleted the add-getting-started-react-native branch February 19, 2020 13:50

Yoann-Abbes mentioned this pull request Feb 19, 2020

Release 7.1.0 #491

Merged

Add React Native getting started #480

Add React Native getting started #480

Conversation

berthieresteban commented Jan 9, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

How should this be manually tested?

Other changes

Boyscout

Uh oh!

codecov bot commented Jan 9, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rolljee Feb 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Aschen left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

berthieresteban commented Jan 9, 2020 •

edited

Loading

codecov bot commented Jan 9, 2020 •

edited

Loading

rolljee Feb 4, 2020 •

edited

Loading