Skip to content
This repository has been archived by the owner on Oct 16, 2024. It is now read-only.

Move patternsRef.current into filteredPatterns #16

Merged
merged 6 commits into from
Jan 19, 2023
Merged

Move patternsRef.current into filteredPatterns #16

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0985d9c
Add a notion of filtered patterns
kienstra Jan 19, 2023
79aec17
Move filtering to ThemePatterns/index.tsx
kienstra Jan 19, 2023
16bdbfd
Fix linting and duplicate variable name
kienstra Jan 19, 2023
12b33ab
Remove extra props
kienstra Jan 19, 2023
356c055
Update filteredPatterns to patterns.data
kienstra Jan 19, 2023
018dfd9
Fix prettier errors
kienstra Jan 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 0 additions & 52 deletions wp-modules/app/js/src/components/ThemePatterns/PatternSearch.tsx
View file
Open in desktop

This file was deleted.

76 changes: 43 additions & 33 deletions wp-modules/app/js/src/components/ThemePatterns/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
// WP dependencies
import { SearchControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import {
createInterpolateElement,
useState,
useRef,
useEffect,
} from '@wordpress/element';

// Hooks
Expand All @@ -13,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';
Expand All @@ -29,32 +27,41 @@ 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 [ searchTerm, setSearchTerm ] = useState( '' );

const patternsRef = useRef( themePatterns );
const filteredPatterns = searchTerm.trim()
Copy link
Contributor Author

@kienstra kienstra Jan 19, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

filteredPatterns is like patternsRef.current

Ideally, filteredPatterns would also filter by category here, like how PatternGrid does that.

? 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. */
useEffect( () => {
const updatedPatternData = createPatternsWithUncategorized( patterns );
setThemePatterns( updatedPatternData );
patternsRef.current = updatedPatternData;
}, [ patterns.data ] );
return match
? {
...acc,
[ patternName ]: currentPattern,
}
: acc;
}, {} )
: createPatternsWithUncategorized( 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( ownPatterns: Patterns ) {
return Object.keys( ownPatterns ).reduce(
( acc, patternName ) => ( {
...acc,
[ patternName ]: {
...patternData[ patternName ],
...ownPatterns[ patternName ],
categories: [
// Spread in the categories, or 'uncategorized' if empty.
...( patternData[ patternName ].categories?.length
? patternData[ patternName ].categories
...( ownPatterns[ patternName ].categories?.length
? ownPatterns[ patternName ].categories
: [ 'uncategorized' ] ),
],
},
Expand All @@ -77,15 +84,15 @@ 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(
( category ) => {
return ! acc.includes( category );
}
),
...filteredPatterns[
patternName
]?.categories?.filter( ( category ) => {
return ! acc.includes( category );
} ),
];
}, [] )
// Map the array to expected object shape.
Expand All @@ -104,7 +111,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( patterns.data ?? {} ).length ? (
<div className="grid-empty">
{ createInterpolateElement(
__(
Expand All @@ -126,19 +133,22 @@ export default function ThemePatterns( { isVisible }: Props ) {
) : (
<>
<div className="inner-sidebar">
<PatternSearch
patternsRefCurrent={ patternsRef.current }
setThemePatterns={ setThemePatterns }
/>
<PatternCategories
<SearchControl
className="pattern-search"
value={ searchTerm }
onChange={ ( newSearchTerm: string ) => {
setSearchTerm( newSearchTerm );
} }
/>
<PatternCategories
categories={ patternCategories }
currentCategory={ currentCategory }
setCurrentCategory={ setCurrentCategory }
/>
</div>
<div className="inner-grid">
<PatternGrid
themePatterns={ themePatterns }
themePatterns={ filteredPatterns }
currentCategory={ currentCategory }
categoryToAlwaysInclude={ 'all-patterns' }
/>
Expand Down