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

Reader: Convert SiteStream to functional component and add sidebar #78818

Merged
merged 3 commits into from
Jun 30, 2023
Merged

Reader: Convert SiteStream to functional component and add sidebar #78818

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
65e8ab0
Update SiteStream to functional component
creativecoder Jun 30, 2023
4979cfb
Adds sidebar to site stream
creativecoder Jun 30, 2023
5b684c1
Reader: update Feed/Site stream header and sidebar (#78853)
creativecoder Jun 30, 2023
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
Prev Previous commit
Next Next commit
Adds sidebar to site stream
  • Loading branch information
@creativecoder
creativecoder committed Jun 30, 2023
commit 4979cfb344d18813967720d9b4ea68936bd4c96c
30 changes: 7 additions & 23 deletions client/reader/feed-stream/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,52 +6,36 @@ import QueryReaderFeed from 'calypso/components/data/query-reader-feed';
import QueryReaderSite from 'calypso/components/data/query-reader-site';
import { useSiteTags } from 'calypso/data/site-tags/use-site-tags';
import FeedError from 'calypso/reader/feed-error';
import { getSiteName } from 'calypso/reader/get-helpers';
import { getFollowerCount, getSiteName } from 'calypso/reader/get-helpers';
import SiteBlocked from 'calypso/reader/site-blocked';
import Stream from 'calypso/reader/stream';
import FeedStreamSidebar from 'calypso/reader/stream/site-feed-sidebar';
import { useSelector } from 'calypso/state';
import { getAllPostCount } from 'calypso/state/posts/counts/selectors';
import { getFeed } from 'calypso/state/reader/feeds/selectors';
import { getReaderFollowForFeed } from 'calypso/state/reader/follows/selectors';
import { isSiteBlocked } from 'calypso/state/reader/site-blocks/selectors';
import { getSite } from 'calypso/state/reader/sites/selectors';
import EmptyContent from './empty';
import FeedStreamSidebar from './sidebar';

// If the blog_ID of a reader feed is 0, that means no site exists for it.
const getReaderSiteId = ( feed ) => ( feed && feed.blog_ID === 0 ? null : feed && feed.blog_ID );

const getFollowerCount = ( feed, site ) => {
if ( site && site.subscribers_count ) {
return site.subscribers_count;
}

if ( feed && feed.subscribers_count > 0 ) {
return feed.subscribers_count;
}

return null;
};

export default function FeedStream( props ) {
const { feedId, className = 'is-site-stream', showBack = true } = props;
const { className = 'is-site-stream', feedId, showBack = true } = props;
const translate = useTranslate();

const feed = useSelector( ( state ) => {
const { feed, isBlocked, postCount, site, siteId } = useSelector( ( state ) => {
const _feed = getFeed( state, feedId );
const _siteId = getReaderSiteId( _feed );

if ( _feed ) {
// Add site icon to feed object so have icon for external feeds
_feed.site_icon = getReaderFollowForFeed( state, parseInt( feedId ) )?.site_icon;
}

return _feed;
} );

const { isBlocked, postCount, site, siteId } = useSelector( ( state ) => {
const _siteId = getReaderSiteId( feed );

return {
feed: _feed,
isBlocked: _siteId && isSiteBlocked( state, _siteId ),
postCount: _siteId && getAllPostCount( state, _siteId, 'post', 'publish' ),
site: _siteId && getSite( state, _siteId ),
Expand Down Expand Up @@ -84,8 +68,8 @@ export default function FeedStream( props ) {
<Stream
{ ...props }
className={ className }
listName={ title }
emptyContent={ emptyContent }
listName={ title }
showFollowButton={ false }
showPostHeader={ false }
showSiteNameOnCards={ false }
Expand Down
19 changes: 19 additions & 0 deletions client/reader/get-helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,3 +189,22 @@ export const getFeaturedImageAlt = ( post ) => {

return featuredImageAlt;
};

/**
* Get the follower count from a site/feed.
*
* @param {Object} feed Feed object.
* @param {Object} site Site object.
* @returns {number|null}
*/
export const getFollowerCount = ( feed, site ) => {
if ( site && site.subscribers_count ) {
return site.subscribers_count;
}

if ( feed && feed.subscribers_count > 0 ) {
return feed.subscribers_count;
}

return null;
};
25 changes: 22 additions & 3 deletions client/reader/site-stream/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,17 @@ import page from 'page';
import { useEffect } from 'react';
import ReaderFeedHeader from 'calypso/blocks/reader-feed-header';
import DocumentHead from 'calypso/components/data/document-head';
import QueryPostCounts from 'calypso/components/data/query-post-counts';
import QueryReaderFeed from 'calypso/components/data/query-reader-feed';
import QueryReaderSite from 'calypso/components/data/query-reader-site';
import { useSiteTags } from 'calypso/data/site-tags/use-site-tags';
import FeedError from 'calypso/reader/feed-error';
import { getFollowerCount } from 'calypso/reader/get-helpers';
import SiteBlocked from 'calypso/reader/site-blocked';
import Stream from 'calypso/reader/stream';
import FeedStreamSidebar from 'calypso/reader/stream/site-feed-sidebar';
import { useSelector } from 'calypso/state';
import { getAllPostCount } from 'calypso/state/posts/counts/selectors';
import { getFeed } from 'calypso/state/reader/feeds/selectors';
import { isSiteBlocked } from 'calypso/state/reader/site-blocks/selectors';
import { getSite } from 'calypso/state/reader/sites/selectors';
Expand All @@ -18,12 +23,13 @@ export default function SiteStream( props ) {
const { className = 'is-site-stream', showBack = true, siteId } = props;
const translate = useTranslate();

const { feed, isBlocked, site } = useSelector( ( state ) => {
const { feed, isBlocked, postCount, site } = useSelector( ( state ) => {
const _site = getSite( state, siteId );
return {
site: _site,
feed: _site && _site.feed_ID && getFeed( state, _site.feed_ID ),
isBlocked: isSiteBlocked( state, siteId ),
postCount: siteId && getAllPostCount( state, siteId, 'post', 'publish' ),
site: _site,
};
} );

Expand All @@ -34,8 +40,10 @@ export default function SiteStream( props ) {
}
}, [ site ] );

const siteTags = useSiteTags( siteId );
const emptyContent = <EmptyContent />;
const title = site ? site.name : translate( 'Loading Site' );
const followerCount = getFollowerCount( feed, site );

if ( isBlocked ) {
return <SiteBlocked title={ title } siteId={ siteId } />;
Expand All @@ -45,6 +53,14 @@ export default function SiteStream( props ) {
return <FeedError sidebarTitle={ title } />;
}

const streamSidebar = (
<FeedStreamSidebar
followerCount={ followerCount }
postCount={ postCount }
tags={ siteTags.data }
/>
);

return (
<Stream
{ ...props }
Expand All @@ -54,6 +70,8 @@ export default function SiteStream( props ) {
showFollowButton={ false }
showPostHeader={ false }
showSiteNameOnCards={ false }
sidebarTabTitle={ translate( 'Related' ) }
streamSidebar={ streamSidebar }
useCompactCards={ true }
>
<DocumentHead
Expand All @@ -68,7 +86,8 @@ export default function SiteStream( props ) {
showBack={ showBack }
streamKey={ props.streamKey }
/>
{ ! site && <QueryReaderSite siteId={ props.siteId } /> }
{ siteId && <QueryPostCounts siteId={ siteId } type="post" /> }
{ ! site && <QueryReaderSite siteId={ siteId } /> }
{ ! feed && site && site.feed_ID && <QueryReaderFeed feedId={ site.feed_ID } /> }
</Stream>
);
Expand Down
0 client/reader/feed-stream/sidebar.jsx → ...reader/stream/site-feed-sidebar/index.jsx
View file
Open in desktop
File renamed without changes.