Add getting started React

.gitignore

@@ -16,4 +16,8 @@ examples/node_modules/
 coverage/
 
 doc/framework
-dead_links.json
+dead_links.json
+
+# Cypress debug
+doc/6/getting-started/.react/cypress/screenshots
+doc/6/getting-started/.react/cypress/videos

doc/6/getting-started/.react/.eslintrc.json

@@ -0,0 +1,57 @@
+{
+  "rules": {
+    "consistent-return": 0,
+    "curly": 2,
+    "dot-notation": 2,
+    "eqeqeq": 2,
+    "guard-for-in": 2,
+    "indent": [2, 2, {"SwitchCase": 1}],
+    "linebreak-style": [2, "unix"],
+    "new-cap": 1,
+    "no-caller": 2,
+    "no-catch-shadow": 2,
+    "no-else-return": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-eval": 2,
+    "no-implicit-coercion": 2,
+    "no-implied-eval": 2,
+    "no-invalid-this": 2,
+    "no-irregular-whitespace": 2,
+    "no-labels": 2,
+    "no-lone-blocks": 2,
+    "no-lonely-if": 1,
+    "no-loop-func": 2,
+    "no-multi-spaces": 1,
+    "no-multiple-empty-lines": 1,
+    "no-native-reassign": 2,
+    "no-nested-ternary": 2,
+    "no-new": 2,
+    "no-new-func": 2,
+    "no-new-require": 2,
+    "no-new-wrappers": 2,
+    "no-return-assign": 2,
+    "no-self-compare": 2,
+    "no-sequences": 2,
+    "no-shadow": 2,
+    "no-shadow-restricted-names": 2,
+    "no-throw-literal": 2,
+    "no-undef": 0,
+    "no-undef-init": 1,
+    "no-unreachable": 2,
+    "no-unused-expressions": [2, {"allowShortCircuit": true}],
+    "no-useless-call": 2,
+    "no-with": 2,
+    "quotes": [2, "single"],
+    "semi": [2, "always"],
+    "keyword-spacing": 2,
+    "space-before-blocks": 2,
+    "space-in-parens": [2, "never"],
+    "vars-on-top": 2,
+    "yoda": [2, "never"]
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018
+  },
+  "extends": "eslint:recommended"
+}

doc/6/getting-started/.react/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

doc/6/getting-started/.react/cypress.json

@@ -0,0 +1,16 @@
+{
+    "baseUrl": "http://localhost:3000",
+    "projectId": "ce9wca",
+    "videoUploadOnPasses": false,
+    "viewportWidth": 1400,
+    "viewportHeight": 900,
+    "defaultCommandTimeout": 5000,
+    "env": {
+      "kuzzle": {
+        "host": "localhost",
+        "port": "7512",
+        "index": "chat",
+        "collection": "messages"
+      }
+    }
+  }

doc/6/getting-started/.react/cypress/fixtures/Legolas.json

@@ -0,0 +1,19 @@
+{
+    "messages": [
+        {
+            "body": {
+                "text": "It still only counts as one!"
+            }
+        },
+        {
+            "body": {
+                "text": "What do your elf eyes see?"
+            }
+        },
+        {
+            "body": {
+                "text": "What about side by side with a friend?"
+            }
+        }
+    ]
+}

doc/6/getting-started/.react/cypress/fixtures/Sam.json

@@ -0,0 +1,5 @@
+{
+    "body": {
+        "text": "I can't carry it for you, But I can carry you!"
+    }
+}

doc/6/getting-started/.react/cypress/fixtures/Sauron.json

@@ -0,0 +1,5 @@
+{
+    "body": {
+        "text": "I am no man"
+    }
+}

doc/6/getting-started/.react/cypress/integration/chat.spec.js

