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',
+  marginBottom: '0'
-  display: 'flex'
 };
 
 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;
 
-    return (
+    let mountedColumns;
-      <div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', width: '100%', height: '100%', background: '#1a1c23' }}>
-        <MediaQuery maxWidth={layoutBreakpoint}>
-          <TabsBar />
-        </MediaQuery>
 
-        <MediaQuery maxWidth={layoutBreakpoint} component={ColumnsArea}>
+    if (this.state.width <= layoutBreakpoint) {
+      mountedColumns = (
+        <ColumnsArea>
           {this.props.children}
-        </MediaQuery>
+        </ColumnsArea>
-
+      );
-        <MediaQuery minWidth={layoutBreakpoint + 1}>
+    } else {
+      mountedColumns = (
         <ColumnsArea>
           <Compose />
           <HomeTimeline trackScroll={false} />
           <Notifications trackScroll={false} />
           {this.props.children}
         </ColumnsArea>
-        </MediaQuery>
+      );
+    }
+
+    return (
+      <div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', width: '100%', height: '100%', background: '#1a1c23' }}>
+        <TabsBar />
+
+        {mountedColumns}
 
         <NotificationsContainer />
         <LoadingBarContainer style={{ backgroundColor: '#2b90d9', left: '0', top: '0' }} />

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;
 }

package.json

@@ -39,7 +39,6 @@
     "react-proxy": "^1.1.8",
     "react-redux": "^5.0.0-beta.3",
     "react-redux-loading-bar": "^2.4.1",
-    "react-responsive": "^1.1.5",
     "react-router": "^2.8.0",
     "react-router-scroll": "^0.3.2",
     "react-simple-dropdown": "^1.1.4",

yarn.lock

@@ -1585,10 +1585,6 @@ css-loader@0.25.0:
     postcss-modules-values "^1.1.0"
     source-list-map "^0.1.4"
 
-css-mediaquery@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
-
 css-select@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
@@ -2414,10 +2410,6 @@ https-browserify@~0.0.0:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
 
-hyphenate-style-name@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.1.tgz#bc49b9446e02b4570641afdd29c1ce7609d1b9cc"
-
 iconv-lite@^0.4.13, iconv-lite@~0.4.13:
   version "0.4.13"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
@@ -3011,12 +3003,6 @@ mantra-core@^1.6.1:
     react-komposer "^1.9.0"
     react-simple-di "^1.2.0"
 
-matchmedia@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/matchmedia/-/matchmedia-0.1.2.tgz#cfd47f2bf68fbc7f5ea1bd3a3cf1715ecba3c1bd"
-  dependencies:
-    css-mediaquery "^0.1.2"
-
 math-expression-evaluator@^1.2.14:
   version "1.2.14"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.14.tgz#39511771ed9602405fba9affff17eb4d2a3843ab"
@@ -3977,14 +3963,6 @@ react-redux@^5.0.0-beta.3:
     lodash-es "^4.2.0"
     loose-envify "^1.1.0"
 
-react-responsive:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-1.1.5.tgz#a7019a28817dcb601ef31d10d72f798a0d710a17"
-  dependencies:
-    hyphenate-style-name "^1.0.0"
-    matchmedia "^0.1.2"
-    object-assign "^4.0.1"
-
 react-router-scroll:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/react-router-scroll/-/react-router-scroll-0.3.2.tgz#ba8b1d01b3681dc5a68d72865d35c10e84065e52"