eslint fixes

10up · Sep 12, 2023 · ae2aae0 · ae2aae0
1 parent 0eee673
commit ae2aae0
Show file tree

Hide file tree

Showing 12 changed files with 276 additions and 147 deletions.
diff --git a/src/js/AutoshareForTwitterPostStatusInfo.js b/src/js/AutoshareForTwitterPostStatusInfo.js
@@ -1,11 +1,16 @@
 import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
-import { withSelect, useSelect } from '@wordpress/data';
+import { withSelect, useSelect, select } from '@wordpress/data';
 import { Button, ToggleControl, Icon } from '@wordpress/components';
 import { TweetTextField } from './components/TweetTextField';
 import { TwitterAccounts } from './components/TwitterAccounts';
-import { useHasFeaturedImage, useAllowTweetImage, useSaveTwitterData, useTweetText } from './hooks';
+import {
+	useHasFeaturedImage,
+	useAllowTweetImage,
+	useSaveTwitterData,
+	useTweetText,
+} from './hooks';
 
 import { StatusLogs } from './components/StatusLogs';
 
@@ -15,9 +20,11 @@ export function AutoshareForTwitterPostStatusInfo() {
 	const [ , setTweetText ] = useTweetText();
 	const [ reTweet, setReTweet ] = useState( false );
 	const [ tweetNow, setTweetNow ] = useState( false );
-	const { messages } = useSelect( ( select ) => {
+	const { messages } = useSelect( ( __select ) => {
 		return {
-			messages: select( 'core/editor' ).getCurrentPostAttribute( 'autoshare_for_twitter_status' ),
+			messages: __select( 'core/editor' ).getCurrentPostAttribute(
+				'autoshare_for_twitter_status'
+			),
 		};
 	} );
 
@@ -28,7 +35,7 @@ export function AutoshareForTwitterPostStatusInfo() {
 	const reTweetHandler = async () => {
 		setReTweet( true );
 
-		const postId = await wp.data.select( 'core/editor' ).getCurrentPostId();
+		const postId = await select( 'core/editor' ).getCurrentPostId();
 		const body = new FormData();
 
 		body.append( 'action', adminAutoshareForTwitter.retweetAction );
@@ -54,8 +61,38 @@ export function AutoshareForTwitterPostStatusInfo() {
 		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> } />;
+	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 (
 		<>
@@ -72,7 +109,10 @@ export function AutoshareForTwitterPostStatusInfo() {
 				<>
 					{ hasFeaturedImage && (
 						<ToggleControl
-							label={ __( 'Use featured image in Tweet', 'autoshare-for-twitter' ) }
+							label={ __(
+								'Use featured image in Tweet',
+								'autoshare-for-twitter'
+							) }
 							checked={ allowTweetImage }
 							onChange={ () => {
 								setAllowTweetImage( ! allowTweetImage );
@@ -85,7 +125,11 @@ export function AutoshareForTwitterPostStatusInfo() {
 					<Button
 						variant="primary"
 						className="autoshare-for-twitter-re-tweet"
-						text={ reTweet ? __( 'Tweeting...', 'autoshare-for-twitter' ) : __( 'Tweet again', 'autoshare-for-twitter' ) }
+						text={
+							reTweet
+								? __( 'Tweeting…', 'autoshare-for-twitter' )
+								: __( 'Tweet again', 'autoshare-for-twitter' )
+						}
 						onClick={ () => {
 							reTweetHandler();
 						} }
@@ -97,7 +141,9 @@ export function AutoshareForTwitterPostStatusInfo() {
 }
 
 export default compose(
-	withSelect( ( select ) => ( {
-		statusMessage: select( 'core/editor' ).getCurrentPostAttribute( 'autoshare_for_twitter_status' ),
-	} ) ),
+	withSelect( ( __select ) => ( {
+		statusMessage: __select( 'core/editor' ).getCurrentPostAttribute(
+			'autoshare_for_twitter_status'
+		),
+	} ) )
 )( AutoshareForTwitterPostStatusInfo );
diff --git a/src/js/AutoshareForTwitterPrePublishPanel.js b/src/js/AutoshareForTwitterPrePublishPanel.js
@@ -14,20 +14,26 @@ import { TwitterAccounts } from './components/TwitterAccounts';
 import { StatusLogs } from './components/StatusLogs';
 
 export default function AutoshareForTwitterPrePublishPanel() {
-	const [ autoshareEnabled, setAutoshareEnabled ] = useTwitterAutoshareEnabled();
+	const [ autoshareEnabled, setAutoshareEnabled ] =
+		useTwitterAutoshareEnabled();
 	const [ overriding, setOverriding ] = useTwitterTextOverriding();
 	const [ allowTweetImage, setAllowTweetImage ] = useAllowTweetImage();
 	const [ errorMessage ] = useTwitterAutoshareErrorMessage();
 	const hasFeaturedImage = useHasFeaturedImage();
 
-	const messages = select( 'core/editor' ).getCurrentPostAttribute( 'autoshare_for_twitter_status' );
+	const messages = select( 'core/editor' ).getCurrentPostAttribute(
+		'autoshare_for_twitter_status'
+	);
 	useSaveTwitterData();
 
 	return (
 		<>
 			<StatusLogs messages={ messages } />
 			<ToggleControl
-				label={ autoshareEnabled ? __( 'Tweet when published', 'autoshare-for-twitter' ) : __( 'Don\'t Tweet', 'autoshare-for-twitter' )
+				label={
+					autoshareEnabled
+						? __( 'Tweet when published', 'autoshare-for-twitter' )
+						: __( "Don't Tweet", 'autoshare-for-twitter' )
 				}
 				checked={ autoshareEnabled }
 				onChange={ ( checked ) => {
@@ -38,7 +44,10 @@ export default function AutoshareForTwitterPrePublishPanel() {
 
 			{ autoshareEnabled && hasFeaturedImage && (
 				<ToggleControl
-					label={ __( 'Use featured image in Tweet', 'autoshare-for-twitter' ) }
+					label={ __(
+						'Use featured image in Tweet',
+						'autoshare-for-twitter'
+					) }
 					checked={ allowTweetImage }
 					onChange={ () => {
 						setAllowTweetImage( ! allowTweetImage );
@@ -51,17 +60,17 @@ export default function AutoshareForTwitterPrePublishPanel() {
 
 			{ autoshareEnabled && (
 				<div className="autoshare-for-twitter-prepublish__override-row">
-					{ overriding && (
-						<TweetTextField />
-					) }
+					{ overriding && <TweetTextField /> }
 
 					<Button
 						isLink
 						onClick={ () => {
 							setOverriding( ! overriding );
 						} }
 					>
-						{ overriding ? __( 'Hide', 'autoshare-for-twitter' ) : __( 'Edit', 'autoshare-for-twitter' ) }
+						{ overriding
+							? __( 'Hide', 'autoshare-for-twitter' )
+							: __( 'Edit', 'autoshare-for-twitter' ) }
 					</Button>
 				</div>
 			) }

diff --git a/src/js/components/PluginIcon.js b/src/js/components/PluginIcon.js
@@ -1,6 +1,6 @@
 import { SVG, Path } from '@wordpress/primitives';
 
-const TwitterIcon = (fillColor) => (
+const TwitterIcon = ( fillColor ) => (
 	<SVG
 		version="1.1"
 		id="Twitter"
@@ -17,10 +17,10 @@ const TwitterIcon = (fillColor) => (
 	</SVG>
 );
 
-const DefaultIcon = TwitterIcon('#1B1C20');
-const EnabledIcon = TwitterIcon('#1DA1F2');
-const DisabledIcon = TwitterIcon('#787E88');
-const FailedIcon = TwitterIcon('#D0494A');
-const TweetedIcon = TwitterIcon('#7FD051');
+const DefaultIcon = TwitterIcon( '#1B1C20' );
+const EnabledIcon = TwitterIcon( '#1DA1F2' );
+const DisabledIcon = TwitterIcon( '#787E88' );
+const FailedIcon = TwitterIcon( '#D0494A' );
+const TweetedIcon = TwitterIcon( '#7FD051' );
 
 export { DefaultIcon, EnabledIcon, DisabledIcon, FailedIcon, TweetedIcon };
diff --git a/src/js/components/StatusLogs.js b/src/js/components/StatusLogs.js
@@ -6,31 +6,54 @@ import { getIconByStatus } from '../utils';
 const ErrorMessage = ( { errorMessage } ) => {
 	return (
 		<span>
-			{ errorMessage }
-			{ ' ' }
-			{ ( errorMessage?.includes( 'When authenticating requests to the Twitter API v2 endpoints, you must use keys and tokens from a Twitter developer App that is attached to a Project. You can create a project via the developer portal.' ) ) && <ExternalLink href={ 'https://developer.twitter.com/en/docs/twitter-api/migrate/ready-to-migrate' }>{ __( 'Learn more here.' ) }</ExternalLink> }
+			{ errorMessage }{ ' ' }
+			{ errorMessage?.includes(
+				'When authenticating requests to the Twitter API v2 endpoints, you must use keys and tokens from a Twitter developer App that is attached to a Project. You can create a project via the developer portal.'
+			) && (
+				<ExternalLink
+					href={
+						'https://developer.twitter.com/en/docs/twitter-api/migrate/ready-to-migrate'
+					}
+				>
+					{ __( 'Learn more here.' ) }
+				</ExternalLink>
+			) }
 		</span>
 	);
 };
 
-export function StatusLogs( {messages} ) {
-    if ( ! messages || ! messages.message.length ) {
-        return null;
-    }
+export function StatusLogs( { messages } ) {
+	if ( ! messages || ! messages.message.length ) {
+		return null;
+	}
 
-	return ( <div className="autoshare-for-twitter-post-status">
-		{ messages.message.map( ( statusMessage, index ) => {
-			const TweetIcon = getIconByStatus( statusMessage.status );
-			return (
-				<div className="autoshare-for-twitter-log" key={ index }>
-					{ TweetIcon }
-					<span>
-						{ statusMessage.url ? <ExternalLink href={ statusMessage.url }>{ statusMessage.message }</ExternalLink> : <ErrorMessage errorMessage={ statusMessage.message } /> }
-						{ !!statusMessage.handle && <strong>{ ` - @`+statusMessage.handle }</strong> }
-					</span>
-				</div>
-			);
-		} ) }
-		<CardDivider />
-	</div> );
+	return (
+		<div className="autoshare-for-twitter-post-status">
+			{ messages.message.map( ( statusMessage, index ) => {
+				const TweetIcon = getIconByStatus( statusMessage.status );
+				return (
+					<div className="autoshare-for-twitter-log" key={ index }>
+						{ TweetIcon }
+						<span>
+							{ statusMessage.url ? (
+								<ExternalLink href={ statusMessage.url }>
+									{ statusMessage.message }
+								</ExternalLink>
+							) : (
+								<ErrorMessage
+									errorMessage={ statusMessage.message }
+								/>
+							) }
+							{ !! statusMessage.handle && (
+								<strong>
+									{ ` - @` + statusMessage.handle }
+								</strong>
+							) }
+						</span>
+					</div>
+				);
+			} ) }
+			<CardDivider />
+		</div>
+	);
 }
diff --git a/src/js/components/TweetTextField.js b/src/js/components/TweetTextField.js
@@ -1,9 +1,9 @@
 import { TextareaControl, Tooltip } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { siteUrl } from 'admin-autoshare-for-twitter';
 import { __, sprintf } from '@wordpress/i18n';
 import { useTweetText } from '../hooks';
 import { useEffect, useState } from '@wordpress/element';
+const { siteUrl } = adminAutoshareForTwitter;
 
 export function TweetTextField() {
 	const getPermalinkLength = ( select ) => {
@@ -25,21 +25,33 @@ export function TweetTextField() {
 	const { permalinkLength, maxLength } = useSelect( ( select ) => {
 		return {
 			permalinkLength: getPermalinkLength( select ),
-			maxLength: ( 275 - getPermalinkLength( select ) ),
+			maxLength: 275 - getPermalinkLength( select ),
 		};
 	} );
 
 	const getTweetLength = () => {
 		// +5 because of the space between body and URL and the ellipsis.
 		const length = permalinkLength + tweetText.length + 5;
-		if ( 280 <=  length ) {
-			/* translators: %d is tweet message character count */
-			return { tweetLength: sprintf( __( '%d - Too Long!', 'autoshare-for-twitter' ), length ), overrideLengthClass: 'over-limit' };
+		if ( 280 <= length ) {
+			return {
+				tweetLength: sprintf(
+					/* translators: %d is tweet message character count */
+					__( '%d - Too Long!', 'autoshare-for-twitter' ),
+					length
+				),
+				overrideLengthClass: 'over-limit',
+			};
 		}
 
 		if ( 240 <= length ) {
-			/* translators: %d is tweet message character count */
-			return { tweetLength: sprintf( __( '%d - Getting Long!', 'autoshare-for-twitter' ), length ), overrideLengthClass: 'near-limit' };
+			return {
+				tweetLength: sprintf(
+					/* translators: %d is tweet message character count */
+					__( '%d - Getting Long!', 'autoshare-for-twitter' ),
+					length
+				),
+				overrideLengthClass: 'near-limit',
+			};
 		}
 
 		return { tweetLength: `${ length }`, overrideLengthClass: '' };
@@ -48,11 +60,13 @@ export function TweetTextField() {
 	const [ tweetText, setTweetText ] = useTweetText();
 	const { tweetLength, overrideLengthClass } = getTweetLength();
 
-	const status = useSelect( ( __select ) =>  __select( 'core/editor' ).getEditedPostAttribute( 'status' ) );
+	const status = useSelect( ( __select ) =>
+		__select( 'core/editor' ).getEditedPostAttribute( 'status' )
+	);
 	const [ isPublished, setIsPublished ] = useState( status === 'publish' );
 
 	useEffect( () => {
-		if ( 'publish' !==  status || isPublished ) {
+		if ( 'publish' !== status || isPublished ) {
 			return;
 		}
 
@@ -61,10 +75,14 @@ export function TweetTextField() {
 	}, [ status, isPublished ] );
 
 	const CounterTooltip = () => (
-		<Tooltip 
-			text={ __( 'Count is inclusive of the post permalink which will be included in the final tweet.', 'autoshare-for-twitter' ) }>
+		<Tooltip
+			text={ __(
+				'Count is inclusive of the post permalink which will be included in the final tweet.',
+				'autoshare-for-twitter'
+			) }
+		>
 			<div>{ tweetLength }</div>
-		</Tooltip>	
+		</Tooltip>
 	);
 
 	return (
@@ -76,9 +94,18 @@ export function TweetTextField() {
 			className="autoshare-for-twitter-tweet-text"
 			maxLength={ maxLength }
 			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={ `alignright ${ overrideLengthClass }` }>
+				<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={ `alignright ${ overrideLengthClass }` }
+					>
 						<CounterTooltip />
 					</span>
 				</span>