Skip to content

Commit

Permalink
Admin Page: Add actionable card for creating a Portfolio item when th…
Browse files Browse the repository at this point in the history 
…e post type is active (#10936)

* Add basic actionable item below postfoilo card in Writing settings when portfolios are active
* Run prettier on the file
  • Loading branch information
@oskosk
oskosk authored Dec 11, 2018
1 parent 16e2e0b commit 268d5d5
Showing 1 changed file with 64 additions and 55 deletions.
119 changes: 64 additions & 55 deletions _inc/client/writing/custom-content-types.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
/**
* External dependencies
*
* @format
*/

import React from 'react';
import { connect } from 'react-redux';
import { translate as __ } from 'i18n-calypso';
Expand All @@ -20,55 +23,57 @@ import SettingsGroup from 'components/settings-group';
export class CustomContentTypes extends React.Component {
state = {
testimonial: this.props.getOptionValue( 'jetpack_testimonial', 'custom-content-types' ),
portfolio: this.props.getOptionValue( 'jetpack_portfolio', 'custom-content-types' )
portfolio: this.props.getOptionValue( 'jetpack_portfolio', 'custom-content-types' ),
};

updateCPTs = type => {
const deactivate = 'testimonial' === type
? ! ( ( ! this.state.testimonial ) || this.state.portfolio )
: ! ( ( ! this.state.portfolio ) || this.state.testimonial );
const deactivate =
'testimonial' === type
? ! ( ! this.state.testimonial || this.state.portfolio )
: ! ( ! this.state.portfolio || this.state.testimonial );

this.props.updateFormStateModuleOption( 'custom-content-types', 'jetpack_' + type, deactivate );

this.setState( {
[ type ]: ! this.state[ type ]
[ type ]: ! this.state[ type ],
} );
};

linkIfActiveCPT = type => {
return this.props.getSettingCurrentValue( 'jetpack_' + type, 'custom-content-types' )
? <a href={ this.props.siteAdminUrl + 'edit.php?post_type=jetpack-' + type } />
: <span />;
return this.props.getSettingCurrentValue( `jetpack_${ type }`, 'custom-content-types' ) ? (
<a href={ `${ this.props.siteAdminUrl }edit.php?post_type=jetpack-${ type }` } />
) : (
<span />
);
};

handleTestimonialToggleChange = () => {
this.updateCPTs( 'testimonial' );
}
};

handlePortfolioToggleChange = () => {
this.updateCPTs( 'portfolio' );
}
};

