Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[minor] [chore] : Update to support Lerna structure #10

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

[minor] [chore] : Update to support Lerna structure #10

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9d64a41
Update to support Lerna structure
animesh10 Jul 31, 2017
ef82c4d
remove default org
animesh10 Aug 1, 2017
39d67e4
fix review comments
animesh10 Oct 11, 2017
230fd66
Update archetype and use xclap
animesh10 Oct 25, 2017
d7b5787
Fix Linting errors
animesh10 Oct 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 66 additions & 69 deletions client/components/component.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,12 @@ export default class Component extends React.Component {
this.setState({ currentVersion });
}

Promise.all([
this._getComponentInfo(org, repo),
this._getDoc(org, repo)
]);
Promise.all([this._getComponentInfo(org, repo), this._getDoc(org, repo)]);
}

_getComponentInfo(org, repo) {
const host = window.location.origin;
const url = `${host}/data/${org}/${repo}.json`;

const compare = (a, b) => {
if (a.displayName < b.displayName) {
return -1;
Expand All @@ -54,27 +50,26 @@ export default class Component extends React.Component {
};

return fetch(url)
.then((res) => {
.then(res => {
if (res.status >= 400) {
throw res;
}
return res.json();
})
.then((res) => {
.then(res => {
const meta = res.meta || {};
const usage = res.usage.sort(compare);
const usage = (res.usage && res.usage.sort(compare)) || {};

const deps = res.deps || [];
deps.sort(compare);

const latestVersion = parseInt(meta.version.substring(0, meta.version.indexOf(".")));
const currentVersion = this.state.currentVersion || latestVersion;

this.setState({ meta, usage, deps, latestVersion, currentVersion });

this._getDemo(meta);
})
.catch((err) => {
.catch(err => {
console.log(err);
});
}
Expand All @@ -85,7 +80,6 @@ export default class Component extends React.Component {
const { currentVersion } = this.state;
script.src = `${host}/data/demo-modules/${meta.name}/v${currentVersion}/bundle.min.js`;
script.async = true;

const placeholder = document.getElementById("placeholder");
placeholder.appendChild(script);

Expand All @@ -109,13 +103,13 @@ export default class Component extends React.Component {
const url = `${host}/api/doc/${org}/${repo}`;

return fetch(url)
.then((res) => {
.then(res => {
if (res.status >= 400) {
throw res;
}
return res.json();
})
.then((res) => {
.then(res => {
this.setState({ doc: marked(res.doc) });
})
.catch(() => {
Expand All @@ -127,65 +121,69 @@ export default class Component extends React.Component {
return (
<div className="component-consumption">
<h3>Component Usage</h3>
{ usage.length > 0 && <Revealer
baseHeight={24}
buttonClosedText="View Usage"
buttonOpenText="Hide Usage"
defaultOpen={false}
disableClose={false}
inverse={true}
fakeLink={false}
border={false}>
<div className="component-usage">
This component is used in <em>{usage.length}</em> modules / apps.
{ this._renderModuleData(usage) }
{usage.length > 0 &&
<Revealer
baseHeight={24}
buttonClosedText="View Usage"
buttonOpenText="Hide Usage"
defaultOpen={false}
disableClose={false}
inverse={true}
fakeLink={false}
border={false}
>
<div className="component-usage">
This component is used in <em>{usage.length}</em> modules / apps.
{this._renderModuleData(usage)}
</div>
</Revealer> }
</Revealer>}
<h3>Module Dependencies</h3>
{ deps.length > 0 && <Revealer
baseHeight={24}
buttonClosedText="View Dependencies"
buttonOpenText="Hide Dependencies"
defaultOpen={false}
disableClose={false}
inverse={true}
fakeLink={false}
border={false}>
<div className="component-dependencies">
This component has <em>{deps.length}</em> Electrode dependencies.
{ this._renderModuleData(deps) }
</div>
</Revealer> }
{deps.length > 0 &&
<Revealer
baseHeight={24}
buttonClosedText="View Dependencies"
buttonOpenText="Hide Dependencies"
defaultOpen={false}
disableClose={false}
inverse={true}
fakeLink={false}
border={false}
>
<div className="component-dependencies">
This component has <em>{deps.length}</em> Electrode dependencies.
{this._renderModuleData(deps)}
</div>
</Revealer>}
</div>
);
}

_renderTitle(meta) {
return (
<h2 className="explorer-title">
{ meta.title }
{meta.title}

{ meta.version &&
{meta.version &&
<span className="component-version">
{` v${meta.version}`}
</span> }
</span>}

{ this._renderVersion() }
{this._renderVersion()}

{ meta.description &&
{meta.description &&
<span className="component-description">
{meta.description}
</span> }
</span>}

<span className="component-info">
{ meta.github &&
{meta.github &&
<div>
<a href={meta.github} target="_blank">View Repository on Github</a>
</div> }
{ meta.name &&
</div>}
{meta.name &&
<div className="code-well">
npm i --save {meta.name}
</div> }
</div>}
</span>

</h2>
Expand Down Expand Up @@ -234,20 +232,18 @@ export default class Component extends React.Component {

_renderVersion() {
const { latestVersion } = this.state;

return latestVersion ? (
<span className="switch-version">
<span className="switch-version-text">Switch version:</span>
<select className="chooser" onChange={this._onVersionChange.bind(this)}>
{ this._renderVersionOptions() }
</select>
</span>
) : null;
return latestVersion
? <span className="switch-version">
<span className="switch-version-text">Switch version:</span>
<select className="chooser" onChange={this._onVersionChange.bind(this)}>
{this._renderVersionOptions()}
</select>
</span>
: null;
}

_renderDoc() {
const { doc } = this.state;

return (
<div className="explorer-title">
<Revealer
Expand All @@ -258,7 +254,8 @@ export default class Component extends React.Component {
disableClose={false}
inverse={true}
fakeLink={false}
border={false}>
border={false}
>
<div className="component-dependencies" dangerouslySetInnerHTML={{ __html: doc }} />
</Revealer>
</div>
Expand All @@ -269,7 +266,7 @@ export default class Component extends React.Component {
return (
<table>
<tbody>
{data.map((detail) => (
{data.map(detail =>
<tr>
<td>
<a href={detail.uri} target="_blank" className="detail-uri">
Expand All @@ -285,7 +282,7 @@ export default class Component extends React.Component {
{detail.description}
</td>
</tr>
))}
)}
</tbody>
</table>
);
Expand All @@ -295,11 +292,11 @@ export default class Component extends React.Component {
const { demo, error } = this.state;

if (!demo && !error) {
return (<div>Loading, please wait.</div>);
return <div>Loading, please wait.</div>;
}

if (!demo && error) {
return (<b>This component does not have demo or demo does not work properly.</b>);
return <b>This component does not have demo or demo does not work properly.</b>;
}

return React.createElement(demo);
Expand All @@ -314,13 +311,13 @@ export default class Component extends React.Component {

return (
<div>
{ this._renderTitle(meta) }
{ this._renderDoc() }
{this._renderTitle(meta)}
{this._renderDoc()}
<div id="placeholder" />
<div className="demo">
{ this._renderDemo() }
{this._renderDemo()}
</div>
{ this._renderUsage(usage, deps) }
{this._renderUsage(usage, deps)}
</div>
);
}
Expand Down
49 changes: 27 additions & 22 deletions client/components/menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,16 @@ export default class Component extends React.Component {
const host = window.location.origin;

return fetch(`${host}/data/orgs.json`)
.then((res) => {
.then(res => {
if (res.status >= 400) {
throw res;
}
return res.json();
})
.then((menu) => {
this.setState({menu: menu.allOrgs});
}).catch((err) => {
.then(menu => {
this.setState({ menu: menu.allOrgs });
})
.catch(err => {
console.log(err);
});
}
Expand All @@ -46,9 +47,11 @@ export default class Component extends React.Component {
}

_renderSubModules(link, submodules) {
return submodules && submodules.length && (
return (
submodules &&
submodules.length &&
<ul className="menu-submodules">
{submodules.map((submodule) => this._subModuleLink(link, submodule))}
{submodules.map(submodule => this._subModuleLink(link, submodule))}
</ul>
);
}
Expand All @@ -58,16 +61,17 @@ export default class Component extends React.Component {
const { repos } = menu[org];
const sortedRepos = Object.keys(repos);
sortedRepos.sort();
return sortedRepos.map((repoName) => {
return sortedRepos.map(repoName => {
const { link, submodules } = repos[repoName];

return (<li>
<a
href={`/${link}`}>
{repoName}
</a>
{this._renderSubModules(link, submodules)}
</li>);
return (
<li>
<a href={`/${link}`}>
{repoName}
</a>
{this._renderSubModules(link, submodules)}
</li>
);
});
}

Expand All @@ -76,14 +80,15 @@ export default class Component extends React.Component {

return (
<div className="explorer-menu">
{menu && Object.keys(menu).map((org) => (
<span>
<h4>{org}</h4>
<ul>
{this._renderLinks(org)}
</ul>
</span>
))}
{menu &&
Object.keys(menu).map(org =>
<span>
<h4>{org}</h4>
<ul>
{this._renderLinks(org)}
</ul>
</span>
)}
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
"electrode-server": "^1.0.0",
"electrode-static-paths": "^1.0.0",
"exenv": "^1.2.0",
"github": "^1.1.2",
"github": "^9.2.0",
"history": "~1.13.1",
"inert": "^4.0.1",
"isomorphic-fetch": "^2.2.1",
Expand Down
Loading