verdaccio-ui/src/components/Dependencies/Dependencies.tsx

import React, { Component, Fragment, ReactElement } from 'react';
import { withRouter } from 'react-router-dom';
import CardContent from '@material-ui/core/CardContent';

import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/version/Version';

import { CardWrap, Heading, Tags, Tag } from './styles';
import NoItems from '../NoItems';

class DepDetail extends Component<any, any> {
  constructor(props: any) {
    super(props);
    const { name, version } = this.props;

    this.state = {
      name,
      version,
    };
  }

  public render(): ReactElement<HTMLElement> {
    const { name, version } = this.state;
    const tagText = `${name}@${version}`;
    return <Tag className={'dep-tag'} clickable={true} component={'div'} label={tagText} onClick={this.handleOnClick} />;
  }

  private handleOnClick = () => {
    const { name } = this.state;
    const { onLoading, history } = this.props;

    onLoading();
    history.push(`/-/web/detail/${name}`);
  };
}

const WrapperDependencyDetail = withRouter(DepDetail);

class DependencyBlock extends Component<any, any> {
  public render(): ReactElement<HTMLElement> {
    const { dependencies, title } = this.props;
    const deps = Object.entries(dependencies);

    return (
      <DetailContextConsumer>
        {({ enableLoading }: any) => {
          return (
            <CardWrap>
              <CardContent>
                <Heading variant="subheading">{`${title} (${deps.length})`}</Heading>
                <Tags>{this.renderTags(deps, enableLoading)}</Tags>
              </CardContent>
            </CardWrap>
          );
        }}
      </DetailContextConsumer>
    );
  }

  private renderTags = (deps: any, enableLoading: any) =>
    deps.map(dep => {
      const [name, version] = dep;

      return <WrapperDependencyDetail key={name} name={name} onLoading={enableLoading} version={version} />;
    });
}

class Dependencies extends Component<any, any> {
  public state = {
    tabPosition: 0,
  };

  public render(): ReactElement<HTMLElement> {
    return (
      <DetailContextConsumer>
        {packageMeta => {
          return this.renderDependencies(packageMeta as VersionPageConsumerProps);
        }}
      </DetailContextConsumer>
    );
  }

  private checkDependencyLength(dependency: Record<string, any> = {}): boolean {
    return Object.keys(dependency).length > 0;
  }

  private renderDependencies({ packageMeta }): ReactElement<HTMLElement> {
    const { latest } = packageMeta;
    const { dependencies, devDependencies, peerDependencies, name } = latest;

    const dependencyMap = { dependencies, devDependencies, peerDependencies };

    const dependencyList = Object.keys(dependencyMap).reduce((result, value, key) => {
      const selectedDepndency = dependencyMap[value];
      if (selectedDepndency && this.checkDependencyLength(selectedDepndency)) {
        // @ts-ignore
        result.push(<DependencyBlock className="dependency-block" dependencies={selectedDepndency} key={key} title={value} />);
      }
      return result;
    }, []);

    if (dependencyList.length) {
      return <Fragment>{dependencyList}</Fragment>;
    }
    return <NoItems className="no-dependencies" text={`${name} has no dependencies.`} />;
  }
}

export default Dependencies;