2019-02-03 17:23:33 +07:00
|
|
|
/**
|
|
|
|
* @prettier
|
|
|
|
* @flow
|
|
|
|
*/
|
|
|
|
|
2019-03-28 05:39:06 +07:00
|
|
|
import React, { Component } from 'react';
|
2019-02-03 17:23:33 +07:00
|
|
|
import Grid from '@material-ui/core/Grid/index';
|
|
|
|
import Loading from '../../components/Loading';
|
|
|
|
import DetailContainer from '../../components/DetailContainer';
|
|
|
|
import DetailSidebar from '../../components/DetailSidebar';
|
2019-03-28 05:39:06 +07:00
|
|
|
import { callDetailPage } from '../../utils/calls';
|
|
|
|
import { getRouterPackageName } from '../../utils/package';
|
|
|
|
import NotFound from '../../components/NotFound';
|
2019-02-03 17:23:33 +07:00
|
|
|
|
|
|
|
export const DetailContext = React.createContext();
|
|
|
|
|
|
|
|
export const DetailContextProvider = DetailContext.Provider;
|
|
|
|
export const DetailContextConsumer = DetailContext.Consumer;
|
|
|
|
|
|
|
|
class VersionPage extends Component<any, any> {
|
|
|
|
constructor(props: any) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
readMe: '',
|
|
|
|
packageName: getRouterPackageName(props.match),
|
|
|
|
packageMeta: null,
|
|
|
|
isLoading: true,
|
|
|
|
notFound: false,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
async componentDidMount() {
|
|
|
|
await this.loadPackageInfo();
|
|
|
|
}
|
|
|
|
|
|
|
|
/* eslint no-unused-vars: 0 */
|
|
|
|
async componentDidUpdate(nextProps: any, prevState: any) {
|
2019-03-28 05:39:06 +07:00
|
|
|
const { packageName } = this.state;
|
2019-02-03 17:23:33 +07:00
|
|
|
if (packageName !== prevState.packageName) {
|
2019-03-28 05:39:06 +07:00
|
|
|
const { readMe, packageMeta } = await callDetailPage(packageName);
|
2019-02-03 17:23:33 +07:00
|
|
|
this.setState({
|
|
|
|
readMe,
|
|
|
|
packageMeta,
|
|
|
|
packageName,
|
|
|
|
notFound: false,
|
|
|
|
isLoading: false,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
static getDerivedStateFromProps(nextProps: any, prevState: any) {
|
2019-03-28 05:39:06 +07:00
|
|
|
const { match } = nextProps;
|
2019-02-03 17:23:33 +07:00
|
|
|
const packageName = getRouterPackageName(match);
|
|
|
|
|
|
|
|
if (packageName !== prevState.packageName) {
|
|
|
|
try {
|
|
|
|
return {
|
|
|
|
packageName,
|
|
|
|
isLoading: false,
|
|
|
|
};
|
|
|
|
} catch (err) {
|
|
|
|
return {
|
|
|
|
notFound: true,
|
|
|
|
isLoading: false,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
async loadPackageInfo() {
|
2019-03-28 05:39:06 +07:00
|
|
|
const { packageName } = this.state;
|
2019-02-03 17:23:33 +07:00
|
|
|
// FIXME: use utility
|
|
|
|
document.title = `Verdaccio - ${packageName}`;
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
readMe: '',
|
|
|
|
});
|
|
|
|
|
|
|
|
try {
|
2019-03-28 05:39:06 +07:00
|
|
|
const { readMe, packageMeta } = await callDetailPage(packageName);
|
2019-02-03 17:23:33 +07:00
|
|
|
this.setState({
|
|
|
|
readMe,
|
|
|
|
packageMeta,
|
|
|
|
packageName,
|
|
|
|
notFound: false,
|
|
|
|
isLoading: false,
|
|
|
|
});
|
|
|
|
} catch (err) {
|
|
|
|
this.setState({
|
|
|
|
notFound: true,
|
|
|
|
packageName,
|
|
|
|
isLoading: false,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
enableLoading = () => {
|
|
|
|
this.setState({
|
|
|
|
isLoading: true,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
2019-03-28 05:39:06 +07:00
|
|
|
const { isLoading, packageMeta, readMe, packageName } = this.state;
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-03-28 05:39:06 +07:00
|
|
|
if (isLoading) {
|
|
|
|
return <Loading />;
|
|
|
|
} else if (!packageMeta) {
|
|
|
|
return <NotFound />;
|
|
|
|
} else {
|
2019-02-03 17:23:33 +07:00
|
|
|
return (
|
2019-03-28 05:39:06 +07:00
|
|
|
<DetailContextProvider value={{ packageMeta, readMe, packageName, enableLoading: this.enableLoading }}>
|
2019-02-03 17:23:33 +07:00
|
|
|
<Grid className={'container content'} container={true} spacing={0}>
|
|
|
|
<Grid item={true} xs={8}>
|
|
|
|
{this.renderDetail()}
|
|
|
|
</Grid>
|
|
|
|
<Grid item={true} xs={4}>
|
|
|
|
{this.renderSidebar()}
|
|
|
|
</Grid>
|
|
|
|
</Grid>
|
|
|
|
</DetailContextProvider>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
renderDetail() {
|
|
|
|
return <DetailContainer />;
|
|
|
|
}
|
|
|
|
|
|
|
|
renderSidebar() {
|
|
|
|
return <DetailSidebar />;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default VersionPage;
|