render() {
if ( ! this.props.isModuleFound( 'custom-content-types' ) ) {
return null;
}

const module = this.props.module( 'custom-content-types' );
const disabledByOverride = ( 'inactive' === this.props.getModuleOverride( 'custom-content-types' ) );
const disabledReason = disabledByOverride && __( 'This feature has been disabled by a site administrator.' );
const disabledByOverride =
'inactive' === this.props.getModuleOverride( 'custom-content-types' );
const disabledReason =
disabledByOverride && __( 'This feature has been disabled by a site administrator.' );
return (
<SettingsCard
{ ...this.props }
module="custom-content-types"
hideButton>
<SettingsCard { ...this.props } module="custom-content-types" hideButton>
<SettingsGroup
hasChild
module={ module }
support={ {
link: 'https://jetpack.com/support/custom-content-types/',
} }
>
>
<p>
{ __(
'Add {{testimonialLink}}testimonials{{/testimonialLink}} to ' +
Expand All @@ -77,8 +82,8 @@ export class CustomContentTypes extends React.Component {
'shortcode to display them on your site.',
{
components: {
testimonialLink: this.linkIfActiveCPT( 'testimonial' )
}
testimonialLink: this.linkIfActiveCPT( 'testimonial' ),
},
}
) }
</p>
Expand All @@ -87,35 +92,30 @@ export class CustomContentTypes extends React.Component {
disabled={ this.props.isSavingAnyOption( 'jetpack_testimonial' ) || disabledByOverride }
onChange={ this.handleTestimonialToggleChange }
disabledReason={ disabledReason }
>
<span className="jp-form-toggle-explanation">
{
__( 'Testimonials' )
}
</span>
>
<span className="jp-form-toggle-explanation">{ __( 'Testimonials' ) }</span>
</CompactFormToggle>
<FormFieldset>
<p className="jp-form-setting-explanation">
{ __( 'Testimonials shortcode: [testimonials]' ) }
</p>
</FormFieldset>
</SettingsGroup>
{
this.props.testimonialActive && (
<CompactCard
className="jp-settings-card__configure-link"
href={ `${ this.props.siteAdminUrl }post-new.php?post_type=jetpack-testimonial` }>
{ __( 'Add a testimonial' ) }
</CompactCard>
)
}
{ this.props.testimonialActive && (
<CompactCard
className="jp-settings-card__configure-link"
href={ `${ this.props.siteAdminUrl }post-new.php?post_type=jetpack-testimonial` }
>
{ __( 'Add a testimonial' ) }
</CompactCard>
) }
<SettingsGroup
hasChild
module={ module }
support={ {
link: 'https://jetpack.com/support/custom-content-types/',
} }
>
>
<p>
{ __(
'Use {{portfolioLink}}portfolios{{/portfolioLink}} on your ' +
Expand All @@ -124,8 +124,8 @@ export class CustomContentTypes extends React.Component {
'display them on your site.',
{
components: {
portfolioLink: this.linkIfActiveCPT( 'portfolio' )
}
portfolioLink: this.linkIfActiveCPT( 'portfolio' ),
},
}
) }
</p>
Expand All @@ -134,35 +134,44 @@ export class CustomContentTypes extends React.Component {
disabled={ this.props.isSavingAnyOption( 'jetpack_portfolio' ) || disabledByOverride }
onChange={ this.handlePortfolioToggleChange }
disabledReason={ disabledReason }
>
<span className="jp-form-toggle-explanation">
{
__( 'Portfolios' )
}
</span>
>
<span className="jp-form-toggle-explanation">{ __( 'Portfolios' ) }</span>
</CompactFormToggle>
<FormFieldset>
<p className="jp-form-setting-explanation">
{
__( 'Portfolios shortcode: [portfolio]' )
}
{ __( 'Portfolios shortcode: [portfolio]' ) }
</p>
</FormFieldset>
</SettingsGroup>
{ this.props.portfolioActive && (
<CompactCard
className="jp-settings-card__configure-link"
href={ `${ this.props.siteAdminUrl }post-new.php?post_type=jetpack-portfolio` }
>
{ __( 'Add a portfolio item' ) }
</CompactCard>
) }
</SettingsCard>
);
}
}

export default withModuleSettingsFormHelpers( connect(
( state, ownProps ) => {
const testimonialActive = ownProps.getSettingCurrentValue( 'jetpack_testimonial', 'custom-content-types' );
export default withModuleSettingsFormHelpers(
connect( ( state, ownProps ) => {
const portfolioActive = ownProps.getSettingCurrentValue(
'jetpack_portfolio',
'custom-content-types'
);
const testimonialActive = ownProps.getSettingCurrentValue(
'jetpack_testimonial',
'custom-content-types'
);
return {
module: ( module_name ) => getModule( state, module_name ),
isModuleFound: ( module_name ) => _isModuleFound( state, module_name ),
getModuleOverride: ( module_name ) => getModuleOverride( state, module_name ),
module: module_name => getModule( state, module_name ),
isModuleFound: module_name => _isModuleFound( state, module_name ),
getModuleOverride: module_name => getModuleOverride( state, module_name ),
portfolioActive,
testimonialActive,
};
}
)( CustomContentTypes ) );

} )( CustomContentTypes )
);

0 comments on commit 268d5d5

Please sign in to comment.