Changeset 4467 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/favorite-button/button.jsx

Timestamp:

12/04/2016 05:14:43 PM (8 years ago)

Author:

obenland

Message:

Plugin Directory: Provide focus styles and context for favorite button.

Fixes #2294.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/favorite-button/button.jsx (modified) (5 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/favorite-button/button.jsx

@@ -1 +1 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import includes from 'lodash/includes';
 
-export default React.createClass( {
+const FavoriteButton = React.createClass( {
     displayName: 'FavoriteButton',
 
-    getInitialState: function() {
-        return {
-            favorite: this.props.initialFavorite
-        };
-    },
-
     toggleFavorite( event ) {
-        const component = this,
-            $button = jQuery( event.target );
+        const $button = jQuery( event.target );
 
         this.props.toggleFavorite( event );
@@ -18 +13 @@
         $button.addClass( 'is-animating' ).one( 'animationend', function() {
             $button.toggleClass( 'is-animating favorited' );
-            component.setState( { favorite: ! component.state.favorite } );
         } );
     },
@@ -25 +19 @@
         let classNames = [ 'plugin-favorite-heart' ];
 
-        if ( this.state.favorite ) {
+        if ( this.props.favorite ) {
             classNames.push( 'favorited' );
         }
@@ -32 +26 @@
             <div className="plugin-favorite">
                 <button type="button" className={ classNames.join( ' ' ) } onClick={ this.toggleFavorite } >
-                    <span className="screen-reader-text">{ `Favorite ${ this.props.plugin.name }` }</span>
+                    <span className="screen-reader-text">
+                        { this.props.favorite
+                            ? `Unfavorite ${ this.props.plugin.name }`
+                            : `Favorite ${ this.props.plugin.name }`
+                        }
+                    </span>
                 </button>
             </div>
@@ -38 +37 @@
     }
 } );
+
+export default connect(
+    ( state, { plugin } ) => ( {
+        favorite: includes( state.favorites, plugin.slug )
+    } ),
+)( FavoriteButton );