infinite-persistence
parent
4c72a563da
commit
8b3820fb28
17 changed files with 39 additions and 472 deletions
4
flow-typed/Comment.js
vendored
4
flow-typed/Comment.js
vendored
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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,7 +348,6 @@ function Comment(props: Props) {
|
|||
)}
|
||||
</div>
|
||||
|
||||
{!hideActions && (
|
||||
<div className="comment__actions">
|
||||
{threadDepth !== 0 && (
|
||||
<Button
|
||||
|
|
@ -363,7 +360,6 @@ function Comment(props: Props) {
|
|||
)}
|
||||
{ENABLE_COMMENT_REACTIONS && <CommentReactions uri={uri} commentId={commentId} />}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{numDirectReplies > 0 && !showReplies && (
|
||||
<div className="comment__actions">
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ export const SORT_BY = {
|
|||
OLDEST: 1,
|
||||
CONTROVERSY: 2,
|
||||
POPULARITY: 3,
|
||||
NEWEST_NO_PINS: 4,
|
||||
};
|
||||
|
||||
export const BLOCK_LEVEL = {
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue