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

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 () {

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>

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' }} />