Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pages: update useView logic #63889

Merged
merged 6 commits into from
Aug 2, 2024
Merged

Pages: update useView logic #63889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
563abae
Simplify useDefaultViews
oandregal Jul 30, 2024
8c96563
Simplify useView
oandregal Jul 30, 2024
272d355
No need to export DEFAULT_POST_BASE
oandregal Aug 1, 2024
6aae380
Provide default type if layout is undefined
oandregal Aug 2, 2024
6958d22
Skip updating the layout URL param if type is list and layout undefined
oandregal Aug 2, 2024
f727f52
Fix performance test
oandregal Aug 2, 2024
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
165 changes: 97 additions & 68 deletions packages/edit-site/src/components/post-list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,100 +39,129 @@ const { useLocation, useHistory } = unlock( routerPrivateApis );
const { useEntityRecordsWithPermissions } = unlock( coreDataPrivateApis );
const EMPTY_ARRAY = [];

const getDefaultView = ( defaultViews, activeView ) => {
return defaultViews.find( ( { slug } ) => slug === activeView )?.view;
};

const getCustomView = ( editedEntityRecord ) => {
if ( ! editedEntityRecord?.content ) {
return undefined;
}

const content = JSON.parse( editedEntityRecord.content );
if ( ! content ) {
return undefined;
}

return {
...content,
layout: defaultLayouts[ content.type ]?.layout,
};
};

