refactor: Migration to Reach 2+ & restyling

BREAKING CHANGE: Reach 2+ not compatible with legacy, new default namespace

Author: juliendelage

.babelrc

@@ -12,4 +12,4 @@
     }
   },
   "presets": ["es2015", "react", "stage-0"]
-}
+}

.editorconfig

@@ -0,0 +1,28 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+# Set default charset
+[*.{js,html,json,md}]
+charset = utf-8
+
+# Set indent style for JS & html
+[{src/**.js,test/**.js,./*.js,samples/*.html}]
+indent_style = tab
+
+# Set indent style for conf files
+[{package.json,./*.yml}]
+indent_style = space
+indent_size = 2
+
+# Set indent style for doc
+[manual/*.md]
+indent_style = space
+indent_size = 4

.eslintrc.yml

@@ -2,21 +2,18 @@ parser: babel-eslint
 
 root: true
 
-globals:
-  RTCPeerConnection: true
-  attachMediaStream: true
-  Webcom: false
-  getUserMedia: true
-  detachMediaStream: true
-
-ecmaFeatures:
-  modules: true
+parserOptions:
+  ecmaVersion: 6
+  sourceType: module
+  ecmaFeatures:
+    jsx: true
 
 rules:
   strict: 0
   indent:
     - 2
     - tab
+    - SwitchCase: 1
   quotes:
     - 2
     - single
@@ -30,7 +27,7 @@ rules:
     - 0
   complexity:
     - 2
-    - 5
+    - 10
   max-depth:
     - 2
     - 3
@@ -46,7 +43,7 @@ rules:
     - 2
     - 20
   require-jsdoc:
-    - 2
+    - 1
   no-var:
     - 2
   object-shorthand:
@@ -73,7 +70,7 @@ rules:
     - 2
   no-else-return:
     - 2
-  no-empty-label:
+  no-labels:
     - 2
   no-lone-blocks:
     - 2
@@ -103,5 +100,11 @@ env:
   es6: true
   browser: true
   node: true
+  mocha: true
+
+plugins:
+  - 'react'
 
-extends: 'eslint:recommended'
+extends:
+  - 'eslint:recommended'
+  - 'plugin:react/recommended'

README.md

@@ -1,17 +1,18 @@
-# Samples with Webcom and WebRTC
+# Samples with Reach
 
 [![Build Status](https://travis-ci.org/webcom-components/visio-sample.svg?branch=master)](https://travis-ci.org/webcom-components/visio-sample)
 [![Code Climate](https://codeclimate.com/github/webcom-components/visio-sample/badges/gpa.svg)](https://codeclimate.com/github/webcom-components/visio-sample)
 [![Test Coverage](https://codeclimate.com/github/webcom-components/visio-sample/badges/coverage.svg)](https://codeclimate.com/github/webcom-components/visio-sample/coverage)
 [![devDependency Status](https://david-dm.org/webcom-components/visio-sample/dev-status.svg)](https://david-dm.org/webcom-components/visio-sample#info=devDependencies)
 
-Web application with 
-- Share Audio/video 
+Web application with
+- Share Audio/video
 - presence
 - invitations
 - room with multiple participants
 
 Implemented with :
+- [Reach](https://github.com/webcom-components/reach)
 - [React](https://facebook.github.io/react/)
 - [Redux](http://redux.js.org/)
 - [React router](https://github.com/rackt/react-router)
@@ -38,17 +39,17 @@ npm run
 
 To only build visio sample in ./dist folder
 
-*visiowebrtc* is on https://webcom.orange.com
+*visioreach* is on https://io.dataysnc.orange.com
 
 ```bash
 npm run build
 ```
 
 Optional env variables :
-- NAMESPACE : namespace for signalisation. Default is *visiowebrtc*
-- WS_SERVER : webcom server url. Default is *https://webcom.orange.com*
+- NAMESPACE : namespace for signalisation. Default is *visioreach*
+- WS_SERVER : webcom server url. Default is *https://io.datasync.orange.com*
 - PUBLIC_PATH : relative path of application. Default is /
-	
+
 ## Build and watch out visio sample
 
 To build and launch a web server on port 8080
@@ -58,12 +59,12 @@ npm run serve
 ```
 
 Optional env variables :
-- NAMESPACE : namespace for signalisation. Default is *visiowebrtc*
-- WS_SERVER : webcom server url. Default is *https://webcom.orange.com*
+- NAMESPACE : namespace for signalisation. Default is *visioreach*
+- WS_SERVER : webcom server url. Default is *https://io.datasync.orange.com*
 - PUBLIC_PATH : relative path of application. Default is /
 
 
-## Dev server 
+## Dev server
 
 To build and launch a dev web server on port 8080
 
@@ -72,8 +73,8 @@ npm start
 ```
 
 Optional env variables :
-- NAMESPACE : namespace for signalisation. Default is *visiowebrtc*
-- WS_SERVER : webcom server url. Default is *https://webcom.orange.com*
+- NAMESPACE : namespace for signalisation. Default is *visioreach*
+- WS_SERVER : webcom server url. Default is *https://io.datasync.orange.com*
 - PUBLIC_PATH : relative path of application. Default is /
 
 ## Test
@@ -82,7 +83,7 @@ Optional env variables :
 npm test
 ```
 
-With coverage 
+With coverage
 
 ```bash
 npm run test:coverage

package.json

@@ -21,7 +21,7 @@
     "babel": "^6.5.2",
     "babel-cli": "^6.5.1",
     "babel-core": "^6.5.2",
-    "babel-eslint": "^5.0.0",
+    "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.4",
     "babel-plugin-react-transform": "^2.0.0",
     "babel-plugin-transform-react-constant-elements": "^6.5.0",
@@ -34,7 +34,8 @@
     "chai": "^3.5.0",
     "css-loader": "^0.23.1",
     "cz-conventional-changelog": "^1.1.5",
-    "eslint": "^2.2.0",
+    "eslint": "^3.1.1",
+    "eslint-plugin-react": "^5.2.2",
     "expose-loader": "^0.7.1",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
@@ -56,8 +57,10 @@
   },
   "dependencies": {
     "bootstrap": "^3.3.6",
+    "bootstrap-material-design": "^0.5.10",
     "jquery": "^2.2.1",
     "react": "^0.14.7",
+    "react-bootstrap": "^0.30.0-rc.2",
     "react-dom": "^0.14.7",
     "react-redux": "^4.4.0",
     "react-router": "^2.0.0",
@@ -71,7 +74,7 @@
     "redux-simple-router": "^2.0.4",
     "redux-thunk": "^1.0.3",
     "webcom": "^1.0.1",
-    "webcom-reach": "^1.0.4"
+    "webcom-reach": "^2.0.0"
   },
   "config": {
     "commitizen": {

src/index.html

@@ -5,9 +5,13 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 	</head>
-	
+
 	<body>
         <div id="root"></div>
 	</body>
+    <script>
+        $.material.init();
+    </script>
 </html>

src/js/actions/invite.js

@@ -0,0 +1,111 @@
+import {rooms, ref, invites} from '../utils/reach';
+import * as roomActions from './room';
+import {RECEIVE_INVITATION, INVITATION_SENT, INVITATION_ANSWERED, INVITATION_ARCHIVED} from '../utils/constants';
+import {guid} from '../utils';
+
+const archive = () => {
+	return dispatch => {
+		const reach = ref();
+		reach.invites()
+			.then(_invites => {
+				_invites.forEach(invite => {
+					reach.base.child(`_/invites/${reach.current.uid}/${invite.uid}`).remove();
+					invites.remove(invite);
+				});
+			})
+			.then(() => {
+				dispatch({
+					type: INVITATION_ARCHIVED,
+					data: null
+				});
+			});
+	};
+};
+
+const answered = (accept, invitee, info) => {
+	return (dispatch, getState) => {
+		rooms.add(info.room);
+
+		const alreadyInRoom = getState().room && getState().room.info;
+		if (!alreadyInRoom && accept) {
+			dispatch(roomActions.join(info.room));
+		}
+
+		dispatch({
+			type: INVITATION_ANSWERED,
+			data: {
+				accept,
+				invitee,
+				info
+			}
+		});
+	};
+};
+
+const send = (invitee, room) => {
+	return (dispatch, getState) => {
+		Promise.resolve(rooms.find(room))
+			.then(_room => {
+				if(!_room) {
+					return ref()
+						.createRoom(guid())
+						.then(_newRoom => {
+							rooms.add(_newRoom);
+							return _newRoom;
+						});
+				}
+				return _room;
+			})
+			.then(_room => _room.invite([invitee], 'MODERATOR', 'Let\'s chat...'))
+			.then(_data => {
+				const
+					_room = _data.room,
+					_invite = _data.invites[0];
+
+				invites.add(_invite);
+
+				dispatch({type: INVITATION_SENT, data: {invitee, room: {..._room}}});
+
+				_invite.on('ACCEPTED', invite => {
+					dispatch(answered(true, invitee, invite, _room));
+				});
+
+				_invite.on('REJECTED', invite => {
+					dispatch(answered(false, invitee, invite, _room));
+				});
+
+				const alreadyInRoom = getState().room && getState().room.uid;
+				if (!alreadyInRoom) {
+					dispatch(roomActions.join(_room));
+				}
+			});
+	};
+};
+
+const receive = (sender, invite) => {
+	invites.add(invite);
+	return {
+		type: RECEIVE_INVITATION,
+		data: {
+			from: sender.name,
+			topic: invite.topic,
+			uid: invite.uid,
+			room: invite.room
+		}
+	};
+};
+
+const answer = (accept, invite, reason) => {
+	return dispatch => {
+		invites.find(invite)[accept ? 'accept' : 'reject'](reason)
+			.then(data => {
+				dispatch(answered(accept, ref().current, data));
+			});
+	};
+};
+
+
+export {archive, send, receive, answer, answered};
+
+
+