add tweet log and touch up

10up · Sep 28, 2022 · b686e45 · b686e45
1 parent 2dd22f0
commit b686e45
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 67 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -2,7 +2,10 @@
 	"globals": {
 		"adminAutoshareForTwitter": "readonly",
 		"jQuery": "readonly",
-		"wp": "readonly"
+		"wp": "readonly",
+		"FormData": "readonly",
+		"fetch": "readonly",
+		"ajaxurl": "readonly"
 	},
 	"extends": "plugin:@wordpress/eslint-plugin/recommended"
 }
diff --git a/assets/css/admin-autoshare-for-twitter.css b/assets/css/admin-autoshare-for-twitter.css
@@ -130,3 +130,14 @@ tbody .autoshare-for-twitter-status-logo--disabled::before {
 	width: 24px;
 	height: 24px;
 }
+
+.autoshare-for-twitter-log {
+	display: flex;
+    align-items: flex-start;
+	margin-bottom: 4px;
+}
+
+.autoshare-for-twitter-log svg {
+	max-width: 20px;
+	height: auto;
+}
diff --git a/includes/admin/post-transition.php b/includes/admin/post-transition.php
@@ -160,12 +160,12 @@ function retweet() {
 
 	$post_id      = isset( $_POST['post_id'] ) ? absint( $_POST['post_id'] ) : 0;
 	$is_retweeted = publish_tweet( $post_id );
+	$message      = get_tweet_status_message( $post_id );
 
 	if ( $is_retweeted ) {
-		$message = get_tweet_status_message( $post_id );
 		wp_send_json_success( $message );
 	} else {
-		wp_send_json_error();
+		wp_send_json_error( $message );
 	}
 }
 

diff --git a/src/js/AutoshareForTwitterPostStatusInfo.js b/src/js/AutoshareForTwitterPostStatusInfo.js
@@ -2,14 +2,17 @@ import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 import { withSelect, useSelect } from '@wordpress/data';
-import { Button, ToggleControl } from '@wordpress/components';
+import { Button, ToggleControl, CardDivider, Icon, ExternalLink } from '@wordpress/components';
 import { TweetTextField } from './components/TweetTextField';
 import { useHasFeaturedImage, useAllowTweetImage, useSaveTwitterData } from './hooks';
 
