Updating client dependencies. Switching to yarn. (#6433)

* Updating client dependancies. Switching to using yarn.

* Updating React

* Moving pure components to using function syntax (performance gains with newer react version)

* Updating client dependancies.

* Ignore .yarninstall

* Enabling pre-lockfile because it's the entire point of using yarn.

* Removing old webpack config

* Moving to new prop-types

* Fixing ESLint Errors

* Updating jest snapshots.

* Cleaning up package.json

webapp/components/webrtc/components/webrtc_header.jsx

@@ -6,95 +6,95 @@ import Constants from 'utils/constants.jsx';
 import {Tooltip, OverlayTrigger} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
-export default class WebrtcHeader extends React.Component {
-    render() {
-        const title = (
+export default function WebrtcHeader(props) {
+    const title = (
+        <FormattedMessage
+            id='webrtc.header'
+            defaultMessage='Call with {username}'
+            values={{
+                username: props.username
+            }}
+        />
+    );
+
+    const closeSidebarTooltip = (
+        <Tooltip id='closeSidebarTooltip'>
             <FormattedMessage
-                id='webrtc.header'
-                defaultMessage='Call with {username}'
-                values={{
-                    username: this.props.username
-                }}
+                id='rhs_header.closeTooltip'
+                defaultMessage='Close Sidebar'
             />
-        );
+        </Tooltip>
+    );
 
-        const closeSidebarTooltip = (
-            <Tooltip id='closeSidebarTooltip'>
-                <FormattedMessage
-                    id='rhs_header.closeTooltip'
-                    defaultMessage='Close Sidebar'
-                />
-            </Tooltip>
-        );
+    const expandSidebarTooltip = (
+        <Tooltip id='expandSidebarTooltip'>
+            <FormattedMessage
+                id='rhs_header.expandTooltip'
+                defaultMessage='Expand Sidebar'
+            />
+        </Tooltip>
+    );
 
-        const expandSidebarTooltip = (
-            <Tooltip id='expandSidebarTooltip'>
-                <FormattedMessage
-                    id='rhs_header.expandTooltip'
-                    defaultMessage='Expand Sidebar'
-                />
-            </Tooltip>
-        );
+    const shrinkSidebarTooltip = (
+        <Tooltip id='shrinkSidebarTooltip'>
+            <FormattedMessage
+                id='rhs_header.expandTooltip'
+                defaultMessage='Shrink Sidebar'
+            />
+        </Tooltip>
+    );
 
-        const shrinkSidebarTooltip = (
-            <Tooltip id='shrinkSidebarTooltip'>
-                <FormattedMessage
-                    id='rhs_header.expandTooltip'
-                    defaultMessage='Shrink Sidebar'
-                />
-            </Tooltip>
-        );
-
-        return (
-            <div className='sidebar--right__header'>
-                <span className='sidebar--right__title'>{title}</span>
-                <div className='pull-right'>
-                    <button
-                        type='button'
-                        className='sidebar--right__expand'
-                        aria-label='Expand'
-                        onClick={this.props.toggleSize}
+    return (
+        <div className='sidebar--right__header'>
+            <span className='sidebar--right__title'>{title}</span>
+            <div className='pull-right'>
+                <button
+                    type='button'
+                    className='sidebar--right__expand'
+                    aria-label='Expand'
+                    onClick={props.toggleSize}
+                >
+                    <OverlayTrigger
+                        delayShow={Constants.OVERLAY_TIME_DELAY}
+                        placement='top'
+                        overlay={expandSidebarTooltip}
                     >
-                        <OverlayTrigger
-                            delayShow={Constants.OVERLAY_TIME_DELAY}
-                            placement='top'
-                            overlay={expandSidebarTooltip}
-                        >
-                            <i className='fa fa-expand'/>
-                        </OverlayTrigger>
-                        <OverlayTrigger
-                            delayShow={Constants.OVERLAY_TIME_DELAY}
-                            placement='top'
-                            overlay={shrinkSidebarTooltip}
-                        >
-                            <i className='fa fa-compress'/>
-                        </OverlayTrigger>
-                    </button>
-                    <button
-                        type='button'
-                        className='sidebar--right__close'
-                        aria-label='Close'
-                        title='Close'
-                        onClick={this.props.onClose}
+                        <i className='fa fa-expand'/>
+                    </OverlayTrigger>
+                    <OverlayTrigger
+                        delayShow={Constants.OVERLAY_TIME_DELAY}
+                        placement='top'
+                        overlay={shrinkSidebarTooltip}
                     >
-                        <OverlayTrigger
-                            delayShow={Constants.OVERLAY_TIME_DELAY}
-                            placement='top'
-                            overlay={closeSidebarTooltip}
-                        >
-                            <i className='fa fa-sign-out'/>
-                        </OverlayTrigger>
-                    </button>
-                </div>
+                        <i className='fa fa-compress'/>
+                    </OverlayTrigger>
+                </button>
+                <button
+                    type='button'
+                    className='sidebar--right__close'
+                    aria-label='Close'
+                    title='Close'
+                    onClick={props.onClose}
+                >
+                    <OverlayTrigger
+                        delayShow={Constants.OVERLAY_TIME_DELAY}
+                        placement='top'
+                        overlay={closeSidebarTooltip}
+                    >
+                        <i className='fa fa-sign-out'/>
+                    </OverlayTrigger>
+                </button>
             </div>
-        );
-    }
+        </div>
+    );
 }
 
 WebrtcHeader.propTypes = {
-    username: React.PropTypes.string.isRequired,
-    onClose: React.PropTypes.func.isRequired,
-    toggleSize: React.PropTypes.func
+    username: PropTypes.string.isRequired,
+    onClose: PropTypes.func.isRequired,
+    toggleSize: PropTypes.func
 };

webapp/components/webrtc/webrtc_controller.jsx

@@ -19,6 +19,8 @@ import * as WebrtcActions from 'actions/webrtc_actions.jsx';
 import * as Utils from 'utils/utils.jsx';
 import {Constants, UserStatuses, WebrtcActionTypes} from 'utils/constants.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
@@ -1235,9 +1237,9 @@ export default class WebrtcController extends React.Component {
 }
 
 WebrtcController.propTypes = {
-    currentUser: React.PropTypes.object,
-    userId: React.PropTypes.string.isRequired,
-    isCaller: React.PropTypes.bool.isRequired,
-    expanded: React.PropTypes.bool.isRequired,
-    toggleSize: React.PropTypes.func
+    currentUser: PropTypes.object,
+    userId: PropTypes.string.isRequired,
+    isCaller: PropTypes.bool.isRequired,
+    expanded: PropTypes.bool.isRequired,
+    toggleSize: PropTypes.func
 };