1075: Fetch list of my channels that have commented on a claim

flow-typed/Comment.js

@@ -81,6 +81,7 @@ declare type CommentsState = {
   settingsByChannelId: { [string]: PerChannelSettings }, // ChannelID -> settings
   fetchingSettings: boolean,
   fetchingBlockedWords: boolean,
+  myCommentedChannelIdsById: { [string]: Array<string> }, // [content-claim-id] -> array of own channels IDs that have commented before.
 };
 
 // Authorization parameters for calls requiring user authentication

ui/component/commentsList/index.js

@@ -4,6 +4,7 @@ import {
   selectClaimIsMine,
   selectFetchingMyChannels,
   selectClaimsByUri,
+  selectMyChannelClaimIds,
 } from 'redux/selectors/claims';
 import {
   selectTopLevelCommentsForUri,
@@ -17,8 +18,15 @@ import {
   selectCommentIdsForUri,
   selectSettingsByChannelId,
   selectPinnedCommentsForUri,
+  selectMyCommentedChannelIdsForId,
 } from 'redux/selectors/comments';
-import { doCommentReset, doCommentList, doCommentById, doCommentReactList } from 'redux/actions/comments';
+import {
+  doCommentReset,
+  doCommentList,
+  doCommentById,
+  doCommentReactList,
+  doFetchMyCommentedChannels,
+} from 'redux/actions/comments';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
 import { getChannelIdFromClaim } from 'util/claim';
 import { doFetchUserMemberships } from 'redux/actions/user';
@@ -48,6 +56,8 @@ const select = (state, props) => {
     othersReactsById: selectOthersReacts(state),
     activeChannelId: activeChannelClaim && activeChannelClaim.claim_id,
     claimsByUri: selectClaimsByUri(state),
+    myChannelClaimIds: selectMyChannelClaimIds(state),
+    myCommentedChannelIds: selectMyCommentedChannelIdsForId(state, claim?.claim_id),
   };
 };
 
@@ -57,6 +67,7 @@ const perform = {
   fetchReacts: doCommentReactList,
   resetComments: doCommentReset,
   doFetchUserMemberships,
+  doFetchMyCommentedChannels,
 };
 
 export default connect(select, perform)(CommentsList);

ui/component/commentsList/view.jsx

@@ -52,7 +52,10 @@ type Props = {
   fetchReacts: (commentIds: Array<string>) => Promise<any>,
   resetComments: (claimId: string) => void,
   claimsByUri: { [string]: any },
+  myChannelClaimIds: ?Array<string>,
+  myCommentedChannelIds: ?Array<string>,
   doFetchUserMemberships: (claimIdCsv: string) => void,
+  doFetchMyCommentedChannels: (claimId: ?string) => void,
 };
 
 export default function CommentList(props: Props) {
@@ -80,7 +83,10 @@ export default function CommentList(props: Props) {
     fetchReacts,
     resetComments,
     claimsByUri,
+    myChannelClaimIds,
+    myCommentedChannelIds,
     doFetchUserMemberships,
+    doFetchMyCommentedChannels,
   } = props;
 
   const isMobile = useIsMobile();
@@ -262,6 +268,13 @@ export default function CommentList(props: Props) {
     topLevelTotalPages,
   ]);
 
+  // Determine my channels that have commented
+  useEffect(() => {
+    if (myCommentedChannelIds === undefined && claimId && myChannelClaimIds) {
+      doFetchMyCommentedChannels(claimId);
+    }
+  }, [claimId, myCommentedChannelIds, myChannelClaimIds]);
+
   const commentProps = { isTopLevel: true, threadDepth: 3, uri, claimIsMine, linkedCommentId };
   const actionButtonsProps = {
     totalComments,

ui/constants/action_types.js

@@ -432,6 +432,7 @@ export const COMMENT_RECEIVED = 'COMMENT_RECEIVED';
 export const COMMENT_SUPER_CHAT_LIST_STARTED = 'COMMENT_SUPER_CHAT_LIST_STARTED';
 export const COMMENT_SUPER_CHAT_LIST_COMPLETED = 'COMMENT_SUPER_CHAT_LIST_COMPLETED';
 export const COMMENT_SUPER_CHAT_LIST_FAILED = 'COMMENT_SUPER_CHAT_LIST_FAILED';
+export const COMMENT_FETCH_MY_COMMENTED_CHANNELS_COMPLETE = 'COMMENT_FETCH_MY_COMMENTED_CHANNELS_COMPLETE';
 
 // Blocked channels
 export const TOGGLE_BLOCK_CHANNEL = 'TOGGLE_BLOCK_CHANNEL';

ui/redux/actions/comments.js

@@ -251,6 +251,56 @@ export function doCommentById(commentId: string, toastIfNotFound: boolean = true
   };
 }
 
