Refactor if statements and string interpolation

legacy-stuff/marked.js

@@ -1,6 +1,6 @@
 const marked = require('marked');
-const Emoji = require('../../public/data/emojis.js').emoji;
-const codemirror = require('./codemirror').codemirror;
+const Emoji = require('./emojis.js').emoji;
+const syntaxHighlighter = require('../../../readme-syntax-highlighter');
 
 // Configure marked
 exports.configure = function (req) {
@@ -145,7 +145,7 @@ exports.configure = function (req) {
     },
     highlight(code, language) {
       if (!language) return undefined;
-      return codemirror(code, language);
+      return syntaxHighlighter(code, language);
     },
     gfm: true,
   });

packages/api-explorer-ui/src/block-types/api-header.jsx

@@ -0,0 +1,25 @@
+import uslug from 'uslug';
+
+const ApiHeader = ({block}) => {
+  return (
+    <div className="magic-block-api-header">
+      <h1 className="header-scroll is-api-header">
+        <span id={uslug(block.data.title)}>
+        </span>
+        <div className="anchor waypoint" id={`section-${uslug(block.data.title)}`}>
+        </div>
+        {
+          (block.data.type && block.data.type !== 'basic') && (
+            <span className={`pg-type-big pg-type type-${uslug(block.data.type)}`}>
+              {block.data.title}
+            </span>
+          )
+        }
+        <a className="fa fa-anchor" href={`#section-${uslug(block.data.title)}`}>
+        </a>
+      </h1>
+    </div>
+  )
+};
+
+module.exports = ApiHeader;

packages/api-explorer-ui/src/block-types/callout.jsx

