Add TableOfContents and Section skeleton

Author: lorensr

src/components/App.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react'
 import logo from '../logo.svg'
 import StarCount from './StarCount'
+import TableOfContents from './TableOfContents'
+import Section from './Section'
 
 class App extends Component {
   render() {
@@ -11,9 +13,8 @@ class App extends Component {
           <img src={logo} className="App-logo" alt="logo" />
           <h1 className="App-title">The GraphQL Guide</h1>
         </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code>, and save to reload.
-        </p>
+        <TableOfContents />
+        <Section />
       </div>
     )
   }

src/components/Section.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import Skeleton from 'react-loading-skeleton'
+
+const Section = ({ loading = true }) => (
+  <section className="Section">
+    <div className="Section-header-wrapper">
+      <header className="Section-header">
+        <h1>Title</h1>
+        <h2>Subtitle</h2>
+      </header>
+    </div>
+    <div className="Section-content">
+      {loading ? <Skeleton count={7} /> : null}
+    </div>
+  </section>
+)
+
+export default Section

src/components/TableOfContents.js

@@ -0,0 +1,118 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { graphql } from 'react-apollo'
+import gql from 'graphql-tag'
+import Skeleton from 'react-loading-skeleton'
+import { NavLink } from 'react-router-dom'
+import classNames from 'classnames'
+
+import { slugify, withHyphens } from '../lib/helpers'
+
+const LoadingSkeleton = () => (
+  <div>
+    <h1>
+      <Skeleton />
+    </h1>
+    <Skeleton count={4} />
+  </div>
+)
+
+const TableOfContents = ({ chapters, loading }) => (
+  <nav className="TableOfContents">
+    {loading ? (
+      <LoadingSkeleton />
+    ) : (
+      <ul className="TableOfContents-chapters">
+        {chapters.map(chapter => {
+          const chapterIsNumbered = chapter.number !== null
+          return (
+            <li
+              className={classNames({ numbered: chapterIsNumbered })}
+              key={chapter.id}
+            >
+              <NavLink
+                to={{
+                  pathname: slugify(chapter),
+                  state: { chapter, section: chapter.sections[0] }
+                }}
+                className="TableOfContents-chapter-link"
+                activeClassName="active"
+                isActive={(match, location) => {
+                  const rootPath = location.pathname.split('/')[1]
+                  return rootPath.includes(withHyphens(chapter.title))
+                }}
+              >
+                {chapterIsNumbered && (
+                  <span className="TableOfContents-chapter-number">
+                    {chapter.number}
+                  </span>
+                )}
+                {chapter.title}
+              </NavLink>
+              {chapterIsNumbered && (
+                <ul className="TableOfContents-sections">
+                  {chapter.sections.map(section => (
+                    <li key={section.number}>
+                      <NavLink
+                        to={{
+                          pathname: slugify(chapter, section),
+                          state: { chapter, section }
+                        }}
+                        className="TableOfContents-section-link"
+                        activeClassName="active"
+                      >
+                        {section.title}
+                      </NavLink>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          )
+        })}
+      </ul>
+    )}
+  </nav>
+)
+
+TableOfContents.propTypes = {
+  chapters: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      number: PropTypes.number,
+      title: PropTypes.string.isRequired,
+      sections: PropTypes.arrayOf(
+        PropTypes.shape({
+          id: PropTypes.string.isRequired,
+          number: PropTypes.number.isRequired,
+          title: PropTypes.string
+        }).isRequired
+      ).isRequired
+    }).isRequired
+  ),
+  loading: PropTypes.bool.isRequired
+}
+
+const CHAPTER_QUERY = gql`
+  query ChapterQuery {
+    chapters {
+      id
+      number
+      title
+      sections {
+        id
+        number
+        title
+      }
+    }
+  }
+`
+
+const withData = graphql(CHAPTER_QUERY, {
+  props: ({ data: { chapters, loading } }) => ({
+    chapters,
+    loading
+  })
+})
+
+export default withData(TableOfContents)

src/index.js

@@ -10,6 +10,7 @@ import { split } from 'apollo-link'
 import { WebSocketLink } from 'apollo-link-ws'
 import { createHttpLink } from 'apollo-link-http'
 import { getMainDefinition } from 'apollo-utilities'
+import { BrowserRouter } from 'react-router-dom'
 
 const httpLink = createHttpLink({
   uri: 'https://api.graphql.guide/graphql'
@@ -36,9 +37,11 @@ const cache = new InMemoryCache()
 const client = new ApolloClient({ link, cache })
 
 ReactDOM.render(
-  <ApolloProvider client={client}>
-    <App />
-  </ApolloProvider>,
+  <BrowserRouter>
+    <ApolloProvider client={client}>
+      <App />
+    </ApolloProvider>
+  </BrowserRouter>,
   document.getElementById('root')
 )
 

src/lib/helpers.js

@@ -0,0 +1,20 @@
+export const withHyphens = string => string.replace(/ /g, '-')
+
+// generate paths of the form:
+// /Preface
+// /Introduction
+// /1-Understanding-GraphQL-through-REST/1-Introduction
+export const slugify = (chapter, section) => {
+  if (!section) {
+    if (chapter.number !== null) {
+      // default to the first section
+      section = chapter.sections[0]
+    } else {
+      return '/' + withHyphens(chapter.title)
+    }
+  }
+
+  const chapterSlug = chapter.number + '-' + withHyphens(chapter.title)
+  const sectionSlug = section.number + '-' + withHyphens(section.title)
+  return `/${chapterSlug}/${sectionSlug}`
+}