Skip to content
This repository has been archived by the owner on Nov 28, 2022. It is now read-only.

Commit

Permalink
Create baseUrl context and revert prop passing in #176
Browse files Browse the repository at this point in the history
  • Loading branch information
kanadgupta committed Apr 19, 2019
1 parent 825f82d commit 097a5e8
Show file tree
Hide file tree
Showing 7 changed files with 43 additions and 64 deletions.
21 changes: 3 additions & 18 deletions packages/api-explorer/src/Doc.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand All @@ -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">
Expand All @@ -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>
Expand Down
13 changes: 4 additions & 9 deletions packages/api-explorer/src/block-types/Content.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand All @@ -83,7 +83,6 @@ const Content = props => {
content={isThreeColumn === 'left' ? left : right}
flags={props.flags}
column={isThreeColumn}
baseUrl={props.baseUrl}
/>
);
};
Expand All @@ -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;
13 changes: 2 additions & 11 deletions packages/api-explorer/src/block-types/TextArea.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
41 changes: 22 additions & 19 deletions packages/api-explorer/src/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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>
Expand Down
14 changes: 8 additions & 6 deletions packages/markdown/components/Anchor.jsx
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down Expand Up @@ -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>
);
};
3 changes: 3 additions & 0 deletions packages/markdown/contexts/BaseUrl.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
const React = require('react');

module.exports = React.createContext('/');
2 changes: 1 addition & 1 deletion packages/markdown/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 097a5e8

Please sign in to comment.