Replace access with lodash.get, make more declarative.

Lodash already has support for safe property access via the explicit
`get` method, and as a shorthand to many of the collection methods (such
as `sortBy`.

I also took this opportunity to refactor the code to be a bit more
functional, which allows us to place the list tiems inline with the rest
of the JSX, which I find far more readable.

Interesting project!

package.json

@@ -15,7 +15,6 @@
     "react-helmet": "^3.2.2",
     "react-responsive-grid": "^0.3.3",
     "react-typography": "^0.15.0",
-    "safe-access": "^0.1.0",
     "typography": "^0.15.0",
     "typography-theme-wordpress-2016": "^0.15.0",
     "underscore.string": "^3.2.3"

pages/index.js

@@ -1,37 +1,22 @@
 import React from 'react'
 import { Link } from 'react-router'
 import sortBy from 'lodash/sortBy'
+import get from 'lodash/get'
 import { prefixLink } from 'gatsby-helpers'
 import { rhythm } from 'utils/typography'
 import Helmet from "react-helmet"
-import access from 'safe-access'
 import { config } from 'config'
 import include from 'underscore.string/include'
 import Bio from 'components/Bio'
 
 class BlogIndex extends React.Component {
   render () {
-    const pageLinks = []
     // Sort pages.
-    const sortedPages = sortBy(this.props.route.pages, (page) =>
+    const sortedPages = sortBy(this.props.route.pages, 'data.date')
-      access(page, 'data.date')
-    ).reverse()
-    sortedPages.forEach((page) => {
     // Posts are those with md extension that are not 404 pages OR have a date (meaning they're a react component post).
-      if (access(page, 'file.ext') === 'md' && !include(page.path, '/404') || access(page, 'data.date')) {
+    const visiblePages = sortedPages.filter(page => (
-        const title = access(page, 'data.title') || page.path
+      get(page, 'file.ext') === 'md' && !include(page.path, '/404') || get(page, 'data.date')
-        pageLinks.push(
+    ))
-          <li
-            key={page.path}
-            style={{
-              marginBottom: rhythm(1/4),
-            }}
-          >
-            <Link style={{boxShadow: 'none'}} to={prefixLink(page.path)}>{title}</Link>
-          </li>
-        )
-      }
-    })
     return (
       <div>
         <Helmet
@@ -43,7 +28,18 @@ class BlogIndex extends React.Component {
         />
         <Bio />
         <ul>
-          {pageLinks}
+          {visiblePages.map((page) => (
+              <li
+                key={page.path}
+                style={{
+                    marginBottom: rhythm(1/4),
+                }}
+              >
+                <Link style={{boxShadow: 'none'}} to={prefixLink(page.path)}>
+                    {get(page, 'data.title', page.path)}
+                </Link>
+              </li>
+          ))}
         </ul>
       </div>
     )