initial commit

src/pages/detail/index.jsx

@@ -0,0 +1,87 @@
+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>
+    );
+  }
+}