From 0985d9cf31ae99e7375f60f42aa74d99146f0ae4 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Thu, 19 Jan 2023 08:59:50 -0600
Subject: [PATCH 1/6] Add a notion of filtered patterns

---
 .../js/src/components/ThemePatterns/index.tsx | 41 ++++++++-----------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/wp-modules/app/js/src/components/ThemePatterns/index.tsx b/wp-modules/app/js/src/components/ThemePatterns/index.tsx
index 62002f6f7..a8f77a9db 100644
--- a/wp-modules/app/js/src/components/ThemePatterns/index.tsx
+++ b/wp-modules/app/js/src/components/ThemePatterns/index.tsx
@@ -29,32 +29,25 @@ type Props = {
 export default function ThemePatterns( { isVisible }: Props ) {
 	const { patterns } = usePmContext();
 	const [ currentCategory, setCurrentCategory ] = useState( 'all-patterns' );
-	const [ themePatterns, setThemePatterns ] = useState< Patterns >(
-		createPatternsWithUncategorized( patterns )
-	);
+	const [ filteredPatterns, setFilteredPatterns ] = useState( createPatternsWithUncategorized( patterns.data ) );
 
-	const patternsRef = useRef( themePatterns );
+	function setNewFilteredPatterns( newPatterns: Patterns ) {
+		setFilteredPatterns( createPatternsWithUncategorized( newPatterns ) );
+	}
 
 	/** Catch pattern deletion since themePatterns is no longer derived. */
-	useEffect( () => {
-		const updatedPatternData = createPatternsWithUncategorized( patterns );
-		setThemePatterns( updatedPatternData );
-		patternsRef.current = updatedPatternData;
-	}, [ patterns.data ] );
 
 	/** Create an object for included_patterns that includes an 'uncategorized' category. */
-	function createPatternsWithUncategorized( {
-		data: patternData,
-	}: typeof patterns ): Patterns {
-		return Object.keys( patternData ).reduce(
+	function createPatternsWithUncategorized( patterns: Patterns ) {
+		return Object.keys( patterns ).reduce(
 			( acc, patternName ) => ( {
 				...acc,
 				[ patternName ]: {
-					...patternData[ patternName ],
+					...patterns[ patternName ],
 					categories: [
 						// Spread in the categories, or 'uncategorized' if empty.
-						...( patternData[ patternName ].categories?.length
-							? patternData[ patternName ].categories
+						...( patterns[ patternName ].categories?.length
+							? patterns[ patternName ].categories
 							: [ 'uncategorized' ] ),
 					],
 				},
@@ -77,11 +70,11 @@ export default function ThemePatterns( { isVisible }: Props ) {
 		...sortAlphabetically(
 			[
 				// Array of unique category names.
-				...Object.keys( themePatterns )
+				...Object.keys( filteredPatterns )
 					.reduce( ( acc, patternName ) => {
 						return [
 							...acc,
-							...themePatterns[ patternName ]?.categories?.filter(
+							...filteredPatterns[ patternName ]?.categories?.filter(
 								( category ) => {
 									return ! acc.includes( category );
 								}
@@ -104,7 +97,7 @@ export default function ThemePatterns( { isVisible }: Props ) {
 	return (
 		<div hidden={ ! isVisible } className="patternmanager-theme-patterns">
 			<div className="patterns-container-inner">
-				{ ! Object.entries( patternsRef.current ?? {} ).length ? (
+				{ ! Object.entries( filteredPatterns ?? {} ).length ? (
 					<div className="grid-empty">
 						{ createInterpolateElement(
 							__(
@@ -126,9 +119,11 @@ export default function ThemePatterns( { isVisible }: Props ) {
 				) : (
 					<>
 						<div className="inner-sidebar">
-							<PatternSearch
-								patternsRefCurrent={ patternsRef.current }
-								setThemePatterns={ setThemePatterns }
+						<PatternSearch
+								patternsRefCurrent={ filteredPatterns }
+								setThemePatterns={ ( newFilteredPatterns: Patterns ) => {
+										setNewFilteredPatterns( newFilteredPatterns );
+								} }
 							/>
 							<PatternCategories
 								categories={ patternCategories }
@@ -138,7 +133,7 @@ export default function ThemePatterns( { isVisible }: Props ) {
 						</div>
 						<div className="inner-grid">
 							<PatternGrid
-								themePatterns={ themePatterns }
+								themePatterns={ filteredPatterns }
 								currentCategory={ currentCategory }
 								categoryToAlwaysInclude={ 'all-patterns' }
 							/>

From 79aec17e5c24a4f84f75c0c37a62d3b34266842b Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Thu, 19 Jan 2023 09:29:10 -0600
Subject: [PATCH 2/6] Move filtering to ThemePatterns/index.tsx

---
 .../ThemePatterns/PatternSearch.tsx           | 37 ++++---------------
 .../js/src/components/ThemePatterns/index.tsx | 29 +++++++++++----
 2 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/wp-modules/app/js/src/components/ThemePatterns/PatternSearch.tsx b/wp-modules/app/js/src/components/ThemePatterns/PatternSearch.tsx
index b1aa17705..7235592f8 100644
--- a/wp-modules/app/js/src/components/ThemePatterns/PatternSearch.tsx
+++ b/wp-modules/app/js/src/components/ThemePatterns/PatternSearch.tsx
@@ -8,44 +8,21 @@ import type { MutableRefObject, Dispatch, SetStateAction } from 'react';
 
 type Props = {
 	patternsRefCurrent: MutableRefObject< Patterns >[ 'current' ];
-	setThemePatterns: Dispatch< SetStateAction< Patterns > >;
-	keysToSearch?: Partial< keyof Pattern >[];
+	searchTerm: string;
+	setSearchTerm: ( newSearchTerm: string ) => void;
 };
 
 /** Component for searching the patterns by term, filtered by header/object key. */
 export default function PatternSearch( {
-	patternsRefCurrent,
-	setThemePatterns,
-	keysToSearch = [ 'title', 'keywords', 'description' ],
+	searchTerm,
+	setSearchTerm,
 }: Props ) {
-	const [ searchInput, setSearchInput ] = useState( '' );
-
 	return (
 		<SearchControl
 			className="pattern-search"
-			value={ searchInput }
-			onChange={ ( searchTerm ) => {
-				const matchedPatterns = Object.keys(
-					patternsRefCurrent
-				).reduce( ( acc, currentPattern ) => {
-					const match = keysToSearch.some( ( key ) => {
-						return patternsRefCurrent[ currentPattern ][ key ]
-							?.toString()
-							.toLowerCase()
-							.includes( searchTerm.toString().toLowerCase() );
-					} );
-
-					return match
-						? {
-								...acc,
-								[ currentPattern ]:
-									patternsRefCurrent[ currentPattern ],
-						  }
-						: acc;
-				}, {} );
-
-				setThemePatterns( matchedPatterns );
-				setSearchInput( searchTerm );
+			value={ searchTerm }
+			onChange={ ( newSearchTerm: string ) => {
+				setSearchTerm( newSearchTerm )
 			} }
 		/>
 	);
diff --git a/wp-modules/app/js/src/components/ThemePatterns/index.tsx b/wp-modules/app/js/src/components/ThemePatterns/index.tsx
index a8f77a9db..23b490c2b 100644
--- a/wp-modules/app/js/src/components/ThemePatterns/index.tsx
+++ b/wp-modules/app/js/src/components/ThemePatterns/index.tsx
@@ -29,13 +29,27 @@ type Props = {
 export default function ThemePatterns( { isVisible }: Props ) {
 	const { patterns } = usePmContext();
 	const [ currentCategory, setCurrentCategory ] = useState( 'all-patterns' );
-	const [ filteredPatterns, setFilteredPatterns ] = useState( createPatternsWithUncategorized( patterns.data ) );
+	const [ searchTerm, setSearchTerm ] = useState( '' );
 
-	function setNewFilteredPatterns( newPatterns: Patterns ) {
-		setFilteredPatterns( createPatternsWithUncategorized( newPatterns ) );
-	}
+	const filteredPatterns = searchTerm.trim()
+		? Object.entries(
+			createPatternsWithUncategorized( patterns.data )
+			).reduce( ( acc, [ patternName , currentPattern ] ) => {
+				const match = [ 'title', 'keywords', 'description' ].some( ( key ) => {
+					return currentPattern[ key ]
+						?.toString()
+						.toLowerCase()
+						.includes( searchTerm.toString().toLowerCase() );
+				} );
 
-	/** Catch pattern deletion since themePatterns is no longer derived. */
+				return match
+					? {
+							...acc,
+							[ patternName ]: currentPattern
+						}
+					: acc;
+			}, {} )
+		: createPatternsWithUncategorized( patterns.data )
 
 	/** Create an object for included_patterns that includes an 'uncategorized' category. */
 	function createPatternsWithUncategorized( patterns: Patterns ) {
@@ -121,9 +135,8 @@ export default function ThemePatterns( { isVisible }: Props ) {
 						<div className="inner-sidebar">
 						<PatternSearch
 								patternsRefCurrent={ filteredPatterns }
-								setThemePatterns={ ( newFilteredPatterns: Patterns ) => {
-										setNewFilteredPatterns( newFilteredPatterns );
-								} }
+								searchTerm={ searchTerm }
+								setSearchTerm={ setSearchTerm }
 							/>
 							<PatternCategories
 								categories={ patternCategories }

From 16bdbfdbb06898ec2297c5844912f97dc8c74c97 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Thu, 19 Jan 2023 09:33:47 -0600
Subject: [PATCH 3/6] Fix linting and duplicate variable name

---
 .../ThemePatterns/PatternSearch.tsx           |  7 +--
 .../js/src/components/ThemePatterns/index.tsx | 48 ++++++++++---------
 2 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/wp-modules/app/js/src/components/ThemePatterns/PatternSearch.tsx b/wp-modules/app/js/src/components/ThemePatterns/PatternSearch.tsx
index 7235592f8..0d6e4b88b 100644
--- a/wp-modules/app/js/src/components/ThemePatterns/PatternSearch.tsx
+++ b/wp-modules/app/js/src/components/ThemePatterns/PatternSearch.tsx
@@ -13,16 +13,13 @@ type Props = {
 };
 
 /** Component for searching the patterns by term, filtered by header/object key. */
-export default function PatternSearch( {
-	searchTerm,
-	setSearchTerm,
-}: Props ) {
+export default function PatternSearch( { searchTerm, setSearchTerm }: Props ) {
 	return (
 		<SearchControl
 			className="pattern-search"
 			value={ searchTerm }
 			onChange={ ( newSearchTerm: string ) => {
-				setSearchTerm( newSearchTerm )
+				setSearchTerm( newSearchTerm );
 			} }
 		/>
 	);
diff --git a/wp-modules/app/js/src/components/ThemePatterns/index.tsx b/wp-modules/app/js/src/components/ThemePatterns/index.tsx
index 23b490c2b..e679b5efd 100644
--- a/wp-modules/app/js/src/components/ThemePatterns/index.tsx
+++ b/wp-modules/app/js/src/components/ThemePatterns/index.tsx
@@ -33,35 +33,37 @@ export default function ThemePatterns( { isVisible }: Props ) {
 
 	const filteredPatterns = searchTerm.trim()
 		? Object.entries(
-			createPatternsWithUncategorized( patterns.data )
-			).reduce( ( acc, [ patternName , currentPattern ] ) => {
-				const match = [ 'title', 'keywords', 'description' ].some( ( key ) => {
-					return currentPattern[ key ]
-						?.toString()
-						.toLowerCase()
-						.includes( searchTerm.toString().toLowerCase() );
-				} );
+				createPatternsWithUncategorized( patterns.data )
+		  ).reduce( ( acc, [ patternName, currentPattern ] ) => {
+				const match = [ 'title', 'keywords', 'description' ].some(
+					( key ) => {
+						return currentPattern[ key ]
+							?.toString()
+							.toLowerCase()
+							.includes( searchTerm.toString().toLowerCase() );
+					}
+				);
 
 				return match
 					? {
 							...acc,
-							[ patternName ]: currentPattern
-						}
+							[ patternName ]: currentPattern,
+					  }
 					: acc;
-			}, {} )
-		: createPatternsWithUncategorized( patterns.data )
+		  }, {} )
+		: createPatternsWithUncategorized( patterns.data );
 
 	/** Create an object for included_patterns that includes an 'uncategorized' category. */
-	function createPatternsWithUncategorized( patterns: Patterns ) {
-		return Object.keys( patterns ).reduce(
+	function createPatternsWithUncategorized( ownPatterns: Patterns ) {
+		return Object.keys( ownPatterns ).reduce(
 			( acc, patternName ) => ( {
 				...acc,
 				[ patternName ]: {
-					...patterns[ patternName ],
+					...ownPatterns[ patternName ],
 					categories: [
 						// Spread in the categories, or 'uncategorized' if empty.
-						...( patterns[ patternName ].categories?.length
-							? patterns[ patternName ].categories
+						...( ownPatterns[ patternName ].categories?.length
+							? ownPatterns[ patternName ].categories
 							: [ 'uncategorized' ] ),
 					],
 				},
@@ -88,11 +90,11 @@ export default function ThemePatterns( { isVisible }: Props ) {
 					.reduce( ( acc, patternName ) => {
 						return [
 							...acc,
-							...filteredPatterns[ patternName ]?.categories?.filter(
-								( category ) => {
-									return ! acc.includes( category );
-								}
-							),
+							...filteredPatterns[
+								patternName
+							]?.categories?.filter( ( category ) => {
+								return ! acc.includes( category );
+							} ),
 						];
 					}, [] )
 					// Map the array to expected object shape.
@@ -133,7 +135,7 @@ export default function ThemePatterns( { isVisible }: Props ) {
 				) : (
 					<>
 						<div className="inner-sidebar">
-						<PatternSearch
+							<PatternSearch
 								patternsRefCurrent={ filteredPatterns }
 								searchTerm={ searchTerm }
 								setSearchTerm={ setSearchTerm }

From 12b33abb1b363a77828a6ca0dd4efcb6fa7c4a85 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Thu, 19 Jan 2023 09:46:42 -0600
Subject: [PATCH 4/6] Remove extra props

---
 .../app/js/src/components/ThemePatterns/PatternSearch.tsx    | 5 -----
 wp-modules/app/js/src/components/ThemePatterns/index.tsx     | 2 --
 2 files changed, 7 deletions(-)

diff --git a/wp-modules/app/js/src/components/ThemePatterns/PatternSearch.tsx b/wp-modules/app/js/src/components/ThemePatterns/PatternSearch.tsx
index 0d6e4b88b..665e36383 100644
--- a/wp-modules/app/js/src/components/ThemePatterns/PatternSearch.tsx
+++ b/wp-modules/app/js/src/components/ThemePatterns/PatternSearch.tsx
@@ -1,13 +1,8 @@
 // WP dependencies
 import { SearchControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 // Types
-import type { Pattern, Patterns } from '../../types';
-import type { MutableRefObject, Dispatch, SetStateAction } from 'react';
-
 type Props = {
-	patternsRefCurrent: MutableRefObject< Patterns >[ 'current' ];
 	searchTerm: string;
 	setSearchTerm: ( newSearchTerm: string ) => void;
 };
diff --git a/wp-modules/app/js/src/components/ThemePatterns/index.tsx b/wp-modules/app/js/src/components/ThemePatterns/index.tsx
index e679b5efd..154c25ffc 100644
--- a/wp-modules/app/js/src/components/ThemePatterns/index.tsx
+++ b/wp-modules/app/js/src/components/ThemePatterns/index.tsx
@@ -3,8 +3,6 @@ import { __ } from '@wordpress/i18n';
 import {
 	createInterpolateElement,
 	useState,
-	useRef,
-	useEffect,
 } from '@wordpress/element';
 
 // Hooks

From 356c0556ef58e112a36170b5653a992ed20d1eca Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Thu, 19 Jan 2023 10:23:44 -0600
Subject: [PATCH 5/6] Update filteredPatterns to patterns.data

---
 .../ThemePatterns/PatternSearch.tsx           | 21 -------------------
 .../js/src/components/ThemePatterns/index.tsx | 18 +++++++++-------
 2 files changed, 10 insertions(+), 29 deletions(-)
 delete mode 100644 wp-modules/app/js/src/components/ThemePatterns/PatternSearch.tsx

diff --git a/wp-modules/app/js/src/components/ThemePatterns/PatternSearch.tsx b/wp-modules/app/js/src/components/ThemePatterns/PatternSearch.tsx
deleted file mode 100644
index 665e36383..000000000
--- a/wp-modules/app/js/src/components/ThemePatterns/PatternSearch.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// WP dependencies
-import { SearchControl } from '@wordpress/components';
-
-// Types
-type Props = {
-	searchTerm: string;
-	setSearchTerm: ( newSearchTerm: string ) => void;
-};
-
-/** Component for searching the patterns by term, filtered by header/object key. */
-export default function PatternSearch( { searchTerm, setSearchTerm }: Props ) {
-	return (
-		<SearchControl
-			className="pattern-search"
-			value={ searchTerm }
-			onChange={ ( newSearchTerm: string ) => {
-				setSearchTerm( newSearchTerm );
-			} }
-		/>
-	);
-}
diff --git a/wp-modules/app/js/src/components/ThemePatterns/index.tsx b/wp-modules/app/js/src/components/ThemePatterns/index.tsx
index 154c25ffc..a8dacf5f3 100644
--- a/wp-modules/app/js/src/components/ThemePatterns/index.tsx
+++ b/wp-modules/app/js/src/components/ThemePatterns/index.tsx
@@ -1,4 +1,5 @@
 // WP dependencies
+import { SearchControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
 	createInterpolateElement,
@@ -11,7 +12,6 @@ import usePmContext from '../../hooks/usePmContext';
 // Components
 import PatternCategories from './PatternCategories';
 import PatternGrid from './PatternGrid';
-import PatternSearch from './PatternSearch';
 
 // Utils
 import convertToUpperCase from '../../utils/convertToUpperCase';
@@ -111,7 +111,7 @@ export default function ThemePatterns( { isVisible }: Props ) {
 	return (
 		<div hidden={ ! isVisible } className="patternmanager-theme-patterns">
 			<div className="patterns-container-inner">
-				{ ! Object.entries( filteredPatterns ?? {} ).length ? (
+				{ ! Object.entries( patterns.data ?? {} ).length ? (
 					<div className="grid-empty">
 						{ createInterpolateElement(
 							__(
@@ -133,12 +133,14 @@ export default function ThemePatterns( { isVisible }: Props ) {
 				) : (
 					<>
 						<div className="inner-sidebar">
-							<PatternSearch
-								patternsRefCurrent={ filteredPatterns }
-								searchTerm={ searchTerm }
-								setSearchTerm={ setSearchTerm }
-							/>
-							<PatternCategories
+						<SearchControl
+							className="pattern-search"
+							value={ searchTerm }
+							onChange={ ( newSearchTerm: string ) => {
+								setSearchTerm( newSearchTerm );
+							} }
+						/>
+						<PatternCategories
 								categories={ patternCategories }
 								currentCategory={ currentCategory }
 								setCurrentCategory={ setCurrentCategory }

From 018dfd971649ef491b0eb5ce2b78ac77901e61f1 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Thu, 19 Jan 2023 10:29:47 -0600
Subject: [PATCH 6/6] Fix prettier errors

---
 .../js/src/components/ThemePatterns/index.tsx | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/wp-modules/app/js/src/components/ThemePatterns/index.tsx b/wp-modules/app/js/src/components/ThemePatterns/index.tsx
index a8dacf5f3..2c04ab765 100644
--- a/wp-modules/app/js/src/components/ThemePatterns/index.tsx
+++ b/wp-modules/app/js/src/components/ThemePatterns/index.tsx
@@ -1,10 +1,7 @@
 // WP dependencies
 import { SearchControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import {
-	createInterpolateElement,
-	useState,
-} from '@wordpress/element';
+import { createInterpolateElement, useState } from '@wordpress/element';
 
 // Hooks
 import usePmContext from '../../hooks/usePmContext';
@@ -133,14 +130,14 @@ export default function ThemePatterns( { isVisible }: Props ) {
 				) : (
 					<>
 						<div className="inner-sidebar">
-						<SearchControl
-							className="pattern-search"
-							value={ searchTerm }
-							onChange={ ( newSearchTerm: string ) => {
-								setSearchTerm( newSearchTerm );
-							} }
-						/>
-						<PatternCategories
+							<SearchControl
+								className="pattern-search"
+								value={ searchTerm }
+								onChange={ ( newSearchTerm: string ) => {
+									setSearchTerm( newSearchTerm );
+								} }
+							/>
+							<PatternCategories
 								categories={ patternCategories }
 								currentCategory={ currentCategory }
 								setCurrentCategory={ setCurrentCategory }