componentWillReceiveProps -> componentDidUpdate

Author: lorensr

src/components/Section.js

@@ -9,22 +9,28 @@ import get from 'lodash/get'
 import { deslugify } from '../lib/helpers'
 
 class Section extends Component {
-  lastSectionId = null
-
-  componentWillReceiveProps(props) {
-    if (!props.section) {
+  viewedSection = id => {
+    if (!id) {
       return
     }
 
-    const sectionChanged = props.section.id !== this.lastSectionId
+    setTimeout(() => {
+      this.props.viewedSection({
+        variables: { id }
+      })
+    }, 2000)
+  }
+
+  componentDidMount() {
+    this.viewedSection(get(this, 'props.section.id'))
+  }
+
+  componentDidUpdate(prevProps) {
+    const { id } = this.props.section
+    const sectionChanged = get(prevProps, 'section.id') !== id
 
     if (sectionChanged) {
-      setTimeout(() => {
-        props.viewedSection({
-          variables: { id: props.section.id }
-        })
-      }, 2000)
-      this.lastSectionId = props.section.id
+      this.viewedSection(id)
     }
   }
 

src/index.js

@@ -2,25 +2,16 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { ApolloProvider } from 'react-apollo'
 import { BrowserRouter } from 'react-router-dom'
-import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'
 
 import './index.css'
 import registerServiceWorker from './registerServiceWorker'
 import App from './components/App'
 import { apollo } from './lib/apollo'
 
-const GRAPHQL_PINK = '#e10098'
-
-const theme = createMuiTheme({
-  palette: { primary: { main: GRAPHQL_PINK } }
-})
-
 ReactDOM.render(
   <BrowserRouter>
     <ApolloProvider client={apollo}>
-      <MuiThemeProvider theme={theme}>
-        <App />
-      </MuiThemeProvider>
+      <App />
     </ApolloProvider>
   </BrowserRouter>,
   document.getElementById('root')

src/lib/withUser.js

@@ -10,9 +10,6 @@ export const USER_QUERY = gql`
       email
       photo
       hasPurchased
-      favoriteReviews {
-        id
-      }
     }
   }
 `