isMobile inside componentDidMount #28

async-labs · Feb 19, 2018 · 98f9331 · 98f9331
1 parent a3198d2
commit 98f9331
Showing 1 changed file with 20 additions and 1 deletion.
diff --git a/pages/public/read-chapter.js b/pages/public/read-chapter.js
@@ -73,11 +73,19 @@ class ReadChapter extends React.Component {
       showChapters: false,
       chapter,
       htmlContent,
+      isMobile: false,
     };
   }
 
   componentDidMount() {
     this.mainContentElm.addEventListener('scroll', this.onScroll);
+
+    let isMobile = false;
+    if (window.innerWidth < 768) {
+      isMobile = true;
+    }
+
+    this.setState({ isMobile }); // eslint-disable-line
   }
 
   componentWillReceiveProps(nextProps) {
@@ -155,9 +163,18 @@ class ReadChapter extends React.Component {
     });
   };
 
+  closeTocWhenMobile = () => {
+    this.setState({ showChapters: !this.state.isMobile });
+  };
+
   renderMainContent() {
     const { user, showStripeModal } = this.props;
-    const { chapter, htmlContent } = this.state;
+    const {
+      chapter,
+      htmlContent,
+      isMobile,
+      showChapters,
+    } = this.state;
 
     return (
       <div
@@ -199,6 +216,7 @@ class ReadChapter extends React.Component {
                 color: activeSection && activeSection.hash === s.escapedText ? '#1565C0' : '#222',
               }}
               href={`#${s.escapedText}`}
+              onClick={this.closeTocWhenMobile}
             >
               {s.text}
             </a>
@@ -239,6 +257,7 @@ class ReadChapter extends React.Component {
               key={ch._id}
               role="presentation"
               style={{ listStyle: i === 0 ? 'none' : 'decimal', paddingBottom: '10px' }}
+              onClick={this.closeTocWhenMobile}
             >
               <Link
                 prefetch