Making WordPress.org


Ignore:
Timestamp:
07/28/2016 10:55:18 PM (9 years ago)
Author:
obenland
Message:

Plugin Directory: Restructure containers and components.

Merges containers with their components and adopts a folder hierarchy similar
to the actual element hierarchy. The exception to the rule are reusable
components.

This also adds support for displaying plugins in the plugin_section taxonomy.

See #1719.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/js/client/components/plugin-card
Files:
1 added
1 moved

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/js/client/components/plugin-card/index.jsx

    r3733 r3734  
    1 import React from 'react';
     1import React, { Component } from 'react';
     2import { connect } from 'react-redux';
     3import find from 'lodash/find';
    24import { Link } from 'react-router';
    35
    4 export default React.createClass( {
     6/**
     7 * Internal dependencies.
     8 */
     9import { getPlugin } from 'actions';
     10import PluginRatings from 'components/plugin-ratings';
     11
     12const PluginCard = React.createClass( {
    513    displayName: 'PluginCard',
    614
    715    render() {
     16        if ( ! this.props.plugin ) {
     17            return (
     18                <div />
     19            );
     20        }
     21
    822        return (
    923            <article className="plugin type-plugin">
     
    1226                    <header className="entry-header">
    1327                        <h2 className="entry-title">
    14                             <Link to={ this.props.plugin.slug } rel="bookmark">{ this.props.plugin.title.rendered }</Link>
     28                            <Link to={ this.props.plugin.slug } rel="bookmark">{ this.props.plugin.name }</Link>
    1529                        </h2>
    1630                    </header>
    17                     <div className="plugin-rating" itemProp="aggregateRating" itemScope itemType="http://schema.org/AggregateRating">
    18                         <meta itemProp="ratingCount" content={ this.props.plugin.rating_count } />
    19                         <meta itemProp="ratingValue" content={ this.props.plugin.rating } />
    2031
    21                         <div className="wporg-ratings"></div>
    22                         <span className="rating-count">({ this.props.plugin.rating_count })</span>
    23                     </div>
    24                     <div className="entry-excerpt">{ this.props.plugin.excerpt }</div>
     32                    <PluginRatings rating={ this.props.plugin.rating } ratingCount={ this.props.plugin.num_ratings } />
     33
     34                    <div className="entry-excerpt">{ this.props.plugin.short_description }</div>
    2535                </div>
    2636            </article>
     
    2838    }
    2939} );
     40
     41class PluginCardContainer extends Component {
     42    componentDidMount() {
     43        this.getPlugin();
     44    }
     45
     46    componentDidUpdate( previousProps ) {
     47        if ( this.props.slug !== previousProps.slug ) {
     48            this.getPlugin();
     49        }
     50    }
     51
     52    getPlugin() {
     53        this.props.dispatch( getPlugin( this.props.slug ) );
     54    }
     55
     56    render() {
     57        return <PluginCard { ...this.props } />;
     58    }
     59}
     60
     61const mapStateToProps = ( state, ownProps ) => ( {
     62    plugin: find( state.plugins, { slug: ownProps.slug } )
     63} );
     64
     65export default connect( mapStateToProps )( PluginCardContainer );
     66
     67
Note: See TracChangeset for help on using the changeset viewer.