1075: Clamp comment channel-selector to commented channels only

## 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.

ui/component/commentCreate/extra-contents.jsx

@@ -11,10 +11,11 @@ import SelectChannel from 'component/selectChannel';
 type SelectorProps = {
   isReply: boolean,
   isLivestream: boolean,
+  channelIds?: Array<string>, // Specific channel IDs to show. Must be a subset of own channels.
 };
 
 export const FormChannelSelector = (selectorProps: SelectorProps) => {
-  const { isReply, isLivestream } = selectorProps;
+  const { isReply, isLivestream, channelIds } = selectorProps;
 
   return (
     <div className="comment-create__label-wrapper">
@@ -22,7 +23,7 @@ export const FormChannelSelector = (selectorProps: SelectorProps) => {
         {(isReply ? __('Replying as') : isLivestream ? __('Chat as') : __('Comment as')) + ' '}
       </span>
 
-      <SelectChannel tiny />
+      <SelectChannel tiny channelIds={channelIds} />
     </div>
   );
 };

ui/component/commentCreate/index.js

@@ -12,7 +12,7 @@ import { doCommentCreate, doFetchCreatorSettings, doCommentById } from 'redux/ac
 import { doSendTip, doSendCashTip } from 'redux/actions/wallet';
 import { doToast } from 'redux/actions/notifications';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
-import { selectSettingsByChannelId } from 'redux/selectors/comments';
+import { selectMyCommentedChannelIdsForId, selectSettingsByChannelId } from 'redux/selectors/comments';
 import { getChannelIdFromClaim } from 'util/claim';
 import { doOpenModal } from 'redux/actions/app';
 import { selectClientSetting } from 'redux/selectors/settings';
@@ -45,6 +45,7 @@ const select = (state, props) => {
     settingsByChannelId: selectSettingsByChannelId(state),
     supportDisabled: makeSelectTagInClaimOrChannelForUri(uri, DISABLE_SUPPORT_TAG)(state),
     preferredCurrency: selectClientSetting(state, SETTINGS.PREFERRED_CURRENCY),
+    myCommentedChannelIds: selectMyCommentedChannelIdsForId(state, claim?.claim_id),
   };
 };
 

ui/component/commentCreate/view.jsx

@@ -75,6 +75,7 @@ type Props = {
   doSendTip: (params: {}, isSupport: boolean, successCb: (any) => void, errorCb: (any) => void, boolean) => void,
   doOpenModal: (id: string, any) => void,
   preferredCurrency: string,
+  myCommentedChannelIds?: Array<string>,
 };
 
 export function CommentCreate(props: Props) {
@@ -111,6 +112,7 @@ export function CommentCreate(props: Props) {
     setQuickReply,
     doOpenModal,
     preferredCurrency,
+    myCommentedChannelIds,
   } = props;
 
   const isMobile = useIsMobile();
@@ -589,7 +591,17 @@ export function CommentCreate(props: Props) {
             className={isReply ? 'create__reply' : 'create__comment'}
             disabled={isFetchingChannels || disableInput}
             isLivestream={isLivestream}
-            label={<FormChannelSelector isReply={Boolean(isReply)} isLivestream={Boolean(isLivestream)} />}
+            label={
+              <FormChannelSelector
+                isReply={Boolean(isReply)}
+                isLivestream={Boolean(isLivestream)}
+                channelIds={
+                  !claimIsMine && myCommentedChannelIds && myCommentedChannelIds.length > 0
+                    ? myCommentedChannelIds
+                    : undefined
+                }
+              />
+            }
             noticeLabel={
               isMobile && (
                 <HelpText deletedComment={deletedComment} minAmount={minAmount} minSuper={minSuper} minTip={minTip} />

ui/component/selectChannel/view.jsx

@@ -4,17 +4,20 @@ import { FormField } from 'component/common/form';
 
 type Props = {
   tiny?: boolean,
-  label: string,
+  label?: string,
+  injected?: ?Array<string>,
+  channelIds?: Array<string>, // Specific channel IDs to show. Must be a subset of own channels.
+  // --- Redux ---
   myChannelClaims: ?Array<ChannelClaim>,
-  injected: ?Array<string>,
+  fetchingChannels: boolean,
   activeChannelId: ?string,
   setActiveChannel: (string) => void,
-  fetchingChannels: boolean,
 };
 
 function SelectChannel(props: Props) {
   const {
     fetchingChannels,
+    channelIds,
     myChannelClaims = [],
     label,
     injected = [],
@@ -28,6 +31,11 @@ function SelectChannel(props: Props) {
     setActiveChannel(channelClaimId);
   }
 
+  let mine = myChannelClaims;
+  if (myChannelClaims && channelIds) {
+    mine = myChannelClaims.filter((x) => channelIds.includes(x.claim_id));
+  }
+
   return (
     <>
       <FormField
@@ -43,8 +51,8 @@ function SelectChannel(props: Props) {
           <option>{__('Loading your channels...')}</option>
         ) : (
           <>
-            {myChannelClaims &&
-              myChannelClaims.map(({ name, claim_id: claimId }) => (
+            {mine &&
+              mine.map(({ name, claim_id: claimId }) => (
                 <option key={claimId} value={claimId}>
                   {name}
                 </option>