chore: add new detail page under development

update react@16.7.0
update react-dom@16.7.0

package.json

@@ -130,9 +130,9 @@
     "prettier": "1.14.3",
     "prop-types": "15.6.2",
     "puppeteer": "1.8.0",
-    "react": "16.4.2",
+    "react": "16.7.0",
     "react-autosuggest": "9.4.2",
-    "react-dom": "16.4.2",
+    "react-dom": "16.7.0",
     "react-emotion": "9.2.12",
     "react-hot-loader": "4.2.0",
     "react-router": "4.3.1",

src/webui/pages/version/index.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import API from '../../utils/api';
+import Loading from '../../components/Loading';
+
+class VersionPage extends Component<any, any> {
+
+  state = {
+    readMe: '',
+    packageMeta: null,
+    isLoading: true,
+    notFound: false,
+  };
+
+  async componentDidMount() {
+    await this.loadPackageInfo();
+  }
+
+  async loadPackageInfo() {
+    const { match } = this.props;
+    const packageName = match.params.package;
+
+    this.setState({
+      readMe: '',
+    });
+
+    try {
+      const readMe = await API.request(`package/readme/${packageName}`, 'GET');
+      const packageMeta = await API.request(`sidebar/${packageName}`, 'GET');
+      this.setState({
+        readMe,
+        packageMeta,
+        notFound: false,
+        isLoading: false,
+      });
+    } catch (err) {
+      this.setState({
+        notFound: true,
+        isLoading: false,
+      });
+    }
+  }
+
+  render() {
+    const {isLoading} = this.state;
+
+    return (
+      <div>{isLoading && <Loading />}</div>
+    );
+  }
+}
+
+export default VersionPage;

src/webui/pages/version/styles.js

@@ -0,0 +1,17 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import styled from 'react-emotion';
+import DialogTitle from '@material-ui/core/DialogTitle/index';
+import colors from '../../utils/styles/colors';
+import { fontSize } from '../../utils/styles/sizes';
+
+export const Title = styled(DialogTitle)`
+  && {
+    background-color: ${colors.primary};
+    color: ${colors.white};
+    font-size: ${fontSize.lg};
+  }
+`;

src/webui/router.js

@@ -9,6 +9,7 @@ import { HashRouter as Router, Route, Switch } from 'react-router-dom';
 import { asyncComponent } from './utils/asyncComponent';
 
 const DetailPackage = asyncComponent(() => import('./pages/detail'));
+const VersionPackage = asyncComponent(() => import('./pages/version'));
 const HomePage = asyncComponent(() => import('./pages/home'));
 
 interface IProps {
@@ -26,6 +27,8 @@ class RouterApp extends Component<IProps, IState> {
           <Route exact={true} path={'/'} render={this.renderHomePage} />
           <Route exact={true} path={'/detail/@:scope/:package'} render={this.renderDetailPage} />
           <Route exact={true} path={'/detail/:package'} render={this.renderDetailPage} />
+          <Route exact={true} path={'/version/@:scope/:package'} render={this.renderVersionPage} />
+          <Route exact={true} path={'/version/:package'} render={this.renderVersionPage} />
         </Switch>
       </Router>
     );
@@ -42,6 +45,12 @@ class RouterApp extends Component<IProps, IState> {
 
     return <DetailPackage {...routerProps} isUserLoggedIn={isUserLoggedIn} />;
   };
+
+  renderVersionPage = (routerProps: any) => {
+    const { isUserLoggedIn } = this.props;
+
+    return <VersionPackage {...routerProps} isUserLoggedIn={isUserLoggedIn} />;
+  };
 }
 
 export default RouterApp;

yarn.lock

@@ -5048,7 +5048,7 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs@^0.8.1, fbjs@^0.8.16:
+fbjs@^0.8.1:
   version "0.8.17"
   resolved "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
@@ -10568,15 +10568,15 @@ react-autowhatever@^10.1.2:
     react-themeable "^1.1.0"
     section-iterator "^2.0.0"
 
-react-dom@16.4.2:
+react-dom@16.7.0:
-  version "16.4.2"
+  version "16.7.0"
-  resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.4.2.tgz#4afed569689f2c561d2b8da0b819669c38a0bda4"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.7.0.tgz#a17b2a7ca89ee7390bc1ed5eb81783c7461748b8"
-  integrity sha512-Usl73nQqzvmJN+89r97zmeUpQDKDlh58eX6Hbs/ERdDHzeBzWy+ENk7fsGQ+5KxArV1iOFPT46/VneklK9zoWw==
+  integrity sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==
   dependencies:
-    fbjs "^0.8.16"
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.0"
+    prop-types "^15.6.2"
+    scheduler "^0.12.0"
 
 react-emotion@9.2.12:
   version "9.2.12"
@@ -10680,15 +10680,15 @@ react-transition-group@^2.2.1:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react@16.4.2:
+react@16.7.0:
-  version "16.4.2"
+  version "16.7.0"
-  resolved "https://registry.npmjs.org/react/-/react-16.4.2.tgz#2cd90154e3a9d9dd8da2991149fdca3c260e129f"
+  resolved "https://registry.npmjs.org/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381"
-  integrity sha512-dMv7YrbxO4y2aqnvA7f/ik9ibeLSHQJTI6TrYAenPSaQ6OXfb+Oti+oJiy8WBxgRzlKatYqtCjphTgDSCEiWFg==
+  integrity sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==
   dependencies:
-    fbjs "^0.8.16"
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.0"
+    prop-types "^15.6.2"
+    scheduler "^0.12.0"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"