Adds sub count to search and other areas. (#10)
Add follower counts to search
This commit is contained in:
parent
91be939c19
commit
4a22814c75
4 changed files with 36 additions and 5 deletions
|
@ -9,11 +9,13 @@ import {
|
||||||
} from 'lbry-redux';
|
} from 'lbry-redux';
|
||||||
import { push } from 'connected-react-router';
|
import { push } from 'connected-react-router';
|
||||||
import ClaimPreviewSubtitle from './view';
|
import ClaimPreviewSubtitle from './view';
|
||||||
|
import { doFetchSubCount, makeSelectSubCountForUri } from 'lbryinc';
|
||||||
|
|
||||||
const select = (state, props) => ({
|
const select = (state, props) => ({
|
||||||
claim: makeSelectClaimForUri(props.uri)(state),
|
claim: makeSelectClaimForUri(props.uri)(state),
|
||||||
pending: makeSelectClaimIsPending(props.uri)(state),
|
pending: makeSelectClaimIsPending(props.uri)(state),
|
||||||
isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
|
isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
|
||||||
|
subCount: makeSelectSubCountForUri(props.uri)(state),
|
||||||
});
|
});
|
||||||
|
|
||||||
const perform = (dispatch) => ({
|
const perform = (dispatch) => ({
|
||||||
|
@ -22,6 +24,7 @@ const perform = (dispatch) => ({
|
||||||
dispatch(doPrepareEdit({ name }));
|
dispatch(doPrepareEdit({ name }));
|
||||||
dispatch(push(`/$/${PAGES.UPLOAD}`));
|
dispatch(push(`/$/${PAGES.UPLOAD}`));
|
||||||
},
|
},
|
||||||
|
fetchSubCount: (claimId) => dispatch(doFetchSubCount(claimId)),
|
||||||
});
|
});
|
||||||
|
|
||||||
export default connect(select, perform)(ClaimPreviewSubtitle);
|
export default connect(select, perform)(ClaimPreviewSubtitle);
|
||||||
|
|
|
@ -14,13 +14,21 @@ type Props = {
|
||||||
type: string,
|
type: string,
|
||||||
beginPublish: (string) => void,
|
beginPublish: (string) => void,
|
||||||
isLivestream: boolean,
|
isLivestream: boolean,
|
||||||
|
fetchSubCount: (string) => void,
|
||||||
|
subCount: number,
|
||||||
};
|
};
|
||||||
|
|
||||||
// previews used in channel overview and homepage (and other places?)
|
// previews used in channel overview and homepage (and other places?)
|
||||||
function ClaimPreviewSubtitle(props: Props) {
|
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 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 isChannel;
|
||||||
let name;
|
let name;
|
||||||
try {
|
try {
|
||||||
|
@ -34,9 +42,14 @@ function ClaimPreviewSubtitle(props: Props) {
|
||||||
<UriIndicator uri={uri} link />{' '}
|
<UriIndicator uri={uri} link />{' '}
|
||||||
{!pending && claim && (
|
{!pending && claim && (
|
||||||
<>
|
<>
|
||||||
{isChannel &&
|
{isChannel && type !== 'inline' && (
|
||||||
type !== 'inline' &&
|
<>
|
||||||
`${claimsInChannel} ${claimsInChannel === 1 ? __('upload') : __('uploads')}`}
|
<span className="claim-preview-metadata-sub-upload">
|
||||||
|
{formattedSubCount} {subCount !== 1 ? __('Followers') : __('Follower')}
|
||||||
|
• {claimsInChannel} {claimsInChannel === 1 ? __('upload') : __('uploads')}
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
{!isChannel &&
|
{!isChannel &&
|
||||||
(isLivestream && ENABLE_NO_SOURCE_CLAIMS ? (
|
(isLivestream && ENABLE_NO_SOURCE_CLAIMS ? (
|
||||||
|
|
|
@ -30,6 +30,9 @@ export default function FileViewCountInline(props: Props) {
|
||||||
// clean up (only one place edit/remove).
|
// clean up (only one place edit/remove).
|
||||||
const isChannelPage = window.location.pathname.startsWith('/@');
|
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
|
// 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) {
|
if (!viewCount || (claim && claim.repost_url) || isLivestream || !isChannelPage) {
|
||||||
// (1) Currently, makeSelectViewCountForUri doesn't differentiate between
|
// (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.
|
// 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,
|
// (2) No idea how to get the repost source's claim ID from the repost claim,
|
||||||
// so hiding it for now.
|
// so hiding it for now.
|
||||||
return null;
|
if (isSearchPage) {
|
||||||
|
return <> • </>;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -297,6 +297,13 @@
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.claim-preview-metadata-sub-upload {
|
||||||
|
position: relative;
|
||||||
|
//margin-left: 4px;
|
||||||
|
display: flex;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
.claim-preview-info {
|
.claim-preview-info {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue