Factor out a FunctionsList component for rendering function docs

www/src/components/function-list.js

@@ -0,0 +1,137 @@
+import React from "react"
+
+import { rhythm, scale } from "../utils/typography"
+
+const Param = (param, depth = 0) => {
+  // the plugin parameter is used internally but not
+  // something a user should use.
+  if (param.name == `plugin`) {
+    return null
+  }
+
+  return (
+    <div
+      key={`param ${JSON.stringify(param)}`}
+      css={{
+        marginLeft: `${depth * 1.05}rem`,
+        ...(depth > 0 && scale((depth === 1 ? -1 : -1.5) / 5)),
+      }}
+    >
+      <h5
+        css={{
+          margin: 0,
+          ...(depth > 0 && scale((depth === 1 ? 0 : -0.5) / 5)),
+        }}
+      >
+        {param.name === `$0` ? `destructured object` : param.name}
+        {` `}
+        {param.type &&
+          param.name !== `$0` &&
+          <span css={{ color: `#73725f` }}>{`{${param.type.name}}`}</span>}
+      </h5>
+      {param.description &&
+        <div
+          css={{ marginBottom: rhythm(-1 / 4) }}
+          dangerouslySetInnerHTML={{
+            __html: param.description.childMarkdownRemark.html,
+          }}
+        />}
+      {param.properties &&
+        <div css={{ marginTop: rhythm(1 / 2) }}>
+          {param.properties.map(param => Param(param, depth + 1))}
+        </div>}
+    </div>
+  )
+}
+
+export default ({ functions }) => (
+  <div>
+    {functions.map(({ node }, i) => (
+      <div
+        id={node.name}
+        key={`reference list ${node.name}`}
+        css={{ marginBottom: rhythm(1) }}
+      >
+        {i !== 0 && <hr />}
+        <h3><a href={`#${node.name}`}><code>{node.name}</code></a></h3>
+        <div
+          dangerouslySetInnerHTML={{
+            __html: node.description.childMarkdownRemark.html,
+          }}
+        />
+        {node.params.length > 0 &&
+          <div>
+            <h4>Parameters</h4>
+            {node.params.map(Param)}
+          </div>}
+
+        {node.examples.length > 0 &&
+          <div>
+            <h4 css={{ marginTop: rhythm(1) }}>Example</h4>
+            {` `}
+            {node.examples.map((example, i) => (
+              <pre key={`${node.name} example ${i}`}>
+                <code
+                  className="language-javascript"
+                  dangerouslySetInnerHTML={{
+                    __html: example.highlighted,
+                  }}
+                />
+              </pre>
+            ))}
+          </div>}
+      </div>
+    ))}
+  </div>
+)
+
+export const pageQuery = graphql`
+fragment FunctionList on DocumentationJs {
+  name
+  description {
+    childMarkdownRemark {
+      html
+    }
+  }
+  returns {
+    title
+  }
+  examples {
+    raw
+    highlighted
+  }
+  params {
+    name
+    type {
+      name
+    }
+    description {
+      childMarkdownRemark {
+        html
+      }
+    }
+    properties {
+      name
+      type {
+        name
+      }
+      description {
+        childMarkdownRemark {
+          html
+        }
+      }
+      properties {
+        name
+        type {
+          name
+        }
+        description {
+          childMarkdownRemark {
+            html
+          }
+        }
+      }
+    }
+  }
+}
+`

www/src/pages/docs/bound-action-creators.js

@@ -1,47 +1,7 @@
 import React from "react"
