a74dbe1e43
## New behavior: - If you have commented on a claim before, the channel selector will be clamped to that channel. - There might be more than 1 channel if commented in the past. - This includes blocked comments, i.e. if the creator blocked you, you will not see your comment, yet your channel-selector is clamped to the used channel. - EXCEPTION: you can use other channels if it's your own claim (for now). ## Approach - Run `comment.List` over all your channels on the specific content. This covers nested replies and pagination (sweet). - So, if the total is non-zero, mark that channel(s) as having commented on the claim. - Only fetch this once per content claim. - In the comment channel-selector, clamp the list to this value.
73 lines
1.8 KiB
JavaScript
73 lines
1.8 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import { FormField } from 'component/common/form';
|
|
|
|
type Props = {
|
|
tiny?: boolean,
|
|
label?: string,
|
|
injected?: ?Array<string>,
|
|
channelIds?: Array<string>, // Specific channel IDs to show. Must be a subset of own channels.
|
|
// --- Redux ---
|
|
myChannelClaims: ?Array<ChannelClaim>,
|
|
fetchingChannels: boolean,
|
|
activeChannelId: ?string,
|
|
setActiveChannel: (string) => void,
|
|
};
|
|
|
|
function SelectChannel(props: Props) {
|
|
const {
|
|
fetchingChannels,
|
|
channelIds,
|
|
myChannelClaims = [],
|
|
label,
|
|
injected = [],
|
|
tiny,
|
|
activeChannelId,
|
|
setActiveChannel,
|
|
} = props;
|
|
|
|
function handleChannelChange(event: SyntheticInputEvent<*>) {
|
|
const channelClaimId = event.target.value;
|
|
setActiveChannel(channelClaimId);
|
|
}
|
|
|
|
let mine = myChannelClaims;
|
|
if (myChannelClaims && channelIds) {
|
|
mine = myChannelClaims.filter((x) => channelIds.includes(x.claim_id));
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<FormField
|
|
name="channel"
|
|
label={!tiny && (label || __('Channel'))}
|
|
labelOnLeft={tiny}
|
|
type={tiny ? 'select-tiny' : 'select'}
|
|
onChange={handleChannelChange}
|
|
value={activeChannelId}
|
|
disabled={fetchingChannels}
|
|
>
|
|
{fetchingChannels ? (
|
|
<option>{__('Loading your channels...')}</option>
|
|
) : (
|
|
<>
|
|
{mine &&
|
|
mine.map(({ name, claim_id: claimId }) => (
|
|
<option key={claimId} value={claimId}>
|
|
{name}
|
|
</option>
|
|
))}
|
|
{injected &&
|
|
injected.map((item) => (
|
|
<option key={item} value={item}>
|
|
{item}
|
|
</option>
|
|
))}
|
|
</>
|
|
)}
|
|
</FormField>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default SelectChannel;
|