Remove isShowingFilter props, and use a key approach (includes some d…

…ebug code).
WordPress · Jul 30, 2024 · 617aa48 · 617aa48
1 parent a53f683
commit 617aa48
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 31 deletions.
diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx
@@ -49,8 +49,6 @@ type DataViewsProps< Item > = {
 	selection?: string[];
 	onChangeSelection?: ( items: string[] ) => void;
 	header?: ReactNode;
-	isShowingFilter?: boolean;
-	setIsShowingFilter?: React.Dispatch< React.SetStateAction< boolean > >;
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
 	: { getItemId: ( item: Item ) => string } );
@@ -72,18 +70,11 @@ export default function DataViews< Item >( {
 	selection: selectionProperty,
 	onChangeSelection,
 	header,
-	isShowingFilter: isShowingFilterProperty,
-	setIsShowingFilter: setIsShowingFilterProperty,
 }: DataViewsProps< Item > ) {
 	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
 	const [ density, setDensity ] = useState< number >( 0 );
-	const [ isShowingFilterState, setIsShowingFilterState ] =
-		useState< boolean >( false );
 	const [ isShowingFilter, setIsShowingFilter ] =
-		isShowingFilterProperty === undefined ||
-		setIsShowingFilterProperty === undefined
-			? [ isShowingFilterState, setIsShowingFilterState ]
-			: [ isShowingFilterProperty, setIsShowingFilterProperty ];
+		useState< boolean >( false );
 	const isUncontrolled =
 		selectionProperty === undefined || onChangeSelection === undefined;
 	const selection = isUncontrolled ? selectionState : selectionProperty;

diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js
@@ -86,11 +86,6 @@ export default function DataviewsPatterns() {
 		syncStatus: viewSyncStatus,
 	} );
 
-	const [ isShowingFilter, setIsShowingFilter ] = useState( false );
-	useEffect( () => {
-		setIsShowingFilter( false );
-	}, [ categoryId, postType ] );
-
 	const { records } = useEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, {
 		per_page: -1,
 	} );
@@ -176,6 +171,7 @@ export default function DataviewsPatterns() {
 					descriptionId={ `${ id }-description` }
 				/>
 				<DataViews
+					key={ categoryId + postType }
 					paginationInfo={ paginationInfo }
 					fields={ fields }
 					actions={ actions }
@@ -185,8 +181,6 @@ export default function DataviewsPatterns() {
 					view={ view }
 					onChangeView={ setView }
 					defaultLayouts={ defaultLayouts }
-					isShowingFilter={ isShowingFilter }
-					setIsShowingFilter={ setIsShowingFilter }
 				/>
 			</Page>
 		</ExperimentalBlockEditorProvider>

diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
@@ -97,10 +97,6 @@ const DEFAULT_VIEW = {
 export default function PageTemplates() {
 	const { params } = useLocation();
 	const { activeView = 'all', layout, postId } = params;
-	const [ isShowingFilter, setIsShowingFilter ] = useState( false );
-	useEffect( () => {
-		setIsShowingFilter( false );
-	}, [ activeView ] );
 	const [ selection, setSelection ] = useState( [ postId ] );
 
 	const defaultView = useMemo( () => {
@@ -219,6 +215,7 @@ export default function PageTemplates() {
 			actions={ <AddNewTemplate /> }
 		>
 			<DataViews
+				key={ activeView }
 				paginationInfo={ paginationInfo }
 				fields={ fields }
 				actions={ actions }
@@ -229,8 +226,6 @@ export default function PageTemplates() {
 				onChangeSelection={ onChangeSelection }
 				selection={ selection }
 				defaultLayouts={ defaultLayouts }
-				isShowingFilter={ isShowingFilter }
-				setIsShowingFilter={ setIsShowingFilter }
 			/>
 		</Page>
 	);

diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js
@@ -60,7 +60,15 @@ function useView( postType ) {
 		}
 		return defaultView;
 	}, [ isCustom, activeView, layout, postType, DEFAULT_VIEWS ] );
-	const [ view, setView ] = useState( selectedDefaultView );
+	const [ view, setViewS ] = useState( selectedDefaultView );
+	const setView = useCallback(
+		( ...args ) => {
+			console.trace();
+			console.log( args );
+			setViewS( ...args );
+		},
+		[ setViewS ]
+	);
 
 	useEffect( () => {
 		if ( selectedDefaultView ) {
@@ -145,12 +153,13 @@ export default function PostList( { postType } ) {
 	const [ view, setView ] = useView( postType );
 	const history = useHistory();
 	const location = useLocation();
-	const { postId, quickEdit = false, isCustom, activeView } = location.params;
+	const {
+		postId,
+		quickEdit = false,
+		isCustom,
+		activeView = 'all',
+	} = location.params;
 	const [ selection, setSelection ] = useState( postId?.split( ',' ) ?? [] );
-	const [ isShowingFilter, setIsShowingFilter ] = useState( false );
-	useEffect( () => {
-		setIsShowingFilter( false );
-	}, [ isCustom, activeView, postType ] );
 	const onChangeSelection = useCallback(
 		( items ) => {
 			setSelection( items );
@@ -295,6 +304,7 @@ export default function PostList( { postType } ) {
 			}
 		>
 			<DataViews
+				key={ activeView + isCustom }
 				paginationInfo={ paginationInfo }
 				fields={ fields }
 				actions={ actions }
@@ -306,8 +316,6 @@ export default function PostList( { postType } ) {
 				onChangeSelection={ onChangeSelection }
 				getItemId={ getItemId }
 				defaultLayouts={ defaultLayouts }
-				isShowingFilter={ isShowingFilter }
-				setIsShowingFilter={ setIsShowingFilter }
 				header={
 					window.__experimentalQuickEditDataViews &&
 					view.type !== LAYOUT_LIST &&