Lint: fix client/reader (#25921)

* Low hanging lint

* More linting

* Remove unused reader/list-item

* Fix autofocus

* Roll back button changes for now (accompanying CSS changes required)

assets/stylesheets/_components.scss

@@ -498,7 +498,6 @@
 @import 'reader/stream/style';
 @import 'reader/like-button/style';
 @import 'reader/list-gap/style';
-@import 'reader/list-item/style';
 @import 'reader/list-stream/style';
 @import 'reader/post-excerpt-link/style';
 @import 'reader/reading-time/style';

client/reader/conversations/intro.jsx

@@ -96,8 +96,8 @@ class ConversationsIntro extends React.Component {
 					<div
 						className="conversations__intro-close"
 						onClick={ this.dismiss }
-						title={ translate( 'Close' ) }
 						role="button"
+						title={ translate( 'Close' ) }
 						aria-label={ translate( 'Close' ) }
 					>
 						<Gridicon

client/reader/discover/follow-button.jsx

@@ -39,6 +39,7 @@ class DiscoverFollowButton extends React.Component {
 			},
 		} );
 
+		/* eslint-disable wpcalypso/jsx-classname-namespace */
 		return (
 			<FollowButton
 				className="is-discover"
@@ -50,6 +51,7 @@ class DiscoverFollowButton extends React.Component {
 				followSource={ DISCOVER_POST }
 			/>
 		);
+		/* eslint-enable wpcalypso/jsx-classname-namespace */
 	}
 }
 

client/reader/embed-helper.jsx

@@ -1,4 +1,7 @@
 /** @format */
+/**
+ * External dependencies
+ */
 import percentageFactory from 'percentage-regex';
 
 const percentageRegex = percentageFactory( { exact: true } );
