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

Timestamp:

03/01/2017 06:08:54 PM (9 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/front-page/plugin-section/plugin-section.jsx (modified) (1 diff)

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

@@ -1 @@
-import React from 'react';
+/**
+ * External dependencies.
+ */
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { identity } from 'lodash';
 import { Link } from 'react-router';
+import { localize } from 'i18n-calypso';
 
 /**
  * Internal dependencies.
  */
+import { getSection, getSectionPlugins } from 'state/selectors';
 import PluginCard from 'components/plugin-card';
 
-export default React.createClass( {
-        displayName: 'PluginSection',
-
-        render() {
-                if ( ! this.props.plugins ) {
-                        return <div />;
-                }
-
+/**
+ *
+ * @param {Array}       plugins   Plugins
+ * @param {Object}      section   Section
+ * @param {Function}    translate Translation function
+ * @return {(XML|null)}           Component or null.
+ * @constructor
+ */
+export const PluginSection = ( { plugins, section, translate } ) => {
+        if ( plugins ) {
                 return (
                         <section className="plugin-section">
                                 <header className="section-header">
-                                        <h2 className="section-title">{ this.props.section.title }</h2>
-                                        <Link className="section-link" to={ this.props.section.path }>See all</Link>
+                                        <h2 className="section-title">{ section.name }</h2>
+                                        <Link className="section-link" to={ `/browse/${ section.slug }/` }>{ translate( 'See all' ) }</Link>
                                 </header>
-                                { this.props.plugins.map( slug =>
-                                        <PluginCard key={ slug } slug={ slug } />
-                                ) }
+                                { plugins.map( ( plugin ) => <PluginCard key={ plugin.id } plugin={ plugin } /> ) }
                         </section>
-                )
+                );
         }
-} );
+
+        return null;
+};
+
+PluginSection.propTypes = {
+        plugins: PropTypes.array,
+        section: PropTypes.object,
+        translate: PropTypes.func,
+};
+
+PluginSection.defaultProps = {
+        plugins: [],
+        section: {},
+        translate: identity,
+};
+
+export default connect(
+        ( state, { type } ) => ( {
+                plugins: getSectionPlugins( state, type ).slice( 0, 4 ),
+                section: getSection( state, type ),
+        } ),
+)( localize( PluginSection ) );