Move updateFavicon to utils

src/pages/App.js

@@ -1,10 +1,10 @@
 import React, { Component, PropTypes } from 'react'
 import { Link } from 'react-router'
-import randomcolor from 'randomcolor'
 
 import 'normalize.css/normalize.css'
 import '../styles/defaults.scss'
 import classNames from './App.scss'
+import { updateFavicon } from '../utils'
 import { trackTiming } from '../analytics'
 import { APP_NAME, AUTHOR_URL, SOURCE_URL, SEPARATOR } from '../config'
 
@@ -14,38 +14,13 @@ export default class App extends Component {
   };
   componentDidMount () {
     const { params, location } = this.props
-    this.updateFavicon(params, location)
+    updateFavicon(params, location)
     if (window.performance) {
       trackTiming('react', 'firstrender', Math.round(window.performance.now()))
     }
   }
   componentWillReceiveProps ({ params, location }) {
-    this.updateFavicon(params, location.pathname)
-  }
-  updateFavicon (params, pathname) {
-    const seed = params.post_id || params.subreddit || params.multi || pathname
-    const canvas = document.createElement('canvas')
-    canvas.width = 32
-    canvas.height = 32
-    if (canvas.getContext) {
-      const ctx = canvas.getContext('2d')
-
-      // Coloured circle
-      ctx.beginPath()
-      ctx.arc(16, 16, 16, 0, 360)
-      ctx.fillStyle = randomcolor({ seed, luminosity: 'light' })
-      ctx.fill()
-
-      // Shading half-circle
-      ctx.beginPath()
-      ctx.arc(16, 16, 16, 290 * Math.PI / 180, 110 * Math.PI / 180)
-      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
-      ctx.fill()
-
-      // Render to URL and update favicon
-      const url = canvas.toDataURL('image/png')
-      document.querySelector('link[rel="icon"]').setAttribute('href', url)
-    }
+    updateFavicon(params, location.pathname)
   }
   render () {
     return (

src/utils.js

@@ -1,6 +1,7 @@
 import lscache from 'lscache'
 import { stringify } from 'query-string'
 import fetch from 'isomorphic-fetch'
+import randomcolor from 'randomcolor'
 
 const CACHE_EXPIRY = 30 // minutes
 
@@ -43,3 +44,29 @@ export function fetchJSON (path, query, parseData = (d) => d) {
       return data
     })
 }
+
+export function updateFavicon (params, pathname) {
+  const seed = params.post_id || params.subreddit || params.multi || pathname
+  const canvas = document.createElement('canvas')
+  canvas.width = 32
+  canvas.height = 32
+  if (canvas.getContext) {
+    const ctx = canvas.getContext('2d')
+
+    // Coloured circle
+    ctx.beginPath()
+    ctx.arc(16, 16, 16, 0, 360)
+    ctx.fillStyle = randomcolor({ seed, luminosity: 'light' })
+    ctx.fill()
+
+    // Shading half-circle
+    ctx.beginPath()
+    ctx.arc(16, 16, 16, 290 * Math.PI / 180, 110 * Math.PI / 180)
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
+    ctx.fill()
+
+    // Render to URL and update favicon
+    const url = canvas.toDataURL('image/png')
+    document.querySelector('link[rel="icon"]').setAttribute('href', url)
+  }
+}