@@ -7,7 +10,8 @@ const isPercentage = val => percentageRegex.test( val );
 const embedsConfig = {
 	default: {
 		sizingFunction: function defaultEmbedSizingFunction( embed, availableWidth ) {
-			let { aspectRatio, width, height } = embed;
+			const { aspectRatio } = embed;
+			let { width, height } = embed;
 
 			if ( ! isNaN( aspectRatio ) ) {
 				// width and height were numbers, so grab the aspect ratio
@@ -51,8 +55,8 @@ const embedsConfig = {
 	},
 	soundcloud: {
 		sizingFunction: function soundcloudEmbedSizingFunction( embed, availableWidth ) {
-			let aspectRatio = embed.aspectRatio || 1,
-				height = '100%';
+			const aspectRatio = embed.aspectRatio || 1;
+			let height = '100%';
 
 			if ( embed.iframe.indexOf( 'visual=true' ) > -1 ) {
 				height = Math.floor( availableWidth / aspectRatio ) + 'px';
@@ -68,22 +72,22 @@ const embedsConfig = {
 };
 
 function extractUrlFromIframe( iframeHtml ) {
-	let urlRegex = new RegExp( 'src="([^"]+)"' ),
+	const urlRegex = new RegExp( 'src="([^"]+)"' ),
 		res = urlRegex.exec( iframeHtml );
 
 	return res.length > 1 ? res[ 1 ] : null;
 }
 
 function resolveEmbedConfig( embed ) {
-	let embedType, url;
+	let embedType;
 
 	// if there's type, easiest way just to use it
 	if ( embedsConfig.hasOwnProperty( embed.type ) ) {
 		return embedsConfig[ embed.type ];
 	}
 
 	// if no type, check everyone by their url regex
-	url = extractUrlFromIframe( embed.iframe );
+	const url = extractUrlFromIframe( embed.iframe );
 
 	if ( url ) {
 		for ( embedType in embedsConfig ) {

client/reader/feed-error/index.jsx

@@ -32,6 +32,7 @@ class FeedError extends React.Component {
 	};
 
 	render() {
+		/* eslint-disable wpcalypso/jsx-classname-namespace */
 		const action = (
 				<a
 					className="empty-content__action button is-primary"
@@ -66,6 +67,7 @@ class FeedError extends React.Component {
 				/>
 			</ReaderMain>
 		);
+		/* eslint-enable wpcalypso/jsx-classname-namespace */
 	}
 }
 

client/reader/following-manage/index.jsx

@@ -190,6 +190,7 @@ class FollowingManage extends Component {
 			includes( blockedSites, site.blogId )
 		);
 
+		/* eslint-disable jsx-a11y/no-autofocus */
 		return (
 			<ReaderMain className="following-manage">
 				<DocumentHead title={ 'Manage Following' } />
@@ -226,8 +227,12 @@ class FollowingManage extends Component {
 					{ showFollowByUrl && (
 						<div className="following-manage__url-follow">
 							<FollowButton
-								followLabel={ translate( 'Follow %s', { args: sitesQueryWithoutProtocol } ) }
-								followingLabel={ translate( 'Following %s', { args: sitesQueryWithoutProtocol } ) }
+								followLabel={ translate( 'Follow %s', {
+									args: sitesQueryWithoutProtocol,
+								} ) }
+								followingLabel={ translate( 'Following %s', {
+									args: sitesQueryWithoutProtocol,
+								} ) }
 								siteUrl={ addSchemeIfMissing( readerAliasedFollowFeedUrl, 'http' ) }
 								followSource={ READER_FOLLOWING_MANAGE_URL_INPUT }
 							/>
@@ -262,6 +267,7 @@ class FollowingManage extends Component {
 				{ ! hasFollows && <FollowingManageEmptyContent /> }
 			</ReaderMain>
 		);
+		/* eslint-enable jsx-a11y/no-autofocus */
 	}
 }
 

client/reader/following-manage/search-followed.jsx

@@ -27,7 +27,6 @@ class FollowingManageSearchFollowed extends Component {
 			<SearchCard
 				compact={ true }
 				pinned={ false }
-				autoFocus={ false }
 				className="following-manage__search-followed"
 				additionalClasses="following-manage__search-followed-input"
 				placeholder={ this.props.translate( 'Search Followed Sites…' ) }

client/reader/following/main.jsx

@@ -39,13 +39,13 @@ const FollowingStream = props => {
 			] )
 		);
 
+	/* eslint-disable wpcalypso/jsx-classname-namespace */
 	return (
 		<Stream { ...props }>
 			{ config.isEnabled( 'reader/following-intro' ) && <FollowingIntro /> }
 			<CompactCard className="following__search">
 				<SearchInput
 					onSearch={ handleSearch }
-					autoFocus={ false }
 					delaySearch={ true }
 					delayTimeout={ 500 }
 					placeholder={ props.translate( 'Search billions of WordPress posts…' ) }
@@ -61,6 +61,7 @@ const FollowingStream = props => {
 			</div>
 		</Stream>
 	);
+	/* eslint-enable wpcalypso/jsx-classname-namespace */
 };
 
 export default SuggestionProvider( localize( FollowingStream ) );

client/reader/header-back/index.jsx

@@ -1,5 +1,13 @@
 /** @format */
+
+/**
+ * External dependencies
+ */
 import React from 'react';
+
+/**
+ * Internal dependencies
+ */
 import HeaderCake from 'components/header-cake';
 
 function goBack() {

client/reader/liked-stream/empty.jsx

@@ -30,7 +30,8 @@ class TagEmptyContent extends React.Component {
 	};
 
 	render() {
-		let action = (
+		/* eslint-disable wpcalypso/jsx-classname-namespace */
+		const action = (
 				<a
 					className="empty-content__action button is-primary"
 					onClick={ this.recordAction }
@@ -59,6 +60,7 @@ class TagEmptyContent extends React.Component {
 				illustrationWidth={ 400 }
 			/>
 		);
+		/* eslint-enable wpcalypso/jsx-classname-namespace */
 	}
 }
 

client/reader/list-gap/index.jsx

@@ -41,13 +41,19 @@ class Gap extends React.Component {
 		} );
 		const { translate } = this.props;
 
+		/* eslint-disable wpcalypso/jsx-classname-namespace */
 		return (
-			<div className={ classes } onClick={ this.handleClick }>
-				<button type="button" className="button reader-list-gap__button">
+			<div className={ classes }>
+				<button
+					type="button"
+					className="button reader-list-gap__button"
+					onClick={ this.handleClick }
+				>
 					{ translate( 'Load More Posts' ) }
 				</button>
 			</div>
 		);
+		/* eslint-enable wpcalypso/jsx-classname-namespace */
 	}
 }