Handle window resize events in React way

Use the React-way of handling resize events. Essentially store the window size in component state instead of doing some custom handling.

See http://facebook.github.io/react/tips/dom-event-listeners.html

1 files changed, 19 insertions, 4 deletions

diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx
index 2581bdcca..035899592 100644
--- a/web/react/components/create_post.jsx
+++ b/web/react/components/create_post.jsx
@@ -37,6 +37,7 @@ export default class CreatePost extends React.Component {
         this.onChange = this.onChange.bind(this);
         this.getFileCount = this.getFileCount.bind(this);
         this.handleArrowUp = this.handleArrowUp.bind(this);
+        this.handleResize = this.handleResize.bind(this);
 
         PostStore.clearDraftUploads();
 
@@ -48,9 +49,17 @@ export default class CreatePost extends React.Component {
             uploadsInProgress: draft.uploadsInProgress,
             previews: draft.previews,
             submitting: false,
-            initialText: draft.messageText
+            initialText: draft.messageText,
+            windowWidth: Utils.windowWidth(),
+            windowHeigth: Utils.windowHeight()
         };
     }
+    handleResize() {
+        this.setState({
+            windowWidth: Utils.windowWidth(),
+            windowHeight: Utils.windowHeight()
+        });
+    }
     componentDidUpdate(prevProps, prevState) {
         if (prevState.previews.length !== this.state.previews.length) {
             this.resizePostHolder();
@@ -61,6 +70,11 @@ export default class CreatePost extends React.Component {
             this.resizePostHolder();
             return;
         }
+
+        if (prevState.windowWidth !== this.state.windowWidth || prevState.windowHeight !== this.state.windowHeigth) {
+            this.resizePostHolder();
+            return;
+        }
     }
     getCurrentDraft() {
         const draft = PostStore.getCurrentDraft();
@@ -194,10 +208,9 @@ export default class CreatePost extends React.Component {
         PostStore.storeCurrentDraft(draft);
     }
     resizePostHolder() {
-        const height = $(window).height() - $(ReactDOM.findDOMNode(this.refs.topDiv)).height() - 50;
+        const height = this.state.windowHeigth - $(ReactDOM.findDOMNode(this.refs.topDiv)).height() - 50;
         $('.post-list-holder-by-time').css('height', `${height}px`);
-        $(window).trigger('resize');
-        if ($(window).width() > 960) {
+        if (this.state.windowWidth > 960) {
             $('#post_textbox').focus();
         }
     }
@@ -274,9 +287,11 @@ export default class CreatePost extends React.Component {
     componentDidMount() {
         ChannelStore.addChangeListener(this.onChange);
         this.resizePostHolder();
+        window.addEventListener('resize', this.handleResize);
     }
     componentWillUnmount() {
         ChannelStore.removeChangeListener(this.onChange);
+        window.removeEventListener('resize', this.handleResize);
     }
     onChange() {
         const channelId = ChannelStore.getCurrentId();