Reverted refactor of packages/edit-site/src/components/sidebar-naviga…

…tion-screen-page/index.js Will do it in a follow up
WordPress · Jul 7, 2023 · 9829243 · 9829243
1 parent 21b3a2b
commit 9829243
Showing 1 changed file with 61 additions and 77 deletions.
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
@@ -9,7 +9,7 @@ import {
 	ExternalLink,
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
+import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { pencil } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
@@ -27,26 +27,27 @@ import PageDetails from './page-details';
 import PageActions from '../page-actions';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 
-function usePageDetails( postId ) {
-	const { record, featuredMediaSourceUrl, featuredMediaAltText } = useSelect(
+export default function SidebarNavigationScreenPage() {
+	const navigator = useNavigator();
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const {
+		params: { postId },
+	} = useNavigator();
+	const { record } = useEntityRecord( 'postType', 'page', postId );
+
+	const { featuredMediaAltText, featuredMediaSourceUrl } = useSelect(
 		( select ) => {
 			const { getEntityRecord } = select( coreStore );
-			const pageRecord = select( coreStore ).getEntityRecord(
-				'postType',
-				'page',
-				postId
-			);
-
 			// Featured image.
-			const attachedMedia = pageRecord?.featured_media
+			const attachedMedia = record?.featured_media
 				? getEntityRecord(
 						'postType',
 						'attachment',
-						pageRecord?.featured_media
+						record?.featured_media
 				  )
 				: null;
+
 			return {
-				record: pageRecord,
 				featuredMediaSourceUrl:
 					attachedMedia?.media_details.sizes?.medium?.source_url ||
 					attachedMedia?.source_url,
@@ -57,74 +58,18 @@ function usePageDetails( postId ) {
 				),
 			};
 		},
-		[ postId ]
-	);
-
-	const title = decodeEntities(
-		record?.title?.rendered || __( '(no title)' )
+		[ record ]
 	);
 
 	const featureImageAltText = featuredMediaAltText
 		? decodeEntities( featuredMediaAltText )
 		: decodeEntities( record?.title?.rendered || __( 'Featured image' ) );
 
-	const content = (
-		<>
-			{ !! featuredMediaSourceUrl && (
-				<VStack
-					className="edit-site-sidebar-navigation-screen-page__featured-image-wrapper"
-					alignment="left"
-					spacing={ 2 }
-				>
-					<div className="edit-site-sidebar-navigation-screen-page__featured-image has-image">
-						<img
-							alt={ featureImageAltText }
-							src={ featuredMediaSourceUrl }
-						/>
-					</div>
-				</VStack>
-			) }
-			{ !! record?.excerpt?.rendered && (
-				<Truncate
-					className="edit-site-sidebar-navigation-screen-page__excerpt"
-					numberOfLines={ 3 }
-				>
-					{ stripHTML( record.excerpt.rendered ) }
-				</Truncate>
-			) }
-			<PageDetails id={ postId } />
-		</>
-	);
-
-	const meta = record?.link ? (
-		<ExternalLink
-			className="edit-site-sidebar-navigation-screen__page-link"
-			href={ record.link }
-		>
-			{ filterURLForDisplay( safeDecodeURIComponent( record.link ) ) }
-		</ExternalLink>
-	) : null;
-
-	const footer = !! record?.modified ? (
-		<SidebarNavigationScreenDetailsFooter
-			lastModifiedDateTime={ record.modified }
-		/>
-	) : null;
-
-	return { title, meta, content, footer };
-}
-
-export default function SidebarNavigationScreenPage() {
-	const navigator = useNavigator();
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const {
-		params: { postId },
-	} = useNavigator();
-	const { title, meta, content, footer } = usePageDetails( postId );
-
-	return (
+	return record ? (
 		<SidebarNavigationScreen
-			title={ title }
+			title={ decodeEntities(
+				record?.title?.rendered || __( '(no title)' )
+			) }
 			actions={
 				<>
 					<PageActions
@@ -141,9 +86,48 @@ export default function SidebarNavigationScreenPage() {
 					/>
 				</>
 			}
-			meta={ meta }
-			content={ content }
-			footer={ footer }
+			meta={
+				<ExternalLink
+					className="edit-site-sidebar-navigation-screen__page-link"
+					href={ record.link }
+				>
+					{ filterURLForDisplay(
+						safeDecodeURIComponent( record.link )
+					) }
+				</ExternalLink>
+			}
+			content={
+				<>
+					{ !! featuredMediaSourceUrl && (
+						<VStack
+							className="edit-site-sidebar-navigation-screen-page__featured-image-wrapper"
+							alignment="left"
+							spacing={ 2 }
+						>
+							<div className="edit-site-sidebar-navigation-screen-page__featured-image has-image">
+								<img
+									alt={ featureImageAltText }
+									src={ featuredMediaSourceUrl }
+								/>
+							</div>
+						</VStack>
+					) }
+					{ !! record?.excerpt?.rendered && (
+						<Truncate
+							className="edit-site-sidebar-navigation-screen-page__excerpt"
+							numberOfLines={ 3 }
+						>
+							{ stripHTML( record.excerpt.rendered ) }
+						</Truncate>
+					) }
+					<PageDetails id={ postId } />
+				</>
+			}
+			footer={
+				<SidebarNavigationScreenDetailsFooter
+					lastModifiedDateTime={ record?.modified }
+				/>
+			}
 		/>
-	);
+	) : null;
 }