hotfix: docs build (#198)

* fix: build

* fix: build

* fix: build

* fix: build

www/src/components/docs-reader.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { Flex, Box, Text } from "rebass"
+import { Flex, Text } from "rebass"
 import styled from "@emotion/styled"
 import Markdown from "react-markdown"
 
@@ -68,10 +68,14 @@ const DocsReader = ({ tags, spec }) => {
                           path={endpoint.path}
                         />
                         <Markdown>{endpoint.description}</Markdown>
-                        <Parameters endpoint={endpoint} />
+                        <Parameters spec={spec} endpoint={endpoint} />
                       </Flex>
                       <Flex py={5} width="45%" flex="1">
-                        <JsonBox name={tagName} endpoint={endpoint} />
+                        <JsonBox
+                          name={tagName}
+                          endpoint={endpoint}
+                          spec={spec}
+                        />
                       </Flex>
                     </Flex>
                   ))}

www/src/components/endpoint-overview.js

@@ -49,7 +49,7 @@ const EndpointOverview = ({ title, description, routes, spec }) => {
           >
             <Text my={2}>Attributes</Text>
             {attrs.map(p => (
-              <ParamSection param={p} />
+              <ParamSection param={p} spec={spec} />
             ))}
           </Box>
         )}

www/src/components/json-box.js

@@ -1,15 +1,14 @@
-import React, { useState, useEffect } from "react"
-import { graphql } from "gatsby"
-import { Flex, Box, Text, Image } from "rebass"
+import React from "react"
+import { Flex, Box, Text } from "rebass"
 import styled from "@emotion/styled"
-import { AnchorLink } from "gatsby-plugin-anchor-links"
-import Markdown from "react-markdown"
 import Highlight from "react-highlight.js"
 
 import "highlight.js/styles/a11y-light.css"
 
 import fixtures from "../../../docs/api/fixtures.json"
 
