Add table of contents

src/components/Loading/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export default ({ title }) => (
+export default ({ title = '' }) => (
   <div className="loading">
     <h1 className="page-title">{title.replace(/_/g, ' ')}</h1>
   </div>

src/components/page/index.js

@@ -1,7 +1,9 @@
 import React, { Component } from 'react'
 import { withRouter } from 'react-router-dom'
 import { fetchPage } from '../../lib/api'
-import Loading from '../../components/loading'
+
+import Loading from '../loading'
+import Sections from '../sections'
 
 class Page extends Component {
   constructor(props) {
@@ -11,7 +13,7 @@ class Page extends Component {
       loading: false,
       title: '',
       content: undefined,
-      sections: undefined
+      sections: []
     }
   }
 
@@ -52,10 +54,11 @@ class Page extends Component {
   }
 
   render() {
-    const { loading, title, content, error } = this.state
+    const { content, error, loading, sections, title } = this.state
 
     return (
       <div className="container">
+        {sections.length ? <Sections sections={sections} /> : null}
         {loading && <Loading {...this.props} />}
         {content ? (
           <div className="page">
@@ -67,12 +70,10 @@ class Page extends Component {
           </div>
         ) : error ? (
           <div>
-            <h1>Error</h1>
+            <h1 className="page-title">Error</h1>
             <div>{error}</div>
           </div>
-        ) : (
-          <h1>{title}</h1>
-        )}
+        ) : null}
       </div>
     )
   }

src/components/search/index.js

@@ -105,8 +105,7 @@ class Search extends Component {
                     'search-result',
                     selected === index ? 'active' : undefined
                   ].join(' ')}
-                  key={index}
-                  onClick={() => this.setState({ open: false })}>
+                  key={index}>
                   <h3 className="search-result-title">{result.title}</h3>
                   <p className="search-result-description">
                     {result.description}

src/components/sections/index.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import OutsideClickHandler from 'react-outside-click-handler'
+
+class Sections extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      open: false
+    }
+  }
+
+  render() {
+    const { sections } = this.props
+    const { open } = this.state
+
+    return (
+      <OutsideClickHandler
+        onOutsideClick={() => this.setState({ open: false })}>
+        <div
+          className={['page-sections', open ? 'active' : undefined].join(' ')}>
+          <button
+            className="page-sections-button"
+            onClick={() => this.setState({ open: !open })}>
+            Table of contents
+          </button>
+          {open && (
+            <nav className="page-sections-nav">
+              {sections.map((section, index) => (
+                <a
+                  key={index}
+                  href={`#${section.anchor}`}
+                  onClick={() => this.setState({ open: false })}>
+                  <span className={`section-level-${section.toclevel}`}>
+                    {section.number}.
+                  </span>
+                  <label dangerouslySetInnerHTML={{ __html: section.line }} />
+                </a>
+              ))}
+            </nav>
+          )}
+        </div>
+      </OutsideClickHandler>
+    )
+  }
+}
+
+export default Sections

src/lib/api/index.js

@@ -38,7 +38,12 @@ export const fetchMedia = title =>
       if (error) {
         return reject(error)
       } else {
-        return resolve(query.pages[-1])
+        const data = lodashGet(query, 'pages[-1]')
+
+        return resolve({
+          title: data.title,
+          content: lodashGet(data, 'imageinfo[0]')
+        })
       }
     })
   )

src/routes/home/index.js

@@ -2,14 +2,15 @@ import React from 'react'
 import Page from '../../components/page'
 
 export default () => (
-  <div className="container">
-    <h1 className="logo">Wikipadia</h1>
-
-    <div className="blurb">
-      <p>
-        <em>WikiPadia</em> is a beautiful, customisable Wikipedia reader. It was
-        specifically built for leisurely reading on an iPad.
-      </p>
+  <div>
+    <div className="container">
+      <h1 className="logo">Wikipadia</h1>
+      <div className="blurb">
+        <p>
+          <em>WikiPadia</em> is a beautiful, customisable Wikipedia reader. It
+          was specifically built for leisurely reading on an iPad.
+        </p>
+      </div>
     </div>
 
     <Page title="Main_page" />

src/routes/media/index.js

@@ -1,24 +1,25 @@
 import React, { Component } from 'react'
+import keys from 'lodash/keys'
 import { fetchMedia } from '../../lib/api'
 
+import Loading from '../../components/loading'
+
 export default class extends Component {
   constructor(props) {
     super(props)
+    const { match: { params: { title } } } = props
 
     this.state = {
       loading: false,
-      title: props.title,
-      content: undefined,
-      sections: undefined
+      title
     }
   }
 
   componentDidMount() {
-    const { match: { params: { title } } } = this.props
-    return this.fetchPage(title)
+    return this.fetchPage(this.state.title)
   }
 
-  fetchPage = title => {
+  fetchPage(title) {
     this.setState({ loading: true })
 
     return fetchMedia(`File:${decodeURIComponent(title)}`)
@@ -42,22 +43,42 @@ export default class extends Component {
   render() {
     const { loading, title, content, error } = this.state
 
+    console.log(content)
+
     return (
-      <div>
-        {loading && <p>Loading&hellip;</p>}
-        {content ? (
-          <div>
-            <h1>{title}</h1>
-            <div dangerouslySetInnerHTML={{ __html: content }} />
+      <div className="container">
+        {loading ? (
+          <Loading title={title} />
+        ) : content ? (
+          <div className="media">
+            <h1 className="page-title">{title}</h1>
+
+            <div>
+              <a href={content.descriptionshorturl} target="_blank">
+                <img src={content.url} alt={title} />
+              </a>
+              <dl className="media-list">
+                {keys(content.extmetadata).map(key => {
+                  return (
+                    <div key={key}>
+                      <dt>{key}</dt>
+                      <dd
+                        dangerouslySetInnerHTML={{
+                          __html: content.extmetadata[key].value
+                        }}
+                      />
+                    </div>
+                  )
+                })}
+              </dl>
+            </div>
           </div>
         ) : error ? (
           <div>
             <h1>Error</h1>
             <div>{error}</div>
           </div>
-        ) : (
-          <h1>{title}</h1>
-        )}
+        ) : null}
       </div>
     )
   }