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

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

@@ -1 @@
-import React from 'react';
-import rangeRight from 'lodash/rangeRight';
+/**
+ * External dependencies.
+ */
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { identity } from 'lodash';
+import { localize } from 'i18n-calypso';
+import { rangeRight } from 'lodash';
 
+/**
+ * Internal dependencies.
+ */
+import { getPlugin } from 'state/selectors';
 import PluginRatings from 'components/plugin-ratings';
 
-export default React.createClass( {
-    displayName: 'RatingsWidget',
+export class RatingsWidget extends Component {
+    static propTypes = {
+        plugin: PropTypes.object,
+        translate: PropTypes.func,
+    };
+
+    static defaultProps = {
+        plugin: {},
+        translate: identity,
+    };
 
     ratingsBreakdown() {
+        const { plugin, translate } = this.props;
+
+        if ( ! plugin.ratings.length ) {
+            return (
+                <div className="rating"><p>{ translate( 'This plugin has not been rated yet.' ) }</p></div>
+            );
+        }
+
         return (
             <div>
-                <a className="reviews-link" href={ `https://wordpress.org/support/plugin/${ this.props.plugin.slug }/reviews/` }>See all</a>
+                <a className="reviews-link" href={ `https://wordpress.org/support/plugin/${ plugin.slug }/reviews/` }>
+                    { translate( 'See all' ) }
+                </a>
 
-                <PluginRatings rating={ this.props.plugin.rating } ratingCount={ this.props.plugin.num_ratings } />
+                <PluginRatings rating={ plugin.meta.rating } ratingCount={ plugin.ratings.length } />
 
                 <ul className="ratings-list">
-                    { rangeRight( 1, 6 ).map( stars => {
-                        const barWidth = this.props.plugin.num_ratings ? 100 * this.props.plugin.ratings[ stars ] / this.props.plugin.num_ratings : 0;
+                    { rangeRight( 1, 6 ).map( ( stars ) => {
+                        const barWidth = plugin.ratings.length ? 100 * plugin.ratings[ stars ] / plugin.ratings.length : 0;
+                        const link = `https://wordpress.org/support/plugin/${ plugin.slug }/reviews/?filter=${ stars }`;
 
                         return (
-                            <li className="counter-container">
-                                <a href={ `https://wordpress.org/support/plugin/${ this.props.plugin.slug }/reviews/?filter=${ stars }` }>
-                                    <span className="counter-label">{ stars > 1 ? `${ stars } stars` : `${ stars } star` }</span>
+                            <li key={ stars } className="counter-container">
+                                <a href={ link }>
+                                    <span className="counter-label">
+                                        { translate( '1 star', '%(stars)s stars', { count: stars, args: { stars } } ) }
+                                    </span>
                                     <span className="counter-back">
                                         <span className="counter-bar" style={ { width: `${ barWidth }%` } } />
                                     </span>
-                                    <span className="counter-count">{ this.props.plugin.ratings[ stars ] }</span>
+                                    <span className="counter-count">{ plugin.ratings[ stars ] }</span>
                                 </a>
                             </li>
@@ -33 +64 @@
             </div>
         );
-    },
+    }
 
     render() {
+        const { plugin, translate } = this.props;
+
         return (
             <div className="widget plugin-ratings">
-                <h4 className="widget-title">Ratings</h4>
-                <meta itemProp="ratingCount" content={ this.props.plugin.num_ratings } />
-                { this.props.plugin.num_ratings ?
-                    this.ratingsBreakdown() :
-                    <div className="rating"><p>This plugin has not been rated yet.</p></div>
-                }
+                <h4 className="widget-title">{ translate( 'Ratings' ) }</h4>
+                <meta itemProp="ratingCount" content={ plugin.ratings.length } />
+
+                { this.ratingsBreakdown() }
+
                 <div className="user-rating">
-                    <a className="button button-secondary" href={ `https://wordpress.org/support/plugin/${ this.props.plugin.slug }/reviews/#new-post` }>Add my review</a>
+                    <a
+                        className="button button-secondary"
+                        href={ `https://wordpress.org/support/plugin/${ plugin.slug }/reviews/#new-post` }
+                    >
+                        { translate( 'Add my review' ) }
+                    </a>
                 </div>
             </div>
-        )
+        );
     }
-} );
+}
+
+export default connect(
+    ( state ) => ( {
+        plugin: getPlugin( state ),
+    } ),
+)( localize( RatingsWidget ) );