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

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/search/search.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 PluginCard from 'components/plugin-card';
+import { getSearchResults } from 'state/selectors';
 
-export default React.createClass( {
-    displayName: 'Search',
+export const Search = ( { params, plugins, translate } ) => {
+    if ( ! plugins ) {
+        return <div>{ translate( 'Loading&hellip;' ) }</div>;
+    }
 
-    render() {
-        if ( ! this.props.plugins ) {
-            return <div>{ 'Loading...' }</div>;
-        }
+    if ( 0 === plugins.length ) {
+        return <ContentNone />;
+    }
 
-        if ( 0 === this.props.plugins.length ) {
-            return <ContentNone { ...this.props } />;
-        }
+    return (
+        <div>
+            <header className="page-header">
+                <h1 className="page-title">
+                    { translate( 'Search results for: {{strong}}%(search)s{{/strong}}', {
+                        args: { search: params.search },
+                        components: { strong: <strong /> },
+                    } ) }
+                </h1>
+                <div className="taxonomy-description" />
+            </header>
+            { plugins.map( ( slug ) => <PluginCard key={ slug } slug={ slug } /> ) }
+        </div>
+    );
+};
 
-        return (
-            <div>
-                <header className="page-header">
-                    <h1 className="page-title">Search results for: <strong>{ this.props.params.searchTerm }</strong></h1>
-                    <div className="taxonomy-description"></div>
-                </header>
-                { this.props.plugins.map( slug =>
-                    <PluginCard key={ slug } slug={ slug } />
-                ) }
-            </div>
-        );
-    }
-} );
+Search.propTypes = {
+    params: PropTypes.object,
+    plugins: PropTypes.arrayOf( PropTypes.string ),
+    translate: PropTypes.func,
+};
+
+Search.defaultProps = {
+    params: {},
+    plugins: [],
+    translate: identity,
+};
+
+export default connect(
+    ( state ) => ( {
+        plugins: getSearchResults( state ),
+    } ),
+)( localize( Search ) );