refactor(v2): extract out into standalone components (#1017)

v2/lib/theme/Docs/index.js

@@ -2,8 +2,11 @@
 import React from 'react';
 import {Link} from 'react-router-dom';
 import Helmet from 'react-helmet';
-import styles from './styles.css';
+
 import Layout from '@theme/Layout'; // eslint-disable-line
+import DocsPaginator from '@theme/DocsPaginator'; // eslint-disable-line
+
+import styles from './styles.css';
 
 export default class Docs extends React.Component {
   renderSidebar(metadata, docsSidebars, docsMetadatas) {
@@ -62,22 +65,8 @@ export default class Docs extends React.Component {
           {version && <meta name="docsearch:version" content={version} />}
         </Helmet>
         <div>{this.renderSidebar(metadata, docsSidebars, docsMetadatas)}</div>
-        <div>
-          {metadata.previous &&
-            docsMetadatas[metadata.previous] && (
-              <Link to={docsMetadatas[metadata.previous].permalink}>
-                <span>← {metadata.previous_title}</span>
-              </Link>
-            )}
-          {' ⚫️ '}
-          {metadata.next &&
-            docsMetadatas[metadata.next] && (
-              <Link to={docsMetadatas[metadata.next].permalink}>
-                <span>{metadata.next_title} →</span>
-              </Link>
-            )}
-        </div>
         <div className={styles.mainContainer}>{this.props.children}</div>
+        <DocsPaginator docsMetadatas={docsMetadatas} metadata={metadata} />
       </Layout>
     );
   }

v2/lib/theme/DocsPaginator/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import {Link} from 'react-router-dom';
+
+export default class DocsPaginator extends React.Component {
+  render() {
+    const {docsMetadatas, metadata} = this.props;
+    return (
+      <div>
+        {metadata.previous &&
+          docsMetadatas[metadata.previous] && (
+            <Link to={docsMetadatas[metadata.previous].permalink}>
+              <span>← {metadata.previous_title}</span>
+            </Link>
+          )}
+        {metadata.next &&
+          docsMetadatas[metadata.next] && (
+            <Link to={docsMetadatas[metadata.next].permalink}>
+              <span>{metadata.next_title} →</span>
+            </Link>
+          )}
+      </div>
+    );
+  }
+}

v2/lib/theme/Footer/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import {Link} from 'react-router-dom';
+
+import styles from './styles.css';
+
+function Footer(props) {
+  const {pagesMetadatas, docsMetadatas, location} = props;
+  const docsFlatMetadatas = Object.values(docsMetadatas);
+  const routeLinks = [...pagesMetadatas, ...docsFlatMetadatas].map(
+    data =>
+      data.permalink !== location.pathname && (
+        <li key={data.permalink}>
+          <Link to={data.permalink}>{data.permalink}</Link>
+        </li>
+      ),
+  );
+
+  return (
+    <div className={styles.footer}>
+      <ul className={styles.routeLinks}>{routeLinks}</ul>
+    </div>
+  );
+}
+
+export default Footer;

v2/lib/theme/Footer/styles.css

@@ -0,0 +1,39 @@
+.footer {
+  color: #777;
+  margin-top: 30px;
+  padding: 10px 15px;
+  height: 20px;
+  text-align: center;
+  border-top: 1px solid #e6e6e6;
+}
+
+.routeLinks {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: absolute;
+  right: 0;
+  left: 0;
+}
+
+.routeLinks li {
+  display: inline;
+}
+
+.routeLinks li a {
+  color: inherit;
+  margin: 3px;
+  padding: 3px 7px;
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: 3px;
+}
+
+.routeLinks li a.selected,
+.routeLinks li a:hover {
+  border-color: rgba(175, 47, 47, 0.1);
+}
+
+.routeLinks li a.selected {
+  border-color: rgba(175, 47, 47, 0.2);
+}

v2/lib/theme/Layout/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import {Link} from 'react-router-dom';
+import Footer from '@theme/Footer'; // eslint-disable-line
-import styles from './styles.css';
 
 /* eslint-disable react/prefer-stateless-function */
 export default class Layout extends React.Component {
@@ -11,21 +10,14 @@ export default class Layout extends React.Component {
       docsMetadatas = {},
       location,
     } = this.props;
-    const docsFlatMetadatas = Object.values(docsMetadatas);
-    const routeLinks = [...pagesMetadatas, ...docsFlatMetadatas].map(
-      data =>
-        data.permalink !== location.pathname && (
-          <li key={data.permalink}>
-            <Link to={data.permalink}>{data.permalink}</Link>
-          </li>
-        ),
-    );
     return (
       <div>
         {children}
-        <div className={styles.footer}>
+        <Footer
-          <ul className={styles.routeLinks}>{routeLinks}</ul>
+          docsMetadatas={docsMetadatas}
-        </div>
+          location={location}
+          pagesMetadatas={pagesMetadatas}
+        />
       </div>
     );
   }

v2/lib/theme/Layout/styles.css

@@ -1,39 +0,0 @@
-.footer {
-	color: #777;
-	margin-top: 30px;
-	padding: 10px 15px;
-	height: 20px;
-	text-align: center;
-	border-top: 1px solid #e6e6e6;
-}
-
-.routeLinks {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-	position: absolute;
-	right: 0;
-	left: 0;
-}
-
-.routeLinks li {
-	display: inline;
-}
-
-.routeLinks li a {
-	color: inherit;
-	margin: 3px;
-	padding: 3px 7px;
-	text-decoration: none;
-	border: 1px solid transparent;
-	border-radius: 3px;
-}
-
-.routeLinks li a.selected,
-.routeLinks li a:hover {
-	border-color: rgba(175, 47, 47, 0.1);
-}
-
-.routeLinks li a.selected {
-	border-color: rgba(175, 47, 47, 0.2);
-}