Skip to content

Commit 3acba59

Browse files
PlaneshifterPlaneshifter
committed
Refactor data fetching and avoid stdlib pkgs
1 parent fb06ed3 commit 3acba59

3 files changed

Lines changed: 103 additions & 36 deletions

File tree

‎tools/docs/www/src/app.jsx‎

Lines changed: 83 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import React, { Component, Fragment } from 'react';
2222
import { Route, Switch, withRouter } from 'react-router-dom';
2323
import { Link } from 'react-router-dom';
2424
import SideMenu from './side_menu.jsx';
25+
import VERSIONS from './versions.json';
2526
import './css/app.css';
2627
import './css/reset.css';
2728
import './css/highlight.css';
@@ -42,8 +43,8 @@ const ReadmePage = ( props ) => {
4243
dangerouslySetInnerHTML={{ __html: html }}
4344
/> );
4445
};
45-
4646
const HTML_FRAGMENT_CACHE = {};
47+
const JSON_CACHE = {};
4748

4849

4950
// MAIN //
@@ -53,10 +54,17 @@ class App extends Component {
5354
super( props );
5455

5556
this.state = {
56-
slideoutIsOpen: false
57+
slideoutIsOpen: false,
58+
version: VERSIONS[ 0 ],
59+
packageTree: null,
60+
packageResources: {}
5761
};
5862
}
5963