/**
* This function abstracts working with default & custom views by
* providing a [ state, setState ] tuple based on the URL parameters.
*
* Consumers use the provided tuple to work with state
* and don't have to deal with the specifics of default & custom views.
*
* @param {string} postType Post type to retrieve default views for.
* @return {Array} The [ state, setState ] tuple.
*/
function useView( postType ) {
const {
params: { activeView = 'all', isCustom = 'false', layout },
} = useLocation();
const history = useHistory();
const DEFAULT_VIEWS = useDefaultViews( { postType } );
const selectedDefaultView = useMemo( () => {
const defaultView =
isCustom === 'false' &&
DEFAULT_VIEWS[ postType ].find(
( { slug } ) => slug === activeView
)?.view;
if ( isCustom === 'false' && layout ) {
return {
...defaultView,
type: layout,
layout: defaultLayouts[ layout ]?.layout,
};
}
return defaultView;
}, [ isCustom, activeView, layout, postType, DEFAULT_VIEWS ] );
const [ view, setView ] = useState( selectedDefaultView );

useEffect( () => {
if ( selectedDefaultView ) {
setView( selectedDefaultView );
}
}, [ selectedDefaultView ] );
const editedViewRecord = useSelect(
const defaultViews = useDefaultViews( { postType } );
const { editEntityRecord } = useDispatch( coreStore );
const editedEntityRecord = useSelect(
( select ) => {
if ( isCustom !== 'true' ) {
return;
return undefined;
}

const { getEditedEntityRecord } = select( coreStore );
const dataviewRecord = getEditedEntityRecord(
return getEditedEntityRecord(
'postType',
'wp_dataviews',
Number( activeView )
);
return dataviewRecord;
},
[ activeView, isCustom ]
);
const { editEntityRecord } = useDispatch( coreStore );

const customView = useMemo( () => {
const storedView =
editedViewRecord?.content &&
JSON.parse( editedViewRecord?.content );
if ( ! storedView ) {
return storedView;
}

return {
...storedView,
layout: defaultLayouts[ storedView?.type ]?.layout,
};
}, [ editedViewRecord?.content ] );

const setCustomView = useCallback(
( viewToSet ) => {
editEntityRecord(
'postType',
'wp_dataviews',
editedViewRecord?.id,
{
content: JSON.stringify( viewToSet ),
const [ view, setView ] = useState( () => {
if ( isCustom === 'true' ) {
return (
getCustomView( editedEntityRecord ) ?? {
type: layout ?? LAYOUT_LIST,
}
);
},
[ editEntityRecord, editedViewRecord?.id ]
);
}
return (
getDefaultView( defaultViews, activeView ) ?? {
type: layout ?? LAYOUT_LIST,
}
);
} );

const setDefaultViewAndUpdateUrl = useCallback(
( viewToSet ) => {
if ( viewToSet.type !== view?.type ) {
const { params } = history.getLocationWithParams();
const setViewWithUrlUpdate = useCallback(
( newView ) => {
const { params } = history.getLocationWithParams();

if ( newView.type === LAYOUT_LIST && ! params?.layout ) {
// Skip updating the layout URL param if
// it is not present and the newView.type is LAYOUT_LIST.
} else if ( newView.type !== params?.layout ) {
history.push( {
...params,
layout: viewToSet.type,
layout: newView.type,
} );
}
setView( viewToSet );

setView( newView );

if ( isCustom === 'true' && editedEntityRecord?.id ) {
editEntityRecord(
'postType',
'wp_dataviews',
editedEntityRecord?.id,
{
content: JSON.stringify( newView ),
}
);
}
},
[ history, view?.type ]
[ history, isCustom, editEntityRecord, editedEntityRecord?.id ]
);

if ( isCustom === 'false' ) {
return [ view, setDefaultViewAndUpdateUrl ];
} else if ( isCustom === 'true' && customView ) {
return [ customView, setCustomView ];
}
// Loading state where no the view was not found on custom views or default views.
return [ DEFAULT_VIEWS[ postType ][ 0 ].view, setDefaultViewAndUpdateUrl ];
// When layout URL param changes, update the view type
// without affecting any other config.
useEffect( () => {
setView( ( prevView ) => ( {
...prevView,
type: layout ?? LAYOUT_LIST,
} ) );
}, [ layout ] );

// When activeView or isCustom URL parameters change,
// reset the view & update the layout URL param to match the view's type.
useEffect( () => {
let newView;
if ( isCustom === 'true' ) {
newView = getCustomView( editedEntityRecord );
} else {
newView = getDefaultView( defaultViews, activeView );
}

if ( newView ) {
setViewWithUrlUpdate( newView );
Copy link
Member

Choose a reason for hiding this comment

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

I think when we switch to a custom view, as here we call setViewWithUrlUpdate which has this code if ( isCustom === 'true' && editedEntityRecord?.id ) { editEntityRecord(, we will endup calling get editEntityRecord just because of loading the view which may trigger a rerender. Not a big issue.

Copy link
Member Author

Choose a reason for hiding this comment

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

That's right. I've looked at this but don't see a way to improve it at the moment. Custom views are an experimental feature and this isn't a big issue, so I'll go ahead with this PR anyway because it provides a lot of value.

I'd be happy to pair/look at this in a follow-up.

}
}, [ activeView, isCustom, defaultViews, editedEntityRecord ] );

return [ view, setViewWithUrlUpdate, setViewWithUrlUpdate ];
}

const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
Expand Down Expand Up @@ -165,7 +194,7 @@ export default function PostList( { postType } ) {

const queryArgs = useMemo( () => {
const filters = {};
view.filters.forEach( ( filter ) => {
view.filters?.forEach( ( filter ) => {
if (
filter.field === 'status' &&
filter.operator === OPERATOR_IS_ANY
Expand Down
6 changes: 2 additions & 4 deletions packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
const { saveEntityRecord } = useDispatch( coreStore );
const [ title, setTitle ] = useState( '' );
const [ isSaving, setIsSaving ] = useState( false );
const DEFAULT_VIEWS = useDefaultViews( { postType: type } );
const defaultViews = useDefaultViews( { postType: type } );
return (
<form
onSubmit={ async ( event ) => {
Expand Down Expand Up @@ -61,9 +61,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
title,
status: 'publish',
wp_dataviews_type: dataViewTaxonomyId,
content: JSON.stringify(
DEFAULT_VIEWS[ type ][ 0 ].view
),
content: JSON.stringify( defaultViews[ 0 ].view ),
}
);
const {
Expand Down
Loading
Loading