+import { deref } from "../utils/deref"
+
 export const ResponseContainer = styled(Flex)`
   border: 1px solid #e3e8ee;
   border-radius: 5px;
@@ -28,36 +27,40 @@ export const ResponseContainer = styled(Flex)`
   }
 `
 
-const JsonBox = ({ text, resourceId, endpoint }) => {
-  const [json, setJson] = useState({})
+const JsonBox = ({ text, resourceId, endpoint, spec }) => {
+  let json = {}
 
-  useEffect(() => {
-    const toSet = {}
-    if (endpoint) {
-      const props =
-        endpoint?.responses?.["200"]?.content?.["application/json"]?.schema
-          ?.properties
+  const toSet = {}
+  if (endpoint) {
+    const props =
+      endpoint?.responses?.["200"]?.content?.["application/json"]?.schema
+        ?.properties
 
-      if (props) {
-        for (const [name, details] of Object.entries(props)) {
-          if (
-            details["x-resourceId"] &&
-            details["x-resourceId"] in fixtures.resources
-          ) {
-            toSet[name] = fixtures.resources[details["x-resourceId"]]
-          } else {
-            toSet[name] = details
-          }
+    if (props) {
+      for (const [name, details] of Object.entries(props)) {
+        let cleanDets = details
+        if (details.$ref) {
+          const [, ...path] = details.$ref.split("/")
+          cleanDets = deref(path, spec)
+        }
+
+        if (
+          cleanDets["x-resourceId"] &&
+          cleanDets["x-resourceId"] in fixtures.resources
+        ) {
+          toSet[name] = fixtures.resources[cleanDets["x-resourceId"]]
+        } else {
+          toSet[name] = cleanDets
         }
       }
     }
+  }
 
-    if (resourceId) {
-      setJson(fixtures.resources[resourceId])
-    } else {
-      setJson(toSet)
-    }
-  }, [])
+  if (resourceId) {
+    json = fixtures.resources[resourceId]
+  } else {
+    json = toSet
+  }
 
   return (
     <ResponseContainer flexDirection="column" as="pre">

www/src/components/param-section.js

@@ -4,6 +4,8 @@ import { Flex, Box, Text } from "rebass"
 import Markdown from "react-markdown"
 import Collapsible from "react-collapsible"
 
+import { deref } from "../utils/deref"
+
 const ExpandContainer = styled.div`
   .child-attrs {
     cursor: pointer;
@@ -28,15 +30,27 @@ const ExpandContainer = styled.div`
   }
 `
 
-const Expand = ({ schema }) => {
+const Expand = ({ schema, spec }) => {
+  if (schema.$ref) {
+    const [, ...path] = schema.$ref.split("/")
+    schema = deref(path, spec)
+  }
+
   const properties = schema.properties
 
   let aggregated = []
   for (const [name, details] of Object.entries(properties)) {
+    let cleanDets = details
+
+    if (name === "$ref") {
+      const [, ...path] = details.split("/")
+      cleanDets = deref(path, spec)
+    }
+
     if (!aggregated.find(a => a.name === name)) {
       aggregated.push({
         name,
-        ...details,
+        ...cleanDets,
       })
     }
   }
@@ -104,7 +118,7 @@ const Expand = ({ schema }) => {
   )
 }
 
-const ParamSection = ({ routeParam, param }) => {
+const ParamSection = ({ routeParam, param, spec }) => {
   let type = param.type
   if (!type && param.schema) {
     type = param.schema.type
@@ -133,10 +147,12 @@ const ParamSection = ({ routeParam, param }) => {
       <Text fontSize={0}>
         <Markdown>{param.description}</Markdown>
       </Text>
-      {param.anyOf && param.anyOf.map(schema => <Expand schema={schema} />)}
-      {param.oneOf && param.oneOf.map(schema => <Expand schema={schema} />)}
+      {param.anyOf &&
+        param.anyOf.map(schema => <Expand schema={schema} spec={spec} />)}
+      {param.oneOf &&
+        param.oneOf.map(schema => <Expand schema={schema} spec={spec} />)}
       {param.type === "array" && param.items?.properties && (
-        <Expand schema={param.items} />
+        <Expand schema={param.items} spec={spec} />
       )}
     </Box>
   )

www/src/components/parameters.js

@@ -1,19 +1,27 @@
 import React from "react"
-import { Flex, Box, Text } from "rebass"
+import { Box, Text } from "rebass"
 
 import ParamSection from "./param-section"
 
-const Parameters = ({ endpoint }) => {
+import { deref } from "../utils/deref"
+
+const Parameters = ({ endpoint, spec }) => {
   const aggregated = endpoint.parameters || []
 
   const reqBody = endpoint.requestBody || {}
   const props = reqBody.content?.["application/json"]?.schema?.properties
   if (props) {
     for (const [name, details] of Object.entries(props)) {
+      let cleanDets = details
+      if (name === "$ref") {
+        const [, ...path] = details.split("/")
+        cleanDets = deref(path, spec)
+      }
+
       if (!aggregated.find(a => a.name === name)) {
         aggregated.push({
           name,
-          ...details,
+          ...cleanDets,
         })
       }
     }
@@ -32,7 +40,7 @@ const Parameters = ({ endpoint }) => {
     >
       <Text my={2}>Parameters</Text>
       {aggregated.map(p => (
-        <ParamSection param={p} />
+        <ParamSection param={p} spec={spec} />
       ))}
     </Box>
   )

www/src/components/route-section.js

@@ -2,7 +2,7 @@ import React from "react"
 import { Flex, Box, Text } from "rebass"
 
 const RouteSection = ({ basePath, path, method }) => {
-  path = path.replaceAll(/{(.*?)}/g, ":$1")
+  path = path.replace(/{(.*?)}/g, ":$1")
 
   return (
     <Box py={2}>

www/src/components/routes-overview.js

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from "react"
+import React from "react"
 import styled from "@emotion/styled"
-import { Flex, Box, Text, Image } from "rebass"
+import { Flex, Box, Text } from "rebass"
 
 const StyledRoutesOverview = styled(Flex)`
   border: 1px solid #e3e8ee;
@@ -51,7 +51,7 @@ const RoutesOverview = ({ content }) => {
                 {route.method}
               </Text>
               <Text color="#4f566b">
-                {route.path?.replaceAll(/{(.*?)}/g, ":$1")}
+                {route.path?.replace(/{(.*?)}/g, ":$1")}
               </Text>
             </Flex>
           ))}

www/src/components/sidebar.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import { Link, navigate } from "gatsby"
+import { navigate } from "gatsby"
 import { Flex, Box, Text } from "rebass"
 import { AnchorLink } from "gatsby-plugin-anchor-links"
 import styled from "@emotion/styled"
@@ -63,11 +63,6 @@ const SideBarContainer = styled(Flex)`
   flex-direction: column;
 `
 
-const StyledLink = styled(Link)`
-  color: #212121;
-  font-decoration: none;
-`
-
 const SideBar = ({ tags }) => {
   const [api, setApi] = useState("store")
 
@@ -89,7 +84,6 @@ const SideBar = ({ tags }) => {
         px={4}
         py={3}
         mb={3}
-        justifyContent="center"
         flexDirection="column"
       >
         <Flex width={"100%"} alignContent="center">

www/src/hooks/use-spec.js

@@ -1,47 +1,38 @@
-import React, { useState, useEffect } from "react"
-
 const useSpec = raw => {
-  const [tags, setTags] = useState({})
-  const [spec, setSpec] = useState({})
+  let tags = {}
 
-  useEffect(() => {
-    setSpec(raw)
-
-    for (const [path, methods] of Object.entries(raw.paths)) {
-      for (const [method, specification] of Object.entries(methods)) {
-        for (const t of specification.tags) {
-          setTags(ts => {
-            if (t in ts) {
-              return {
-                ...ts,
-                [t]: [
-                  ...ts[t],
-                  {
-                    method: method.toUpperCase(),
-                    path,
-                    ...specification,
-                  },
-                ],
-              }
-            } else {
-              return {
-                ...ts,
-                [t]: [
-                  {
-                    method: method.toUpperCase(),
-                    path,
-                    ...specification,
-                  },
-                ],
-              }
-            }
-          })
+  for (const [path, methods] of Object.entries(raw.paths)) {
+    for (const [method, specification] of Object.entries(methods)) {
+      for (const t of specification.tags) {
+        if (t in tags) {
+          tags = {
+            ...tags,
+            [t]: [
+              ...tags[t],
+              {
+                method: method.toUpperCase(),
+                path,
+                ...specification,
+              },
+            ],
+          }
+        } else {
+          tags = {
+            ...tags,
+            [t]: [
+              {
+                method: method.toUpperCase(),
+                path,
+                ...specification,
+              },
+            ],
+          }
         }
       }
     }
-  }, [])
+  }
 
-  return { tags, spec }
+  return { tags, spec: raw }
 }
 
 export default useSpec

www/src/pages/api/admin.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react"
+import React from "react"
 import { Flex } from "rebass"
 import { Helmet } from "react-helmet"
 

www/src/pages/index.js

@@ -1,38 +1,17 @@
-import React, { useState, useEffect } from "react"
+import React from "react"
 import { Flex } from "rebass"
 import { Helmet } from "react-helmet"
 
-import adminSpec from "../../../docs/api/admin-spec3.json"
-import spec from "../../../docs/api/admin-spec3.json"
+import rawSpec from "../../../docs/api/admin-spec3.json"
 
 import Layout from "../components/layout"
 import SideBar from "../components/sidebar"
 import DocsReader from "../components/docs-reader"
 
-export default function Home() {
-  const tags = {}
+import useSpec from "../hooks/use-spec"
 
-  for (const [path, methods] of Object.entries(spec.paths)) {
-    for (const [method, specification] of Object.entries(methods)) {
-      for (const t of specification.tags) {
-        if (t in tags) {
-          tags[t].push({
-            method: method.toUpperCase(),
-            path,
-            ...specification,
-          })
-        } else {
-          tags[t] = [
-            {
-              method: method.toUpperCase(),
-              path,
-              ...specification,
-            },
-          ]
-        }
-      }
-    }
-  }
+export default function Home() {
+  const { tags, spec } = useSpec(rawSpec)
 
   return (
     <Layout>
@@ -41,7 +20,7 @@ export default function Home() {
       </Helmet>
       <Flex>
         <SideBar tags={tags} />
-        <DocsReader tags={tags} />
+        <DocsReader tags={tags} spec={spec} />
       </Flex>
     </Layout>
   )

www/src/utils/deref.js

@@ -0,0 +1,9 @@
+export const deref = (path, spec) => {
+  let cleanDets = spec
+  for (const part of path) {
+    if (part === "#") continue
+    cleanDets = cleanDets[part]
+  }
+
+  return cleanDets
+}