@@ -1,52 +1,72 @@
-const CallOut = (block) => {
+import Marked from '../lib/marked';
+
+const CallOut = ({block}) => {
   const c = block.data.title ? '' : 'no-title';
 
   return (
-    <div className=`magic-block-callout type-${block.data/type} ${c} `>
-      if (block.data.title) {
-        <h3>
-          if (block.data.type ==='info') {
-            return <i className="fa fa-info-circle" title="Info"></i>
-          }
-          if (block.data.type ==='warning') {
-            return <i className="fa fa-exclamation-circle" title="Warning"></i>
-          }
-          if (block.data.type ==='danger') {
-            return <i className="fa fa-exclamation-triangle" title="Danger"></i>
-          }
-          if (block.data.type ==='success') {
-            return <i className="fa fa-check-square" title="Success"></i>
-          }
-          dangerouslySetInnerHTML={block.data.title}
-        </h3>
-
-      if (!block.data.title) {
-        <span className="noTitleIcon">
-          if (block.data.type ==='info') {
-            return <i className="fa fa-info-circle" title="Info"></i>
-          }
-          if (block.data.type ==='warning') {
-            return <i className="fa fa-exclamation-circle" title="Warning"></i>
-          }
-          if (block.data.type ==='danger') {
-            return <i className="fa fa-exclamation-triangle" title="Danger"></i>
-          }
-          if (block.data.type ==='success') {
-            return <i className="fa fa-check-square" title="Success"></i>
-          }
-        </span>
-      }
+    <div className={`magic-block-callout type-${block.data/type} ${c} `}>
+      {
+        (block.data.title) && (
+          <h3>
+            {
+              (block.data.type === 'info') && (
+                <i className="fa fa-info-circle" title="Info"></i>
+              )
+            }
 
-      if (block.data && block.data.body) {
-        return (
-         <div className="callout-body">
-  //!=marked??
-         </div>
-        )
-      }
+            {
+              (block.data.type ==='warning') && (
+                <i className="fa fa-exclamation-circle" title="Warning"></i>
+              )
+            }
+
+            {
+              (block.data.type ==='danger') && (
+                <i className="fa fa-exclamation-triangle" title="Danger"></i>
+              )
+            }
+
+            {
+              (block.data.type ==='success') && (
+                <i className="fa fa-check-square" title="Success"></i>
+              )
+            }
+
+            {block.data.title}
+          </h3>
+
+          (!block.data.title) && (
+            <span className="noTitleIcon">
+              {
+                (block.data.type ==='info') && (
+                  <i className="fa fa-info-circle" title="Info"></i>
+                )
+              }
+
+                  {
+                    (block.data.type ==='warning') && (
+                      <i className="fa fa-exclamation-circle" title="Warning"></i>
+                    )
+                  }
+
+                  {
+                    (block.data.type ==='danger') && (
+                      <i className="fa fa-exclamation-triangle" title="Danger"></i>
+                    )
+                  }
 
+                  {
+                    (block.data.type ==='success') && (
+                      <i className="fa fa-check-square" title="Success"></i>
+                    )
+                  }
 
+            </span>
+          )
 
+          (block.data && block.data.body) && (
+            <div className="callout-body" dangerouslySetInnerHTML={Marked(block.data.body)}></div>
+          )
       }
     </div>
   )

packages/api-explorer-ui/src/block-types/code.jsx

@@ -0,0 +1,18 @@
+const BlockCode = ({data, opts}) => {
+  if (!data || !data.codes || data.codes.length === 0 || data.codes[0].code === '' || data.codes[0].code ==='{}') {
+    return (
+      opts = opts || {};
+
+      if (opts.label) {
+        return (
+          <label>
+            {opts.label}
+          </label>
+        )
+      }
+      <div className>
+
+      </div>
+    )
+  }
+}

packages/api-explorer-ui/src/block-types/content.jsx

@@ -1,62 +1,95 @@
-import callout from './callout';
-import html from './html';
+import Callout from './callout';
+import Html from './html';
+import Textarea from './textarea';
+import { Code, BlockCode } from './code';
+import Image from './image';
+import Embed from './embed';
+import Parameters from './parameters';
+import ApiHeader from './api-header';
 
-const Loop = (content, column) => {
-  if(content) {
-    for (block in content) {
-      if(block.type === 'textarea') {
 
-      }
-      if(block.type === 'code') {
-        code
-        //block-code doesn't inherit from loop
-      }
-      if(block.type === 'html') {
-        <html/> //?
-      }
-      if(block.type === 'image') {
+const Loop = ({content, column}) => {
+  {
+    (content)  && (
+      for (block in content) {
+        {
+          (block.type === 'textarea') && (
+            <Textarea/>
+           )
+        }
 
-      }
-      if(block.type === 'embed') {
+        {
+          (block.type === 'code') && (
+            <Code/>
+            <BlockCode dark={column === 'right'} />
+          )
+        }
 
-      }
-      if(block.type === 'parameters') {
+        {
+          (block.type === 'html') && (
+            <Html/>
+          )
+        }
 
-      }
-      if(block.type === 'callout') {
-        callout
-      }
-      if(block.type === 'api-header') {
+        {
+          (block.type === 'image')  && (
+            <Image/>
+          )
+        }
 
+        {
+          (block.type === 'embed') && (
+            <Embed/>
+          )
+        }
+
+        {
+          (block.type === 'parameters') && (
+            <Parameters/>
+          )
+        }
+
+        {
+          (block.type === 'callout') && (
+            <Callout/>
+          )
+        }
+
+        {
+          (block.type === 'api-header') && (
+            <ApiHeader/>
+          )
+        }
       }
-    }
+    )
   }
 }
 
-const Opts = () => {
-  if(opts && opts.isThreeColumn) {
-    if(opts.isThreeColumn === true) {
-      return (
-        <div className="hub-reference-section">
+const Opts = ({opts, content}) => {
+  {
+    (opts && opts.isThreeColumn) && (
+      (opts.isThreeColumn === true)  && (
+          <div className="hub-reference-section">
 
-          <div className="hub-reference-left">
-            <div className="content-body" dangerouslySetInnerHTML={Loop(content.left, 'left')}>
+            <div className="hub-reference-left">
+              <div className="content-body" dangerouslySetInnerHTML={Loop(content.left, 'left')}>
+              </div>
             </div>
-          </div>
 
-          <div className="hub-reference-right">
-            <div className="content-body" dangerouslySetInnerHTML={Loop(content.right, 'right')}>
+            <div className="hub-reference-right">
+              <div className="content-body" dangerouslySetInnerHTML={Loop(content.right, 'right')}>
+              </div>
             </div>
           </div>
-        </div>
       )
+      else {
+        Loop(content[opts.isThreeColumn])
+      }
     }
     else {
-      Loop(content[opts.isThreeColumn])
+      Loop(content)
     }
-  }
-  else {
-    Loop(content)
+    )
   }
 };
 

packages/api-explorer-ui/src/block-types/embed.jsx

@@ -1,26 +1,24 @@
-const Embed = (block) => {
+const Embed = ({block}) => {
   return (
     <div className="magic-block-embed">
-      if (block.data.html) {
-       // dangerouslySetInnerHTML where?
-      }
-      else if (block.data.iframe) {
-        return (
-          <iframe className="media-iframe" src=`${block.data.url}` width={`${block.data.width}` || "100%"} height={`${block.data.height}` || "300px"}>
+      (block.data.html) && (
+        {block.data.html}
+       // dangerouslySetInnerHTML?
+      )
+      (block.data.iframe) && (
+          <iframe className="media-iframe" src={block.data.url} width={{block.data.width} || "100%"} height={{block.data.height} || "300px"}>
           </iframe>
-        )
-      }
+      )
       else {
         return (
           <strong>
-            if (block.data.favicon){
-              return (
-                <a href=`${block.data.url}` target="_new">
+            (block.data.favicon) && (
+                <a href={block.data.url} target="_new">
                   {block.data.title || block.data.url}
-                  <img src=`${block.data.favicon}` className="favicon"/>
+                  <img src={block.data.favicon} className="favicon"/>
                 </a>
-              )
-            }
+            )
+
           </strong>
         )
       }

packages/api-explorer-ui/src/block-types/image.jsx

@@ -1,17 +1,24 @@
-const Image = (block) => {
+import Marked from '../lib/marked';
+
+const Image = ({block}) => {
   for (image in block.data.images) {
     const imageClass = image.sizing ? image.sizing : 'smart';
     const border =  image.border ? image.border : '';
 
-    if (image && image.image && image.image.length) {
-      return (
-        <figure>
-          <a className=`block-display-image-parent block-display-image-size-${imageClass}${border}` href={image.image[0]}>
-            <img src={image.image[0]} alt={image.caption}/>
-          </a>
-        </figure>
+    {
+      (image && image.image && image.image.length)  && (
+          <figure>
+            <a className={`block-display-image-parent block-display-image-size-${imageClass}${border}`} href={image.image[0]}>
+             <img src={image.image[0]} alt={image.caption}/>
+            </a>
+          </figure>
+
+          {
+            (image.caption) && (
+              <figcaption dangerouslySetInnerHTML={Marked(image.caption)}></figcaption>
+            )
+          }
       )
-      //if block with marked?
     }
   }
 };