lbry-desktop/ui/component/userChannelFollowIntro/view.jsx

92 lines
3 KiB
React
Raw Normal View History

2020-02-26 19:39:03 +01:00
// @flow
import React, { useEffect } from 'react';
2020-02-26 19:39:03 +01:00
import ClaimListDiscover from 'component/claimListDiscover';
import * as CS from 'constants/claim_search';
2020-02-26 19:39:03 +01:00
import Nag from 'component/common/nag';
import { parseURI } from 'lbry-redux';
import Button from 'component/button';
import Card from 'component/common/card';
2021-07-17 00:20:22 +02:00
import { AUTO_FOLLOW_CHANNELS, CUSTOM_HOMEPAGE } from 'config';
2020-02-26 19:39:03 +01:00
type Props = {
subscribedChannels: Array<Subscription>,
onContinue: () => void,
onBack: () => void,
channelSubscribe: (sub: Subscription) => void,
homepageData: any,
2021-04-25 07:31:19 +02:00
prefsReady: boolean,
2020-02-26 19:39:03 +01:00
};
const channelsToSubscribe = AUTO_FOLLOW_CHANNELS.trim()
.split(' ')
2021-04-25 07:31:19 +02:00
.filter((x) => x !== '');
2020-02-26 19:39:03 +01:00
function UserChannelFollowIntro(props: Props) {
2021-04-25 07:31:19 +02:00
const { subscribedChannels, channelSubscribe, onContinue, onBack, homepageData, prefsReady } = props;
2021-07-17 00:20:22 +02:00
const { PRIMARY_CONTENT } = homepageData;
let channelIds;
if (PRIMARY_CONTENT && CUSTOM_HOMEPAGE) {
channelIds = PRIMARY_CONTENT.channelIds;
}
2020-02-26 19:39:03 +01:00
const followingCount = (subscribedChannels && subscribedChannels.length) || 0;
// subscribe to lbry
useEffect(() => {
2021-04-25 07:31:19 +02:00
if (channelsToSubscribe && channelsToSubscribe.length && prefsReady) {
const delayedChannelSubscribe = () => {
channelsToSubscribe.forEach((c) =>
channelSubscribe({
channelName: parseURI(c).claimName,
uri: c,
})
);
};
setTimeout(delayedChannelSubscribe, 1000);
}
2021-04-25 07:31:19 +02:00
}, [prefsReady]);
2020-02-26 19:39:03 +01:00
return (
<Card
2020-08-26 22:28:33 +02:00
title={__('Find channels to follow')}
subtitle={__(
2020-08-31 18:28:28 +02:00
'LBRY works better if you find and follow a couple creators you like. You can also block channels you never want to see.'
)}
actions={
<React.Fragment>
<div className="section__actions--between">
<Button button="secondary" onClick={onBack} label={__('Back')} />
<Button
2020-09-16 20:01:16 +02:00
button={subscribedChannels.length < 1 ? 'alt' : 'primary'}
onClick={onContinue}
2020-09-16 20:01:16 +02:00
label={subscribedChannels.length < 1 ? __('Skip') : __('Continue')}
/>
</div>
<div className="section__body">
<ClaimListDiscover
defaultOrderBy={CS.ORDER_BY_TOP}
defaultFreshness={CS.FRESH_ALL}
claimType="channel"
2021-07-17 00:20:22 +02:00
claimIds={CUSTOM_HOMEPAGE && channelIds ? channelIds : undefined}
defaultTags={followingCount > 3 ? CS.TAGS_FOLLOWED : undefined}
/>
{followingCount > 0 && (
<Nag
type="helpful"
message={
followingCount === 1
? __('Nice! You are currently following %followingCount% creator', { followingCount })
: __('Nice! You are currently following %followingCount% creators', { followingCount })
}
actionText={__('Continue')}
onClick={onContinue}
/>
)}
</div>
</React.Fragment>
}
/>
2020-02-26 19:39:03 +01:00
);
}
export default UserChannelFollowIntro;