Add pagination

react-tuto/src/index.js

@@ -51,12 +51,39 @@ function getSection(sectionIndex) {
   );
 }
 
+function getSectionPagination(section, activeIndex) {
+  const lastIndex = section.items.length - 1;
+  const previousHref = activeIndex === 0 ? section.path :
+    section.path + section.items[activeIndex - 1].path;
+  const nextHref = activeIndex === lastIndex ? section.path :
+    section.path + section.items[activeIndex + 1].path;
+  return (
+    <ul className="pagination">
+      <li className={ activeIndex === 0 ? "disabled": "waves-effect"}>
+        <Link to={previousHref}><i className="material-icons">chevron_left</i></Link>
+      </li>
+      {
+        section.items.map((page, pIndex) => (
+          <li key={pIndex} className={ activeIndex === pIndex ? "active orange": "waves-effect"}>
+            <Link to={section.path + page.path}>{pIndex + 1}</Link>
+          </li>
+        ))
+      }
+      <li className={ activeIndex === lastIndex ? "disabled": "waves-effect"}>
+        <Link to={nextHref}><i className="material-icons">chevron_right</i></Link>
+      </li>
+    </ul>
+  );
+}
 
 function getPage(sectionIndex, pageIndex) {
   const section = markdown[sectionIndex];
   const page = section.items[pageIndex];
   return () => (
-    <Page title={page.title} md={page.content} />
+    <div>
+      <Page title={page.title} md={page.content} />
+      {getSectionPagination(section, pageIndex)}
+    </div>
   );
 }