sombochea/verdaccio-ui
1
0
Fork 1
mirror of https://github.com/SomboChea/ui synced 2026-01-21 10:36:10 +07:00
Code Issues Releases Wiki Activity

chore: sync with 4.x webui

Browse Source
This commit is contained in:
Juan Picado @jotadeveloper
2019-03-27 23:39:06 +01:00
parent e2d478d65b
commit 133a5f0171
88 changed files with 1302 additions and 1656 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/pages/detail/detail.scss
View File

@@ -1,25 +0,0 @@
@import '../../styles/variables';
@import '../../styles/mixins';
.twoColumn {
@include container-size;
display: flex;
> div {
&:first-child {
flex-shrink: 1;
min-width: 300px;
width: 100%;
}
}
> aside {
&:last-child {
margin-left: auto;
padding-left: 15px;
flex-shrink: 0;
width: 285px;
}
}
}

87
src/pages/detail/index.jsx
View File

@@ -1,87 +0,0 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import isEmpty from 'lodash/isEmpty';
import PackageDetail from '../../components/PackageDetail';
import NotFound from '../../components/NotFound';
import Spinner from '../../components/Spinner';
import API from '../../utils/api';
import classes from './detail.scss';
import PackageSidebar from '../../components/PackageSidebar/index';
export default class Detail extends Component {
static propTypes = {
match: PropTypes.object,
isUserLoggedIn: PropTypes.bool,
};
state = {
readMe: '',
notFound: false,
};
getPackageName(props = this.props) {
const params = props.match.params;
return `${(params.scope && '@' + params.scope + '/') || ''}${
params.package
}`;
}
get packageName() {
return this.getPackageName();
}
async componentDidMount() {
await this.loadPackageInfo(this.packageName);
}
componentDidUpdate(prevProps) {
const { isUserLoggedIn, match } = this.props;
const condition1 = prevProps.isUserLoggedIn !== isUserLoggedIn;
const condition2 =
prevProps.match.params.package !== match.params.package;
if (condition1 || condition2) {
const packageName = this.getPackageName(this.props);
this.loadPackageInfo(packageName);
}
}
async loadPackageInfo(packageName) {
this.setState({
readMe: '',
});
try {
const resp = await API.request(`package/readme/${packageName}`, 'GET');
this.setState({
readMe: resp,
notFound: false,
});
} catch (err) {
this.setState({
notFound: true,
});
}
}
render() {
const { notFound, readMe } = this.state;
if (notFound) {
return (
<div className={'container content'}>
<NotFound pkg={this.packageName} />
</div>
);
} else if (isEmpty(readMe)) {
return <Spinner centered={true} />;
}
return (
<div className={`container content ${classes.twoColumn}`}>
<PackageDetail packageName={this.packageName} readMe={readMe} />
<PackageSidebar packageName={this.packageName} />
</div>
);
}
}

8
src/pages/home/index.js
View File

@@ -1,4 +1,4 @@
import React, {Component} from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import PackageList from '../../components/PackageList';
@@ -10,10 +10,10 @@ class Home extends Component {
};
render() {
const {packages} = this.props;
const { packages } = this.props;
return (
<div className={'container content'}>
<PackageList packages={packages} />
<div className={"container content"}>
<PackageList packages={packages} />
</div>
);
}

29
src/pages/version/index.js
View File

@@ -3,13 +3,14 @@
* @flow
*/
import React, {Component} from 'react';
import React, { Component } from 'react';
import Grid from '@material-ui/core/Grid/index';
import Loading from '../../components/Loading';
import DetailContainer from '../../components/DetailContainer';
import DetailSidebar from '../../components/DetailSidebar';
import {callDetailPage} from '../../utils/calls';
import {getRouterPackageName} from '../../utils/package';
import { callDetailPage } from '../../utils/calls';
import { getRouterPackageName } from '../../utils/package';
import NotFound from '../../components/NotFound';
export const DetailContext = React.createContext();
@@ -35,9 +36,9 @@ class VersionPage extends Component<any, any> {
/* eslint no-unused-vars: 0 */
async componentDidUpdate(nextProps: any, prevState: any) {
const {packageName} = this.state;
const { packageName } = this.state;
if (packageName !== prevState.packageName) {
const {readMe, packageMeta} = await callDetailPage(packageName);
const { readMe, packageMeta } = await callDetailPage(packageName);
this.setState({
readMe,
packageMeta,
@@ -49,7 +50,7 @@ class VersionPage extends Component<any, any> {
}
static getDerivedStateFromProps(nextProps: any, prevState: any) {
const {match} = nextProps;
const { match } = nextProps;
const packageName = getRouterPackageName(match);
if (packageName !== prevState.packageName) {
@@ -70,7 +71,7 @@ class VersionPage extends Component<any, any> {
}
async loadPackageInfo() {
const {packageName} = this.state;
const { packageName } = this.state;
// FIXME: use utility
document.title = `Verdaccio - ${packageName}`;
@@ -79,7 +80,7 @@ class VersionPage extends Component<any, any> {
});
try {
const {readMe, packageMeta} = await callDetailPage(packageName);
const { readMe, packageMeta } = await callDetailPage(packageName);
this.setState({
readMe,
packageMeta,
@@ -103,11 +104,15 @@ class VersionPage extends Component<any, any> {
};
render() {
const {isLoading, packageMeta, readMe, packageName} = this.state;
const { isLoading, packageMeta, readMe, packageName } = this.state;
if (isLoading === false) {
if (isLoading) {
return <Loading />;
} else if (!packageMeta) {
return <NotFound />;
} else {
return (
<DetailContextProvider value={{packageMeta, readMe, packageName, enableLoading: this.enableLoading}}>
<DetailContextProvider value={{ packageMeta, readMe, packageName, enableLoading: this.enableLoading }}>
<Grid className={'container content'} container={true} spacing={0}>
<Grid item={true} xs={8}>
{this.renderDetail()}
@@ -118,8 +123,6 @@ class VersionPage extends Component<any, any> {
</Grid>
</DetailContextProvider>
);
} else {
return <Loading />;
}
}