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 (10 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 ) );