From 8b3820fb288b3eff3a6255814d294e9785de2503 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Sat, 2 Oct 2021 08:15:27 +0800
Subject: [PATCH 1/8] --- tmp revert ---

This reverts commit de6c6f9bfd0383e9087a38f1f54e13bb54754945.
---
 flow-typed/Comment.js                |   4 +-
 static/app-strings.json              |   4 -
 ui/component/claimPreview/view.jsx   |   7 -
 ui/component/comment/view.jsx        |  28 ++--
 ui/component/commentsList/index.js   |   2 +-
 ui/component/commentsList/view.jsx   |   7 +-
 ui/component/router/view.jsx         |   2 -
 ui/component/settingAccount/index.js |   3 +-
 ui/component/settingAccount/view.jsx |  14 +-
 ui/constants/comment.js              |   1 -
 ui/constants/pageTitles.js           |   1 -
 ui/constants/pages.js                |   1 -
 ui/page/ownComments/index.js         |  33 -----
 ui/page/ownComments/view.jsx         | 210 ---------------------------
 ui/redux/actions/comments.js         | 131 +++--------------
 ui/redux/reducers/comments.js        |   6 +-
 ui/scss/component/_comments.scss     |  57 --------
 17 files changed, 39 insertions(+), 472 deletions(-)
 delete mode 100644 ui/page/ownComments/index.js
 delete mode 100644 ui/page/ownComments/view.jsx

