From 7deff73eea91a5cf84337eb837ddb169d9a8eaf5 Mon Sep 17 00:00:00 2001
From: Kyle Shockey <shockey@users.noreply.github.com>
Date: Thu, 1 Jun 2017 09:34:42 -0700
Subject: [PATCH] (Actually) display callbacks

---
 .../plugins/oas3/components/callbacks.jsx     | 31 ++++++++++++++++++
 src/core/plugins/oas3/components/index.js     |  7 ++++
 .../plugins/oas3/components/request-body.jsx  | 29 +++++++++++++++++
 src/core/plugins/oas3/index.js                |  5 ++-
 .../oas3/wrap-components/parameters.jsx       | 32 +++++--------------
 5 files changed, 77 insertions(+), 27 deletions(-)
 create mode 100644 src/core/plugins/oas3/components/callbacks.jsx
 create mode 100644 src/core/plugins/oas3/components/index.js
 create mode 100644 src/core/plugins/oas3/components/request-body.jsx

diff --git a/src/core/plugins/oas3/components/callbacks.jsx b/src/core/plugins/oas3/components/callbacks.jsx
new file mode 100644
index 00000000..82bfd7b9
--- /dev/null
+++ b/src/core/plugins/oas3/components/callbacks.jsx
@@ -0,0 +1,31 @@
+import React from "react"
+
+export default ({ callbacks, getComponent }) => {
+  const Markdown = getComponent("Markdown")
+
+  if(!callbacks) {
+    return <span>No callbacks</span>
+  }
+
+  let callbackElements = callbacks.map((callback, callbackName) => {
+    return <div>
+      <h2>{callbackName}</h2>
+      { callback.map((pathItem, pathItemName) => {
+        return <div>
+          <h4>{pathItemName}</h4>
+          { pathItem.map((operation, method) => {
+            return <pre>{JSON.stringify(operation)}</pre>
+          }) }
+        </div>
+      }) }
+    </div>
+    // return <div>
+    //   <h2>{name}</h2>
+    //   {callback.description && <Markdown source={callback.description}/>}
+    //   <pre>{JSON.stringify(callback)}</pre>
+    // </div>
+  })
+  return <div>
+    {callbackElements}
+  </div>
+}
diff --git a/src/core/plugins/oas3/components/index.js b/src/core/plugins/oas3/components/index.js
new file mode 100644
index 00000000..f6c2174d
--- /dev/null
+++ b/src/core/plugins/oas3/components/index.js
@@ -0,0 +1,7 @@
+import Callbacks from "./callbacks"
+import RequestBody from "./request-body"
+
+export default {
+  Callbacks,
+  RequestBody
+}
diff --git a/src/core/plugins/oas3/components/request-body.jsx b/src/core/plugins/oas3/components/request-body.jsx
new file mode 100644
index 00000000..d4b58cb7
--- /dev/null
+++ b/src/core/plugins/oas3/components/request-body.jsx
@@ -0,0 +1,29 @@
+import React from "react"
+import { OrderedMap } from "immutable"
+
+
+export default ({ requestBody, getComponent, specSelectors }) => {
+  const Markdown = getComponent("Markdown")
+  const Model = getComponent("model")
+
+  const requestBodyDescription = (requestBody && requestBody.get("description")) || null
+  const requestBodyContent = (requestBody && requestBody.get("content")) || new OrderedMap()
+
+  return <div>
+    { requestBodyDescription &&
+      <p>{requestBodyDescription}</p>
+    }
+    { !requestBodyContent.count() ? <p>No content</p> :
+      requestBodyContent.map((mediaTypeValue, key) => (
+        <div>
+          <h4>{key}</h4>
+          <Model
+            getComponent={ getComponent }
+            specSelectors={ specSelectors }
+            expandDepth={1}
+            schema={mediaTypeValue.get("schema")} />
+        </div>
+      )).toArray()
+    }
+  </div>
+}
diff --git a/src/core/plugins/oas3/index.js b/src/core/plugins/oas3/index.js
index 575cc61b..f8827455 100644
--- a/src/core/plugins/oas3/index.js
+++ b/src/core/plugins/oas3/index.js
@@ -1,13 +1,12 @@
 // import reducers from "./reducers"
 // import * as actions from "./actions"
 import * as wrapSelectors from "./wrap-selectors"
+import components from "./components"
 import wrapComponents from "./wrap-components"
 
 export default function() {
   return {
-    components: {
-
-    },
+    components,
     wrapComponents,
     statePlugins: {
       spec: {
diff --git a/src/core/plugins/oas3/wrap-components/parameters.jsx b/src/core/plugins/oas3/wrap-components/parameters.jsx
index 566c4c14..d87d7fe4 100644
--- a/src/core/plugins/oas3/wrap-components/parameters.jsx
+++ b/src/core/plugins/oas3/wrap-components/parameters.jsx
@@ -94,22 +94,20 @@ class Parameters extends Component {
 
     const ParameterRow = getComponent("parameterRow")
     const TryItOutButton = getComponent("TryItOutButton")
-    const Model = getComponent("model")
+    const Callbacks = getComponent("Callbacks", true)
+    const RequestBody = getComponent("RequestBody", true)
 
     const isExecute = tryItOutEnabled && allowTryItOut
 
     const requestBody = operation.get("requestBody")
-    const requestBodyDescription = (requestBody && requestBody.get("description")) || null
-    const requestBodyContent = (requestBody && requestBody.get("content")) || new OrderedMap()
-
     return (
       <div className="opblock-section">
         <div className="opblock-section-header">
           <div className="tab-header">
-            <div onClick={() => this.toggleTab("parameters")} className={this.state.parametersVisible ? "tab-item active" : "tab-item"}>
+            <div onClick={() => this.toggleTab("parameters")} className={`tab-item ${this.state.parametersVisible && "active"}`}>
               <h4 className="opblock-title"><span>Parameters</span></h4>
             </div>
-            <div onClick={() => this.toggleTab("callbacks")} className="tab-item">
+            <div onClick={() => this.toggleTab("callbacks")} className={`tab-item ${this.state.callbackVisible && "active"}`}>
               <h4 className="opblock-title"><span>Callbacks</span></h4>
             </div>
           </div>
@@ -147,31 +145,17 @@ class Parameters extends Component {
           }
         </div> : "" }
 
-        {this.state.callbackVisible ? <div className="callbacks-container">
-          covfefe
+        {this.state.callbackVisible ? <div className="callbacks-container opblock-description-wrapper">
+          <Callbacks callbacks={operation.get("callbacks")} />
         </div> : "" }
         {
-          requestBody &&
+          requestBody && this.state.parametersVisible &&
           <div className="opblock-section">
             <div className="opblock-section-header">
               <h4 className="opblock-title">Request body</h4>
             </div>
             <div className="opblock-description-wrapper">
-              { requestBodyDescription &&
-                <p>{requestBodyDescription}</p>
-              }
-              { !requestBodyContent.count() ? <p>No content</p> :
-                requestBodyContent.map((mediaTypeValue, key) => (
-                  <div>
-                    <h4>{key}</h4>
-                    <Model
-                      getComponent={ getComponent }
-                      specSelectors={ specSelectors }
-                      expandDepth={1}
-                      schema={mediaTypeValue.get("schema")} />
-                  </div>
-                )).toArray()
-              }
+              <RequestBody requestBody={requestBody} />
             </div>
           </div>
         }