Create baseUrl context and revert prop passing in #176

kanadgupta · kanadgupta · commit 097a5e8fb7c3 · 2019-04-19T09:39:10.000-07:00
diff --git a/packages/api-explorer/src/Doc.jsx b/packages/api-explorer/src/Doc.jsx
@@ -132,12 +132,7 @@ class Doc extends React.Component {
           </div>
         )}
 
-        <Content
-          baseUrl={this.props.baseUrl}
-          body={doc.body}
-          flags={this.props.flags}
-          isThreeColumn
-        />
+        <Content body={doc.body} flags={this.props.flags} isThreeColumn />
       </Fragment>
     );
   }
@@ -155,12 +150,7 @@ class Doc extends React.Component {
                   {this.renderParams()}
                 </Fragment>
               )}
-              <Content
-                baseUrl={this.props.baseUrl}
-                body={doc.body}
-                flags={this.props.flags}
-                isThreeColumn="left"
-              />
+              <Content body={doc.body} flags={this.props.flags} isThreeColumn="left" />
             </div>
 
             <div className="hub-reference-right">
@@ -174,12 +164,7 @@ class Doc extends React.Component {
               <div className="hub-reference-right switcher">
                 {this.renderResponseSchema('dark')}
               </div>
-              <Content
-                baseUrl={this.props.baseUrl}
-                body={doc.body}
-                flags={this.props.flags}
-                isThreeColumn="right"
-              />
+              <Content body={doc.body} flags={this.props.flags} isThreeColumn="right" />
             </div>
           </Fragment>
         </div>
diff --git a/packages/api-explorer/src/block-types/Content.jsx b/packages/api-explorer/src/block-types/Content.jsx
@@ -12,9 +12,9 @@ const PropTypes = require('prop-types');
 
 const parseBlocks = require('../lib/parse-magic-blocks');
 
-const Loop = ({ content, column, flags, baseUrl }) => {
+const Loop = ({ content, column, flags }) => {
   const elements = content.map((block, key) => {
-    const props = { key, block, flags, baseUrl };
+    const props = { key, block, flags };
     switch (block.type) {
       case 'textarea':
         // eslint-disable-next-line react/no-array-index-key
@@ -66,12 +66,12 @@ const Content = props => {
       <div className="hub-reference-section">
         <div className="hub-reference-left">
           <div className="content-body">
-            <Loop content={left} column="left" flags={props.flags} baseUrl={props.baseUrl} />
+            <Loop content={left} column="left" flags={props.flags} />
           </div>
         </div>
         <div className="hub-reference-right">
           <div className="content-body">
-            <Loop content={right} column="right" flags={props.flags} baseUrl={props.baseUrl} />
+            <Loop content={right} column="right" flags={props.flags} />
           </div>
         </div>
       </div>
@@ -83,7 +83,6 @@ const Content = props => {
       content={isThreeColumn === 'left' ? left : right}
       flags={props.flags}
       column={isThreeColumn}
-      baseUrl={props.baseUrl}
     />
   );
 };
@@ -98,27 +97,23 @@ Loop.propTypes = {
   flags: PropTypes.shape({
     correctnewlines: PropTypes.bool,
   }).isRequired,
-  baseUrl: PropTypes.string,
 };
 
 Loop.defaultProps = {
   column: 'left',
   flags: {},
-  baseUrl: '/',
 };
 
 Content.propTypes = {
   isThreeColumn: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   body: PropTypes.string,
   flags: PropTypes.shape({}),
-  baseUrl: PropTypes.string,
 };
 
 Content.defaultProps = {
   isThreeColumn: true,
   body: '',
   flags: {},
-  baseUrl: '/',
 };
 
 module.exports = Content;
diff --git a/packages/api-explorer/src/block-types/TextArea.jsx b/packages/api-explorer/src/block-types/TextArea.jsx
@@ -2,27 +2,18 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const markdown = require('@readme/markdown');
 
-const Textarea = ({ block, flags, baseUrl }) => {
-  const combined = Object.assign(
-    {
-      baseUrl,
-    },
-    flags,
-  );
-
-  return <div className="magic-block-textarea">{markdown(block.text, combined)}</div>;
+const Textarea = ({ block, flags }) => {
+  return <div className="magic-block-textarea">{markdown(block.text, flags)}</div>;
 };
 
 Textarea.propTypes = {
   block: PropTypes.shape({
     text: PropTypes.string.isRequired,
   }).isRequired,
   flags: PropTypes.shape({}),
-  baseUrl: PropTypes.string,
 };
 
 Textarea.defaultProps = {
   flags: {},
-  baseUrl: '/',
 };
 module.exports = Textarea;
diff --git a/packages/api-explorer/src/index.jsx b/packages/api-explorer/src/index.jsx
@@ -5,6 +5,7 @@ const extensions = require('@readme/oas-extensions');
 const VariablesContext = require('@readme/variable/contexts/Variables');
 const OauthContext = require('@readme/variable/contexts/Oauth');
 const GlossaryTermsContext = require('@readme/markdown/contexts/GlossaryTerms');
+const BaseUrlContext = require('@readme/markdown/contexts/BaseUrl');
 const SelectedAppContext = require('@readme/variable/contexts/SelectedApp');
 
 const ErrorBoundary = require('./ErrorBoundary');
@@ -82,25 +83,27 @@ class ApiExplorer extends React.Component {
             <VariablesContext.Provider value={this.props.variables}>
               <OauthContext.Provider value={this.props.oauth}>
                 <GlossaryTermsContext.Provider value={this.props.glossaryTerms}>
-                  <SelectedAppContext.Provider value={this.state.selectedApp}>
-                    <Doc
-                      key={doc._id}
-                      doc={doc}
-                      oas={this.getOas(doc)}
-                      setLanguage={this.setLanguage}
-                      flags={this.props.flags}
-                      user={this.props.variables.user}
-                      Logs={this.props.Logs}
-                      baseUrl={this.props.baseUrl.replace(/\/$/, '')}
-                      appearance={this.props.appearance}
-                      language={this.state.language}
-                      oauth={this.props.oauth}
-                      suggestedEdits={this.props.suggestedEdits}
-                      tryItMetrics={this.props.tryItMetrics}
-                      auth={this.state.auth}
-                      onAuthChange={this.onAuthChange}
-                    />
-                  </SelectedAppContext.Provider>
+                  <BaseUrlContext.Provider value={this.props.baseUrl.replace(/\/$/, '')}>
+                    <SelectedAppContext.Provider value={this.state.selectedApp}>
+                      <Doc
+                        key={doc._id}
+                        doc={doc}
+                        oas={this.getOas(doc)}
+                        setLanguage={this.setLanguage}
+                        flags={this.props.flags}
+                        user={this.props.variables.user}
+                        Logs={this.props.Logs}
+                        baseUrl={this.props.baseUrl.replace(/\/$/, '')}
+                        appearance={this.props.appearance}
+                        language={this.state.language}
+                        oauth={this.props.oauth}
+                        suggestedEdits={this.props.suggestedEdits}
+                        tryItMetrics={this.props.tryItMetrics}
+                        auth={this.state.auth}
+                        onAuthChange={this.onAuthChange}
+                      />
+                    </SelectedAppContext.Provider>
+                  </BaseUrlContext.Provider>
                 </GlossaryTermsContext.Provider>
               </OauthContext.Provider>
             </VariablesContext.Provider>
diff --git a/packages/markdown/components/Anchor.jsx b/packages/markdown/components/Anchor.jsx
@@ -1,6 +1,8 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 
+const BaseUrlContext = require('../contexts/BaseUrl');
+
 // Nabbed from here:
 // https://github.com/readmeio/api-explorer/blob/0dedafcf71102feedaa4145040d3f57d79d95752/packages/api-explorer/src/lib/markdown/renderer.js#L52
 function getHref(href, baseUrl) {
@@ -57,13 +59,13 @@ Anchor.defaultProps = {
   baseUrl: '/',
 };
 
-function createAnchor(baseUrl) {
-  return props => <Anchor baseUrl={baseUrl} {...props} />;
-}
-
-module.exports = (options, sanitizeSchema) => {
+module.exports = (sanitizeSchema) => {
   // This is for our custom link formats
   sanitizeSchema.protocols.href.push('doc', 'ref', 'blog', 'page');
 
-  return createAnchor(options);
+  return props => (
+    <BaseUrlContext.Consumer>
+      {baseUrl => <Anchor baseUrl={baseUrl} {...props} />}
+    </BaseUrlContext.Consumer>
+  );
 };
diff --git a/packages/markdown/contexts/BaseUrl.js b/packages/markdown/contexts/BaseUrl.js
@@ -0,0 +1,3 @@
+const React = require('react');
+
+module.exports = React.createContext('/');
diff --git a/packages/markdown/index.js b/packages/markdown/index.js
@@ -64,7 +64,7 @@ module.exports = function markdown(text, opts = {}) {
         h4: heading('h4', sanitize),
         h5: heading('h5', sanitize),
         h6: heading('h6', sanitize),
-        a: anchor(opts.baseUrl, sanitize),
+        a: anchor(sanitize),
         code: code(sanitize),
         // Remove enclosing <div>
         // https://github.com/mapbox/remark-react/issues/54

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+const React = require('react');`
	`2`	`+`
	`3`	`+module.exports = React.createContext('/');`