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

Timestamp:

03/01/2017 06:08:54 PM (8 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/support/index.jsx (modified) (3 diffs)

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

@@ -1 @@
-import React from 'react';
+/**
+ * External dependencies.
+ */
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { identity } from 'lodash';
+import { localize } from 'i18n-calypso';
 
-export default React.createClass( {
-    displayName: 'SupportWidget',
-    resolutions: false,
+/**
+ * Internal dependencies.
+ */
+import { getPlugin } from 'state/selectors';
+
+export class SupportWidget extends Component {
+    resolutions: false;
+
+    static propTypes = {
+        plugin: PropTypes.object,
+        translate: PropTypes.func,
+    };
+
+    static defaultProps = {
+        plugin: {},
+        translate: identity,
+    };
 
     componentWillMount() {
-        this.resolutions = ( this.props.plugin.support_threads || 'buddypress' === this.props.plugin.slug || 'bbpress' === this.props.plugin.slug );
-    },
+        const { meta, slug } = this.props.plugin;
+        this.resolutions = ( meta.support_threads || 'buddypress' === slug || 'bbpress' === slug );
+    }
 
     componentDidUpdate() {
-        this.resolutions = this.resolutions || this.props.plugin.support_threads;
-    },
+        this.resolutions = this.resolutions || this.props.plugin.meta.support_threads;
+    }
 
     supportBar() {
-        const { support_threads: threads, support_threads_resolved: resolved } = this.props.plugin;
+        const { support_threads: threads, support_threads_resolved: resolved } = this.props.plugin.meta;
+
+        if ( ! this.resolutions ) {
+            return (
+                <p>{ this.props.translate( 'Got something to say? Need help?' ) }</p>
+            );
+        }
 
         return (
             <div>
-                <p className="aside">Issues resolved in last two months:</p>
+                <p className="aside">{ this.props.translate( 'Issues resolved in last two months:' ) }</p>
                 <p className="counter-container">
                     <span className="counter-back">
@@ -24 +51 @@
                     </span>
                     <span className="counter-count">
-                        { resolved } out of { threads }
+                        { this.props.translate( '%(resolved)s out of %(threads)s', { args: { resolved, threads } } ) }
                     </span>
                 </p>
             </div>
-        )
-    },
+        );
+    }
 
     getSupportUrl() {
-        let supportURL = `https://wordpress.org/support/plugin/${ this.props.plugin.slug }/`;
+        const { slug } = this.props.plugin;
+        let supportURL = `https://wordpress.org/support/plugin/${ slug }/`;
 
         /*
@@ -38 +66 @@
          * In the future we could open this up to all plugins that define a custom support URL.
          */
-        if ( 'buddypress' === this.props.plugin.slug ) {
+        if ( 'buddypress' === slug ) {
             supportURL = 'https://buddypress.org/support/';
-        } else if ( 'bbpress' === this.props.plugin.slug ) {
+        } else if ( 'bbpress' === slug ) {
             supportURL = 'https://bbpress.org/forums/';
         }
 
         return supportURL;
-    },
+    }
 
     render() {
         return (
             <div className="widget plugin-support">
-                <h4 className="widget-title">Support</h4>
-                { this.resolutions ?
-                    this.supportBar() :
-                    <p>Got something to say? Need help?</p>
-                }
+                <h4 className="widget-title">{ this.props.translate( 'Support' ) }</h4>
+
+                { this.supportBar() }
+
                 <p>
-                    <a className="button" href={ this.getSupportUrl() }>View support forum</a>
+                    <a className="button" href={ this.getSupportUrl() }>
+                        { this.props.translate( 'View support forum' ) }
+                    </a>
                 </p>
             </div>
-        )
+        );
     }
-} );
+}
+
+export default connect(
+    ( state ) => ( {
+        plugin: getPlugin( state ),
+    } ),
+)( localize( SupportWidget ) );