Gatsby V2 upgrade

[travis-r6s]

Updated to use Gatsby V2.

This also fixes a number of issues, such as module imports, using sass (gatsby now directly imports the style.scss using the gatsby sass plugin) and has added unique keys (either using index, or post.id) to all .map() methods.

Have tested on my machine, and 'internally' everything works fine.

However, even though I have changed nothing on those components, the menus don't seem to stay expanded on page change anymore. Not sure what that would be?

[travis-r6s]

Have also added a couple of scripts copied from the official Gatsby starter, which run ESLint and Prettier.
Following their scripts, this has removed all semicolons from all project files.

[travis-r6s]

This should fix issues #6, #5, and #3.

[bradfrost]

Hey @thetre97, thanks so much for this PR! I'm just getting back into work after several weeks attending to a family medical emergency. I won't be able to review this straight away, but hopefully I can get to it soon. Thanks!

[travis-r6s]

No problem @bradfrost - I'm sorry to hear that, I hope everything is okay.
Look forward to your review.

[jcameronjeff]

However, even though I have changed nothing on those components, the menus don't seem to stay expanded on page change anymore. Not sure what that would be?

@thetre97 Did you ever figure this out? I've been wrestling with it for days.

[travis-r6s]

@jcameronjeff I'm afraid not - I couldn't get it to work either.
As I said, I don't think I changed any of the functionality of the pages, so perhaps it was a v2 upgrade that broke how something used to work?

[jess-mann]

this.state = { isNavOn: !window.location.pathname.includes(props.href)}

[jess-mann]

this.state = { isSubNavOn: !window.location.pathname.includes(props.url) }

[jess-mann]

@jcameronjeff @thetre97
So, I think the v1 to v2 switch of the react router to the reach router causes this issue. When the route is changed, it causes the components to remount (which calls their constructors and defaults their state). I suggested a hacky solution above that solves this issue without refactoring the code.

[travis-r6s]

Thanks @jess-mann - that works great. Have pushed those changes.

[bradfrost]

Hey @thetre97 and @jess-mann! Thanks so much for the work on this. I was able to pull down the changes and run gatsby develop, which ran beautifully.

However, running gatsby build seems to throw an error:

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

   5 |   constructor(props) {
   6 |     super(props)
>  7 |     this.state = { isNavOn: !window.location.pathname.includes(props.href) }
     |                              ^
   8 |     this.toggleNav = this.toggleNav.bind(this)
   9 |   }
  10 |


  WebpackError: ReferenceError: window is not defined

  - PrimaryNavItem.js:7 new PrimaryNavItem
    lib/src/components/PrimaryNavItem.js:7:30

I'm not exactly sure why window isn't defined, but this issue might have some clues in there. If you would be able to iron that out I'll merge this in. Thanks a million!

[travis-r6s]

I believe it because Node doesn't have access to the window object when it is building Gatsby.
Something like this should work? Could perhaps be put better though.

typeof window !== 'undefined' ? !window.location.pathname.includes(props.href) : false

[bradfrost]

Nice! I just checked and everything builds and looks great. Thanks again for all of this work!

[travis-r6s]

I believe It should also fix some of the currently open issues?