Settings for delete all redirects and numbers of redirects per page (#…

…140)

* Settings for delete all redirects and numbers of redirects per page

* Add css class to delete all redirects button and change its text

* Improve CSS

css/scss/redirection.scss

@@ -137,21 +137,22 @@
 	}
 }
 
-.ss-paginate {
+.ss-redirects-footer {
 	display: flex;
-	justify-content: center;
-	gap: 20px;
-
-	.disabled {
-		display: none;
-	}
-
-	.selected a {
-		color: inherit;
-	}
-
-	a {
-		cursor: pointer;
+	justify-content: space-between;
+	align-items: center;
+	padding: 12px;
+
+	.ss-paginate {
+		ul {
+			margin: 0;
+			display: flex;
+			gap: 4px;
+
+			.disabled {
+				display: none!important;
+			}
+		}
 	}
 }
 

css/scss/settings.scss

@@ -22,6 +22,11 @@
 	.update-nag {
 		display: none;
 	}
+
+	.button-link-delete,
+	.button-link-delete:hover {
+		border-color: currentColor;
+	}
 }
 
 .ss-content {
@@ -132,4 +137,4 @@ p.submit {
 	&.ss-is-active {
 		display: block;
 	}
-}
+}

js/redirection/components/Limit.js

@@ -0,0 +1,27 @@
+import { __, _n, sprintf } from '@wordpress/i18n';
+
+const Limit = ( { limit, setLimit, total, setOffset, setIsCheckAll, setCheckedList } ) => {
+	const handleChange = e => {
+		setLimit( parseInt( e.target.value ) );
+
+		setOffset( 0 );
+		setIsCheckAll( false );
+		setCheckedList( [] );
+	};
+
+	return (
+		<div className='ss-limit'>
+			<select value={ limit } onChange={ handleChange }>
+				<option value={ 20 }>20</option>
+				<option value={ 50 }>50</option>
+				<option value={ 100 }>100</option>
+				<option value={ 200 }>200</option>
+				<option value={ total }>{ __( 'All', 'slim-seo' ) }</option>
+			</select>
+			&nbsp;
+			{ sprintf( _n( 'items per page. Total %d item.', 'items per page. Total %d items.', 'slim-seo' ), Number( total ) ) }
+		</div>
+	);
+};
+
+export default Limit;

js/redirection/components/Paginate.js

@@ -1,25 +1,34 @@
 import { __ } from '@wordpress/i18n';
 import ReactPaginate from 'react-paginate';
 
-const Paginate = ( { totalRows, limit, setOffset } ) => {
+const Paginate = ( { totalRows, limit, offset, setOffset, setIsCheckAll, setCheckedList } ) => {
 	const pageCount = Math.ceil( totalRows / limit );
 
 	const handlePageClick = e => {
 		const newOffset = ( e.selected * limit ) % totalRows;
 		setOffset( newOffset );
+		setIsCheckAll( false );
+		setCheckedList( [] );
 	};
 
 	return pageCount > 1 && (
-		<ReactPaginate
-			className='ss-paginate'
-			breakLabel='...'
-			nextLabel={ __( 'Next »', 'slim-seo' ) }
-			onPageChange={ handlePageClick }
-			pageRangeDisplayed={ 5 }
-			pageCount={ pageCount }
-			previousLabel={ __( '« Previous', 'slim-seo' ) }
-			renderOnZeroPageCount={ null }
-		/>
+		<div className='ss-paginate'>
+			<ReactPaginate
+				breakLabel='...'
+				nextLabel='»'
+				onPageChange={ handlePageClick }
+				pageRangeDisplayed={ 3 }
+				pageCount={ pageCount }
+				previousLabel='«'
+				renderOnZeroPageCount={ null }
+				forcePage={ offset / limit }
+				pageLinkClassName="button"
+				previousLinkClassName="button"
+				nextLinkClassName="button"
+				breakLinkClassName="button"
+				activeLinkClassName="button-primary"
+			/>
+		</div>
 	);
 };
 

js/redirection/redirects/Items.js

@@ -1,28 +1,19 @@
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import Paginate from '../components/Paginate';
 import { fetcher, useApi } from '../helper/misc';
 import Header from './Header';
 import Item from './Item';
+import Limit from '../components/Limit';
+import Paginate from '../components/Paginate';
 
 const Items = ( { searchKeyword, redirectType, executeBulkAction, setExecuteBulkAction } ) => {
-	const LIMIT = 20;
+	const [ limit, setLimit ] = useState( 20 );
 	const [ offset, setOffset ] = useState( 0 );
 	const [ checkedList, setCheckedList ] = useState( [] );
 	const [ isCheckAll, setIsCheckAll ] = useState( false );
 	const [ remountPaginate, setRemountPaginate ] = useState( 0 );
 	const { result: redirects, mutate } = useApi( 'redirects', {}, { returnMutate: true } );
 
-	const checkAll = () => {
-		setIsCheckAll( !isCheckAll );
-
-		if ( isCheckAll ) {
-			setCheckedList( [] );
-		} else {
-			setCheckedList( redirects.map( redirect => redirect.id ) );
-		}
-	};
-
 	const deleteRedirects = ( ids = [] ) => {
 		fetcher( 'delete_redirects', { ids }, 'POST' ).then( result => {
 			mutate(
@@ -80,10 +71,20 @@ const Items = ( { searchKeyword, redirectType, executeBulkAction, setExecuteBulk
 		filteredRedirects = filteredRedirects.filter( redirect => redirect.type == redirectType );
 	}
 
+	const checkAll = () => {
+		setIsCheckAll( !isCheckAll );
+
+		if ( isCheckAll ) {
+			setCheckedList( [] );
+		} else {
+			setCheckedList( filteredRedirects.slice( offset, offset + limit ).map( redirect => redirect.id ) );
+		}
+	};
+
 	if ( !filteredRedirects.length ) {
 		return <span>{ __( 'No redirects found.', 'slim-seo' ) }</span>;
 	}
-
+	
 	return (
 		<>
 			<table className='ss-table'>
@@ -92,15 +93,18 @@ const Items = ( { searchKeyword, redirectType, executeBulkAction, setExecuteBulk
 				</thead>
 
 				<tbody>
-					{ filteredRedirects.slice( offset, offset + LIMIT ).map( redirect => <Item key={ redirect.id } redirectItem={ redirect } checkedList={ checkedList } setCheckedList={ setCheckedList } deleteRedirects={ deleteRedirects } updateRedirects={ updateRedirects } /> ) }
+					{ filteredRedirects.slice( offset, offset + limit ).map( redirect => <Item key={ redirect.id } redirectItem={ redirect } checkedList={ checkedList } setCheckedList={ setCheckedList } deleteRedirects={ deleteRedirects } updateRedirects={ updateRedirects } /> ) }
 				</tbody>
 
 				<tfoot>
 					<Header isCheckAll={ isCheckAll } checkAll={ checkAll } />
 				</tfoot>
 			</table>
 
-			<Paginate key={ remountPaginate } totalRows={ filteredRedirects.length } limit={ LIMIT } setOffset={ setOffset } />
+			<div className='ss-redirects-footer'>
+				<Limit limit={ limit } setLimit={ setLimit } total={ filteredRedirects.length } setOffset={ setOffset } setIsCheckAll={ setIsCheckAll } setCheckedList={ setCheckedList } />
+				<Paginate key={ remountPaginate } totalRows={ filteredRedirects.length } limit={ limit } offset={ offset } setOffset={ setOffset } setIsCheckAll={ setIsCheckAll } setCheckedList={ setCheckedList } />
+			</div>			
 		</>
 	);
 };

js/redirection/settings/Settings.js

@@ -1,6 +1,6 @@
 import { RawHTML, useReducer, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { Tooltip } from '../helper/misc';
+import { Tooltip, fetcher } from '../helper/misc';
 
 const Settings = () => {
 	const { settings, settingsName } = SSRedirection;
@@ -13,6 +13,20 @@ const Settings = () => {
 	const [ redirect404To, setRedirect404To ] = useState( settings[ 'redirect_404_to' ] );
 	const [ redirect404ToURL, setRedirect404ToURL ] = useState( settings[ 'redirect_404_to_url' ] );
 
+	const deleteAllRedirects = e => {
+		e.preventDefault();
+
+		if ( ! confirm( __( 'Are you sure to delete all redirects?', 'slim-seo' ) ) ) {
+			return;
+		}
+
+		fetcher( 'delete_redirects', { ids: 'all' }, 'POST' ).then( result => {
+			if ( result ) {
+				location.reload();
+			}
+		} );
+	};
+
 	return (
 		<>
 			<table className='form-table'>
@@ -131,6 +145,15 @@ const Settings = () => {
 							}
 						</td>
 					</tr>
+
+					<tr>
+						<th scope="row">
+							<label htmlFor="ss-delete-all-redirects">{ __( 'Delete all redirects', 'slim-seo' ) }</label>
+						</th>
+						<td>
+							<button id="ss-delete-all-redirects" className='button button-link-delete' onClick={ deleteAllRedirects }>{ __( 'Delete', 'slim-seo' ) }</button>
+						</td>
+					</tr>
 				</tbody>
 			</table>
 

src/Redirection/Api/Redirects.php

@@ -65,6 +65,12 @@ public function update_redirect( WP_REST_Request $request ): string {
 	public function delete_redirects( WP_REST_Request $request ): bool {
 		$ids = $request->get_param( 'ids' );
 
+		if ( 'all' === $ids ) {
+			$this->db_redirects->delete_all();
+
+			return true;
+		}
+
 		$this->db_redirects->delete( $ids );
 
 		return true;

src/Redirection/Database/Redirects.php

@@ -44,6 +44,10 @@ public function delete( array $ids ) {
 		update_option( SLIM_SEO_REDIRECTS, $this->redirects );
 	}
 
+	public function delete_all() {
+		delete_option( SLIM_SEO_REDIRECTS, $this->redirects );
+	}
+
 	public function update_all( array $redirects ) {
 		$this->redirects = $redirects;
 

src/Redirection/ExportImport.php

@@ -109,6 +109,10 @@ public function import( WP_REST_Request $request ): bool {
 
 			$added = true;
 
+			$redirect['from'] = Helper::normalize_url( $redirect['from'], false );
+			$redirect['to']   = Helper::normalize_url( $redirect['to'], true, true, false );
+			$redirect['note'] = sanitize_text_field( $redirect['note'] );
+
 			$redirects[ uniqid() ] = $redirect;
 		}
 

src/Redirection/Redirection.php

@@ -40,7 +40,7 @@ public function redirect() {
 				$current_url = rtrim( $url_parts[0], '/' );
 			}
 
-			$from            = $redirect['from'];
+			$from            = Helper::normalize_url( $redirect['from'], false );
 			$to              = $redirect['to'];
 			$should_redirect = false;