From 5018f5c0c58981a5f31797730b454427aef4f2b3 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 11 May 2018 21:44:34 +0200
Subject: [PATCH] less components re-rendering across the board

---
 src/components/molecules/Availability.jsx |  7 ++-
 src/components/molecules/Social.jsx       | 61 ++++++++++++++++-------
 src/components/molecules/ThemeSwitch.jsx  |  8 +--
 src/components/organisms/Footer.jsx       | 12 ++---
 src/components/organisms/Header.jsx       | 35 ++++++++++---
 src/templates/Project.jsx                 | 15 ++++--
 6 files changed, 95 insertions(+), 43 deletions(-)

diff --git a/src/components/molecules/Availability.jsx b/src/components/molecules/Availability.jsx
index 8585642..1615f42 100644
--- a/src/components/molecules/Availability.jsx
+++ b/src/components/molecules/Availability.jsx
@@ -1,12 +1,11 @@
-import React, { Fragment, Component } from 'react'
+import React, { Fragment, PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { MoveIn } from '../atoms/Animations'
 import './Availability.scss'
 
-class Availability extends Component {
+class Availability extends PureComponent {
   constructor(props) {
     super(props)
-    this.handleScroll = this.handleScroll.bind(this)
   }
 
   componentDidMount() {
@@ -36,7 +35,7 @@ class Availability extends Component {
     window.removeEventListener('scroll', this.handleScroll)
   }
 
-  handleScroll() {
+  handleScroll = () => {
     let timeout
     const footer = document.getElementsByClassName('footer')[0]
     const availability = document.getElementsByClassName('availability')[0]
diff --git a/src/components/molecules/Social.jsx b/src/components/molecules/Social.jsx
index 510491f..a5bf8e0 100644
--- a/src/components/molecules/Social.jsx
+++ b/src/components/molecules/Social.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { OutboundLink } from 'gatsby-plugin-google-analytics'
 import { FadeIn } from '../atoms/Animations'
@@ -29,24 +29,51 @@ const SocialIcon = props => {
   }
 }
 
-const Social = ({ meta, minimal, hide }) => {
-  const { social } = meta
-  const classes = minimal ? 'networks networks--minimal' : 'networks'
+class Social extends PureComponent {
+  constructor(props) {
+    super(props)
 
-  return (
-    !hide && (
-      <FadeIn timeout={{ enter: 200, exit: 0, appear: 200 }}>
-        <aside className={classes}>
-          {Object.keys(social).map((key, i) => (
-            <OutboundLink className="networks__link" href={social[key]} key={i}>
-              <SocialIcon title={key} className="icon" />
-              <span className="networks__title">{key}</span>
-            </OutboundLink>
-          ))}
-        </aside>
-      </FadeIn>
+    this.state = { classes: 'networks' }
+  }
+
+  componentDidMount() {
+    this.toggleClasses()
+  }
+
+  componentDidUpdate() {
+    this.toggleClasses()
+  }
+
+  toggleClasses = () => {
+    if (this.props.minimal) {
+      this.setState({ classes: 'networks' })
+    } else {
+      this.setState({ classes: 'networks networks--minimal' })
+    }
+  }
+
+  render() {
+    const { social } = this.props.meta
+
+    return (
+      !this.props.hide && (
+        <FadeIn timeout={{ enter: 200, exit: 0, appear: 200 }}>
+          <aside className={this.state.classes}>
+            {Object.keys(social).map((key, i) => (
+              <OutboundLink
+                className="networks__link"
+                href={social[key]}
+                key={i}
+              >
+                <SocialIcon title={key} className="icon" />
+                <span className="networks__title">{key}</span>
+              </OutboundLink>
+            ))}
+          </aside>
+        </FadeIn>
+      )
     )
-  )
+  }
 }
 
 Social.propTypes = {
diff --git a/src/components/molecules/ThemeSwitch.jsx b/src/components/molecules/ThemeSwitch.jsx
index eeb4e32..1168654 100644
--- a/src/components/molecules/ThemeSwitch.jsx
+++ b/src/components/molecules/ThemeSwitch.jsx
@@ -1,10 +1,10 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import { FadeIn } from '../atoms/Animations'
 import { ReactComponent as Day } from '../../images/day.svg'
 import { ReactComponent as Night } from '../../images/night.svg'
 import './ThemeSwitch.scss'
 
-class ThemeSwitch extends Component {
+class ThemeSwitch extends PureComponent {
   constructor(props) {
     super(props)
 
@@ -34,7 +34,9 @@ class ThemeSwitch extends Component {
   }
 
   toggleTheme = () => {
-    document.getElementsByClassName('app')[0].classList.toggle('dark', this.state.dark)
+    document
+      .getElementsByClassName('app')[0]
+      .classList.toggle('dark', this.state.dark)
   }
 
   render() {
diff --git a/src/components/organisms/Footer.jsx b/src/components/organisms/Footer.jsx
index cd18e4c..b0a374f 100644
--- a/src/components/organisms/Footer.jsx
+++ b/src/components/organisms/Footer.jsx
@@ -1,14 +1,15 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import FileSaver from 'file-saver'
 import vCard from '../../lib/vcf/vcard'
 import Social from '../molecules/Social'
 import './Footer.scss'
 
-class Footer extends Component {
+class Footer extends PureComponent {
   constructor(props) {
     super(props)
-    this.handleAddressbookClick = this.handleAddressbookClick.bind(this)
+
+    this.state = { year: new Date().getFullYear() }
   }
 
   generateFileName() {
@@ -43,13 +44,12 @@ class Footer extends Component {
     FileSaver.saveAs(blob, this.generateFileName())
   }
 
-  handleAddressbookClick(e) {
+  handleAddressbookClick = (e) => {
     e.preventDefault()
     this.constructVcard()
   }
 
   render() {
-    const year = new Date().getFullYear()
     const meta = this.props.meta
 
     return (
@@ -66,7 +66,7 @@ class Footer extends Component {
         </p>
         <p>
           <small>
-            &copy; {year} {meta.title} &mdash; All Rights Reserved
+            &copy; {this.state.year} {meta.title} &mdash; All Rights Reserved
           </small>
         </p>
       </footer>
diff --git a/src/components/organisms/Header.jsx b/src/components/organisms/Header.jsx
index f8b1754..623f7d5 100644
--- a/src/components/organisms/Header.jsx
+++ b/src/components/organisms/Header.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import Link from 'gatsby-link'
 import PropTypes from 'prop-types'
 import { FadeIn } from '../atoms/Animations'
@@ -8,16 +8,35 @@ import ThemeSwitch from '../molecules/ThemeSwitch'
 import { ReactComponent as Logo } from '../../images/logo.svg'
 import './Header.scss'
 
-class Header extends Component {
-  render() {
-    const isHomepage = this.props.isHomepage
-    const meta = this.props.meta
+class Header extends PureComponent {
+  constructor(props) {
+    super(props)
 
-    let classes = 'header'
-    if (!isHomepage) classes += ' header--minimal'
+    this.state = { classes: 'header' }
+  }
+
+  componentDidMount() {
+    this.toggleClasses()
+  }
+
+  componentDidUpdate() {
+    this.toggleClasses()
+  }
+
+  toggleClasses = () => {
+    if (this.props.isHomepage) {
+      this.setState({ classes: 'header' })
+    } else {
+      this.setState({ classes: 'header header--minimal' })
+    }
+  }
+
+  render() {
+    const meta = this.props.meta
+    const isHomepage = this.props.isHomepage
 
     return (
-      <header className={classes}>
+      <header className={this.state.classes}>
         <ThemeSwitch />
         <FadeIn>
           <Link className="header__name" to={'/'}>
diff --git a/src/templates/Project.jsx b/src/templates/Project.jsx
index f16559f..b15f94b 100644
--- a/src/templates/Project.jsx
+++ b/src/templates/Project.jsx
@@ -12,8 +12,14 @@ import SEO from '../components/atoms/SEO'
 import './Project.scss'
 
 class Project extends Component {
-  constructor() {
-    super()
+  constructor(props) {
+    super(props)
+
+    const description = this.props.data.projectsYaml.description
+
+    this.state = {
+      descriptionWithLineBreaks: description.split('\n').join('\n\n')
+    }
   }
 
   render() {
@@ -22,9 +28,8 @@ class Project extends Component {
     const projectImages = this.props.data.projectImages.edges
     const pathContext = this.props.pathContext
 
-    const { title, description, links, techstack } = project
+    const { title, links, techstack } = project
     const { next, previous } = pathContext
-    const descriptionWithLineBreaks = description.split('\n').join('\n\n')
 
     return (
       <Fragment>
@@ -38,7 +43,7 @@ class Project extends Component {
           <Content>
             <h1 className="project__title">{title}</h1>
             <ReactMarkdown
-              source={descriptionWithLineBreaks}
+              source={this.state.descriptionWithLineBreaks}
               className="project__description"
             />