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

25 files changed, 222 insertions, 179 deletions

diff --git a/webapp/components/post_view/components/commented_on_files_message_container.jsx b/webapp/components/post_view/components/commented_on_files_message_container.jsx
index d1fa455c7..6ba1de3de 100644
--- a/webapp/components/post_view/components/commented_on_files_message_container.jsx
+++ b/webapp/components/post_view/components/commented_on_files_message_container.jsx
@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -9,8 +11,8 @@ import * as Utils from 'utils/utils.jsx';
 
 export default class CommentedOnFilesMessageContainer extends React.Component {
     static propTypes = {
-        parentPostChannelId: React.PropTypes.string.isRequired,
-        parentPostId: React.PropTypes.string.isRequired
+        parentPostChannelId: PropTypes.string.isRequired,
+        parentPostId: PropTypes.string.isRequired
     }
 
     constructor(props) {
diff --git a/webapp/components/post_view/components/date_separator.jsx b/webapp/components/post_view/components/date_separator.jsx
index 18dc0c7ff..4648f456c 100644
--- a/webapp/components/post_view/components/date_separator.jsx
+++ b/webapp/components/post_view/components/date_separator.jsx
@@ -1,27 +1,26 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedDate} from 'react-intl';
 
-export default class DateSeparator extends React.Component {
-    render() {
-        return (
-            <div
-                className='date-separator'
-            >
-                <hr className='separator__hr'/>
-                <div className='separator__text'>
-                    <FormattedDate
-                        value={this.props.date}
-                        weekday='short'
-                        month='short'
-                        day='2-digit'
-                        year='numeric'
-                    />
-                </div>
+export default function DateSeparator(props) {
+    return (
+        <div
+            className='date-separator'
+        >
+            <hr className='separator__hr'/>
+            <div className='separator__text'>
+                <FormattedDate
+                    value={props.date}
+                    weekday='short'
+                    month='short'
+                    day='2-digit'
+                    year='numeric'
+                />
             </div>
-        );
-    }
+        </div>
+    );
 }
 
 DateSeparator.propTypes = {
-    date: React.PropTypes.instanceOf(Date)
+    date: PropTypes.instanceOf(Date)
 };
diff --git a/webapp/components/post_view/components/floating_timestamp.jsx b/webapp/components/post_view/components/floating_timestamp.jsx
index d2d26c0bd..34e6ce006 100644
--- a/webapp/components/post_view/components/floating_timestamp.jsx
+++ b/webapp/components/post_view/components/floating_timestamp.jsx
@@ -3,6 +3,8 @@
 
 import {FormattedDate} from 'react-intl';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
@@ -52,8 +54,8 @@ export default class FloatingTimestamp extends React.Component {
 }
 
 FloatingTimestamp.propTypes = {
-    isScrolling: React.PropTypes.bool.isRequired,
-    isMobile: React.PropTypes.bool,
-    createAt: React.PropTypes.number,
-    isRhsPost: React.PropTypes.bool
+    isScrolling: PropTypes.bool.isRequired,
+    isMobile: PropTypes.bool,
+    createAt: PropTypes.number,
+    isRhsPost: PropTypes.bool
 };
diff --git a/webapp/components/post_view/components/new_message_indicator.jsx b/webapp/components/post_view/components/new_message_indicator.jsx
index 488a38b1b..cafdc128a 100644
--- a/webapp/components/post_view/components/new_message_indicator.jsx
+++ b/webapp/components/post_view/components/new_message_indicator.jsx
@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 import React from 'react';
@@ -59,6 +61,6 @@ NewMessageIndicator.defaultProps = {
 };
 
 NewMessageIndicator.propTypes = {
-    onClick: React.PropTypes.func.isRequired,
-    newMessages: React.PropTypes.number
+    onClick: PropTypes.func.isRequired,
+    newMessages: PropTypes.number
 };
diff --git a/webapp/components/post_view/components/pending_post_options.jsx b/webapp/components/post_view/components/pending_post_options.jsx
index 0085a16f2..9742a74bf 100644
--- a/webapp/components/post_view/components/pending_post_options.jsx
+++ b/webapp/components/post_view/components/pending_post_options.jsx
@@ -9,6 +9,8 @@ import Constants from 'utils/constants.jsx';
 
 import {FormattedMessage} from 'react-intl';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class PendingPostOptions extends React.Component {
@@ -83,5 +85,5 @@ export default class PendingPostOptions extends React.Component {
 }
 
 PendingPostOptions.propTypes = {
-    post: React.PropTypes.object
+    post: PropTypes.object
 };
diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx
index 38f95a85b..c1b932774 100644
--- a/webapp/components/post_view/components/post.jsx
+++ b/webapp/components/post_view/components/post.jsx
@@ -1,7 +1,9 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
 
 import ProfilePicture from 'components/profile_picture.jsx';
 
diff --git a/webapp/components/post_view/components/post_attachment.jsx b/webapp/components/post_view/components/post_attachment.jsx
index 930e75b41..e873ef9c7 100644
--- a/webapp/components/post_view/components/post_attachment.jsx
+++ b/webapp/components/post_view/components/post_attachment.jsx
@@ -17,6 +17,8 @@ const holders = defineMessages({
     }
 });
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 class PostAttachment extends React.Component {
@@ -315,7 +317,7 @@ class PostAttachment extends React.Component {
 
 PostAttachment.propTypes = {
     intl: intlShape.isRequired,
-    attachment: React.PropTypes.object.isRequired
+    attachment: PropTypes.object.isRequired
 };
 
 export default injectIntl(PostAttachment);
diff --git a/webapp/components/post_view/components/post_attachment_list.jsx b/webapp/components/post_view/components/post_attachment_list.jsx
index 5223fb2b3..3d7c0e4cd 100644
--- a/webapp/components/post_view/components/post_attachment_list.jsx
+++ b/webapp/components/post_view/components/post_attachment_list.jsx
@@ -3,28 +3,28 @@
 
 import PostAttachment from './post_attachment.jsx';
 
-import React from 'react';
+import PropTypes from 'prop-types';
 
-export default class PostAttachmentList extends React.Component {
-    render() {
-        const content = [];
-        this.props.attachments.forEach((attachment, i) => {
-            content.push(
-                <PostAttachment
-                    attachment={attachment}
-                    key={'att_' + i}
-                />
-            );
-        });
+import React from 'react';
 
-        return (
-            <div className='attachment_list'>
-                {content}
-            </div>
+export default function PostAttachmentList(props) {
+    const content = [];
+    props.attachments.forEach((attachment, i) => {
+        content.push(
+            <PostAttachment
+                attachment={attachment}
+                key={'att_' + i}
+            />
         );
-    }
+    });
+
+    return (
+        <div className='attachment_list'>
+            {content}
+        </div>
+    );
 }
 
 PostAttachmentList.propTypes = {
-    attachments: React.PropTypes.array.isRequired
+    attachments: PropTypes.array.isRequired
 };
diff --git a/webapp/components/post_view/components/post_attachment_opengraph.jsx b/webapp/components/post_view/components/post_attachment_opengraph.jsx
index f6e66a641..129111800 100644
--- a/webapp/components/post_view/components/post_attachment_opengraph.jsx
+++ b/webapp/components/post_view/components/post_attachment_opengraph.jsx
@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -279,7 +281,7 @@ PostAttachmentOpenGraph.defaultProps = {
 };
 
 PostAttachmentOpenGraph.propTypes = {
-    link: React.PropTypes.string.isRequired,
-    childComponentDidUpdateFunction: React.PropTypes.func,
-    previewCollapsed: React.PropTypes.string
+    link: PropTypes.string.isRequired,
+    childComponentDidUpdateFunction: PropTypes.func,
+    previewCollapsed: PropTypes.string
 };
diff --git a/webapp/components/post_view/components/post_body.jsx b/webapp/components/post_view/components/post_body.jsx
index 2ad9f96d1..0f481ec02 100644
--- a/webapp/components/post_view/components/post_body.jsx
+++ b/webapp/components/post_view/components/post_body.jsx
@@ -17,6 +17,8 @@ import {FormattedMessage} from 'react-intl';
 
 import loadingGif from 'images/load.gif';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class PostBody extends React.Component {
@@ -208,14 +210,14 @@ export default class PostBody extends React.Component {
 }
 
 PostBody.propTypes = {
-    post: React.PropTypes.object.isRequired,
-    currentUser: React.PropTypes.object.isRequired,
-    parentPost: React.PropTypes.object,
-    retryPost: React.PropTypes.func,
-    lastPostCount: React.PropTypes.number,
-    handleCommentClick: React.PropTypes.func.isRequired,
-    compactDisplay: React.PropTypes.bool,
-    previewCollapsed: React.PropTypes.string,
-    isCommentMention: React.PropTypes.bool,
-    childComponentDidUpdateFunction: React.PropTypes.func
+    post: PropTypes.object.isRequired,
+    currentUser: PropTypes.object.isRequired,
+    parentPost: PropTypes.object,
+    retryPost: PropTypes.func,
+    lastPostCount: PropTypes.number,
+    handleCommentClick: PropTypes.func.isRequired,
+    compactDisplay: PropTypes.bool,
+    previewCollapsed: PropTypes.string,
+    isCommentMention: PropTypes.bool,
+    childComponentDidUpdateFunction: PropTypes.func
 };
diff --git a/webapp/components/post_view/components/post_body_additional_content.jsx b/webapp/components/post_view/components/post_body_additional_content.jsx
index 549bb9faa..130031233 100644
--- a/webapp/components/post_view/components/post_body_additional_content.jsx
+++ b/webapp/components/post_view/components/post_body_additional_content.jsx
@@ -9,6 +9,8 @@ import YoutubeVideo from 'components/youtube_video.jsx';
 import Constants from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class PostBodyAdditionalContent extends React.Component {
@@ -216,9 +218,9 @@ PostBodyAdditionalContent.defaultProps = {
     previewCollapsed: 'false'
 };
 PostBodyAdditionalContent.propTypes = {
-    post: React.PropTypes.object.isRequired,
-    message: React.PropTypes.element.isRequired,
-    compactDisplay: React.PropTypes.bool,
-    previewCollapsed: React.PropTypes.string,
-    childComponentDidUpdateFunction: React.PropTypes.func
+    post: PropTypes.object.isRequired,
+    message: PropTypes.element.isRequired,
+    compactDisplay: PropTypes.bool,
+    previewCollapsed: PropTypes.string,
+    childComponentDidUpdateFunction: PropTypes.func
 };
diff --git a/webapp/components/post_view/components/post_header.jsx b/webapp/components/post_view/components/post_header.jsx
index eccd092b5..ce67cd653 100644
--- a/webapp/components/post_view/components/post_header.jsx
+++ b/webapp/components/post_view/components/post_header.jsx
@@ -9,6 +9,8 @@ import * as PostUtils from 'utils/post_utils.jsx';
 
 import Constants from 'utils/constants.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class PostHeader extends React.Component {
@@ -103,19 +105,19 @@ PostHeader.defaultProps = {
     sameUser: false
 };
 PostHeader.propTypes = {
-    post: React.PropTypes.object.isRequired,
-    user: React.PropTypes.object,
-    currentUser: React.PropTypes.object.isRequired,
-    lastPostCount: React.PropTypes.number,
-    commentCount: React.PropTypes.number.isRequired,
-    isLastComment: React.PropTypes.bool.isRequired,
-    handleCommentClick: React.PropTypes.func.isRequired,
-    handleDropdownOpened: React.PropTypes.func.isRequired,
-    sameUser: React.PropTypes.bool.isRequired,
-    compactDisplay: React.PropTypes.bool,
-    displayNameType: React.PropTypes.string,
-    useMilitaryTime: React.PropTypes.bool.isRequired,
-    isFlagged: React.PropTypes.bool.isRequired,
-    status: React.PropTypes.string,
-    isBusy: React.PropTypes.bool
+    post: PropTypes.object.isRequired,
+    user: PropTypes.object,
+    currentUser: PropTypes.object.isRequired,
+    lastPostCount: PropTypes.number,
+    commentCount: PropTypes.number.isRequired,
+    isLastComment: PropTypes.bool.isRequired,
+    handleCommentClick: PropTypes.func.isRequired,
+    handleDropdownOpened: PropTypes.func.isRequired,
+    sameUser: PropTypes.bool.isRequired,
+    compactDisplay: PropTypes.bool,
+    displayNameType: PropTypes.string,
+    useMilitaryTime: PropTypes.bool.isRequired,
+    isFlagged: PropTypes.bool.isRequired,
+    status: PropTypes.string,
+    isBusy: PropTypes.bool
 };
diff --git a/webapp/components/post_view/components/post_image.jsx b/webapp/components/post_view/components/post_image.jsx
index 39308ed2f..2bdc5efc0 100644
--- a/webapp/components/post_view/components/post_image.jsx
+++ b/webapp/components/post_view/components/post_image.jsx
@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -82,6 +84,6 @@ export default class PostImageEmbed extends React.Component {
 }
 
 PostImageEmbed.propTypes = {
-    link: React.PropTypes.string.isRequired,
-    onLinkLoadError: React.PropTypes.func
+    link: PropTypes.string.isRequired,
+    onLinkLoadError: PropTypes.func
 };
diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx
index 3833f5058..06e7b33fd 100644
--- a/webapp/components/post_view/components/post_info.jsx
+++ b/webapp/components/post_view/components/post_info.jsx
@@ -18,6 +18,8 @@ import DelayedAction from 'utils/delayed_action.jsx';
 import {Overlay} from 'react-bootstrap';
 import EmojiPicker from 'components/emoji_picker/emoji_picker.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
@@ -454,15 +456,15 @@ PostInfo.defaultProps = {
     sameUser: false
 };
 PostInfo.propTypes = {
-    post: React.PropTypes.object.isRequired,
-    lastPostCount: React.PropTypes.number,
-    commentCount: React.PropTypes.number.isRequired,
-    isLastComment: React.PropTypes.bool.isRequired,
-    handleCommentClick: React.PropTypes.func.isRequired,
-    handleDropdownOpened: React.PropTypes.func.isRequired,
-    sameUser: React.PropTypes.bool.isRequired,
-    currentUser: React.PropTypes.object.isRequired,
-    compactDisplay: React.PropTypes.bool,
-    useMilitaryTime: React.PropTypes.bool.isRequired,
-    isFlagged: React.PropTypes.bool
+    post: PropTypes.object.isRequired,
+    lastPostCount: PropTypes.number,
+    commentCount: PropTypes.number.isRequired,
+    isLastComment: PropTypes.bool.isRequired,
+    handleCommentClick: PropTypes.func.isRequired,
+    handleDropdownOpened: PropTypes.func.isRequired,
+    sameUser: PropTypes.bool.isRequired,
+    currentUser: PropTypes.object.isRequired,
+    compactDisplay: PropTypes.bool,
+    useMilitaryTime: PropTypes.bool.isRequired,
+    isFlagged: PropTypes.bool
 };
diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx
index f233884ac..0d1244c55 100644
--- a/webapp/components/post_view/components/post_list.jsx
+++ b/webapp/components/post_view/components/post_list.jsx
@@ -25,6 +25,8 @@ import PreferenceStore from 'stores/preference_store.jsx';
 
 import {FormattedDate, FormattedMessage} from 'react-intl';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 
@@ -637,26 +639,26 @@ PostList.defaultProps = {
 };
 
 PostList.propTypes = {
-    postList: React.PropTypes.object,
-    profiles: React.PropTypes.object,
-    channel: React.PropTypes.object,
-    currentUser: React.PropTypes.object,
-    scrollPostId: React.PropTypes.string,
-    scrollType: React.PropTypes.number,
-    postListScrolled: React.PropTypes.func.isRequired,
-    showMoreMessagesTop: React.PropTypes.bool,
-    showMoreMessagesBottom: React.PropTypes.bool,
-    lastViewed: React.PropTypes.number,
-    lastViewedBottom: React.PropTypes.number,
-    ownNewMessage: React.PropTypes.bool,
-    postsToHighlight: React.PropTypes.object,
-    displayNameType: React.PropTypes.string,
-    displayPostsInCenter: React.PropTypes.bool,
-    compactDisplay: React.PropTypes.bool,
-    previewsCollapsed: React.PropTypes.string,
-    useMilitaryTime: React.PropTypes.bool.isRequired,
-    isFocusPost: React.PropTypes.bool,
-    flaggedPosts: React.PropTypes.object,
-    statuses: React.PropTypes.object,
-    isBusy: React.PropTypes.bool
+    postList: PropTypes.object,
+    profiles: PropTypes.object,
+    channel: PropTypes.object,
+    currentUser: PropTypes.object,
+    scrollPostId: PropTypes.string,
+    scrollType: PropTypes.number,
+    postListScrolled: PropTypes.func.isRequired,
+    showMoreMessagesTop: PropTypes.bool,
+    showMoreMessagesBottom: PropTypes.bool,
+    lastViewed: PropTypes.number,
+    lastViewedBottom: PropTypes.number,
+    ownNewMessage: PropTypes.bool,
+    postsToHighlight: PropTypes.object,
+    displayNameType: PropTypes.string,
+    displayPostsInCenter: PropTypes.bool,
+    compactDisplay: PropTypes.bool,
+    previewsCollapsed: PropTypes.string,
+    useMilitaryTime: PropTypes.bool.isRequired,
+    isFocusPost: PropTypes.bool,
+    flaggedPosts: PropTypes.object,
+    statuses: PropTypes.object,
+    isBusy: PropTypes.bool
 };
diff --git a/webapp/components/post_view/components/post_message_container.jsx b/webapp/components/post_view/components/post_message_container.jsx
index 4cb3cb76c..91ca03828 100644
--- a/webapp/components/post_view/components/post_message_container.jsx
+++ b/webapp/components/post_view/components/post_message_container.jsx
@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -14,9 +16,9 @@ import PostMessageView from './post_message_view.jsx';
 
 export default class PostMessageContainer extends React.Component {
     static propTypes = {
-        post: React.PropTypes.object.isRequired,
-        options: React.PropTypes.object,
-        lastPostCount: React.PropTypes.number
+        post: PropTypes.object.isRequired,
+        options: PropTypes.object,
+        lastPostCount: PropTypes.number
     };
 
     static defaultProps = {
diff --git a/webapp/components/post_view/components/post_message_view.jsx b/webapp/components/post_view/components/post_message_view.jsx
index d6610f813..938b5a8db 100644
--- a/webapp/components/post_view/components/post_message_view.jsx
+++ b/webapp/components/post_view/components/post_message_view.jsx
@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -14,15 +16,15 @@ import {renderSystemMessage} from './system_message_helpers.jsx';
 
 export default class PostMessageView extends React.Component {
     static propTypes = {
-        options: React.PropTypes.object.isRequired,
-        post: React.PropTypes.object.isRequired,
-        emojis: React.PropTypes.object.isRequired,
-        enableFormatting: React.PropTypes.bool.isRequired,
-        mentionKeys: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
-        usernameMap: React.PropTypes.object.isRequired,
-        channelNamesMap: React.PropTypes.object.isRequired,
-        team: React.PropTypes.object.isRequired,
-        lastPostCount: React.PropTypes.number
+        options: PropTypes.object.isRequired,
+        post: PropTypes.object.isRequired,
+        emojis: PropTypes.object.isRequired,
+        enableFormatting: PropTypes.bool.isRequired,
+        mentionKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
+        usernameMap: PropTypes.object.isRequired,
+        channelNamesMap: PropTypes.object.isRequired,
+        team: PropTypes.object.isRequired,
+        lastPostCount: PropTypes.number
     };
 
     shouldComponentUpdate(nextProps) {
diff --git a/webapp/components/post_view/components/post_time.jsx b/webapp/components/post_view/components/post_time.jsx
index e9c92b1f2..9f6ef51cc 100644
--- a/webapp/components/post_view/components/post_time.jsx
+++ b/webapp/components/post_view/components/post_time.jsx
@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -74,9 +76,9 @@ PostTime.defaultProps = {
 };
 
 PostTime.propTypes = {
-    eventTime: React.PropTypes.number.isRequired,
-    sameUser: React.PropTypes.bool,
-    compactDisplay: React.PropTypes.bool,
-    useMilitaryTime: React.PropTypes.bool.isRequired,
-    postId: React.PropTypes.string
+    eventTime: PropTypes.number.isRequired,
+    sameUser: PropTypes.bool,
+    compactDisplay: PropTypes.bool,
+    useMilitaryTime: PropTypes.bool.isRequired,
+    postId: PropTypes.string
 };
diff --git a/webapp/components/post_view/components/reaction.jsx b/webapp/components/post_view/components/reaction.jsx
index 0950b661b..d79e9e092 100644
--- a/webapp/components/post_view/components/reaction.jsx
+++ b/webapp/components/post_view/components/reaction.jsx
@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -11,17 +13,17 @@ import * as Utils from 'utils/utils.jsx';
 
 export default class Reaction extends React.Component {
     static propTypes = {
-        post: React.PropTypes.object.isRequired,
-        currentUserId: React.PropTypes.string.isRequired,
-        emojiName: React.PropTypes.string.isRequired,
-        reactions: React.PropTypes.arrayOf(React.PropTypes.object),
-        emojis: React.PropTypes.object.isRequired,
-        profiles: React.PropTypes.array.isRequired,
-        otherUsers: React.PropTypes.number.isRequired,
-        actions: React.PropTypes.shape({
-            addReaction: React.PropTypes.func.isRequired,
-            getMissingProfiles: React.PropTypes.func.isRequired,
-            removeReaction: React.PropTypes.func.isRequired
+        post: PropTypes.object.isRequired,
+        currentUserId: PropTypes.string.isRequired,
+        emojiName: PropTypes.string.isRequired,
+        reactions: PropTypes.arrayOf(PropTypes.object),
+        emojis: PropTypes.object.isRequired,
+        profiles: PropTypes.array.isRequired,
+        otherUsers: PropTypes.number.isRequired,
+        actions: PropTypes.shape({
+            addReaction: PropTypes.func.isRequired,
+            getMissingProfiles: PropTypes.func.isRequired,
+            removeReaction: PropTypes.func.isRequired
         })
     }
 
diff --git a/webapp/components/post_view/components/reaction_container.jsx b/webapp/components/post_view/components/reaction_container.jsx
index e95325770..29936c60a 100644
--- a/webapp/components/post_view/components/reaction_container.jsx
+++ b/webapp/components/post_view/components/reaction_container.jsx
@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -12,10 +14,10 @@ import Reaction from './reaction.jsx';
 
 export default class ReactionContainer extends React.Component {
     static propTypes = {
-        post: React.PropTypes.object.isRequired,
-        emojiName: React.PropTypes.string.isRequired,
-        reactions: React.PropTypes.arrayOf(React.PropTypes.object),
-        emojis: React.PropTypes.object.isRequired
+        post: PropTypes.object.isRequired,
+        emojiName: PropTypes.string.isRequired,
+        reactions: PropTypes.arrayOf(PropTypes.object),
+        emojis: PropTypes.object.isRequired
     }
 
     constructor(props) {
diff --git a/webapp/components/post_view/components/reaction_list_container.jsx b/webapp/components/post_view/components/reaction_list_container.jsx
index b688afd94..fbc5f683c 100644
--- a/webapp/components/post_view/components/reaction_list_container.jsx
+++ b/webapp/components/post_view/components/reaction_list_container.jsx
@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -11,7 +13,7 @@ import ReactionListView from './reaction_list_view.jsx';
 
 export default class ReactionListContainer extends React.Component {
     static propTypes = {
-        post: React.PropTypes.object.isRequired
+        post: PropTypes.object.isRequired
     }
 
     constructor(props) {
diff --git a/webapp/components/post_view/components/reaction_list_view.jsx b/webapp/components/post_view/components/reaction_list_view.jsx
index ee814883f..4379453a3 100644
--- a/webapp/components/post_view/components/reaction_list_view.jsx
+++ b/webapp/components/post_view/components/reaction_list_view.jsx
@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -7,9 +9,9 @@ import Reaction from './reaction_container.jsx';
 
 export default class ReactionListView extends React.Component {
     static propTypes = {
-        post: React.PropTypes.object.isRequired,
-        reactions: React.PropTypes.arrayOf(React.PropTypes.object),
-        emojis: React.PropTypes.object.isRequired
+        post: PropTypes.object.isRequired,
+        reactions: PropTypes.arrayOf(PropTypes.object),
+        emojis: PropTypes.object.isRequired
     }
 
     render() {
diff --git a/webapp/components/post_view/components/scroll_to_bottom_arrows.jsx b/webapp/components/post_view/components/scroll_to_bottom_arrows.jsx
index d8d55f4be..73f8e6527 100644
--- a/webapp/components/post_view/components/scroll_to_bottom_arrows.jsx
+++ b/webapp/components/post_view/components/scroll_to_bottom_arrows.jsx
@@ -5,33 +5,33 @@ import $ from 'jquery';
 
 import Constants from 'utils/constants.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
-export default class ScrollToBottomArrows extends React.Component {
-    render() {
-        // only show on mobile
-        if ($(window).width() > 768) {
-            return <noscript/>;
-        }
-
-        let className = 'post-list__arrows';
-        if (this.props.isScrolling && !this.props.atBottom) {
-            className += ' scrolling';
-        }
-
-        return (
-            <div
-                className={className}
-                onClick={this.props.onClick}
-            >
-                <span dangerouslySetInnerHTML={{__html: Constants.SCROLL_BOTTOM_ICON}}/>
-            </div>
-        );
+export default function ScrollToBottomArrows(props) {
+    // only show on mobile
+    if ($(window).width() > 768) {
+        return <noscript/>;
+    }
+
+    let className = 'post-list__arrows';
+    if (props.isScrolling && !props.atBottom) {
+        className += ' scrolling';
     }
+
+    return (
+        <div
+            className={className}
+            onClick={props.onClick}
+        >
+            <span dangerouslySetInnerHTML={{__html: Constants.SCROLL_BOTTOM_ICON}}/>
+        </div>
+    );
 }
 
 ScrollToBottomArrows.propTypes = {
-    isScrolling: React.PropTypes.bool.isRequired,
-    atBottom: React.PropTypes.bool.isRequired,
-    onClick: React.PropTypes.func.isRequired
+    isScrolling: PropTypes.bool.isRequired,
+    atBottom: PropTypes.bool.isRequired,
+    onClick: PropTypes.func.isRequired
 };
diff --git a/webapp/components/post_view/post_view_cache.jsx b/webapp/components/post_view/post_view_cache.jsx
index beb20360a..b8ae39e4a 100644
--- a/webapp/components/post_view/post_view_cache.jsx
+++ b/webapp/components/post_view/post_view_cache.jsx
@@ -6,14 +6,16 @@ import PostViewController from './post_view_controller.jsx';
 import ChannelStore from 'stores/channel_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 const MAXIMUM_CACHED_VIEWS = 5;
 
 export default class PostViewCache extends React.Component {
     static propTypes = {
-        actions: React.PropTypes.shape({
-            viewChannel: React.PropTypes.func.isRequired
+        actions: PropTypes.shape({
+            viewChannel: PropTypes.func.isRequired
         }).isRequired
     }
 
diff --git a/webapp/components/post_view/post_view_controller.jsx b/webapp/components/post_view/post_view_controller.jsx
index 18ce61de3..2d4afb7d7 100644
--- a/webapp/components/post_view/post_view_controller.jsx
+++ b/webapp/components/post_view/post_view_controller.jsx
@@ -17,6 +17,8 @@ import Constants from 'utils/constants.jsx';
 const Preferences = Constants.Preferences;
 const ScrollTypes = Constants.ScrollTypes;
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class PostViewController extends React.Component {
@@ -396,6 +398,6 @@ export default class PostViewController extends React.Component {
 }
 
 PostViewController.propTypes = {
-    channel: React.PropTypes.object,
-    active: React.PropTypes.bool
+    channel: PropTypes.object,
+    active: PropTypes.bool
 };