diff --git a/flow-typed/Comment.js b/flow-typed/Comment.js
index 57a666683..8b2ad570c 100644
--- a/flow-typed/Comment.js
+++ b/flow-typed/Comment.js
@@ -111,14 +111,14 @@ declare type ReactionListResponse = {
 declare type CommentListParams = {
   page: number,             // pagination: which page of results
   page_size: number,        // pagination: nr of comments to show in a page (max 200)
-  claim_id?: string,        // claim id of claim being commented on
+  claim_id: string,         // claim id of claim being commented on
   channel_name?: string,    // signing channel name of claim (enables 'commentsEnabled' check)
   channel_id?: string,      // signing channel claim id of claim (enables 'commentsEnabled' check)
   author_claim_id?: string, // filters comments to just this author
   parent_id?: string,       // filters comments to those under this thread
   top_level?: boolean,      // filters to only top level comments
   hidden?: boolean,         // if true, will show hidden comments as well
-  sort_by?: number,         // @see: ui/constants/comments.js::SORT_BY
+  sort_by?: number,         // NEWEST=0, OLDEST=1, CONTROVERSY=2, POPULARITY=3,
 };
 
 declare type CommentListResponse = {
diff --git a/static/app-strings.json b/static/app-strings.json
index 5baa9217f..36a82cd1a 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -209,9 +209,6 @@
   "Failed to copy.": "Failed to copy.",
   "The publisher has chosen to charge %lbc% to view this content. Your balance is currently too low to view it. Check out %reward_link% for free %lbc% or send more %lbc% to your wallet. You can also %buy_link% more %lbc%.": "The publisher has chosen to charge %lbc% to view this content. Your balance is currently too low to view it. Check out %reward_link% for free %lbc% or send more %lbc% to your wallet. You can also %buy_link% more %lbc%.",
   "Connecting...": "Connecting...",
-  "Your comments": "Your comments",
-  "View your past comments.": "View your past comments.",
-  "Content or channel was deleted.": "Content or channel was deleted.",
   "Comments": "Comments",
   "Comment": "Comment",
   "Comment --[button to submit something]--": "Comment",
@@ -1463,7 +1460,6 @@
   "Staked LBRY Credits": "Staked LBRY Credits",
   "1 comment": "1 comment",
   "%total_comments% comments": "%total_comments% comments",
-  "No comments": "No comments",
   "Upvote": "Upvote",
   "Downvote": "Downvote",
   "You loved this": "You loved this",
diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx
index 34e7dc188..343424d5f 100644
--- a/ui/component/claimPreview/view.jsx
+++ b/ui/component/claimPreview/view.jsx
@@ -70,7 +70,6 @@ type Props = {
   streamingUrl: ?string,
   getFile: (string) => void,
   customShouldHide?: (Claim) => boolean,
-  searchParams?: { [string]: string },
   showUnresolvedClaim?: boolean,
   showNullPlaceholder?: boolean,
   includeSupportAction?: boolean,
@@ -126,7 +125,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     // modifiers
     active,
     customShouldHide,
-    searchParams,
     showNullPlaceholder,
     // value from show mature content user setting
     // true if the user doesn't wanna see nsfw content
@@ -223,11 +221,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
   if (listId) {
     navigateSearch.set(COLLECTIONS_CONSTS.COLLECTION_ID, listId);
   }
-  if (searchParams) {
-    Object.keys(searchParams).forEach((key) => {
-      navigateSearch.set(key, searchParams[key]);
-    });
-  }
 
   const handleNavLinkClick = (e) => {
     if (onClick) {
diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx
index b4816303a..b52003bcf 100644
--- a/ui/component/comment/view.jsx
+++ b/ui/component/comment/view.jsx
@@ -52,7 +52,6 @@ type Props = {
   doToast: ({ message: string }) => void,
   isTopLevel?: boolean,
   threadDepth: number,
-  hideActions?: boolean,
   isPinned: boolean,
   othersReacts: ?{
     like: number,
@@ -96,7 +95,6 @@ function Comment(props: Props) {
     doToast,
     isTopLevel,
     threadDepth,
-    hideActions,
     isPinned,
     othersReacts,
     playingUri,
@@ -350,20 +348,18 @@ function Comment(props: Props) {
                   )}
                 </div>
 
-                {!hideActions && (
-                  <div className="comment__actions">
-                    {threadDepth !== 0 && (
-                      <Button
-                        requiresAuth={IS_WEB}
-                        label={commentingEnabled ? __('Reply') : __('Log in to reply')}
-                        className="comment__action"
-                        onClick={handleCommentReply}
-                        icon={ICONS.REPLY}
-                      />
-                    )}
-                    {ENABLE_COMMENT_REACTIONS && <CommentReactions uri={uri} commentId={commentId} />}
-                  </div>
-                )}
+                <div className="comment__actions">
+                  {threadDepth !== 0 && (
+                    <Button
+                      requiresAuth={IS_WEB}
+                      label={commentingEnabled ? __('Reply') : __('Log in to reply')}
+                      className="comment__action"
+                      onClick={handleCommentReply}
+                      icon={ICONS.REPLY}
+                    />
+                  )}
+                  {ENABLE_COMMENT_REACTIONS && <CommentReactions uri={uri} commentId={commentId} />}
+                </div>
 
                 {numDirectReplies > 0 && !showReplies && (
                   <div className="comment__actions">
diff --git a/ui/component/commentsList/index.js b/ui/component/commentsList/index.js
index c83dae73b..8d15ab707 100644
--- a/ui/component/commentsList/index.js
+++ b/ui/component/commentsList/index.js
@@ -48,7 +48,7 @@ const perform = (dispatch) => ({
   fetchTopLevelComments: (uri, page, pageSize, sortBy) => dispatch(doCommentList(uri, '', page, pageSize, sortBy)),
   fetchComment: (commentId) => dispatch(doCommentById(commentId)),
   fetchReacts: (commentIds) => dispatch(doCommentReactList(commentIds)),
-  resetComments: (claimId) => dispatch(doCommentReset(claimId)),
+  resetComments: (uri) => dispatch(doCommentReset(uri)),
 });
 
 export default connect(select, perform)(CommentsList);
diff --git a/ui/component/commentsList/view.jsx b/ui/component/commentsList/view.jsx
index 35525d19a..6a51fd42c 100644
--- a/ui/component/commentsList/view.jsx
+++ b/ui/component/commentsList/view.jsx
@@ -151,13 +151,10 @@ function CommentList(props: Props) {
   // Reset comments
   useEffect(() => {
     if (page === 0) {
-      if (claim) {
-        resetComments(claim.claim_id);
-      }
+      resetComments(uri);
       setPage(1);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [page, uri, resetComments]); // 'claim' is derived from 'uri'
+  }, [page, uri, resetComments]);
 
   // Fetch top-level comments
   useEffect(() => {
diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx
index ad5234265..03db2b538 100644
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@@ -59,7 +59,6 @@ const ListBlockedPage = lazyImport(() => import('page/listBlocked' /* webpackChu
 const ListsPage = lazyImport(() => import('page/lists' /* webpackChunkName: "secondary" */));
 const LiveStreamSetupPage = lazyImport(() => import('page/livestreamSetup' /* webpackChunkName: "secondary" */));
 const LivestreamCurrentPage = lazyImport(() => import('page/livestreamCurrent' /* webpackChunkName: "secondary" */));
-const OwnComments = lazyImport(() => import('page/ownComments' /* webpackChunkName: "ownComments" */));
 const PasswordResetPage = lazyImport(() => import('page/passwordReset' /* webpackChunkName: "secondary" */));
 const PasswordSetPage = lazyImport(() => import('page/passwordSet' /* webpackChunkName: "secondary" */));
 const PublishPage = lazyImport(() => import('page/publish' /* webpackChunkName: "secondary" */));
@@ -330,7 +329,6 @@ function AppRouter(props: Props) {
         <PrivateRoute {...props} path={`/$/${PAGES.SWAP}`} component={SwapPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.NOTIFICATIONS}`} component={NotificationsPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.AUTH_WALLET_PASSWORD}`} component={SignInWalletPasswordPage} />
-        <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_OWN_COMMENTS}`} component={OwnComments} />
 
         <Route path={`/$/${PAGES.EMBED}/:claimName`} exact component={EmbedWrapperPage} />
         <Route path={`/$/${PAGES.EMBED}/:claimName/:claimId`} exact component={EmbedWrapperPage} />
diff --git a/ui/component/settingAccount/index.js b/ui/component/settingAccount/index.js
index 0644ceaf6..83d77af76 100644
--- a/ui/component/settingAccount/index.js
+++ b/ui/component/settingAccount/index.js
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { doWalletStatus, selectMyChannelClaims, selectWalletIsEncrypted } from 'lbry-redux';
+import { doWalletStatus, selectWalletIsEncrypted } from 'lbry-redux';
 import { selectUser, selectUserVerifiedEmail } from 'redux/selectors/user';
 import { selectLanguage } from 'redux/selectors/settings';
 
@@ -9,7 +9,6 @@ const select = (state) => ({
   isAuthenticated: selectUserVerifiedEmail(state),
   walletEncrypted: selectWalletIsEncrypted(state),
   user: selectUser(state),
-  myChannels: selectMyChannelClaims(state),
   language: selectLanguage(state),
 });
 
diff --git a/ui/component/settingAccount/view.jsx b/ui/component/settingAccount/view.jsx
index 812e3818c..f39262379 100644
--- a/ui/component/settingAccount/view.jsx
+++ b/ui/component/settingAccount/view.jsx
@@ -15,13 +15,12 @@ type Props = {
   isAuthenticated: boolean,
   walletEncrypted: boolean,
   user: User,
-  myChannels: ?Array<ChannelClaim>,
   // --- perform ---
   doWalletStatus: () => void,
 };
 
 export default function SettingAccount(props: Props) {
-  const { isAuthenticated, walletEncrypted, user, myChannels, doWalletStatus } = props;
+  const { isAuthenticated, walletEncrypted, user, doWalletStatus } = props;
   const [storedPassword, setStoredPassword] = React.useState(false);
 
   // Determine if password is stored.
@@ -93,17 +92,6 @@ export default function SettingAccount(props: Props) {
               </SettingsRow>
             )}
             {/* @endif */}
-
-            {myChannels && (
-              <SettingsRow title={__('Comments')} subtitle={__('View your past comments.')}>
-                <Button
-                  button="inverse"
-                  label={__('Manage')}
-                  icon={ICONS.ARROW_RIGHT}
-                  navigate={`/$/${PAGES.SETTINGS_OWN_COMMENTS}`}
-                />
-              </SettingsRow>
-            )}
           </>
         }
       />
diff --git a/ui/constants/comment.js b/ui/constants/comment.js
index 5a71d7271..c265d3956 100644
--- a/ui/constants/comment.js
+++ b/ui/constants/comment.js
@@ -9,7 +9,6 @@ export const SORT_BY = {
   OLDEST: 1,
   CONTROVERSY: 2,
   POPULARITY: 3,
-  NEWEST_NO_PINS: 4,
 };
 
 export const BLOCK_LEVEL = {
diff --git a/ui/constants/pageTitles.js b/ui/constants/pageTitles.js
index fd330974b..66afc32e6 100644
--- a/ui/constants/pageTitles.js
+++ b/ui/constants/pageTitles.js
@@ -52,7 +52,6 @@ export const PAGE_TITLE = {
   [PAGES.SETTINGS_STRIPE_ACCOUNT]: 'Bank Accounts',
   [PAGES.SETTINGS_STRIPE_CARD]: 'Payment Methods',
   [PAGES.SETTINGS_UPDATE_PWD]: 'Update password',
-  [PAGES.SETTINGS_OWN_COMMENTS]: 'Your comments',
   [PAGES.SWAP]: 'Swap Credits',
   [PAGES.TAGS_FOLLOWING]: 'Tags',
   [PAGES.TAGS_FOLLOWING_MANAGE]: 'Manage tags',
diff --git a/ui/constants/pages.js b/ui/constants/pages.js
index 495c1bf93..db1853800 100644
--- a/ui/constants/pages.js
+++ b/ui/constants/pages.js
@@ -46,7 +46,6 @@ exports.SETTINGS_NOTIFICATIONS = 'settings/notifications';
 exports.SETTINGS_BLOCKED_MUTED = 'settings/block_and_mute';
 exports.SETTINGS_CREATOR = 'settings/creator';
 exports.SETTINGS_UPDATE_PWD = 'settings/update_password';
-exports.SETTINGS_OWN_COMMENTS = 'settings/ownComments';
 exports.SHOW = 'show';
 exports.ACCOUNT = 'account';
 exports.SEARCH = 'search';
diff --git a/ui/page/ownComments/index.js b/ui/page/ownComments/index.js
deleted file mode 100644
index b4c1aa364..000000000
--- a/ui/page/ownComments/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { connect } from 'react-redux';
-import { doCommentListOwn, doCommentReset } from 'redux/actions/comments';
-import { selectActiveChannelClaim } from 'redux/selectors/app';
-import {
-  selectIsFetchingComments,
-  makeSelectCommentsForUri,
-  makeSelectTotalCommentsCountForUri,
-  makeSelectTopLevelTotalPagesForUri,
-} from 'redux/selectors/comments';
-import { selectClaimsById } from 'lbry-redux';
-
-import OwnComments from './view';
-
-const select = (state) => {
-  const activeChannelClaim = selectActiveChannelClaim(state);
-  const uri = activeChannelClaim && activeChannelClaim.canonical_url;
-
-  return {
-    activeChannelClaim,
-    allComments: makeSelectCommentsForUri(uri)(state),
-    totalComments: makeSelectTotalCommentsCountForUri(uri)(state),
-    topLevelTotalPages: makeSelectTopLevelTotalPagesForUri(uri)(state),
-    isFetchingComments: selectIsFetchingComments(state),
-    claimsById: selectClaimsById(state),
-  };
-};
-
-const perform = (dispatch) => ({
-  doCommentReset: (a) => dispatch(doCommentReset(a)),
-  doCommentListOwn: (a, b, c) => dispatch(doCommentListOwn(a, b, c)),
-});
-
-export default connect(select, perform)(OwnComments);
diff --git a/ui/page/ownComments/view.jsx b/ui/page/ownComments/view.jsx
deleted file mode 100644
index 63661cf32..000000000
--- a/ui/page/ownComments/view.jsx
+++ /dev/null
@@ -1,210 +0,0 @@
-// @flow
-import React from 'react';
-import Button from 'component/button';
-import ChannelSelector from 'component/channelSelector';
-import ClaimPreview from 'component/claimPreview';
-import Comment from 'component/comment';
-import Card from 'component/common/card';
-import Empty from 'component/common/empty';
-import Page from 'component/page';
-import Spinner from 'component/spinner';
-import { COMMENT_PAGE_SIZE_TOP_LEVEL } from 'constants/comment';
-import * as ICONS from 'constants/icons';
-import useFetched from 'effects/use-fetched';
-import debounce from 'util/debounce';
-
-function scaleToDevicePixelRatio(value) {
-  const devicePixelRatio = window.devicePixelRatio || 1.0;
-  if (devicePixelRatio < 1.0) {
-    return Math.ceil(value / devicePixelRatio);
-  }
-  return Math.ceil(value * devicePixelRatio);
-}
-
-type Props = {
-  activeChannelClaim: ?ChannelClaim,
-  allComments: Array<Comment>,
-  totalComments: number,
-  topLevelTotalPages: number,
-  isFetchingComments: boolean,
-  claimsById: any,
-  doCommentReset: (claimId: string) => void,
-  doCommentListOwn: (channelId: string, page: number, pageSize: number) => void,
-};
-
-export default function OwnComments(props: Props) {
-  const {
-    activeChannelClaim,
-    allComments,
-    totalComments,
-    isFetchingComments,
-    claimsById,
-    doCommentReset,
-    doCommentListOwn,
-  } = props;
-  const spinnerRef = React.useRef();
-  const [page, setPage] = React.useState(0);
-  const [activeChannelId, setActiveChannelId] = React.useState('');
-
-  // Since we are sharing the key for Discussion and MyComments, don't show
-  // the list until we've gone through the initial reset.
-  const wasResetAndReady = useFetched(isFetchingComments);
-
-  const totalPages = Math.ceil(totalComments / COMMENT_PAGE_SIZE_TOP_LEVEL);
-  const moreBelow = page < totalPages;
-
-  function getCommentsElem(comments) {
-    return comments.map((comment) => {
-      const contentClaim = claimsById[comment.claim_id];
-      const isChannel = contentClaim && contentClaim.value_type === 'channel';
-      const isLivestream = Boolean(contentClaim && contentClaim.value_type === 'stream' && !contentClaim.value.source);
-
-      return (
-        <div key={comment.comment_id} className="comments-own card__main-actions">
-          <div className="section__actions">
-            <div className="comments-own--claim">
-              {contentClaim && (
-                <ClaimPreview
-                  uri={contentClaim.canonical_url}
-                  searchParams={{
-                    ...(isChannel ? { view: 'discussion' } : {}),
-                    ...(isLivestream ? {} : { lc: comment.comment_id }),
-                  }}
-                  hideActions
-                  hideMenu
-                  properties={() => null}
-                />
-              )}
-              {!contentClaim && <Empty text={__('Content or channel was deleted.')} />}
-            </div>
-            <Comment
-              isTopLevel
-              hideActions
-              authorUri={comment.channel_url}
-              author={comment.channel_name}
-              commentId={comment.comment_id}
-              message={comment.comment}
-              timePosted={comment.timestamp * 1000}
-              commentIsMine
-              supportAmount={comment.support_amount}
-              numDirectReplies={0} // Don't show replies here
-              isModerator={comment.is_moderator}
-              isGlobalMod={comment.is_global_mod}
-              isFiat={comment.is_fiat}
-            />
-          </div>
-        </div>
-      );
-    });
-  }
-
-  // Active channel changed
-  React.useEffect(() => {
-    if (activeChannelClaim && activeChannelClaim.claim_id !== activeChannelId) {
-      setActiveChannelId(activeChannelClaim.claim_id);
-      setPage(0);
-    }
-  }, [activeChannelClaim, activeChannelId]);
-
-  // Reset comments
-  React.useEffect(() => {
-    if (page === 0 && activeChannelId) {
-      doCommentReset(activeChannelId);
-      setPage(1);
-    }
-  }, [page, activeChannelId]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  // Fetch own comments
-  React.useEffect(() => {
-    if (page !== 0 && activeChannelId) {
-      doCommentListOwn(activeChannelId, page, COMMENT_PAGE_SIZE_TOP_LEVEL);
-    }
-  }, [page]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  // Infinite scroll
-  React.useEffect(() => {
-    function shouldFetchNextPage(page, topLevelTotalPages, window, document, yPrefetchPx = 1000) {
-      if (!spinnerRef || !spinnerRef.current) {
-        return false;
-      }
-
-      const rect = spinnerRef.current.getBoundingClientRect(); // $FlowFixMe
-      const windowH = window.innerHeight || document.documentElement.clientHeight; // $FlowFixMe
-      const windowW = window.innerWidth || document.documentElement.clientWidth; // $FlowFixMe
-
-      const isApproachingViewport = yPrefetchPx !== 0 && rect.top < windowH + scaleToDevicePixelRatio(yPrefetchPx);
-
-      const isInViewport =
-        rect.width > 0 &&
-        rect.height > 0 &&
-        rect.bottom >= 0 &&
-        rect.right >= 0 &&
-        // $FlowFixMe
-        rect.top <= windowH &&
-        // $FlowFixMe
-        rect.left <= windowW;
-
-      return (isInViewport || isApproachingViewport) && page < topLevelTotalPages;
-    }
-
-    const handleCommentScroll = debounce(() => {
-      if (shouldFetchNextPage(page, totalPages, window, document)) {
-        setPage(page + 1);
-      }
-    }, 200);
-
-    if (!isFetchingComments && moreBelow && spinnerRef && spinnerRef.current) {
-      if (shouldFetchNextPage(page, totalPages, window, document, 0)) {
-        setPage(page + 1);
-      } else {
-        window.addEventListener('scroll', handleCommentScroll);
-        return () => window.removeEventListener('scroll', handleCommentScroll);
-      }
-    }
-  }, [page, spinnerRef, isFetchingComments, moreBelow, totalPages]);
-
-  // **************************************************************************
-  // **************************************************************************
-
-  if (!activeChannelClaim) {
-    return null;
-  }
-
-  return (
-    <Page noFooter noSideNavigation settingsPage backout={{ title: __('Your comments'), backLabel: __('Back') }}>
-      <ChannelSelector hideAnon />
-      <Card
-        isBodyList
-        title={
-          totalComments > 0
-            ? totalComments === 1
-              ? __('1 comment')
-              : __('%total_comments% comments', { total_comments: totalComments })
-            : isFetchingComments
-            ? ''
-            : __('No comments')
-        }
-        titleActions={
-          <Button
-            button="alt"
-            icon={ICONS.REFRESH}
-            title={__('Refresh')}
-            onClick={() => {
-              setPage(0);
-            }}
-          />
-        }
-        body={
-          <>
-            {wasResetAndReady && <ul className="comments">{allComments && getCommentsElem(allComments)}</ul>}
-            {(isFetchingComments || moreBelow) && (
-              <div className="main--empty" ref={spinnerRef}>
-                <Spinner type="small" />
-              </div>
-            )}
-          </>
-        }
-      />
-    </Page>
-  );
-}
diff --git a/ui/redux/actions/comments.js b/ui/redux/actions/comments.js
index 3d4a7c359..44947d109 100644
--- a/ui/redux/actions/comments.js
+++ b/ui/redux/actions/comments.js
@@ -3,15 +3,7 @@ import * as ACTIONS from 'constants/action_types';
 import * as REACTION_TYPES from 'constants/reactions';
 import * as PAGES from 'constants/pages';
 import { SORT_BY, BLOCK_LEVEL } from 'constants/comment';
-import {
-  Lbry,
-  parseURI,
-  buildURI,
-  selectClaimsByUri,
-  selectMyChannelClaims,
-  isURIEqual,
-  doClaimSearch,
-} from 'lbry-redux';
+import { Lbry, parseURI, buildURI, selectClaimsByUri, selectMyChannelClaims, isURIEqual } from 'lbry-redux';
 import { doToast, doSeeNotifications } from 'redux/actions/notifications';
 import {
   makeSelectMyReactionsForComment,
@@ -135,6 +127,7 @@ export function doCommentList(
         type: ACTIONS.COMMENT_LIST_FAILED,
         data: 'unable to find claim for uri',
       });
+
       return;
     }
 
@@ -146,7 +139,7 @@ export function doCommentList(
     });
 
     // Adding 'channel_id' and 'channel_name' enables "CreatorSettings > commentsEnabled".
-    const creatorChannelClaim = claim.value_type === 'channel' ? claim : claim.signing_channel;
+    const authorChannelClaim = claim.value_type === 'channel' ? claim : claim.signing_channel;
 
     return Comments.comment_list({
       page,
@@ -154,8 +147,8 @@ export function doCommentList(
       page_size: pageSize,
       parent_id: parentId || undefined,
       top_level: !parentId,
-      channel_id: creatorChannelClaim ? creatorChannelClaim.claim_id : undefined,
-      channel_name: creatorChannelClaim ? creatorChannelClaim.name : undefined,
+      channel_id: authorChannelClaim ? authorChannelClaim.claim_id : undefined,
+      channel_name: authorChannelClaim ? authorChannelClaim.name : undefined,
       sort_by: sortBy,
     })
       .then((result: CommentListResponse) => {
@@ -169,7 +162,7 @@ export function doCommentList(
             totalFilteredItems: total_filtered_items,
             totalPages: total_pages,
             claimId: claimId,
-            creatorClaimId: creatorChannelClaim ? creatorChannelClaim.claim_id : undefined,
+            commenterClaimId: authorChannelClaim ? authorChannelClaim.claim_id : undefined,
             uri: uri,
           },
         });
@@ -182,7 +175,7 @@ export function doCommentList(
             dispatch({
               type: ACTIONS.COMMENT_LIST_COMPLETED,
               data: {
-                creatorClaimId: creatorChannelClaim ? creatorChannelClaim.claim_id : undefined,
+                authorClaimId: authorChannelClaim ? authorChannelClaim.claim_id : undefined,
                 disabled: true,
               },
             });
@@ -208,103 +201,6 @@ export function doCommentList(
   };
 }
 
-export function doCommentListOwn(
-  channelId: string,
-  page: number = 1,
-  pageSize: number = 99999,
-  sortBy: number = SORT_BY.NEWEST_NO_PINS
-) {
-  return async (dispatch: Dispatch, getState: GetState) => {
-    const state = getState();
-    const myChannelClaims = selectMyChannelClaims(state);
-    if (!myChannelClaims) {
-      console.error('Failed to fetch channel list.'); // eslint-disable-line
-      return;
-    }
-
-    const channelClaim = myChannelClaims.find((x) => x.claim_id === channelId);
-    if (!channelClaim) {
-      console.error('You do not own this channel.'); // eslint-disable-line
-      return;
-    }
-
-    const channelSignature = await channelSignName(channelClaim.claim_id, channelClaim.name);
-    if (!channelSignature) {
-      console.error('Failed to sign channel name.'); // eslint-disable-line
-      return;
-    }
-
-    dispatch({
-      type: ACTIONS.COMMENT_LIST_STARTED,
-      data: {},
-    });
-
-    return Comments.comment_list({
-      page,
-      page_size: pageSize,
-      sort_by: sortBy,
-      author_claim_id: channelId,
-      requestor_channel_name: channelClaim.name,
-      requestor_channel_id: channelClaim.claim_id,
-      signature: channelSignature.signature,
-      signing_ts: channelSignature.signing_ts,
-    })
-      .then((result: CommentListResponse) => {
-        const { items: comments, total_items, total_filtered_items, total_pages } = result;
-
-        if (!comments) {
-          dispatch({ type: ACTIONS.COMMENT_LIST_FAILED, data: 'No more comments.' });
-          return;
-        }
-
-        dispatch(
-          doClaimSearch({
-            page: 1,
-            page_size: 20,
-            no_totals: true,
-            claim_ids: comments.map((c) => c.claim_id),
-          })
-        )
-          .then((result) => {
-            dispatch({
-              type: ACTIONS.COMMENT_LIST_COMPLETED,
-              data: {
-                comments,
-                totalItems: total_items,
-                totalFilteredItems: total_filtered_items,
-                totalPages: total_pages,
-                uri: channelClaim.canonical_url, // hijack "Discussion Page"
-                claimId: channelClaim.claim_id, // hijack "Discussion Page"
-              },
-            });
-          })
-          .catch((err) => {
-            dispatch({ type: ACTIONS.COMMENT_LIST_FAILED, data: err });
-          });
-      })
-      .catch((error) => {
-        switch (error.message) {
-          case FETCH_API_FAILED_TO_FETCH:
-            dispatch(
-              doToast({
-                isError: true,
-                message: Comments.isCustomServer
-                  ? __('Failed to fetch comments. Verify custom server settings.')
-                  : __('Failed to fetch comments.'),
-              })
-            );
-            dispatch(doToast({ isError: true, message: `${error.message}` }));
-            dispatch({ type: ACTIONS.COMMENT_LIST_FAILED, data: error });
-            break;
-
-          default:
-            dispatch(doToast({ isError: true, message: `${error.message}` }));
-            dispatch({ type: ACTIONS.COMMENT_LIST_FAILED, data: error });
-        }
-      });
-  };
-}
-
 export function doCommentById(commentId: string, toastIfNotFound: boolean = true) {
   return (dispatch: Dispatch, getState: GetState) => {
     dispatch({
@@ -343,10 +239,17 @@ export function doCommentById(commentId: string, toastIfNotFound: boolean = true
   };
 }
 
-export function doCommentReset(claimId: string) {
-  return (dispatch: Dispatch) => {
+export function doCommentReset(uri: string) {
+  return (dispatch: Dispatch, getState: GetState) => {
+    const state = getState();
+    const claim = selectClaimsByUri(state)[uri];
+    const claimId = claim ? claim.claim_id : null;
+
     if (!claimId) {
-      console.error(`Failed to reset comments`); //eslint-disable-line
+      dispatch({
+        type: ACTIONS.COMMENT_LIST_FAILED,
+        data: 'unable to find claim for uri',
+      });
       return;
     }
 
diff --git a/ui/redux/reducers/comments.js b/ui/redux/reducers/comments.js
index 29a65a885..d4fd5b926 100644
--- a/ui/redux/reducers/comments.js
+++ b/ui/redux/reducers/comments.js
@@ -246,7 +246,7 @@ export default handleActions(
         claimId,
         uri,
         disabled,
-        creatorClaimId,
+        commenterClaimId,
       } = action.data;
 
       const commentById = Object.assign({}, state.commentById);
@@ -262,8 +262,8 @@ export default handleActions(
       const isLoadingByParentId = Object.assign({}, state.isLoadingByParentId);
       const settingsByChannelId = Object.assign({}, state.settingsByChannelId);
 
-      settingsByChannelId[creatorClaimId] = {
-        ...(settingsByChannelId[creatorClaimId] || {}),
+      settingsByChannelId[commenterClaimId] = {
+        ...(settingsByChannelId[commenterClaimId] || {}),
         comments_enabled: !disabled,
       };
 
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
index 2ba53cd2c..1beab514c 100644
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@@ -487,60 +487,3 @@ $thumbnailWidthSmall: 1rem;
     margin-bottom: -3px; // TODO fix few instances of these (find "-2px")
   }
 }
-
-.comments-own {
-  .section__actions {
-    align-items: flex-start;
-  }
-
-  .comments-own--claim {
-    min-width: 100%;
-    max-width: 100%;
-
-    @media (min-width: $breakpoint-medium) {
-      min-width: 40%;
-      max-width: 40%;
-    }
-
-    .media__thumb {
-      flex-shrink: 0;
-      overflow: hidden;
-      $width: 5rem;
-      @include handleClaimListGifThumbnail($width);
-      width: $width;
-      height: calc(#{$width} * (9 / 16));
-      margin-right: var(--spacing-s);
-    }
-
-    .channel-thumbnail {
-      @include handleChannelGif(calc(5rem * 9 / 16));
-      margin-right: var(--spacing-xs);
-
-      @media (min-width: $breakpoint-small) {
-        @include handleChannelGif(calc(5rem * 9 / 16));
-        margin-right: var(--spacing-s);
-      }
-    }
-  }
-
-  .claim-preview__wrapper {
-    margin: 0 0;
-    padding: 0;
-
-    @media (min-width: $breakpoint-medium) {
-      margin: 0 var(--spacing-xs);
-    }
-  }
-
-  .comment {
-    margin-top: var(--spacing-s);
-    margin-left: 0;
-    padding-left: var(--spacing-m);
-    border-left: 4px solid var(--color-border);
-
-    @media (min-width: $breakpoint-medium) {
-      margin-top: 0;
-      margin-left: var(--spacing-s);
-    }
-  }
-}

From cb6873843f629923c94ddae48d3ef77980ae5398 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Fri, 1 Oct 2021 13:52:47 +0800
Subject: [PATCH 2/8] Add option to pass in url-search params.

Impetus: allow linked comment ID and setting the discussion tab when clicking on the `ClaimPreview`.
---
 ui/component/claimPreview/view.jsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx
index 343424d5f..34e7dc188 100644
--- a/ui/component/claimPreview/view.jsx
+++ b/ui/component/claimPreview/view.jsx
@@ -70,6 +70,7 @@ type Props = {
   streamingUrl: ?string,
   getFile: (string) => void,
   customShouldHide?: (Claim) => boolean,
+  searchParams?: { [string]: string },
   showUnresolvedClaim?: boolean,
   showNullPlaceholder?: boolean,
   includeSupportAction?: boolean,
@@ -125,6 +126,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     // modifiers
     active,
     customShouldHide,
+    searchParams,
     showNullPlaceholder,
     // value from show mature content user setting
     // true if the user doesn't wanna see nsfw content
@@ -221,6 +223,11 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
   if (listId) {
     navigateSearch.set(COLLECTIONS_CONSTS.COLLECTION_ID, listId);
   }
+  if (searchParams) {
+    Object.keys(searchParams).forEach((key) => {
+      navigateSearch.set(key, searchParams[key]);
+    });
+  }
 
   const handleNavLinkClick = (e) => {
     if (onClick) {

From 135982e9d0a080ef422fedd2e99d5c8a81678dad Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 27 Sep 2021 11:44:44 +0800
Subject: [PATCH 3/8] comment.list: fix typos and renamed variables

- Switch from 'author' to 'creator' to disambiguate between comment author and content author. For comment author, we'll use 'commenter' from now on.
- Corrected 'commenterClaimId' to 'creatorClaimId' (just a typo, no functional change).
---
 ui/redux/actions/comments.js  | 11 +++++------
 ui/redux/reducers/comments.js |  6 +++---
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/ui/redux/actions/comments.js b/ui/redux/actions/comments.js
index 44947d109..8196ef288 100644
--- a/ui/redux/actions/comments.js
+++ b/ui/redux/actions/comments.js
@@ -127,7 +127,6 @@ export function doCommentList(
         type: ACTIONS.COMMENT_LIST_FAILED,
         data: 'unable to find claim for uri',
       });
-
       return;
     }
 
@@ -139,7 +138,7 @@ export function doCommentList(
     });
 
     // Adding 'channel_id' and 'channel_name' enables "CreatorSettings > commentsEnabled".
-    const authorChannelClaim = claim.value_type === 'channel' ? claim : claim.signing_channel;
+    const creatorChannelClaim = claim.value_type === 'channel' ? claim : claim.signing_channel;
 
     return Comments.comment_list({
       page,
@@ -147,8 +146,8 @@ export function doCommentList(
       page_size: pageSize,
       parent_id: parentId || undefined,
       top_level: !parentId,
-      channel_id: authorChannelClaim ? authorChannelClaim.claim_id : undefined,
-      channel_name: authorChannelClaim ? authorChannelClaim.name : undefined,
+      channel_id: creatorChannelClaim ? creatorChannelClaim.claim_id : undefined,
+      channel_name: creatorChannelClaim ? creatorChannelClaim.name : undefined,
       sort_by: sortBy,
     })
       .then((result: CommentListResponse) => {
@@ -162,7 +161,7 @@ export function doCommentList(
             totalFilteredItems: total_filtered_items,
             totalPages: total_pages,
             claimId: claimId,
-            commenterClaimId: authorChannelClaim ? authorChannelClaim.claim_id : undefined,
+            creatorClaimId: creatorChannelClaim ? creatorChannelClaim.claim_id : undefined,
             uri: uri,
           },
         });
@@ -175,7 +174,7 @@ export function doCommentList(
             dispatch({
               type: ACTIONS.COMMENT_LIST_COMPLETED,
               data: {
-                authorClaimId: authorChannelClaim ? authorChannelClaim.claim_id : undefined,
+                creatorClaimId: creatorChannelClaim ? creatorChannelClaim.claim_id : undefined,
                 disabled: true,
               },
             });
diff --git a/ui/redux/reducers/comments.js b/ui/redux/reducers/comments.js
index d4fd5b926..29a65a885 100644
--- a/ui/redux/reducers/comments.js
+++ b/ui/redux/reducers/comments.js
@@ -246,7 +246,7 @@ export default handleActions(
         claimId,
         uri,
         disabled,
-        commenterClaimId,
+        creatorClaimId,
       } = action.data;
 
       const commentById = Object.assign({}, state.commentById);
@@ -262,8 +262,8 @@ export default handleActions(
       const isLoadingByParentId = Object.assign({}, state.isLoadingByParentId);
       const settingsByChannelId = Object.assign({}, state.settingsByChannelId);
 
-      settingsByChannelId[commenterClaimId] = {
-        ...(settingsByChannelId[commenterClaimId] || {}),
+      settingsByChannelId[creatorClaimId] = {
+        ...(settingsByChannelId[creatorClaimId] || {}),
         comments_enabled: !disabled,
       };
 

From 8859f46e5c140bd82876ec0dd98127735a7fc0ab Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 27 Sep 2021 15:05:59 +0800
Subject: [PATCH 4/8] doCommentReset: change param from uri to claimId

This reduces one lookup as clients will always have the claimID ready, but might not have the full URI.

It was using URI previously just to match the other APIs.
---
 ui/component/commentsList/index.js |  2 +-
 ui/component/commentsList/view.jsx |  7 +++++--
 ui/redux/actions/comments.js       | 13 +++----------
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/ui/component/commentsList/index.js b/ui/component/commentsList/index.js
index 8d15ab707..c83dae73b 100644
--- a/ui/component/commentsList/index.js
+++ b/ui/component/commentsList/index.js
@@ -48,7 +48,7 @@ const perform = (dispatch) => ({
   fetchTopLevelComments: (uri, page, pageSize, sortBy) => dispatch(doCommentList(uri, '', page, pageSize, sortBy)),
   fetchComment: (commentId) => dispatch(doCommentById(commentId)),
   fetchReacts: (commentIds) => dispatch(doCommentReactList(commentIds)),
-  resetComments: (uri) => dispatch(doCommentReset(uri)),
+  resetComments: (claimId) => dispatch(doCommentReset(claimId)),
 });
 
 export default connect(select, perform)(CommentsList);
diff --git a/ui/component/commentsList/view.jsx b/ui/component/commentsList/view.jsx
index 6a51fd42c..35525d19a 100644
--- a/ui/component/commentsList/view.jsx
+++ b/ui/component/commentsList/view.jsx
@@ -151,10 +151,13 @@ function CommentList(props: Props) {
   // Reset comments
   useEffect(() => {
     if (page === 0) {
-      resetComments(uri);
+      if (claim) {
+        resetComments(claim.claim_id);
+      }
       setPage(1);
     }
-  }, [page, uri, resetComments]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, uri, resetComments]); // 'claim' is derived from 'uri'
 
   // Fetch top-level comments
   useEffect(() => {
diff --git a/ui/redux/actions/comments.js b/ui/redux/actions/comments.js
index 8196ef288..cdc9ce281 100644
--- a/ui/redux/actions/comments.js
+++ b/ui/redux/actions/comments.js
@@ -238,17 +238,10 @@ export function doCommentById(commentId: string, toastIfNotFound: boolean = true
   };
 }
 
-export function doCommentReset(uri: string) {
-  return (dispatch: Dispatch, getState: GetState) => {
-    const state = getState();
-    const claim = selectClaimsByUri(state)[uri];
-    const claimId = claim ? claim.claim_id : null;
-
+export function doCommentReset(claimId: string) {
+  return (dispatch: Dispatch) => {
     if (!claimId) {
-      dispatch({
-        type: ACTIONS.COMMENT_LIST_FAILED,
-        data: 'unable to find claim for uri',
-      });
+      console.error(`Failed to reset comments`); //eslint-disable-line
       return;
     }
 

From eb241b35040cb1b399332366984f51726c5e3acb Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 27 Sep 2021 16:24:57 +0800
Subject: [PATCH 5/8] Add doCommentListOwn -- command to fetch own comments

Since the redux slice is set up based on content or channel ID (for Channel Discussion page), re-use the channel ID for the case of "own comments". We always clear each ID when fetching page-0, so no worries of conflict when actually browsing the Channel Discussion page.
---
 flow-typed/Comment.js        |   2 +-
 ui/redux/actions/comments.js | 107 ++++++++++++++++++++++++++++++++++-
 2 files changed, 107 insertions(+), 2 deletions(-)

diff --git a/flow-typed/Comment.js b/flow-typed/Comment.js
index 8b2ad570c..50521e725 100644
--- a/flow-typed/Comment.js
+++ b/flow-typed/Comment.js
@@ -111,7 +111,7 @@ declare type ReactionListResponse = {
 declare type CommentListParams = {
   page: number,             // pagination: which page of results
   page_size: number,        // pagination: nr of comments to show in a page (max 200)
-  claim_id: string,         // claim id of claim being commented on
+  claim_id?: string,        // claim id of claim being commented on
   channel_name?: string,    // signing channel name of claim (enables 'commentsEnabled' check)
   channel_id?: string,      // signing channel claim id of claim (enables 'commentsEnabled' check)
   author_claim_id?: string, // filters comments to just this author
diff --git a/ui/redux/actions/comments.js b/ui/redux/actions/comments.js
index cdc9ce281..3da0f9ccd 100644
--- a/ui/redux/actions/comments.js
+++ b/ui/redux/actions/comments.js
@@ -3,7 +3,15 @@ import * as ACTIONS from 'constants/action_types';
 import * as REACTION_TYPES from 'constants/reactions';
 import * as PAGES from 'constants/pages';
 import { SORT_BY, BLOCK_LEVEL } from 'constants/comment';
-import { Lbry, parseURI, buildURI, selectClaimsByUri, selectMyChannelClaims, isURIEqual } from 'lbry-redux';
+import {
+  Lbry,
+  parseURI,
+  buildURI,
+  selectClaimsByUri,
+  selectMyChannelClaims,
+  isURIEqual,
+  doClaimSearch,
+} from 'lbry-redux';
 import { doToast, doSeeNotifications } from 'redux/actions/notifications';
 import {
   makeSelectMyReactionsForComment,
@@ -200,6 +208,103 @@ export function doCommentList(
   };
 }
 
+export function doCommentListOwn(
+  channelId: string,
+  page: number = 1,
+  pageSize: number = 99999,
+  sortBy: number = SORT_BY.NEWEST
+) {
+  return async (dispatch: Dispatch, getState: GetState) => {
+    const state = getState();
+    const myChannelClaims = selectMyChannelClaims(state);
+    if (!myChannelClaims) {
+      console.error('Failed to fetch channel list.'); // eslint-disable-line
+      return;
+    }
+
+    const channelClaim = myChannelClaims.find((x) => x.claim_id === channelId);
+    if (!channelClaim) {
+      console.error('You do not own this channel.'); // eslint-disable-line
+      return;
+    }
+
+    const channelSignature = await channelSignName(channelClaim.claim_id, channelClaim.name);
+    if (!channelSignature) {
+      console.error('Failed to sign channel name.'); // eslint-disable-line
+      return;
+    }
+
+    dispatch({
+      type: ACTIONS.COMMENT_LIST_STARTED,
+      data: {},
+    });
+
+    return Comments.comment_list({
+      page,
+      page_size: pageSize,
+      sort_by: sortBy,
+      author_claim_id: channelId,
+      requestor_channel_name: channelClaim.name,
+      requestor_channel_id: channelClaim.claim_id,
+      signature: channelSignature.signature,
+      signing_ts: channelSignature.signing_ts,
+    })
+      .then((result: CommentListResponse) => {
+        const { items: comments, total_items, total_filtered_items, total_pages } = result;
+
+        if (!comments) {
+          dispatch({ type: ACTIONS.COMMENT_LIST_FAILED, data: 'No more comments.' });
+          return;
+        }
+
+        dispatch(
+          doClaimSearch({
+            page: 1,
+            page_size: 20,
+            no_totals: true,
+            claim_ids: comments.map((c) => c.claim_id),
+          })
+        )
+          .then((result) => {
+            dispatch({
+              type: ACTIONS.COMMENT_LIST_COMPLETED,
+              data: {
+                comments,
+                totalItems: total_items,
+                totalFilteredItems: total_filtered_items,
+                totalPages: total_pages,
+                uri: channelClaim.canonical_url, // hijack "Discussion Page"
+                claimId: channelClaim.claim_id, // hijack "Discussion Page"
+              },
+            });
+          })
+          .catch((err) => {
+            dispatch({ type: ACTIONS.COMMENT_LIST_FAILED, data: err });
+          });
+      })
+      .catch((error) => {
+        switch (error.message) {
+          case FETCH_API_FAILED_TO_FETCH:
+            dispatch(
+              doToast({
+                isError: true,
+                message: Comments.isCustomServer
+                  ? __('Failed to fetch comments. Verify custom server settings.')
+                  : __('Failed to fetch comments.'),
+              })
+            );
+            dispatch(doToast({ isError: true, message: `${error.message}` }));
+            dispatch({ type: ACTIONS.COMMENT_LIST_FAILED, data: error });
+            break;
+
+          default:
+            dispatch(doToast({ isError: true, message: `${error.message}` }));
+            dispatch({ type: ACTIONS.COMMENT_LIST_FAILED, data: error });
+        }
+      });
+  };
+}
+
 export function doCommentById(commentId: string, toastIfNotFound: boolean = true) {
   return (dispatch: Dispatch, getState: GetState) => {
     dispatch({

From 3a511842c1b604183b2e03b2cd6cbdd845361e1f Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 27 Sep 2021 16:25:51 +0800
Subject: [PATCH 6/8] Comment: add option to hide the actions section

---
 ui/component/comment/view.jsx | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx
index b52003bcf..b4816303a 100644
--- a/ui/component/comment/view.jsx
+++ b/ui/component/comment/view.jsx
@@ -52,6 +52,7 @@ type Props = {
   doToast: ({ message: string }) => void,
   isTopLevel?: boolean,
   threadDepth: number,
+  hideActions?: boolean,
   isPinned: boolean,
   othersReacts: ?{
     like: number,
@@ -95,6 +96,7 @@ function Comment(props: Props) {
     doToast,
     isTopLevel,
     threadDepth,
+    hideActions,
     isPinned,
     othersReacts,
     playingUri,
@@ -348,18 +350,20 @@ function Comment(props: Props) {
                   )}
                 </div>
 
-                <div className="comment__actions">
-                  {threadDepth !== 0 && (
-                    <Button
-                      requiresAuth={IS_WEB}
-                      label={commentingEnabled ? __('Reply') : __('Log in to reply')}
-                      className="comment__action"
-                      onClick={handleCommentReply}
-                      icon={ICONS.REPLY}
-                    />
-                  )}
-                  {ENABLE_COMMENT_REACTIONS && <CommentReactions uri={uri} commentId={commentId} />}
-                </div>
+                {!hideActions && (
+                  <div className="comment__actions">
+                    {threadDepth !== 0 && (
+                      <Button
+                        requiresAuth={IS_WEB}
+                        label={commentingEnabled ? __('Reply') : __('Log in to reply')}
+                        className="comment__action"
+                        onClick={handleCommentReply}
+                        icon={ICONS.REPLY}
+                      />
+                    )}
+                    {ENABLE_COMMENT_REACTIONS && <CommentReactions uri={uri} commentId={commentId} />}
+                  </div>
+                )}
 
                 {numDirectReplies > 0 && !showReplies && (
                   <div className="comment__actions">

From 37327185b1b53534e9442df8093674e1ef756b84 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 27 Sep 2021 13:42:12 +0800
Subject: [PATCH 7/8] Implement own-comments page

---
 static/app-strings.json              |   4 +
 ui/component/router/view.jsx         |   2 +
 ui/component/settingAccount/index.js |   3 +-
 ui/component/settingAccount/view.jsx |  14 +-
 ui/constants/pageTitles.js           |   1 +
 ui/constants/pages.js                |   1 +
 ui/page/ownComments/index.js         |  33 +++++
 ui/page/ownComments/view.jsx         | 210 +++++++++++++++++++++++++++
 ui/scss/component/_comments.scss     |  57 ++++++++
 9 files changed, 323 insertions(+), 2 deletions(-)
 create mode 100644 ui/page/ownComments/index.js
 create mode 100644 ui/page/ownComments/view.jsx

diff --git a/static/app-strings.json b/static/app-strings.json
index 36a82cd1a..5baa9217f 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -209,6 +209,9 @@
   "Failed to copy.": "Failed to copy.",
   "The publisher has chosen to charge %lbc% to view this content. Your balance is currently too low to view it. Check out %reward_link% for free %lbc% or send more %lbc% to your wallet. You can also %buy_link% more %lbc%.": "The publisher has chosen to charge %lbc% to view this content. Your balance is currently too low to view it. Check out %reward_link% for free %lbc% or send more %lbc% to your wallet. You can also %buy_link% more %lbc%.",
   "Connecting...": "Connecting...",
+  "Your comments": "Your comments",
+  "View your past comments.": "View your past comments.",
+  "Content or channel was deleted.": "Content or channel was deleted.",
   "Comments": "Comments",
   "Comment": "Comment",
   "Comment --[button to submit something]--": "Comment",
@@ -1460,6 +1463,7 @@
   "Staked LBRY Credits": "Staked LBRY Credits",
   "1 comment": "1 comment",
   "%total_comments% comments": "%total_comments% comments",
+  "No comments": "No comments",
   "Upvote": "Upvote",
   "Downvote": "Downvote",
   "You loved this": "You loved this",
diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx
index 03db2b538..ad5234265 100644
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@@ -59,6 +59,7 @@ const ListBlockedPage = lazyImport(() => import('page/listBlocked' /* webpackChu
 const ListsPage = lazyImport(() => import('page/lists' /* webpackChunkName: "secondary" */));
 const LiveStreamSetupPage = lazyImport(() => import('page/livestreamSetup' /* webpackChunkName: "secondary" */));
 const LivestreamCurrentPage = lazyImport(() => import('page/livestreamCurrent' /* webpackChunkName: "secondary" */));
+const OwnComments = lazyImport(() => import('page/ownComments' /* webpackChunkName: "ownComments" */));
 const PasswordResetPage = lazyImport(() => import('page/passwordReset' /* webpackChunkName: "secondary" */));
 const PasswordSetPage = lazyImport(() => import('page/passwordSet' /* webpackChunkName: "secondary" */));
 const PublishPage = lazyImport(() => import('page/publish' /* webpackChunkName: "secondary" */));
@@ -329,6 +330,7 @@ function AppRouter(props: Props) {
         <PrivateRoute {...props} path={`/$/${PAGES.SWAP}`} component={SwapPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.NOTIFICATIONS}`} component={NotificationsPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.AUTH_WALLET_PASSWORD}`} component={SignInWalletPasswordPage} />
+        <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_OWN_COMMENTS}`} component={OwnComments} />
 
         <Route path={`/$/${PAGES.EMBED}/:claimName`} exact component={EmbedWrapperPage} />
         <Route path={`/$/${PAGES.EMBED}/:claimName/:claimId`} exact component={EmbedWrapperPage} />
diff --git a/ui/component/settingAccount/index.js b/ui/component/settingAccount/index.js
index 83d77af76..0644ceaf6 100644
--- a/ui/component/settingAccount/index.js
+++ b/ui/component/settingAccount/index.js
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { doWalletStatus, selectWalletIsEncrypted } from 'lbry-redux';
+import { doWalletStatus, selectMyChannelClaims, selectWalletIsEncrypted } from 'lbry-redux';
 import { selectUser, selectUserVerifiedEmail } from 'redux/selectors/user';
 import { selectLanguage } from 'redux/selectors/settings';
 
@@ -9,6 +9,7 @@ const select = (state) => ({
   isAuthenticated: selectUserVerifiedEmail(state),
   walletEncrypted: selectWalletIsEncrypted(state),
   user: selectUser(state),
+  myChannels: selectMyChannelClaims(state),
   language: selectLanguage(state),
 });
 
diff --git a/ui/component/settingAccount/view.jsx b/ui/component/settingAccount/view.jsx
index f39262379..812e3818c 100644
--- a/ui/component/settingAccount/view.jsx
+++ b/ui/component/settingAccount/view.jsx
@@ -15,12 +15,13 @@ type Props = {
   isAuthenticated: boolean,
   walletEncrypted: boolean,
   user: User,
+  myChannels: ?Array<ChannelClaim>,
   // --- perform ---
   doWalletStatus: () => void,
 };
 
 export default function SettingAccount(props: Props) {
-  const { isAuthenticated, walletEncrypted, user, doWalletStatus } = props;
+  const { isAuthenticated, walletEncrypted, user, myChannels, doWalletStatus } = props;
   const [storedPassword, setStoredPassword] = React.useState(false);
 
   // Determine if password is stored.
@@ -92,6 +93,17 @@ export default function SettingAccount(props: Props) {
               </SettingsRow>
             )}
             {/* @endif */}
+
+            {myChannels && (
+              <SettingsRow title={__('Comments')} subtitle={__('View your past comments.')}>
+                <Button
+                  button="inverse"
+                  label={__('Manage')}
+                  icon={ICONS.ARROW_RIGHT}
+                  navigate={`/$/${PAGES.SETTINGS_OWN_COMMENTS}`}
+                />
+              </SettingsRow>
+            )}
           </>
         }
       />
diff --git a/ui/constants/pageTitles.js b/ui/constants/pageTitles.js
index 66afc32e6..fd330974b 100644
--- a/ui/constants/pageTitles.js
+++ b/ui/constants/pageTitles.js
@@ -52,6 +52,7 @@ export const PAGE_TITLE = {
   [PAGES.SETTINGS_STRIPE_ACCOUNT]: 'Bank Accounts',
   [PAGES.SETTINGS_STRIPE_CARD]: 'Payment Methods',
   [PAGES.SETTINGS_UPDATE_PWD]: 'Update password',
+  [PAGES.SETTINGS_OWN_COMMENTS]: 'Your comments',
   [PAGES.SWAP]: 'Swap Credits',
   [PAGES.TAGS_FOLLOWING]: 'Tags',
   [PAGES.TAGS_FOLLOWING_MANAGE]: 'Manage tags',
diff --git a/ui/constants/pages.js b/ui/constants/pages.js
index db1853800..495c1bf93 100644
--- a/ui/constants/pages.js
+++ b/ui/constants/pages.js
@@ -46,6 +46,7 @@ exports.SETTINGS_NOTIFICATIONS = 'settings/notifications';
 exports.SETTINGS_BLOCKED_MUTED = 'settings/block_and_mute';
 exports.SETTINGS_CREATOR = 'settings/creator';
 exports.SETTINGS_UPDATE_PWD = 'settings/update_password';
+exports.SETTINGS_OWN_COMMENTS = 'settings/ownComments';
 exports.SHOW = 'show';
 exports.ACCOUNT = 'account';
 exports.SEARCH = 'search';
diff --git a/ui/page/ownComments/index.js b/ui/page/ownComments/index.js
new file mode 100644
index 000000000..b2b18ac4d
--- /dev/null
+++ b/ui/page/ownComments/index.js
@@ -0,0 +1,33 @@
+import { connect } from 'react-redux';
+import { doCommentListOwn, doCommentReset } from 'redux/actions/comments';
+import { selectActiveChannelClaim } from 'redux/selectors/app';
+import {
+  selectIsFetchingComments,
+  makeSelectCommentsForUri,
+  makeSelectTotalCommentsCountForUri,
+  makeSelectTopLevelTotalPagesForUri,
+} from 'redux/selectors/comments';
+import { selectClaimsById } from 'lbry-redux';
+
+import OwnComments from './view';
+
+const select = (state) => {
+  const activeChannelClaim = selectActiveChannelClaim(state);
+  const uri = activeChannelClaim && activeChannelClaim.canonical_url;
+
+  return {
+    activeChannelClaim,
+    allComments: makeSelectCommentsForUri(uri)(state),
+    totalComments: makeSelectTotalCommentsCountForUri(uri)(state),
+    topLevelTotalPages: makeSelectTopLevelTotalPagesForUri(uri)(state),
+    isFetchingComments: selectIsFetchingComments(state),
+    claimsById: selectClaimsById(state),
+  };
+};
+
+const perform = (dispatch) => ({
+  doCommentReset: (a) => dispatch(doCommentReset(a)),
+  doCommentListOwn: (a, b, c, d) => dispatch(doCommentListOwn(a, b, c, d)),
+});
+
+export default connect(select, perform)(OwnComments);
diff --git a/ui/page/ownComments/view.jsx b/ui/page/ownComments/view.jsx
new file mode 100644
index 000000000..d5de78b67
--- /dev/null
+++ b/ui/page/ownComments/view.jsx
@@ -0,0 +1,210 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+import ChannelSelector from 'component/channelSelector';
+import ClaimPreview from 'component/claimPreview';
+import Comment from 'component/comment';
+import Card from 'component/common/card';
+import Empty from 'component/common/empty';
+import Page from 'component/page';
+import Spinner from 'component/spinner';
+import { SORT_BY, COMMENT_PAGE_SIZE_TOP_LEVEL } from 'constants/comment';
+import * as ICONS from 'constants/icons';
+import useFetched from 'effects/use-fetched';
+import debounce from 'util/debounce';
+
+function scaleToDevicePixelRatio(value) {
+  const devicePixelRatio = window.devicePixelRatio || 1.0;
+  if (devicePixelRatio < 1.0) {
+    return Math.ceil(value / devicePixelRatio);
+  }
+  return Math.ceil(value * devicePixelRatio);
+}
+
+type Props = {
+  activeChannelClaim: ?ChannelClaim,
+  allComments: Array<Comment>,
+  totalComments: number,
+  topLevelTotalPages: number,
+  isFetchingComments: boolean,
+  claimsById: any,
+  doCommentReset: (claimId: string) => void,
+  doCommentListOwn: (channelId: string, page: number, pageSize: number, sortBy: number) => void,
+};
+
+export default function OwnComments(props: Props) {
+  const {
+    activeChannelClaim,
+    allComments,
+    totalComments,
+    isFetchingComments,
+    claimsById,
+    doCommentReset,
+    doCommentListOwn,
+  } = props;
+  const spinnerRef = React.useRef();
+  const [page, setPage] = React.useState(0);
+  const [activeChannelId, setActiveChannelId] = React.useState('');
+
+  // Since we are sharing the key for Discussion and MyComments, don't show
+  // the list until we've gone through the initial reset.
+  const wasResetAndReady = useFetched(isFetchingComments);
+
+  const totalPages = Math.ceil(totalComments / COMMENT_PAGE_SIZE_TOP_LEVEL);
+  const moreBelow = page < totalPages;
+
+  function getCommentsElem(comments) {
+    return comments.map((comment) => {
+      const contentClaim = claimsById[comment.claim_id];
+      const isChannel = contentClaim && contentClaim.value_type === 'channel';
+      const isLivestream = Boolean(contentClaim && contentClaim.value_type === 'stream' && !contentClaim.value.source);
+
+      return (
+        <div key={comment.comment_id} className="comments-own card__main-actions">
+          <div className="section__actions">
+            <div className="comments-own--claim">
+              {contentClaim && (
+                <ClaimPreview
+                  uri={contentClaim.canonical_url}
+                  searchParams={{
+                    ...(isChannel ? { view: 'discussion' } : {}),
+                    ...(isLivestream ? {} : { lc: comment.comment_id }),
+                  }}
+                  hideActions
+                  hideMenu
+                  properties={() => null}
+                />
+              )}
+              {!contentClaim && <Empty text={__('Content or channel was deleted.')} />}
+            </div>
+            <Comment
+              isTopLevel
+              hideActions
+              authorUri={comment.channel_url}
+              author={comment.channel_name}
+              commentId={comment.comment_id}
+              message={comment.comment}
+              timePosted={comment.timestamp * 1000}
+              commentIsMine
+              supportAmount={comment.support_amount}
+              numDirectReplies={0} // Don't show replies here
+              isModerator={comment.is_moderator}
+              isGlobalMod={comment.is_global_mod}
+              isFiat={comment.is_fiat}
+            />
+          </div>
+        </div>
+      );
+    });
+  }
+
+  // Active channel changed
+  React.useEffect(() => {
+    if (activeChannelClaim && activeChannelClaim.claim_id !== activeChannelId) {
+      setActiveChannelId(activeChannelClaim.claim_id);
+      setPage(0);
+    }
+  }, [activeChannelClaim, activeChannelId]);
+
+  // Reset comments
+  React.useEffect(() => {
+    if (page === 0 && activeChannelId) {
+      doCommentReset(activeChannelId);
+      setPage(1);
+    }
+  }, [page, activeChannelId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Fetch own comments
+  React.useEffect(() => {
+    if (page !== 0 && activeChannelId) {
+      doCommentListOwn(activeChannelId, page, COMMENT_PAGE_SIZE_TOP_LEVEL, SORT_BY.NEWEST);
+    }
+  }, [page]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Infinite scroll
+  React.useEffect(() => {
+    function shouldFetchNextPage(page, topLevelTotalPages, window, document, yPrefetchPx = 1000) {
+      if (!spinnerRef || !spinnerRef.current) {
+        return false;
+      }
+
+      const rect = spinnerRef.current.getBoundingClientRect(); // $FlowFixMe
+      const windowH = window.innerHeight || document.documentElement.clientHeight; // $FlowFixMe
+      const windowW = window.innerWidth || document.documentElement.clientWidth; // $FlowFixMe
+
+      const isApproachingViewport = yPrefetchPx !== 0 && rect.top < windowH + scaleToDevicePixelRatio(yPrefetchPx);
+
+      const isInViewport =
+        rect.width > 0 &&
+        rect.height > 0 &&
+        rect.bottom >= 0 &&
+        rect.right >= 0 &&
+        // $FlowFixMe
+        rect.top <= windowH &&
+        // $FlowFixMe
+        rect.left <= windowW;
+
+      return (isInViewport || isApproachingViewport) && page < topLevelTotalPages;
+    }
+
+    const handleCommentScroll = debounce(() => {
+      if (shouldFetchNextPage(page, totalPages, window, document)) {
+        setPage(page + 1);
+      }
+    }, 200);
+
+    if (!isFetchingComments && moreBelow && spinnerRef && spinnerRef.current) {
+      if (shouldFetchNextPage(page, totalPages, window, document, 0)) {
+        setPage(page + 1);
+      } else {
+        window.addEventListener('scroll', handleCommentScroll);
+        return () => window.removeEventListener('scroll', handleCommentScroll);
+      }
+    }
+  }, [page, spinnerRef, isFetchingComments, moreBelow, totalPages]);
+
+  // **************************************************************************
+  // **************************************************************************
+
+  if (!activeChannelClaim) {
+    return null;
+  }
+
+  return (
+    <Page noFooter noSideNavigation settingsPage backout={{ title: __('Your comments'), backLabel: __('Back') }}>
+      <ChannelSelector hideAnon />
+      <Card
+        isBodyList
+        title={
+          totalComments > 0
+            ? totalComments === 1
+              ? __('1 comment')
+              : __('%total_comments% comments', { total_comments: totalComments })
+            : isFetchingComments
+            ? ''
+            : __('No comments')
+        }
+        titleActions={
+          <Button
+            button="alt"
+            icon={ICONS.REFRESH}
+            title={__('Refresh')}
+            onClick={() => {
+              setPage(0);
+            }}
+          />
+        }
+        body={
+          <>
+            {wasResetAndReady && <ul className="comments">{allComments && getCommentsElem(allComments)}</ul>}
+            {(isFetchingComments || moreBelow) && (
+              <div className="main--empty" ref={spinnerRef}>
+                <Spinner type="small" />
+              </div>
+            )}
+          </>
+        }
+      />
+    </Page>
+  );
+}
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
index 1beab514c..2ba53cd2c 100644
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@@ -487,3 +487,60 @@ $thumbnailWidthSmall: 1rem;
     margin-bottom: -3px; // TODO fix few instances of these (find "-2px")
   }
 }
+
+.comments-own {
+  .section__actions {
+    align-items: flex-start;
+  }
+
+  .comments-own--claim {
+    min-width: 100%;
+    max-width: 100%;
+
+    @media (min-width: $breakpoint-medium) {
+      min-width: 40%;
+      max-width: 40%;
+    }
+
+    .media__thumb {
+      flex-shrink: 0;
+      overflow: hidden;
+      $width: 5rem;
+      @include handleClaimListGifThumbnail($width);
+      width: $width;
+      height: calc(#{$width} * (9 / 16));
+      margin-right: var(--spacing-s);
+    }
+
+    .channel-thumbnail {
+      @include handleChannelGif(calc(5rem * 9 / 16));
+      margin-right: var(--spacing-xs);
+
+      @media (min-width: $breakpoint-small) {
+        @include handleChannelGif(calc(5rem * 9 / 16));
+        margin-right: var(--spacing-s);
+      }
+    }
+  }
+
+  .claim-preview__wrapper {
+    margin: 0 0;
+    padding: 0;
+
+    @media (min-width: $breakpoint-medium) {
+      margin: 0 var(--spacing-xs);
+    }
+  }
+
+  .comment {
+    margin-top: var(--spacing-s);
+    margin-left: 0;
+    padding-left: var(--spacing-m);
+    border-left: 4px solid var(--color-border);
+
+    @media (min-width: $breakpoint-medium) {
+      margin-top: 0;
+      margin-left: var(--spacing-s);
+    }
+  }
+}

From 76b16d676e83b548850654dec33ed81ae1f31672 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Fri, 1 Oct 2021 08:36:45 +0800
Subject: [PATCH 8/8] Use new param to remove sort-pins-first.

comment.List currently always pushes pins to the top to support pagination. This new param removes this behavior.
---
 flow-typed/Comment.js        | 2 +-
 ui/constants/comment.js      | 1 +
 ui/page/ownComments/index.js | 2 +-
 ui/page/ownComments/view.jsx | 6 +++---
 ui/redux/actions/comments.js | 2 +-
 5 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/flow-typed/Comment.js b/flow-typed/Comment.js
index 50521e725..57a666683 100644
--- a/flow-typed/Comment.js
+++ b/flow-typed/Comment.js
@@ -118,7 +118,7 @@ declare type CommentListParams = {
   parent_id?: string,       // filters comments to those under this thread
   top_level?: boolean,      // filters to only top level comments
   hidden?: boolean,         // if true, will show hidden comments as well
-  sort_by?: number,         // NEWEST=0, OLDEST=1, CONTROVERSY=2, POPULARITY=3,
+  sort_by?: number,         // @see: ui/constants/comments.js::SORT_BY
 };
 
 declare type CommentListResponse = {
diff --git a/ui/constants/comment.js b/ui/constants/comment.js
index c265d3956..5a71d7271 100644
--- a/ui/constants/comment.js
+++ b/ui/constants/comment.js
@@ -9,6 +9,7 @@ export const SORT_BY = {
   OLDEST: 1,
   CONTROVERSY: 2,
   POPULARITY: 3,
+  NEWEST_NO_PINS: 4,
 };
 
 export const BLOCK_LEVEL = {
diff --git a/ui/page/ownComments/index.js b/ui/page/ownComments/index.js
index b2b18ac4d..b4c1aa364 100644
--- a/ui/page/ownComments/index.js
+++ b/ui/page/ownComments/index.js
@@ -27,7 +27,7 @@ const select = (state) => {
 
 const perform = (dispatch) => ({
   doCommentReset: (a) => dispatch(doCommentReset(a)),
-  doCommentListOwn: (a, b, c, d) => dispatch(doCommentListOwn(a, b, c, d)),
+  doCommentListOwn: (a, b, c) => dispatch(doCommentListOwn(a, b, c)),
 });
 
 export default connect(select, perform)(OwnComments);
diff --git a/ui/page/ownComments/view.jsx b/ui/page/ownComments/view.jsx
index d5de78b67..63661cf32 100644
--- a/ui/page/ownComments/view.jsx
+++ b/ui/page/ownComments/view.jsx
@@ -8,7 +8,7 @@ import Card from 'component/common/card';
 import Empty from 'component/common/empty';
 import Page from 'component/page';
 import Spinner from 'component/spinner';
-import { SORT_BY, COMMENT_PAGE_SIZE_TOP_LEVEL } from 'constants/comment';
+import { COMMENT_PAGE_SIZE_TOP_LEVEL } from 'constants/comment';
 import * as ICONS from 'constants/icons';
 import useFetched from 'effects/use-fetched';
 import debounce from 'util/debounce';
@@ -29,7 +29,7 @@ type Props = {
   isFetchingComments: boolean,
   claimsById: any,
   doCommentReset: (claimId: string) => void,
-  doCommentListOwn: (channelId: string, page: number, pageSize: number, sortBy: number) => void,
+  doCommentListOwn: (channelId: string, page: number, pageSize: number) => void,
 };
 
 export default function OwnComments(props: Props) {
@@ -117,7 +117,7 @@ export default function OwnComments(props: Props) {
   // Fetch own comments
   React.useEffect(() => {
     if (page !== 0 && activeChannelId) {
-      doCommentListOwn(activeChannelId, page, COMMENT_PAGE_SIZE_TOP_LEVEL, SORT_BY.NEWEST);
+      doCommentListOwn(activeChannelId, page, COMMENT_PAGE_SIZE_TOP_LEVEL);
     }
   }, [page]); // eslint-disable-line react-hooks/exhaustive-deps
 
diff --git a/ui/redux/actions/comments.js b/ui/redux/actions/comments.js
index 3da0f9ccd..3d4a7c359 100644
--- a/ui/redux/actions/comments.js
+++ b/ui/redux/actions/comments.js
@@ -212,7 +212,7 @@ export function doCommentListOwn(
   channelId: string,
   page: number = 1,
   pageSize: number = 99999,
-  sortBy: number = SORT_BY.NEWEST
+  sortBy: number = SORT_BY.NEWEST_NO_PINS
 ) {
   return async (dispatch: Dispatch, getState: GetState) => {
     const state = getState();