Changeset 5024 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/widget-area/widgets/meta/index.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/widget-area/widgets/meta/index.jsx (modified) (2 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/widget-area/widgets/meta/index.jsx

@@ -1 @@
-import React from 'react';
+/**
+ * External dependencies.
+ */
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router';
+import { localize } from 'i18n-calypso';
+import { identity } from 'lodash';
 
-export default React.createClass( {
-    displayName: 'MetaWidget',
+/**
+ * Internal dependencies.
+ */
+import { getPlugin } from 'state/selectors';
 
+export class MetaWidget extends Component {
+    static propTypes = {
+        moment: PropTypes.func,
+        numberFormat: PropTypes.func,
+        plugin: PropTypes.object,
+        translate: PropTypes.func,
+    };
+
+    static defaultProps = {
+        moment: identity,
+        numberFormat: identity,
+        plugin: {},
+        translate: identity,
+    };
+
+    /**
+     * Returns a string representing the number of active installs for a plugin.
+     *
+     * @return {String} Active installs.
+     */
+    activeInstalls() {
+        const { numberFormat, translate, plugin } = this.props;
+        let text;
+
+        if ( plugin.meta.active_installs <= 10 ) {
+            text = translate( 'Less than 10' );
+        } else if ( plugin.meta.active_installs >= 1000000 ) {
+            text = translate( '1+ million' );
+        } else {
+            text = numberFormat( plugin.meta.active_installs ) + '+';
+        }
+
+        return text;
+    }
+
+    /**
+     * Returns markup to display tags, if there are any.
+     *
+     * @return {XML} Tags markup.
+     */
     renderTags() {
-        if ( this.props.plugin.tags.length ) {
-            return ( <li>Categories: <div className="tags">{ this.props.plugin.tags.map( tag =>
-                <a key={ tag } href={ `https://wordpress.org/plugins-wp/category/${ tag }/` } rel="tag">{ tag }</a>
-            ) }</div></li> );
+        const { plugin_tags: tags } = this.props.plugin;
+
+        if ( tags && tags.length ) {
+            const tagsList = (
+                <div className="tags">
+                    { tags.map( ( tag ) => <Link key={ tag } to={ `tags/${ tag }/` } rel="tag">{ tag }</Link> ) }
+                </div>
+            );
+
+            return (
+                <li>
+                    { this.props.translate( 'Tag: {{tagsList/}}', 'Tags: {{tagsList/}}', {
+                        count: tags.length,
+                        components: { tagsList },
+                    } ) }
+                </li>
+            );
         }
-    },
+    }
 
     render() {
+        const { moment, plugin, translate } = this.props;
 
         return (
             <div className="widget plugin-meta">
-                <h3 className="screen-reader-text">Meta</h3>
+                <h3 className="screen-reader-text">{ translate( 'Meta' ) }</h3>
                 <link itemProp="applicationCategory" href="http://schema.org/OtherApplication" />
                 <span itemProp="offers" itemScope itemType="http://schema.org/Offer">
@@ -27 +90 @@
 
                 <ul>
-                    <li>Version: <strong>{ this.props.plugin.version }</strong></li>
-                    <li>Last updated: <strong><span itemProp="dateModified" content={ this.props.plugin.last_updated }>{ this.props.plugin.last_updated }</span> ago</strong></li>
-                    <li>Active installs: <strong>{ this.props.plugin.active_installs }</strong></li>
-                    <li>Tested up to: <strong>{ this.props.plugin.tested }</strong></li>
+                    <li>
+                        { translate( 'Version: {{strong}}%(version)s{{/strong}}', {
+                            args: { version: plugin.meta.version },
+                            components: { strong: <strong /> },
+                        } ) }
+                    </li>
+                    <li>
+                        { translate( 'Last updated: {{strong}}%(updated)s{{/strong}}', {
+                            args: { updated: moment( plugin.modified_gmt ).fromNow() },
+                            components: { strong: <strong itemProp="dateModified" content={ plugin.modified_gmt } /> },
+                        } ) }
+                    </li>
+                    <li>
+                        { translate( 'Active installs: {{strong}}%(installs)s{{/strong}}', {
+                            args: { installs: this.activeInstalls() },
+                            components: { strong: <strong /> },
+                        } ) }
+                    </li>
+                    <li>
+                        { translate( 'Tested up to: {{strong}}%(tested)s{{/strong}}', {
+                            args: { tested: plugin.meta.tested },
+                            components: { strong: <strong /> },
+                        } ) }
+                    </li>
                     { this.renderTags() }
                 </ul>
             </div>
-        )
+        );
     }
-} );
+}
+
+export default connect(
+    ( state ) => ( {
+        plugin: getPlugin( state ),
+    } ),
+)( localize( MetaWidget ) );