Fix #341 - Remove react-responsive in favour of simpler resize handler/window width

4 files changed, 58 insertions, 22 deletions

diff --git a/app/assets/javascripts/components/components/lightbox.jsx b/app/assets/javascripts/components/components/lightbox.jsx
index 29822ccb3..b5c2a69d8 100644
--- a/app/assets/javascripts/components/components/lightbox.jsx
+++ b/app/assets/javascripts/components/components/lightbox.jsx
@@ -41,15 +41,17 @@ const Lightbox = React.createClass({
   mixins: [PureRenderMixin],
 
   componentDidMount () {
-    this._listener = window.addEventListener('keyup', e => {
+    this._listener = e => {
       if (e.key === 'Escape') {
         this.props.onCloseClicked();
       }
-    });
+    };
+
+    window.addEventListener('keyup', this._listener);
   },
 
   componentWillUnmount () {
-    window.removeEventListener(this._listener);
+    window.removeEventListener('keyup', this._listener);
   },
 
   render () {
diff --git a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx b/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
index 868ebe00a..219979522 100644
--- a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
+++ b/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
@@ -5,8 +5,7 @@ const outerStyle = {
   background: '#373b4a',
   margin: '10px',
   flex: '0 0 auto',
-  marginBottom: '0',
-  display: 'flex'
+  marginBottom: '0'
 };
 
 const tabStyle = {
@@ -28,7 +27,7 @@ const tabActiveStyle = {
 
 const TabsBar = () => {
   return (
-    <div style={outerStyle}>
+    <div className='tabs-bar' style={outerStyle}>
       <Link style={tabStyle} activeStyle={tabActiveStyle} to='/statuses/new'><i className='fa fa-fw fa-pencil' /> <FormattedMessage id='tabs_bar.compose' defaultMessage='Compose' /></Link>
       <Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/home'><i className='fa fa-fw fa-home' /> <FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></Link>
       <Link style={tabStyle} activeStyle={tabActiveStyle} to='/notifications'><i className='fa fa-fw fa-bell' /> <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></Link>
diff --git a/app/assets/javascripts/components/features/ui/index.jsx b/app/assets/javascripts/components/features/ui/index.jsx
index 9b5469bbd..39ef35676 100644
--- a/app/assets/javascripts/components/features/ui/index.jsx
+++ b/app/assets/javascripts/components/features/ui/index.jsx
@@ -5,36 +5,61 @@ import LoadingBarContainer from './containers/loading_bar_container';
 import HomeTimeline from '../home_timeline';
 import MentionsTimeline from '../mentions_timeline';
 import Compose from '../compose';
-import MediaQuery from 'react-responsive';
 import TabsBar from './components/tabs_bar';
 import ModalContainer from './containers/modal_container';
 import Notifications from '../notifications';
+import { debounce } from 'react-decoration';
 
 const UI = React.createClass({
 
+  getInitialState () {
+    return {
+      width: window.innerWidth
+    };
+  },
+
   mixins: [PureRenderMixin],
 
+  @debounce(500)
+  handleResize () {
+    this.setState({ width: window.innerWidth });
+  },
+
+  componentWillMount () {
+    window.addEventListener('resize', this.handleResize, { passive: true });
+  },
+
+  componentWillUnmount () {
+    window.removeEventListener('resize', this.handleResize);
+  },
+
   render () {
     const layoutBreakpoint = 1024;
 
+    let mountedColumns;
+
+    if (this.state.width <= layoutBreakpoint) {
+      mountedColumns = (
+        <ColumnsArea>
+          {this.props.children}
+        </ColumnsArea>
+      );
+    } else {
+      mountedColumns = (
+        <ColumnsArea>
+          <Compose />
+          <HomeTimeline trackScroll={false} />
+          <Notifications trackScroll={false} />
+          {this.props.children}
+        </ColumnsArea>
+      );
+    }
+
     return (
       <div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', width: '100%', height: '100%', background: '#1a1c23' }}>
-        <MediaQuery maxWidth={layoutBreakpoint}>
-          <TabsBar />
-        </MediaQuery>
+        <TabsBar />
 
-        <MediaQuery maxWidth={layoutBreakpoint} component={ColumnsArea}>
-          {this.props.children}
-        </MediaQuery>
-
-        <MediaQuery minWidth={layoutBreakpoint + 1}>
-          <ColumnsArea>
-            <Compose />
-            <HomeTimeline trackScroll={false} />
-            <Notifications trackScroll={false} />
-            {this.props.children}
-          </ColumnsArea>
-        </MediaQuery>
+        {mountedColumns}
 
         <NotificationsContainer />
         <LoadingBarContainer style={{ backgroundColor: '#2b90d9', left: '0', top: '0' }} />
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index cc9f0eb3b..b1249ff7e 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -355,6 +355,16 @@
   }
 }
 
+.tabs-bar {
+  display: flex;
+}
+
+@media screen and (min-width: 1025px) {
+  .tabs-bar {
+    display: none;
+  }
+}
+
 .react-autosuggest__container {
   position: relative;
 }