Changeset 5024 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/plugin.jsx

Timestamp:

03/01/2017 06:08:54 PM (7 years ago)

Author:

obenland

Message:

Plugin Directory: Update React client with latest changes.

This is largely a cleanup commit with some WIP around switching to node-wpapi.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/plugin.jsx (modified) (3 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/plugin.jsx

@@ -1 @@
-import React from 'react';
+/**
+ * External dependencies.
+ */
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { identity } from 'lodash';
+import { localize } from 'i18n-calypso';
+import { values } from 'lodash';
 
+/**
+ * Internal dependencies.
+ */
 import Developers from './sections/developers';
 import DonateWidget from 'components/widget-area/widgets/donate';
@@ -6 +16 @@
 import FAQ from './sections/faq';
 import FavoriteButton from './favorite-button';
+import { getPlugin } from 'state/selectors';
 import MetaWidget from 'components/widget-area/widgets/meta/index';
 import PluginBanner from './plugin-banner';
@@ -15 +26 @@
 import SupportWidget from 'components/widget-area/widgets/support/index';
 
-export default React.createClass( {
-    displayName: 'Plugin',
-
-    render() {
-        if ( ! this.props.plugin ) {
-            return (
-                <article className="plugin type-plugin">
-                    <header className="entry-header">
-                        <h1 className="entry-title"> </h1>
-                    </header>
-                    <div className="entry-content">
-                        <section>
-                            <div className="container"> LOADING </div>
-                        </section>
-                    </div>
-                </article>
-            )
-        }
-
+export const Plugin = ( { plugin, translate } ) => {
+    if ( ! plugin ) {
         return (
             <article className="plugin type-plugin">
-                <PluginBanner plugin={ this.props.plugin } />
-                <header className="plugin-header">
-                    <PluginIcon plugin={ this.props.plugin } />
-                    <div className="plugin-actions">
-                        <FavoriteButton plugin={ this.props.plugin } />
-                        <DownloadButton plugin={ this.props.plugin } />
-                    </div>
-                    <h1 className="plugin-title">{ this.props.plugin.name }</h1>
-                    <span className="byline">By <span className="author vcard" dangerouslySetInnerHTML={ { __html: this.props.plugin.author } } /></span>
+                <header className="entry-header">
+                    <h1 className="entry-title"> </h1>
                 </header>
                 <div className="entry-content">
-                    <Section slug="description" title="Description" content={ this.props.plugin.sections.description } />
-                    <Screenshots screenshots={ this.props.plugin.screenshots } />
-                    <FAQ content={ this.props.plugin.sections.faq } />
-                    <Reviews slug={ this.props.plugin.slug } content={ this.props.plugin.sections.reviews } numRatings={ this.props.plugin.num_ratings } />
-                    <Section slug="changelog" title="Changelog" content={ this.props.plugin.sections.changelog } />
-                    <Developers slug={ this.props.plugin.slug } contributors={ this.props.plugin.contributors } />
-                </div>
-                <div className="entry-meta">
-                    <MetaWidget plugin={ this.props.plugin } />
-                    <RatingsWidget plugin={ this.props.plugin } />
-                    <SupportWidget plugin={ this.props.plugin } />
-                    <DonateWidget plugin={ this.props.plugin } />
+                    <section>
+                        <div className="container"> LOADING </div>
+                    </section>
                 </div>
             </article>
-        )
+        );
     }
-} );
+
+    return (
+        <article className="plugin type-plugin">
+            <PluginBanner />
+            <header className="plugin-header">
+                <PluginIcon />
+                <div className="plugin-actions">
+                    <FavoriteButton plugin={ plugin } />
+                    <DownloadButton />
+                </div>
+                <h1 className="plugin-title" dangerouslySetInnerHTML={ { __html: plugin.title.rendered } } />
+                <span className="byline">
+                    { translate( 'By {{span/}}', { components: {
+                        span: <span className="author vcard" dangerouslySetInnerHTML={ { __html: plugin.author } } />,
+                    } } ) }
+                </span>
+            </header>
+            <div className="entry-content">
+                <Section slug="description" title="Description" content={ plugin.sections.description } />
+                <Screenshots screenshots={ values( plugin.screenshots ) } />
+                <FAQ content={ plugin.sections.faq } />
+                <Reviews
+                    slug={ plugin.slug }
+                    content={ plugin.sections.reviews }
+                    numRatings={ plugin.ratings.length } />
+                <Section slug="changelog" title="Changelog" content={ plugin.sections.changelog } />
+                <Developers />
+            </div>
+            <div className="entry-meta">
+                <MetaWidget />
+                <RatingsWidget />
+                <SupportWidget />
+                <DonateWidget />
+            </div>
+        </article>
+    );
+};
+
+Plugin.propTypes = {
+    plugin: PropTypes.object,
+    translate: PropTypes.func,
+};
+
+Plugin.defaultProps = {
+    plugin: {},
+    translate: identity,
+};
+
+export default connect(
+    ( state ) => ( {
+        plugin: getPlugin( state ),
+    } ),
+)( localize( Plugin ) );