lbry-desktop/ui/page/channelsFollowing/view.jsx

70 lines
2 KiB
React
Raw Normal View History

2020-01-02 17:30:27 +01:00
// @flow
import * as PAGES from 'constants/pages';
2020-01-02 21:36:03 +01:00
import * as ICONS from 'constants/icons';
2020-01-02 17:30:27 +01:00
import React from 'react';
import ClaimListDiscover from 'component/claimListDiscover';
import ClaimList from 'component/claimList';
import Page from 'component/page';
import Button from 'component/button';
2020-01-02 21:36:03 +01:00
import Icon from 'component/common/icon';
2020-01-02 17:30:27 +01:00
import { TYPE_NEW } from 'component/claimListDiscover/view';
type Props = {
email: string,
subscribedChannels: Array<Subscription>,
doFetchRecommendedSubscriptions: () => void,
suggestedSubscriptions: Array<{ uri: string }>,
};
function ChannelsFollowing(props: Props) {
const { subscribedChannels, suggestedSubscriptions, doFetchRecommendedSubscriptions } = props;
const hasSubsribedChannels = subscribedChannels.length > 0;
const [showTab, setShowTab] = React.useState(!hasSubsribedChannels);
React.useEffect(() => {
if (!hasSubsribedChannels) {
doFetchRecommendedSubscriptions();
}
}, [doFetchRecommendedSubscriptions, hasSubsribedChannels]);
return (
<Page>
{showTab ? (
2020-01-02 21:36:03 +01:00
<ClaimList
2020-01-02 22:26:43 +01:00
header={__('Find Channels to Follow')}
2020-01-02 21:36:03 +01:00
headerAltControls={
<Button
button="link"
label={hasSubsribedChannels && __('View Your Feed')}
onClick={() => setShowTab(false)}
/>
}
uris={suggestedSubscriptions.map(sub => `lbry://${sub.uri}`)}
/>
2020-01-02 17:30:27 +01:00
) : (
<ClaimListDiscover
2020-01-02 21:36:03 +01:00
headerLabel={
<span>
<Icon icon={ICONS.SUBSCRIBE} size={10} />
{__('Following')}
</span>
}
2020-01-02 17:30:27 +01:00
defaultTypeSort={TYPE_NEW}
channelIds={subscribedChannels.map(sub => sub.uri.split('#')[1])}
2020-01-02 21:36:03 +01:00
meta={
<Button
icon={ICONS.EDIT}
button="link"
label={__('Manage')}
navigate={`/$/${PAGES.CHANNELS_FOLLOWING_MANAGE}`}
/>
}
2020-01-02 17:30:27 +01:00
/>
)}
</Page>
);
}
export default ChannelsFollowing;