@@ -0,0 +1,41 @@
+describe('test realtime chat', () => {
+
+  before(() => {
+    cy.initialisation();
+  });
+
+  it('should fetch and display some messages', function () {
+    cy.fixture('Legolas.json').as('fixt')
+      .then(() => cy.loadEnvironment(this.fixt))
+      .then(() => {
+        cy.log(this.fixt);
+        cy.visit('/');
+        for (const message of this.fixt.messages) {
+          cy.contains(message.body.text);
+        }
+      });
+  });
+
+  it('should send a message', function () {
+    cy.fixture('Sam.json').as('fixt')
+      .then(() => cy.loadEnvironment(this.fixt))
+      .then(() => {
+        cy.visit('/');
+        cy.get('#message')
+          .type(this.fixt.body.text);
+        cy.contains('Envoyer')
+          .click();
+        cy.contains(this.fixt.body.text);
+      });
+  });
+
+  it('should receive a message', function () {
+    cy.fixture('Sauron.json').as('fixt')
+      .then(() => cy.loadEnvironment(this.fixt))
+      .then(() => {
+        cy.visit('/');
+        cy.createMessage(this.fixt.body);
+        cy.contains(this.fixt.body.text);
+      });
+  });
+});

doc/6/getting-started/.react/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

doc/6/getting-started/.react/cypress/support/commands.js

@@ -0,0 +1,124 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+function reinitialisation() {
+  const kuzzle = Cypress.env('kuzzle');
+
+  // Clear collection
+  return cy.request({
+    url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/${kuzzle.collection}/_truncate`,
+    method: 'DELETE',
+  })
+    .then(searchResponse => {
+      cy.log(`Request : truncate ${kuzzle.collection} status : ${searchResponse.status}`);
+      cy.wait(500);
+    });
+}
+
+Cypress.Commands.add('createMessage', (body) => {
+  const kuzzle = Cypress.env('kuzzle');
+  return cy.request({
+    url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/${kuzzle.collection}/_create`,
+    method: 'POST',
+    body: body,
+  })
+    .its('body')
+    .then(response => {
+      cy.log(`Create status : ${response.status} {${body.text}}`);
+      cy.wait(500);
+    });
+});
+
+
+Cypress.Commands.add('initialisation', () => {
+  const kuzzle = Cypress.env('kuzzle');
+
+  // Delete index if exists
+  cy.request({
+    url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/_exists`,
+    method: 'GET',
+  })
+    .then(existsResponse => {
+      cy.log(`Request : exists ${kuzzle.index} status : ${existsResponse.status}`);
+      if (existsResponse.body.result) {
+        cy.request({
+          url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}`,
+          method: 'DELETE',
+        })
+          .then(deleteResponse => {
+            cy.log(`Request : delete ${kuzzle.index} status : ${deleteResponse.status}`);
+          });
+      }
+    }).then(() => {
+      // Create index
+      cy.request({
+        url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/_create`,
+        method: 'POST',
+      })
+        .then(createResponse => {
+          cy.log(`Request : create ${kuzzle.index} status : ${createResponse.status}`);
+          cy.wait(500);
+        });
+    })
+    .then(() => {
+      // Create collection
+      cy.request({
+        url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/${kuzzle.collection}`,
+        method: 'PUT',
+        body: {}
+      })
+        .then(createResponse => {
+          cy.log(`Request : create ${kuzzle.collection} status : ${createResponse.status}`);
+          cy.wait(500);
+        });
+    });
+});
+
+Cypress.Commands.add('loadEnvironment', (env) => {
+  const kuzzle = Cypress.env('kuzzle');
+
+  reinitialisation();
+  if (!env.messages) {return;}
+  cy.request({
+    url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/${kuzzle.collection}/_mCreate`,
+    method: 'POST',
+    body: {'documents': env.messages},
+  })
+    .its('body')
+    .then(response => {
+      cy.log(`mCreate status : ${response.status}`);
+    })
+    .then(() => {
+      cy.request({
+        url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/_refresh`,
+        method: 'POST',
+      })
+        .then((response) => {
+          cy.log(`refresh status : ${response.status}`);
+          cy.wait(500);
+        });
+    });
+});

doc/6/getting-started/.react/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

doc/6/getting-started/.react/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "kuzzle-playground",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "cypress": "^3.4.1",
+    "kuzzle-sdk": "^6.1.4",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-redux": "^7.1.0",
+    "react-scripts": "3.0.1",
+    "redux-saga": "^1.0.5",
+    "webpack": "4.29.6"
+  },
+  "scripts": {
+    "postinstall": "if [ ! -f  ../../../../dist/kuzzle.js ]; then npm run build --prefix ../../../../;fi && rm -rf ./node_modules/kuzzle-sdk/* && rsync -r --exclude 'getting-started' ../../../../ ./node_modules/kuzzle-sdk",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "./node_modules/.bin/cypress run",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}