SideNav Componentization Tracking Issue about blueprints HOT 5 CLOSED

Oh that is super cool! Totally forgot we could use react context for this 🤔 Since this would be a bit of a refactor, I'll make an issue for it for safe keeping!

from blueprints.

Yay, happy to see this happening! Please don't feel like you have to keep any of these component names... NodeLink might have made sense for me, but it may not for anyone else. 😂 Maybe we call them PageLink, etc.?

Also, I think I may have discovered a better way to get the list of pages in Next.js, which should eliminate all of the pages hackiness that's happening.

from blueprints.

Oooh I would be very interested in hearing more!

from blueprints.

After hunting around GitHub and Spectrum, I found this thread which suggests that contexts can share data between server and client. If that's the case, then I think it looks something like this:

// pages/_document.js
import NextDocument from 'next/document'
import Pages from '../docs/pages'

export default Document extends NextDocument {
  render() {
    const {buildManifest} = this.props
    return (
      <Pages.Provider value={buildManifest.pages}>
        ...
      </Pages.Provider>
    )
}

// docs/components/SideNav.js
import Pages from '../docs/pages'

export default props => (
  <Pages.Consumer>
    {pages => (
      // do something with the pages object
    )}
  </Pages.Consumer> 
)

...and I guess only the components that need access to it would use <Pages.Consumer>?

If contexts don't work across the server/client boundary, then we might need to wire up a slightly hackier solution, but it's got to be better than what we have now. 😬

from blueprints.

Maybe an HOC that wraps withRouter() would be nice:

export function withPages(Component) {
  return withRouter(props => (
    <Pages.Consumer>{value => <Component pages={value} {...props} />}</Pages.Consumer>
  ))
}

from blueprints.