Changeset 5024 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/archive/browse/browse.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/archive/browse/browse.jsx (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/archive/browse/browse.jsx

@@ -1 @@
-import React from 'react';
+/**
+ * External dependencies.
+ */
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { identity } from 'lodash';
+import { localize } from 'i18n-calypso';
 
+/**
+ * Internal dependencies.
+ */
 import ContentNone from 'components/content-none';
+import { getSection, getSectionPlugins } from 'state/selectors';
+import Pagination from 'components/pagination';
 import PluginCard from 'components/plugin-card';
 
-export default React.createClass( {
-    displayName: 'ArchiveBrowse',
+export const ArchiveBrowse = ( { plugins, section, translate } ) => {
+    if ( plugins && plugins.length ) {
+        return (
+            <div>
+                <header className="page-header">
+                    <h1 className="page-title">
+                        { translate( 'Browse: {{strong}}%(name)s{{/strong}}', {
+                            args: { name: section.name },
+                            components: { strong: <strong /> },
+                        } ) }
+                    </h1>
+                    { section.description &&
+                        <div className="taxonomy-description">{ section.description }</div>
+                    }
+                </header>
+                { plugins.map( ( plugin ) => <PluginCard key={ plugin.id } plugin={ plugin } /> ) }
+                <Pagination current={ 12 } total={ 30 } />
+            </div>
+        );
+    }
 
-    render() {
-        if ( this.props.plugins && this.props.plugins.length ) {
-            return (
-                <div>
-                    <header className="page-header">
-                        <h1 className="page-title">Browse: <strong>{ this.props.params.type }</strong></h1>
-                        <div className="taxonomy-description"></div>
-                    </header>
-                    { this.props.plugins.map( slug =>
-                        <PluginCard key={ slug } slug={ slug } />
-                    ) }
-                </div>
-            )
-        }
+    return <ContentNone />;
+};
 
-        return <ContentNone { ...this.props } />;
-    }
-} );
+ArchiveBrowse.propTypes = {
+    plugins: PropTypes.arrayOf( PropTypes.object ),
+    section: PropTypes.object,
+    translate: PropTypes.func,
+    type: PropTypes.string.isRequired,
+};
+
+ArchiveBrowse.defaultProps = {
+    plugins: [],
+    section: {},
+    translate: identity,
+};
+
+export default connect(
+    ( state, { type } ) => ( {
+        plugins: getSectionPlugins( state, type ),
+        section: getSection( state, type ),
+    } ),
+)( localize( ArchiveBrowse ) );