64+
componentDidMount() {
65+
this.fetchJSONFiles();
66+
}
67+
6068
handleSlideOutChange = ( value ) => {
6169
this.setState({
6270
slideoutIsOpen: value
@@ -70,20 +78,59 @@ class App extends Component {
7078
}
7179
}
7280

73-
renderReadme({ match }) {
81+
renderReadme = ({ match }) => {
82+
const resources = this.state.packageResources[ match.params.pkg ];
83+
const hasTests = resources && resources.test;
84+
const hasBenchmarks = resources && resources.benchmark;
85+
7486
// Render the README for the selected package:
7587
return (
7688
<Fragment>
7789
<nav className="navbar">
78-
<Link to={`/${match.params.version}/docs/api/@stdlib/${match.params.pkg}/benchmark.html`}>Benchmarks</Link>
79-
<Link to={`/${match.params.version}/docs/api/@stdlib/${match.params.pkg}/test.html`}>Tests</Link>
90+
{ hasBenchmarks ? <Link to={`/${match.params.version}/docs/api/@stdlib/${match.params.pkg}/benchmark.html`}>Benchmarks</Link> : null}
91+
{ hasTests ? <Link to={`/${match.params.version}/docs/api/@stdlib/${match.params.pkg}/test.html`}>Tests</Link> : null}
8092
<a href={`https://github.com/stdlib-js/stdlib/tree/${match.params.version}/lib/node_modules/@stdlib/${match.params.pkg}`}>Source</a>
8193
</nav>
8294
<ReadmePage path={match.url} />
8395
</Fragment>
8496
);
8597
}
8698

99+
fetchJSONFiles = () => {
100+
const treePath = `/assets/${this.state.version}/package_tree.json`;
101+
if ( !JSON_CACHE[ treePath ] ) {
102+
fetch( treePath )
103+
.then( res => res.json() )
104+
.then( res => {
105+
JSON_CACHE[ treePath ] = res;
106+
this.setState({
107+
packageTree: res
108+
});
109+
})
110+
.catch( err => console.error( err ) );
111+
} else {
112+
this.setState({
113+
packageTree: JSON_CACHE[ treePath ]
114+
});
115+
}
116+
const resourcesPath = `/assets/${this.state.version}/package_resources.json`;
117+
if ( !JSON_CACHE[ resourcesPath ] ) {
118+
fetch( resourcesPath )
119+
.then( res => res.json() )
120+
.then( res => {
121+
JSON_CACHE[ resourcesPath ] = res;
122+
this.setState({
123+
packageResources: res
124+
});
125+
})
126+
.catch( err => console.error( err ) );
127+
} else {
128+
this.setState({
129+
packageResources: JSON_CACHE[ resourcesPath ]
130+
});
131+
}
132+
}
133+
87134
fetchAndCacheFragment = ( path ) => {
88135
this.props.history.push( path );
89136
window.scrollTo( 0, 0 );
@@ -100,13 +147,22 @@ class App extends Component {
100147
}
101148
}
102149

150+
selectVersion = ( event ) => {
151+
this.setState({
152+
version: event.target.value
153+
}, this.fetchJSONFiles );
154+
}
155+
103156
render() {
104157
return (
105158
<div className="App">
106159
<SideMenu
107160
onDrawerChange={this.handleSlideOutChange}
108161
onReadmeChange={this.fetchAndCacheFragment}
109162
open={this.state.slideoutIsOpen}
163+
version={this.state.version}
164+
onVersionChange={this.selectVersion}
165+
packageTree={this.state.packageTree}
110166
/>
111167
<div style={{
112168
marginLeft: this.state.slideoutIsOpen ? 350 : 0,
@@ -117,12 +173,20 @@ class App extends Component {
117173
exact
118174
path="/:version/docs/api/@stdlib/:pkg*/benchmark.html"
119175
render={({ match }) => {
120-
const iframe = <iframe className="readme-iframe" src={`/${match.params.version}/docs/api/@stdlib/${match.params.pkg}/benchmark.html?fragment=true`} title="Benchmarks" />;
176+
const resources = this.state.packageResources[ match.params.pkg ];
177+
const hasTests = resources && resources.test;
178+
const hasBenchmarks = resources && resources.benchmark;
179+
let iframe;
180+
if ( hasBenchmarks ) {
181+
iframe = <iframe className="readme-iframe" src={`/${match.params.version}/docs/api/@stdlib/${match.params.pkg}/benchmark.html?fragment=true`} title="Benchmarks" />;
182+
} else {
183+
iframe = <h2><code>{match.params.pkg}</code> does not have any benchmarks.</h2>;
184+
}
121185
return (
122186
<Fragment>
123187
<nav className="navbar">
124-
<Link to={`/${match.params.version}/docs/api/@stdlib/${match.params.pkg}/benchmark.html`}>Benchmarks</Link>
125-
<Link to={`/${match.params.version}/docs/api/@stdlib/${match.params.pkg}/test.html`}>Tests</Link>
188+
{ hasBenchmarks ? <Link to={`/${match.params.version}/docs/api/@stdlib/${match.params.pkg}/benchmark.html`}>Benchmarks</Link> : null}
189+
{ hasTests ? <Link to={`/${match.params.version}/docs/api/@stdlib/${match.params.pkg}/test.html`}>Tests</Link> : null}
126190
<a href={`https://github.com/stdlib-js/stdlib/tree/${match.params.version}/lib/node_modules/@stdlib/${match.params.pkg}`}>Source</a>
127191
</nav>
128192
{iframe}
@@ -134,12 +198,20 @@ class App extends Component {
134198
exact
135199
path="/:version/docs/api/@stdlib/:pkg*/test.html"
136200
render={({ match }) => {
137-
const iframe = <iframe className="readme-iframe" src={`/${match.params.version}/docs/api/@stdlib/${match.params.pkg}/test.html?fragment=true`} title="Tests" />;
201+
const resources = this.state.packageResources[ match.params.pkg ];
202+
const hasTests = resources && resources.test;
203+
const hasBenchmarks = resources && resources.benchmark;
204+
let iframe;
205+
if ( hasTests ) {
206+
iframe = <iframe className="readme-iframe" src={`/${match.params.version}/docs/api/@stdlib/${match.params.pkg}/test.html?fragment=true`} title="Tests" />;
207+
} else {
208+
iframe = <h2><code>{match.params.pkg}</code> does not have any tests.</h2>;
209+
}
138210
return (
139211
<Fragment>
140212
<nav className="navbar">
141-
<Link to={`/${match.params.version}/docs/api/@stdlib/${match.params.pkg}/benchmark.html`}>Benchmarks</Link>
142-
<Link to={`/${match.params.version}/docs/api/@stdlib/${match.params.pkg}/test.html`}>Tests</Link>
213+
{ hasBenchmarks ? <Link to={`/${match.params.version}/docs/api/@stdlib/${match.params.pkg}/benchmark.html`}>Benchmarks</Link> : null}
214+
{ hasTests ? <Link to={`/${match.params.version}/docs/api/@stdlib/${match.params.pkg}/test.html`}>Tests</Link> : null}
143215
<a href={`https://github.com/stdlib-js/stdlib/tree/${match.params.version}/lib/node_modules/@stdlib/${match.params.pkg}`}>Source</a>
144216
</nav>
145217
{iframe}

‎tools/docs/www/src/side_menu.jsx‎

Lines changed: 17 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,6 @@
2020

2121
import React, { Component, Fragment } from 'react';
2222
import { debounce } from 'throttle-debounce';
23-
import isObject from '@stdlib/assert/is-object';
24-
import contains from '@stdlib/assert/contains';
25-
import objectKeys from '@stdlib/utils/keys';
2623
import List from '@material-ui/core/List';
2724
import ListItem from '@material-ui/core/ListItem';
2825
import Collapse from '@material-ui/core/Collapse';
@@ -32,7 +29,6 @@ import AddIcon from '@material-ui/icons/Add';
3229
import RemoveIcon from '@material-ui/icons/Remove';
3330
import IconButton from '@material-ui/core/IconButton';
3431
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
35-
import packageTree from './../public/assets/v0.0.87/package_tree.json';
3632
import Logo from './logo.jsx';
3733

3834

@@ -43,7 +39,6 @@ class MenuBar extends Component {
4339
super( props )
4440
this.state = {
4541
activePkg: null,
46-
version: 'v0.0.87',
4742
filter: null,
4843
found: {}
4944
};
@@ -74,16 +69,16 @@ class MenuBar extends Component {
7469
}
7570

7671
renderItems( namespace, path, level ) {
77-
const keys = objectKeys( namespace );
72+
const keys = Object.keys( namespace );
7873
return keys.map( ( pkg ) => {
7974
const pkgPath =`${path}/${pkg}`;
8075
if ( pkg === '__namespace__' ) {
8176
return null;
8277
}
83-
if ( !isObject( namespace[ pkg ] ) ) {
78+
if ( typeof namespace[ pkg ] !== 'object' ) {
8479
// Case: Individual package
8580
if (
86-
this.state.filter && !contains( pkgPath, this.state.filter )
81+
this.state.filter && !pkgPath.includes( this.state.filter )
8782
) {
8883
return null;
8984
}
@@ -95,7 +90,7 @@ class MenuBar extends Component {
9590
className="side-menu-list-item"
9691
onClick={() => {
9792
this.handlePackageClick( pkg );
98-
const path = `/${this.state.version}/docs/api/${pkgPath}`;
93+
const path = `/${this.props.version}/docs/api/${pkgPath}`;
9994
this.props.onReadmeChange( path );
10095
}}
10196
style={{
@@ -121,7 +116,7 @@ class MenuBar extends Component {
121116
button
122117
onClick={() => {
123118
this.handleClick( pkgPath );
124-
const path = `/${this.state.version}/docs/api/${pkgPath}`;
119+
const path = `/${this.props.version}/docs/api/${pkgPath}`;
125120
this.props.onReadmeChange( path );
126121
}}
127122
className="side-menu-list-item-namespace"
@@ -150,12 +145,6 @@ class MenuBar extends Component {
150145
} )
151146
}
152147

153-
selectVersion = ( event ) => {
154-
this.setState({
155-
version: event.target.value
156-
});
157-
}
158-
159148
handleFilterChange = ( event ) => {
160149
const newFilter = event.target.value;
161150
this.setState({
@@ -171,8 +160,8 @@ class MenuBar extends Component {
171160
applyFilterChange = () => {
172161
if ( this.state.filter ) {
173162
const found = {};
174-
this.checkFilter( found, packageTree, '@stdlib', this.state.filter );
175-
const keys = objectKeys( found );
163+
this.checkFilter( found, this.props.packageTree, '@stdlib', this.state.filter );
164+
const keys = Object.keys( found );
176165
const newState = {};
177166
for ( let i = 0; i < keys.length; i++ ) {
178167
newState[ keys[ i ] ] = true;
@@ -182,7 +171,7 @@ class MenuBar extends Component {
182171
found
183172
});
184173
} else {
185-
const keys = objectKeys( this.state.found );
174+
const keys = Object.keys( this.state.found );
186175
const newState = {};
187176
for ( let i = 0; i < keys.length; i++ ) {
188177
newState[ keys[ i ] ] = false;
@@ -195,15 +184,15 @@ class MenuBar extends Component {
195184
}
196185

197186
checkFilter( state, docs, path, filter ) {
198-
const keys = objectKeys( docs );
187+
const keys = Object.keys( docs );
199188
let matched = false;
200189
for ( let i = 0; i < keys.length; i++ ) {
201190
const pkg = keys[ i ];
202-
if ( !isObject( docs[ pkg ] ) ) {
203-
if ( contains( pkg, filter ) ) {
191+
if ( typeof docs[ pkg ] !== 'object' ) {
192+
if ( pkg.includes( filter ) ) {
204193
matched = true;
205194
}
206-
} else if ( contains( pkg, filter ) ) {
195+
} else if ( pkg.includes( filter ) ) {
207196
matched = true;
208197
state[ path+'/'+pkg ] = true;
209198
} else {
@@ -247,7 +236,7 @@ class MenuBar extends Component {
247236
<ChevronRightIcon id="menu-close-icon" />
248237
</IconButton>
249238
</div>
250-
<select className="side-menu-version-select" id="lang" onChange={this.selectVersion} value={this.state.version}>
239+
<select className="side-menu-version-select" id="lang" onChange={this.props.onVersionChange} value={this.state.version}>
251240
<option value="v0.0.87">v0.0.87</option>
252241
</select>
253242
<input
@@ -258,7 +247,10 @@ class MenuBar extends Component {
258247
/>
259248
<div className="side-menu-list-wrapper" >
260249
<List disablePadding >
261-
{this.renderItems( packageTree, '@stdlib', 0 )}
250+
{ this.props.packageTree ?
251+
this.renderItems( this.props.packageTree, '@stdlib', 0 ) :
252+
null
253+
}
262254
</List>
263255
</div>
264256
</Drawer>

‎tools/docs/www/src/versions.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
[
2+
"v0.0.87"
3+
]

0 commit comments

Comments
 (0)