Posts DataViews: Refactor the router to use route registration (WordP…

…ress#67160)

Co-authored-by: youknowriad <[email protected]>
Co-authored-by: ntsekouras <[email protected]>

packages/edit-site/src/components/posts-app-routes/home.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function HomeMobileView() {
+	const { params = {} } = useLocation();
+	const { canvas = 'view' } = params;
+
+	return canvas === 'edit' ? (
+		<Editor isPostsList />
+	) : (
+		<SidebarNavigationScreenMain />
+	);
+}
+
+export const homeRoute = {
+	name: 'home',
+	match: () => {
+		return true;
+	},
+	areas: {
+		sidebar: <SidebarNavigationScreenMain />,
+		preview: <Editor isPostsList />,
+		mobile: HomeMobileView,
+	},
+};

packages/edit-site/src/components/posts-app-routes/index.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { useRegistry, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as siteEditorStore } from '../../store';
+import { homeRoute } from './home';
+import { postsListViewQuickEditRoute } from './posts-list-view-quick-edit';
+import { postsListViewRoute } from './posts-list-view';
+import { postsViewQuickEditRoute } from './posts-view-quick-edit';
+import { postsViewRoute } from './posts-view';
+import { postsEditRoute } from './posts-edit';
+
+const routes = [
+	postsListViewQuickEditRoute,
+	postsListViewRoute,
+	postsViewQuickEditRoute,
+	postsViewRoute,
+	postsEditRoute,
+	homeRoute,
+];
+
+export function useRegisterPostsAppRoutes() {
+	const registry = useRegistry();
+	const { registerRoute } = unlock( useDispatch( siteEditorStore ) );
+	useEffect( () => {
+		registry.batch( () => {
+			routes.forEach( registerRoute );
+		} );
+	}, [ registry, registerRoute ] );
+}

packages/edit-site/src/components/posts-app-routes/posts-edit.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostList from '../post-list';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import Editor from '../editor';
+
+export const postsEditRoute = {
+	name: 'posts-edit',
+	match: ( params ) => {
+		return params.postType === 'post' && params.canvas === 'edit';
+	},
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Posts' ) }
+				isRoot
+				content={ <DataViewsSidebarContent /> }
+			/>
+		),
+		content: <PostList postType="post" />,
+		mobile: <Editor isPostsList />,
+		preview: <Editor isPostsList />,
+	},
+};

packages/edit-site/src/components/posts-app-routes/posts-list-view-quick-edit.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import PostList from '../post-list';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { unlock } from '../../lock-unlock';
+import { PostEdit } from '../post-edit';
+import Editor from '../editor';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function PostQuickEdit() {
+	const { params } = useLocation();
+	return <PostEdit postType="post" postId={ params.postId } />;
+}
+
+export const postsListViewQuickEditRoute = {
+	name: 'posts-list-view-quick-edit',
+	match: ( params ) => {
+		return (
+			params.isCustom !== 'true' &&
+			( params.layout ?? 'list' ) === 'list' &&
+			!! params.quickEdit &&
+			params.postType === 'post' &&
+			params.canvas !== 'edit'
+		);
+	},
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Posts' ) }
+				isRoot
+				content={ <DataViewsSidebarContent /> }
+			/>
+		),
+		content: <PostList postType="post" />,
+		mobile: <PostList postType="post" />,
+		preview: <Editor />,
+		edit: <PostQuickEdit />,
+	},
+	widths: {
+		content: 380,
+		edit: 380,
+	},
+};

packages/edit-site/src/components/posts-app-routes/posts-list-view.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostList from '../post-list';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import Editor from '../editor';
+
+export const postsListViewRoute = {
+	name: 'posts-list-view',
+	match: ( params ) => {
+		return (
+			params.isCustom !== 'true' &&
+			( params.layout ?? 'list' ) === 'list' &&
+			! params.quickEdit &&
+			params.postType === 'post' &&
+			params.canvas !== 'edit'
+		);
+	},
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Posts' ) }
+				isRoot
+				content={ <DataViewsSidebarContent /> }
+			/>
+		),
+		content: <PostList postType="post" />,
+		preview: <Editor isPostsList />,
+		mobile: <PostList postType="post" />,
+	},
+	widths: {
+		content: 380,
+	},
+};

packages/edit-site/src/components/posts-app-routes/posts-view-quick-edit.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import PostList from '../post-list';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { unlock } from '../../lock-unlock';
+import { PostEdit } from '../post-edit';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function PostQuickEdit() {
+	const { params } = useLocation();
+	return <PostEdit postType="post" postId={ params.postId } />;
+}
+
+export const postsViewQuickEditRoute = {
+	name: 'posts-view-quick-edit',
+	match: ( params ) => {
+		return (
+			( params.isCustom === 'true' ||
+				( params.layout ?? 'list' ) !== 'list' ) &&
+			!! params.quickEdit &&
+			params.postType === 'post' &&
+			params.canvas !== 'edit'
+		);
+	},
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Posts' ) }
+				isRoot
+				content={ <DataViewsSidebarContent /> }
+			/>
+		),
+		content: <PostList postType="post" />,
+		mobile: <PostList postType="post" />,
+		edit: <PostQuickEdit />,
+	},
+	widths: {
+		edit: 380,
+	},
+};

packages/edit-site/src/components/posts-app-routes/posts-view.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostList from '../post-list';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+
+export const postsViewRoute = {
+	name: 'posts-view',
+	match: ( params ) => {
+		return (
+			( params.isCustom === 'true' ||
+				( params.layout ?? 'list' ) !== 'list' ) &&
+			! params.quickEdit &&
+			params.postType === 'post' &&
+			params.canvas !== 'edit'
+		);
+	},
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Posts' ) }
+				isRoot
+				content={ <DataViewsSidebarContent /> }
+			/>
+		),
+		content: <PostList postType="post" />,
+		mobile: <PostList postType="post" />,
+	},
+};

packages/edit-site/src/components/posts-app/index.js

@@ -11,13 +11,15 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import Layout from '../layout';
-import useActiveRoute from './router';
+import { useRegisterPostsAppRoutes } from '../posts-app-routes';
 import { unlock } from '../../lock-unlock';
+import useActiveRoute from '../layout/router';
 
 const { RouterProvider } = unlock( routerPrivateApis );
 const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
 function PostsLayout() {
+	useRegisterPostsAppRoutes();
 	const route = useActiveRoute();
 	return <Layout route={ route } />;
 }