+import { getIconByStatus } from './utils';
+
 export function AutoshareForTwitterPostStatusInfo() {
 	const hasFeaturedImage = useHasFeaturedImage();
 	const [ allowTweetImage, setAllowTweetImage ] = useAllowTweetImage();
 	const [ reTweet, setReTweet ] = useState( false );
+	const [ tweetNow, setTweetNow ] = useState( false );
 	const { messages } = useSelect( ( select ) => {
 		return {
 			messages: select( 'core/editor' ).getCurrentPostAttribute( 'autoshare_for_twitter_status' ),
@@ -20,10 +23,10 @@ export function AutoshareForTwitterPostStatusInfo() {
 
 	useSaveTwitterData();
 
-	const tweetNow = async () => {
+	const reTweetHandler = async () => {
 		setReTweet( true );
 
-		const postId = await wp.data.select("core/editor").getCurrentPostId();
+		const postId = await wp.data.select( 'core/editor' ).getCurrentPostId();
 		const body = new FormData();
 
 		body.append( 'action', adminAutoshareForTwitter.retweetAction );
@@ -35,61 +38,60 @@ export function AutoshareForTwitterPostStatusInfo() {
 			body,
 		} );
 
-		const { success, data } = await apiResponse.json();
-
-		if ( success ) {
-			setStatusMessages( data );
-		}
+		const { data } = await apiResponse.json();
 
+		setStatusMessages( data );
 		setReTweet( false );
 	};
 
 	if ( statusMessages && ! statusMessages.message.length ) {
 		return null;
 	}
 
+	const chevronUp = <Icon icon={ <svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" width="28" height="28" aria-hidden="true" focusable="false"><path d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"></path></svg> } />;
+	const chevronDown = <Icon icon={ <svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" width="28" height="28" aria-hidden="true" focusable="false"><path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"></path></svg> } />;
+
 	return (
 		<div className="autoshare-for-twitter-post-status">
 			{ statusMessages.message.map( ( statusMessage, index ) => {
+				const TweetIcon = getIconByStatus( statusMessage.status );
+
 				return (
-					<div key={ index }>
-						{ statusMessage.message }
-						{ statusMessage.url && (
-							<>
-								{ ' (' }
-								<a target="_blank" rel="noopener noreferrer" href={ statusMessage.url }>
-									{ __( 'View', 'autoshare-for-twitter' ) }
-								</a>
-								{ ')' }
-							</>
-						) }
+					<div className="autoshare-for-twitter-log" key={ index }>
+						{ TweetIcon }{ statusMessage.url ? <ExternalLink href={ statusMessage.url }>{ statusMessage.message }</ExternalLink> : statusMessage.message }
 					</div>
 				)
 			} ) }
-			<div>
-				<Button
-					variant="link"
-					text={ __( 'Tweet now', 'autoshare-for-twitter' ) }
-				/>
-				{ hasFeaturedImage && (
-					<ToggleControl
-						label={ __( 'Use featured image in Tweet', 'autoshare-for-twitter' ) }
-						checked={ allowTweetImage }
-						onChange={ () => {
-							setAllowTweetImage( ! allowTweetImage );
+			<CardDivider />
+			<Button
+				variant="link"
+				text={ __( 'Tweet now', 'autoshare-for-twitter' ) }
+				onClick={ () => setTweetNow( ! tweetNow ) }
+				iconPosition="right"
+				icon={ tweetNow ? chevronUp : chevronDown }
+			/>
+			{ tweetNow && (
+				<>
+					{ hasFeaturedImage && (
+						<ToggleControl
+							label={ __( 'Use featured image in Tweet', 'autoshare-for-twitter' ) }
+							checked={ allowTweetImage }
+							onChange={ () => {
+								setAllowTweetImage( ! allowTweetImage );
+							} }
+							className="autoshare-for-twitter-toggle-control"
+						/>
+					) }
+					<TweetTextField />
+					<Button
+						variant='primary'
+						text={ reTweet ? __( 'Tweeting...', 'autoshare-for-twitter' ) : __( 'Tweet again', 'autoshare-for-twitter' ) }
+						onClick={ () => {
+							reTweetHandler();
 						} }
-						className="autoshare-for-twitter-toggle-control"
 					/>
-				) }
-				<TweetTextField />
-				<Button
-					variant='primary'
-					text={ reTweet ? __( 'Tweeting...', 'autoshare-for-twitter' ) : __( 'Tweet again', 'autoshare-for-twitter' ) }
-					onClick={ () => {
-						tweetNow();
-					} }
-				/>
-			</div>
+				</>
+			) }
 		</div>
 	);
 }

diff --git a/src/js/components/TweetTextField.js b/src/js/components/TweetTextField.js
@@ -48,7 +48,7 @@ export function TweetTextField() {
 				setTweetText( value );
 			} }
 			label={
-				<span className="autoshare-for-twitter-prepublish__message-label">
+				<span style={ { marginTop: '0.5rem', display: 'block' } } className="autoshare-for-twitter-prepublish__message-label">
 					<span>{ __( 'Custom message:', 'autoshare-for-twitter' ) }&nbsp;</span>
 					<span id="autoshare-for-twitter-counter-wrap" className={ overrideLengthClass() }>
 						{ tweetText.length }

diff --git a/src/js/index.js b/src/js/index.js
@@ -6,14 +6,12 @@ import { Icon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 import { createAutoshareStore, STORE } from './store';
+import { getIconByStatus } from './utils';
 import AutoshareForTwitterPrePublishPanel from './AutoshareForTwitterPrePublishPanel';
 import AutoshareForTwitterPostStatusInfo from './AutoshareForTwitterPostStatusInfo';
 
 import EnabledIcon from '../../assets/images/twitter_enabled.svg';
 import DisabledIcon from '../../assets/images/twitter_disabled.svg';
-import FailedIcon from '../../assets/images/twitter_failed.svg';
-import TweetedIcon from '../../assets/images/twitter_tweeted.svg';
-import DefaultIcon from '../../assets/images/twitter_default.svg';
 
 createAutoshareStore();
 
@@ -106,29 +104,11 @@ class AutoshareForTwitterEditorPanelPlugin extends Component {
 		const postStatus = select( 'core/editor' ).getCurrentPostAttribute( 'status' );
 		if ( 'publish' === postStatus ) {
 			const tweetStatus = select( 'core/editor' ).getCurrentPostAttribute( 'autoshare_for_twitter_status' );
-			let StatusIcon = DefaultIcon;
-			if ( tweetStatus && tweetStatus.status ) {
-				if ( tweetStatus.status === 'published' ) {
-					StatusIcon = TweetedIcon;
-				} else if ( tweetStatus.status === 'error' ) {
-					StatusIcon = FailedIcon;
-				} else {
-					StatusIcon = DefaultIcon;
-				}
-			}
-
-			const TweetStatusIcon = (
-				<Icon
-					className="autoshare-for-twitter-icon"
-					icon={ <StatusIcon /> }
-					size={ 24 }
-				/>
-			);
 
 			return (
 				<PluginDocumentSettingPanel
 					title={ __( 'Autotweet', 'autoshare-for-twitter' ) }
-					icon={ TweetStatusIcon }
+					icon={ getIconByStatus( tweetStatus ) }
 					className="autoshare-for-twitter-editor-panel"
 				>
 					<AutoshareForTwitterPostStatusInfo />

diff --git a/src/js/utils.js b/src/js/utils.js
@@ -0,0 +1,29 @@
+import { Icon } from '@wordpress/components';
+
+import FailedIcon from '../../assets/images/twitter_failed.svg';
+import TweetedIcon from '../../assets/images/twitter_tweeted.svg';
+import DefaultIcon from '../../assets/images/twitter_default.svg';
+
+export const getIconByStatus = ( tweetStatus ) => {
+	let StatusIcon = DefaultIcon;
+
+	if ( tweetStatus ) {
+		if ( tweetStatus === 'published' ) {
+			StatusIcon = TweetedIcon;
+		} else if ( tweetStatus === 'error' ) {
+			StatusIcon = FailedIcon;
+		} else {
+			StatusIcon = DefaultIcon;
+		}
+	}
+
+	const TweetStatusIcon = (
+		<Icon
+			className="autoshare-for-twitter-icon"
+			icon={ <StatusIcon /> }
+			size={ 24 }
+		/>
+	);
+
+	return TweetStatusIcon;
+};