Adds sub count to search and other areas. (#10)

Add follower counts to search
This commit is contained in:
GG2015 2021-10-16 14:12:09 -04:00 committed by GitHub
parent 91be939c19
commit 4a22814c75
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 5 deletions

View file

@ -9,11 +9,13 @@ import {
} from 'lbry-redux';
import { push } from 'connected-react-router';
import ClaimPreviewSubtitle from './view';
import { doFetchSubCount, makeSelectSubCountForUri } from 'lbryinc';
const select = (state, props) => ({
claim: makeSelectClaimForUri(props.uri)(state),
pending: makeSelectClaimIsPending(props.uri)(state),
isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
subCount: makeSelectSubCountForUri(props.uri)(state),
});
const perform = (dispatch) => ({
@ -22,6 +24,7 @@ const perform = (dispatch) => ({
dispatch(doPrepareEdit({ name }));
dispatch(push(`/$/${PAGES.UPLOAD}`));
},
fetchSubCount: (claimId) => dispatch(doFetchSubCount(claimId)),
});
export default connect(select, perform)(ClaimPreviewSubtitle);

View file

@ -14,13 +14,21 @@ type Props = {
type: string,
beginPublish: (string) => void,
isLivestream: boolean,
fetchSubCount: (string) => void,
subCount: number,
};
// previews used in channel overview and homepage (and other places?)
function ClaimPreviewSubtitle(props: Props) {
const { pending, uri, claim, type, beginPublish, isLivestream } = props;
const { pending, uri, claim, type, beginPublish, isLivestream, fetchSubCount, subCount } = props;
const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
const claimId = (claim && claim.claim_id) || '0';
const formattedSubCount = Number(subCount).toLocaleString();
React.useEffect(() => {
fetchSubCount(claimId);
}, [uri, fetchSubCount, claimId]);
let isChannel;
let name;
try {
@ -34,9 +42,14 @@ function ClaimPreviewSubtitle(props: Props) {
<UriIndicator uri={uri} link />{' '}
{!pending && claim && (
<>
{isChannel &&
type !== 'inline' &&
`${claimsInChannel} ${claimsInChannel === 1 ? __('upload') : __('uploads')}`}
{isChannel && type !== 'inline' && (
<>
<span className="claim-preview-metadata-sub-upload">
{formattedSubCount} {subCount !== 1 ? __('Followers') : __('Follower')}
&nbsp;&bull; {claimsInChannel} {claimsInChannel === 1 ? __('upload') : __('uploads')}
</span>
</>
)}
{!isChannel &&
(isLivestream && ENABLE_NO_SOURCE_CLAIMS ? (

View file

@ -30,6 +30,9 @@ export default function FileViewCountInline(props: Props) {
// clean up (only one place edit/remove).
const isChannelPage = window.location.pathname.startsWith('/@');
// Checks if search page and gives a bullet between claim name and ago.
const isSearchPage = window.location.pathname.startsWith('/$/search');
// dont show if no view count, if it's a repost, a livestream or isn't a channel page
if (!viewCount || (claim && claim.repost_url) || isLivestream || !isChannelPage) {
// (1) Currently, makeSelectViewCountForUri doesn't differentiate between
@ -37,7 +40,12 @@ export default function FileViewCountInline(props: Props) {
// ideal to highlight that a view has 0 count, let's just not show anything.
// (2) No idea how to get the repost source's claim ID from the repost claim,
// so hiding it for now.
return null;
if (isSearchPage) {
return <>&nbsp;&bull;&nbsp; </>;
}
else {
return null;
}
}
return (

View file

@ -297,6 +297,13 @@
flex: 1;
}
.claim-preview-metadata-sub-upload {
position: relative;
//margin-left: 4px;
display: flex;
text-align: left;
}
.claim-preview-info {
align-items: flex-start;
}