Add mobile view to Recent Feed Overhaul.

Automattic · Nov 6, 2024 · 4110aa3 · 4110aa3
1 parent efd1799
commit 4110aa3
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 31 deletions.
diff --git a/client/reader/recent/index.tsx b/client/reader/recent/index.tsx
@@ -1,3 +1,5 @@
+import { WIDE_BREAKPOINT } from '@automattic/viewport';
+import { useBreakpoint } from '@automattic/viewport-react';
 import { DataViews, filterSortAndPaginate, SupportedLayouts, View } from '@wordpress/dataviews';
 import { translate } from 'i18n-calypso';
 import { useState, useEffect, useCallback, useMemo } from 'react';
@@ -18,31 +20,31 @@ import './style.scss';
 const Recent = () => {
 	const dispatch = useDispatch< ThunkDispatch< AppState, void, AnyAction > >();
 	const [ selectedItem, setSelectedItem ] = useState< ReaderPost | null >( null );
+	const isWide = useBreakpoint( WIDE_BREAKPOINT );
 
 	const [ view, setView ] = useState< View >( {
 		type: 'table',
 		fields: [ 'seen', 'post' ],
 	} );
 
-	const { data, posts } = useSelector( ( state: AppState ) => {
-		const streamData = state.reader?.streams?.recent;
-		const postsMap: Record< string, PostItem > = {};
+	const data = useSelector( ( state: AppState ) => state.reader?.streams?.recent );
 
-		// Create a map of posts for all items
-		streamData?.items?.forEach( ( item: ReaderPost ) => {
+	const posts = useSelector( ( state: AppState ) => {
+		const items = data?.items;
+		if ( ! items ) {
+			return {};
+		}
+
+		return items.reduce( ( acc: Record< string, PostItem >, item: ReaderPost ) => {
 			const post = getPostByKey( state, {
-				feedId: +item.blogId,
-				postId: +item.postId,
+				feedId: item.blogId,
+				postId: item.postId,
 			} );
 			if ( post ) {
-				postsMap[ `${ item.blogId }-${ item.postId }` ] = post;
+				acc[ `${ item.blogId }-${ item.postId }` ] = post;
 			}
-		} );
-
-		return {
-			data: streamData,
-			posts: postsMap,
-		};
+			return acc;
+		}, {} );
 	}, shallowEqual );
 
 	const getPostFromItem = useCallback(
@@ -53,6 +55,17 @@ const Recent = () => {
 		[ posts ]
 	);
 
+	const handleItemClick = useCallback(
+		( item: ReaderPost ) => {
+			if ( isWide ) {
+				setSelectedItem( item );
+			} else {
+				// TODO: Fetch the post and navigate to it.
+			}
+		},
+		[ isWide ]
+	);
+
 	const fields = useMemo(
 		() => [
 			{
@@ -63,7 +76,7 @@ const Recent = () => {
 						<RecentSeenField
 							item={ item }
 							post={ getPostFromItem( item ) }
-							setSelectedItem={ setSelectedItem }
+							handleItemClick={ handleItemClick }
 						/>
 					);
 				},
@@ -77,14 +90,14 @@ const Recent = () => {
 						<RecentPostField
 							item={ item }
 							post={ getPostFromItem( item ) }
-							setSelectedItem={ setSelectedItem }
+							handleItemClick={ handleItemClick }
 						/>
 					);
 				},
 				enableHiding: false,
 			},
 		],
-		[ getPostFromItem ]
+		[ getPostFromItem, handleItemClick ]
 	);
 
 	const defaultLayouts = [

diff --git a/client/reader/recent/recent-post-field.tsx b/client/reader/recent/recent-post-field.tsx
@@ -4,16 +4,16 @@ import type { ReaderPost, PostItem } from './types';
 interface RecentPostFieldProps {
 	item: ReaderPost;
 	post: PostItem;
-	setSelectedItem: ( post: ReaderPost | null ) => void;
+	handleItemClick: ( item: ReaderPost ) => void;
 }
 
-const RecentPostField: React.FC< RecentPostFieldProps > = ( { item, post, setSelectedItem } ) => {
+const RecentPostField: React.FC< RecentPostFieldProps > = ( { item, post, handleItemClick } ) => {
 	if ( ! post ) {
 		return null;
 	}
 
 	return (
-		<Button className="recent-post-field" onClick={ () => setSelectedItem( item ) }>
+		<Button className="recent-post-field" onClick={ () => handleItemClick( item ) }>
 			<div className="recent-post-field__title">
 				<div className="recent-post-field__title-text">{ post?.title }</div>
 				<div className="recent-post-field__site-name">{ item.site_name }</div>

diff --git a/client/reader/recent/recent-seen-field.tsx b/client/reader/recent/recent-seen-field.tsx
@@ -5,12 +5,12 @@ import type { PostItem, ReaderPost } from './types';
 interface RecentSeenFieldProps {
 	item: ReaderPost;
 	post: PostItem;
-	setSelectedItem: ( post: ReaderPost | null ) => void;
+	handleItemClick: ( item: ReaderPost ) => void;
 }
 
-const RecentSeenField: React.FC< RecentSeenFieldProps > = ( { item, post, setSelectedItem } ) => {
+const RecentSeenField: React.FC< RecentSeenFieldProps > = ( { item, post, handleItemClick } ) => {
 	return (
-		<Button className="recent-seen-field" onClick={ () => setSelectedItem( item ) }>
+		<Button className="recent-seen-field" onClick={ () => handleItemClick( item ) }>
 			<ReaderAvatar
 				siteIcon={ post.site_icon }
 				feedIcon={ post.feed_icon }

diff --git a/client/reader/recent/style.scss b/client/reader/recent/style.scss
@@ -1,19 +1,47 @@
+@import "@wordpress/base-styles/breakpoints";
+
 .is-section-reader .recent-feed {
-	display: flex;
+	@media ( min-width: $break-wide ) {
+		display: flex;
+		background: var( --studio-gray-0 );
+		gap: 24px;
+	}
+
+	%column-shared {
+		background: var( --color-surface );
+		border-radius: 8px; /* stylelint-disable-line scales/radii */
+		box-shadow: 0 0 17.4px 0 rgba( 0, 0, 0, 0.05 );
+		height: 100%;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
 
 	&__list-column {
 		flex: 1;
-		max-width: 320px;
+		width: 100%;
+		@extend %column-shared;
+
+		@media ( min-width: $break-wide ) {
+			max-width: 320px;
+		}
 
 		&-header {
-			padding: 16px 12px 0;
+			padding: 0 12px;
 			border-bottom: 1px solid var( --studio-gray-0 );
 			margin-bottom: 16px;
+
+			header {
+				margin: 16px 0;
+			}
+
+			@media ( min-width: $break-wide ) {
+				padding: 16px 12px 0;
+			}
 		}
 
 		.dataviews__view-actions {
+			box-sizing: border-box;
 			padding: 0 12px;
-			max-width: 300px;
 		}
 
 		table {
@@ -50,21 +78,30 @@
 			padding: 0;
 			width: 100%;
 
-			&__title-text,
-			&__site-name {
+			%text-shared {
 				white-space: nowrap;
 				text-overflow: ellipsis;
 				overflow: hidden;
 				max-width: 200px;
+
+				@media ( min-width: $break-large ) {
+					max-width: 100%;
+				}
+
+				@media ( min-width: $break-wide ) {
+					max-width: 200px;
+				}
 			}
 
 			&__title-text {
 				font-weight: 700;
+				@extend %text-shared;
 			}
 
 			&__site-name {
 				font-weight: 400;
 				font-size: rem( 11px );
+				@extend %text-shared;
 			}
 
 			&__featured-image {
@@ -75,12 +112,18 @@
 	}
 
 	&__post-column {
-		flex: 3;
+		display: none;
+		@extend %column-shared;
 
 		.reader-full-post__sidebar,
 		.reader-full-post__author-block,
 		.back-button {
 			display: none;
 		}
+
+		@media ( min-width: $break-wide ) {
+			display: block;
+			flex: 3;
+		}
 	}
 }
diff --git a/client/reader/style.scss b/client/reader/style.scss
@@ -7,7 +7,7 @@ body.is-section-reader {
 			padding: 24px;
 			border-block-end: 1px solid var(--studio-gray-0);
 		}
-		.layout__primary > div {
+		.layout__primary > div:not(:has(.recent-feed)) {
 			background: var(--color-surface);
 			border-radius: 8px; /* stylelint-disable-line scales/radii */
 			box-shadow: 0 0 17.4px 0 rgba(0, 0, 0, 0.05);