-import { rhythm, scale } from "../../utils/typography"
-
-const Param = (param, depth = 0) => {
-  // the plugin parameter is used internally but not
-  // something a user should use.
-  if (param.name == `plugin`) {
-    return null
-  }
 
-  return (
-    <div
-      key={`param ${JSON.stringify(param)}`}
-      css={{
-        marginLeft: `${depth * 1.05}rem`,
-        ...(depth > 0 && scale((depth === 1 ? -1 : -1.5) / 5)),
-      }}
-    >
-      <h5
-        css={{
-          margin: 0,
-          ...(depth > 0 && scale((depth === 1 ? 0 : -0.5) / 5)),
-        }}
-      >
-        {param.name === `$0` ? `destructured object` : param.name}
-        {` `}
-        {param.type &&
-          param.name !== `$0` &&
-          <span css={{ color: `#73725f` }}>{`{${param.type.name}}`}</span>}
-      </h5>
-      {param.description &&
-        <div
-          css={{ marginBottom: rhythm(-1 / 4) }}
-          dangerouslySetInnerHTML={{
-            __html: param.description.childMarkdownRemark.html,
-          }}
-        />}
-      {param.properties &&
-        <div css={{ marginTop: rhythm(1 / 2) }}>
-          {param.properties.map(param => Param(param, depth + 1))}
-        </div>}
-    </div>
-  )
-}
+import Functions from "../../components/function-list"
+import { rhythm, scale } from "../../utils/typography"
 
 class ActionCreatorsDocs extends React.Component {
   render() {
@@ -58,52 +18,17 @@ class ActionCreatorsDocs extends React.Component {
           passed a collection of "Bound Action Creators" (functions which create and dispatch Redux actions when called)
           which you can use to manipulate state on your site.
         </p>
-        <h2>Functions</h2>
+        <h2 css={{ marginBottom: rhythm(1 / 2) }}>Functions</h2>
         <ul css={{ ...scale(-1 / 5) }}>
           {this.props.data.allDocumentationJs.edges.map(({ node }, i) => (
-              <li key={`function list ${node.name}`}>
-                <a href={`#${node.name}`}>{node.name}</a>
-              </li>
-            ))}
+            <li key={`function list ${node.name}`}>
+              <a href={`#${node.name}`}>{node.name}</a>
+            </li>
+          ))}
         </ul>
         <hr />
         <h2>Reference</h2>
-        {this.props.data.allDocumentationJs.edges.map(({ node }, i) => (
-            <div
-              id={node.name}
-              key={`reference list ${node.name}`}
-              css={{ marginBottom: rhythm(1) }}
-            >
-              {i !== 0 && <hr />}
-              <h3><a href={`#${node.name}`}><code>{node.name}</code></a></h3>
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: node.description.childMarkdownRemark.html,
-                }}
-              />
-              {node.params.length > 0 &&
-                <div>
-                  <h4>Parameters</h4>
-                  {node.params.map(Param)}
-                </div>}
-
-              {node.examples.length > 0 &&
-                <div>
-                  <h4 css={{ marginTop: rhythm(1) }}>Example</h4>
-                  {` `}
-                  {node.examples.map((example, i) => (
-                    <pre key={`${node.name} example ${i}`}>
-                      <code
-                        className="language-javascript"
-                        dangerouslySetInnerHTML={{
-                          __html: example.highlighted,
-                        }}
-                      />
-                    </pre>
-                  ))}
-                </div>}
-            </div>
-          ))}
+        <Functions functions={this.props.data.allDocumentationJs.edges} />
       </div>
     )
   }
@@ -116,56 +41,8 @@ query ActionCreatorDocsQuery {
   allDocumentationJs(id: {regex: "/src.*actions.js/"}, sortBy: {fields: [name]}) {
     edges {
       node {
-        id
-        memberof
         name
-        id
-        scope
-        description {
-          childMarkdownRemark {
-            html
-          }
-        }
-        returns {
-          title
-        }
-        examples {
-          raw
-          highlighted
-        }
-        params {
-          name
-          type {
-            name
-          }
-          description {
-            childMarkdownRemark {
-              html
-            }
-          }
-          properties {
-            name
-            type {
-              name
-            }
-            description {
-              childMarkdownRemark {
-                html
-              }
-            }
-            properties {
-              name
-              type {
-                name
-              }
-              description {
-                childMarkdownRemark {
-                  html
-                }
-              }
-            }
-          }
-        }
+        ...FunctionList
       }
     }
   }