+export function doFetchMyCommentedChannels(claimId: ?string) {
+  return (dispatch: Dispatch, getState: GetState) => {
+    const state = getState();
+    const myChannelClaims = selectMyChannelClaims(state);
+    const contentClaimId = claimId;
+
+    if (!contentClaimId || !myChannelClaims) {
+      return;
+    }
+
+    return Promise.all(myChannelClaims.map((x) => channelSignName(x.claim_id, x.name))).then((signatures) => {
+      const params = [];
+      const commentedChannelIds = [];
+
+      signatures.forEach((signature, i) => {
+        if (signature !== undefined && signature !== null) {
+          params.push({
+            page: 1,
+            page_size: 1,
+            claim_id: contentClaimId,
+            author_claim_id: myChannelClaims[i].claim_id,
+            requestor_channel_name: myChannelClaims[i].name,
+            requestor_channel_id: myChannelClaims[i].claim_id,
+            signature: signature.signature,
+            signing_ts: signature.signing_ts,
+          });
+        }
+      });
+
+      // $FlowFixMe
+      return Promise.allSettled(params.map((p) => Comments.comment_list(p)))
+        .then((response) => {
+          response.forEach((res, i) => {
+            if (res.status === 'fulfilled' && res.value.total_items > 0) {
+              commentedChannelIds.push(params[i].author_claim_id);
+            }
+          });
+
+          dispatch({
+            type: ACTIONS.COMMENT_FETCH_MY_COMMENTED_CHANNELS_COMPLETE,
+            data: { contentClaimId, commentedChannelIds },
+          });
+        })
+        .catch((err) => {
+          console.log({ err });
+        });
+    });
+  };
+}
+
 export function doCommentReset(claimId: string) {
   return (dispatch: Dispatch) => {
     if (!claimId) {

ui/redux/reducers/comments.js

@@ -49,6 +49,7 @@ const defaultState: CommentsState = {
   settingsByChannelId: {},
   fetchingSettings: false,
   fetchingBlockedWords: false,
+  myCommentedChannelIdsById: {},
 };
 
 // ****************************************************************************
@@ -146,6 +147,16 @@ export default handleActions(
         }
       }
 
+      let myCommentedChannelIdsById;
+      const commentedChannelIds = (state.myCommentedChannelIdsById[claimId] || []).slice();
+      if (!commentedChannelIds.includes(comment.channel_id)) {
+        commentedChannelIds.push(comment.channel_id);
+        myCommentedChannelIdsById = {
+          ...state.myCommentedChannelIdsById,
+          [claimId]: commentedChannelIds,
+        };
+      }
+
       return {
         ...state,
         topLevelCommentsById,
@@ -156,6 +167,7 @@ export default handleActions(
         commentsByUri,
         isLoading: false,
         isCommenting: false,
+        myCommentedChannelIdsById: myCommentedChannelIdsById || state.myCommentedChannelIdsById,
       };
     },
 
@@ -415,6 +427,18 @@ export default handleActions(
       };
     },
 
+    [ACTIONS.COMMENT_FETCH_MY_COMMENTED_CHANNELS_COMPLETE]: (state: CommentsState, action: any) => {
+      const { contentClaimId, commentedChannelIds } = action.data;
+
+      return {
+        ...state,
+        myCommentedChannelIdsById: {
+          ...state.myCommentedChannelIdsById,
+          [contentClaimId]: commentedChannelIds,
+        },
+      };
+    },
+
     [ACTIONS.COMMENT_SUPER_CHAT_LIST_FAILED]: (state: CommentsState, action: any) => ({
       ...state,
       isLoading: false,

ui/redux/selectors/comments.js

@@ -472,3 +472,14 @@ export const selectChannelMentionData = createCachedSelector(
     };
   }
 )((state, uri, maxCount) => `${String(uri)}:${maxCount}`);
+
+/**
+ * Returns the list of your channel IDs that have commented on the given claim.
+ *
+ * @param state
+ * @param claimId
+ * @returns {null | undefined | Array<string>} 'undefined' = "not fetched"; 'null' = "no claim";
+ */
+export const selectMyCommentedChannelIdsForId = (state: State, claimId: string) => {
+  return claimId ? selectState(state).myCommentedChannelIdsById[claimId] : null;
+};