Add VIEWED_SECTION_MUTATION

Author: lorensr

src/components/Section.js

@@ -1,79 +1,108 @@
-import React from 'react'
+import React, { Component } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import PropTypes from 'prop-types'
-import { Query } from 'react-apollo'
+import { Query, Mutation } from 'react-apollo'
 import gql from 'graphql-tag'
 import { withRouter } from 'react-router'
 import get from 'lodash/get'
 
 import { deslugify } from '../lib/helpers'
 
-const Section = ({ loading, section, chapter }) => {
-  let headerContent = null,
-    sectionContent = null
+class Section extends Component {
+  lastSectionId = null
 
-  if (loading) {
-    headerContent = (
-      <h1>
-        <Skeleton />
-      </h1>
-    )
-    sectionContent = <Skeleton count={7} />
-  } else if (!section) {
-    headerContent = (
-      <h1>
-        <span role="img" aria-label="magnifying glass">
-          🔍
-        </span>{' '}
-        404 page not found
-      </h1>
-    )
-  } else {
-    if (chapter.number !== null) {
+  componentWillReceiveProps(props) {
+    if (!props.section) {
+      return
+    }
+
+    const sectionChanged = props.section.id !== this.lastSectionId
+
+    if (sectionChanged) {
+      setTimeout(() => {
+        props.viewedSection({
+          variables: { id: props.section.id }
+        })
+      }, 2000)
+      this.lastSectionId = props.section.id
+    }
+  }
+
+  render() {
+    const { loading, section, chapter } = this.props
+    let headerContent = null,
+      sectionContent = null,
+      footerContent = null
+
+    if (loading) {
       headerContent = (
-        <div>
-          <h1>{section.title}</h1>
-          <h2>
-            {'Chapter ' + chapter.number}
-            <span className="Section-number-divider" />
-            {'Section ' + section.number}
-          </h2>
-        </div>
+        <h1>
+          <Skeleton />
+        </h1>
+      )
+      sectionContent = <Skeleton count={7} />
+    } else if (!section) {
+      headerContent = (
+        <h1>
+          <span role="img" aria-label="magnifying glass">
+            🔍
+          </span>{' '}
+          404 page not found
+        </h1>
       )
     } else {
-      headerContent = <h1>{chapter.title}</h1>
+      if (chapter.number !== null) {
+        headerContent = (
+          <div>
+            <h1>{section.title}</h1>
+            <h2>
+              {'Chapter ' + chapter.number}
+              <span className="Section-number-divider" />
+              {'Section ' + section.number}
+            </h2>
+          </div>
+        )
+      } else {
+        headerContent = <h1>{chapter.title}</h1>
+      }
+
+      sectionContent = section.content
+      footerContent = `Viewed ${section.views.toLocaleString()} times`
     }
 
-    sectionContent = section.content
+    return (
+      <section className="Section">
+        <div className="Section-header-wrapper">
+          <header className="Section-header">{headerContent}</header>
+        </div>
+        <div className="Section-content">{sectionContent}</div>
+        <footer>{footerContent}</footer>
+      </section>
+    )
   }
-
-  return (
-    <section className="Section">
-      <div className="Section-header-wrapper">
-        <header className="Section-header">{headerContent}</header>
-      </div>
-      <div className="Section-content">{sectionContent}</div>
-    </section>
-  )
 }
 
 Section.propTypes = {
   section: PropTypes.shape({
     title: PropTypes.string,
     number: PropTypes.number,
-    content: PropTypes.string
+    content: PropTypes.string,
+    views: PropTypes.number
   }),
   chapter: PropTypes.shape({
     title: PropTypes.string,
     number: PropTypes.number
   }),
-  loading: PropTypes.bool.isRequired
+  loading: PropTypes.bool.isRequired,
+  viewedSection: PropTypes.func.isRequired
 }
 
 const SECTION_BY_ID_QUERY = gql`
   query SectionContent($id: String!) {
     section(id: $id) {
+      id
       content
+      views
     }
   }
 `
@@ -83,7 +112,9 @@ const SECTION_BY_CHAPTER_TITLE_QUERY = gql`
     chapterByTitle(title: $title) {
       title
       section(number: 1) {
+        id
         content
+        views
       }
     }
   }
@@ -94,14 +125,25 @@ const SECTION_BY_NUMBER_QUERY = gql`
     chapterByNumber(number: $chapterNumber) {
       number
       section(number: $sectionNumber) {
+        id
         number
         title
         content
+        views
       }
     }
   }
 `
 
+const VIEWED_SECTION_MUTATION = gql`
+  mutation ViewedSection($id: String!) {
+    viewedSection(id: $id) {
+      id
+      views
+    }
+  }
+`
+
 const SectionWithData = ({ location: { state, pathname } }) => {
   const page = deslugify(pathname)
 
@@ -113,7 +155,8 @@ const SectionWithData = ({ location: { state, pathname } }) => {
     createProps = ({ data, loading }) => ({
       section: {
         ...state.section,
-        content: get(data, 'section.content')
+        content: get(data, 'section.content'),
+        views: get(data, 'section.views')
       },
       chapter: state.chapter,
       loading
@@ -141,7 +184,16 @@ const SectionWithData = ({ location: { state, pathname } }) => {
 
   return (
     <Query query={query} variables={variables}>
-      {queryInfo => <Section {...createProps(queryInfo)} />}
+      {queryInfo => (
+        <Mutation mutation={VIEWED_SECTION_MUTATION}>
+          {viewedSection => (
+            <Section
+              {...createProps(queryInfo)}
+              viewedSection={viewedSection}
+            />
+          )}
+        </Mutation>
+      )}
     </Query>
   )
 }