LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-08-23 17:47:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add reply

Browse source
This commit is contained in:
saltrafael 2021-08-04 10:12:49 -03:00
parent 62001810df
commit 56852955e4
No known key found for this signature in database
GPG key ID: 9C7F1DC0B0F54515
5 changed files with 80 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
ui/component/commentCreate/view.jsx
View file

@ -80,7 +80,7 @@ export function CommentCreate(props: Props) {
const [isSubmitting, setIsSubmitting] = React.useState(false); const [isSubmitting, setIsSubmitting] = React.useState(false);
const [commentFailure, setCommentFailure] = React.useState(false); const [commentFailure, setCommentFailure] = React.useState(false);
const [successTip, setSuccessTip] = React.useState({ txid: undefined, tipAmount: undefined }); const [successTip, setSuccessTip] = React.useState({ txid: undefined, tipAmount: undefined });
const { claim_id: claimId } = claim; const claimId = claim && claim.claim_id;
const [isSupportComment, setIsSupportComment] = React.useState(); const [isSupportComment, setIsSupportComment] = React.useState();
const [isReviewingSupportComment, setIsReviewingSupportComment] = React.useState(); const [isReviewingSupportComment, setIsReviewingSupportComment] = React.useState();
const [tipAmount, setTipAmount] = React.useState(1); const [tipAmount, setTipAmount] = React.useState(1);
@ -330,9 +330,21 @@ export function CommentCreate(props: Props) {
? __('Re-submit') ? __('Re-submit')
: __('Send') : __('Send')
} }
onClick={handleSupportComment} onClick={(e) => {
e.stopPropagation();
e.preventDefault();
handleSupportComment();
}}
/>
<Button
button="link"
label={__('Cancel')}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
setIsReviewingSupportComment(false);
}}
/> />
<Button button="link" label={__('Cancel')} onClick={() => setIsReviewingSupportComment(false)} />
</div> </div>
</div> </div>
); );
@ -371,6 +383,10 @@ export function CommentCreate(props: Props) {
onChange={handleCommentChange} onChange={handleCommentChange}
autoFocus={isReply} autoFocus={isReply}
textAreaMaxLength={livestream ? FF_MAX_CHARS_IN_LIVESTREAM_COMMENT : FF_MAX_CHARS_IN_COMMENT} textAreaMaxLength={livestream ? FF_MAX_CHARS_IN_LIVESTREAM_COMMENT : FF_MAX_CHARS_IN_COMMENT}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
}}
/> />
{isSupportComment && ( {isSupportComment && (
<WalletTipAmountSelector <WalletTipAmountSelector
@ -391,10 +407,23 @@ export function CommentCreate(props: Props) {
button="primary" button="primary"
icon={activeTab === TAB_LBC ? ICONS.LBC : ICONS.FINANCE} icon={activeTab === TAB_LBC ? ICONS.LBC : ICONS.FINANCE}
label={__('Review')} label={__('Review')}
onClick={() => setIsReviewingSupportComment(true)} onClick={(e) => {
e.stopPropagation();
e.preventDefault();
setIsReviewingSupportComment(true);
}}
/> />
<Button disabled={disabled} button="link" label={__('Cancel')} onClick={() => setIsSupportComment(false)} /> <Button
disabled={disabled}
button="link"
label={__('Cancel')}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
setIsSupportComment(false);
}}
/>
</> </>
) : ( ) : (
<> <>
@ -413,6 +442,9 @@ export function CommentCreate(props: Props) {
: __('Comment --[button to submit something]--') : __('Comment --[button to submit something]--')
} }
requiresAuth={IS_WEB} requiresAuth={IS_WEB}
onClick={(e) => {
e.stopPropagation();
}}
/> />
{!claimIsMine && ( {!claimIsMine && (
<Button <Button
@ -420,7 +452,9 @@ export function CommentCreate(props: Props) {
button="alt" button="alt"
className="thatButton" className="thatButton"
icon={ICONS.LBC} icon={ICONS.LBC}
onClick={() => { onClick={(e) => {
e.stopPropagation();
e.preventDefault();
setIsSupportComment(true); setIsSupportComment(true);
setActiveTab(TAB_LBC); setActiveTab(TAB_LBC);
}} }}
@ -432,7 +466,9 @@ export function CommentCreate(props: Props) {
button="alt" button="alt"
className="thisButton" className="thisButton"
icon={ICONS.FINANCE} icon={ICONS.FINANCE}
onClick={() => { onClick={(e) => {
e.stopPropagation();
e.preventDefault();
setIsSupportComment(true); setIsSupportComment(true);
setActiveTab(TAB_FIAT); setActiveTab(TAB_FIAT);
}} }}
@ -442,7 +478,9 @@ export function CommentCreate(props: Props) {
<Button <Button
button="link" button="link"
label={__('Cancel')} label={__('Cancel')}
onClick={() => { onClick={(e) => {
e.stopPropagation();
e.preventDefault();
if (onCancelReplying) { if (onCancelReplying) {
onCancelReplying(); onCancelReplying();
} }

2
ui/component/notification/index.js
View file

@ -1,8 +1,10 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { doReadNotifications, doDeleteNotification } from 'redux/actions/notifications'; import { doReadNotifications, doDeleteNotification } from 'redux/actions/notifications';
import { doResolveUri } from 'lbry-redux';
import Notification from './view'; import Notification from './view';
export default connect(null, { export default connect(null, {
doReadNotifications, doReadNotifications,
doDeleteNotification, doDeleteNotification,
doResolveUri,
})(Notification); })(Notification);

41
ui/component/notification/view.jsx
View file

@ -18,7 +18,7 @@ import NotificationContentChannelMenu from 'component/notificationContentChannel
import LbcMessage from 'component/common/lbc-message'; import LbcMessage from 'component/common/lbc-message';
import UriIndicator from 'component/uriIndicator'; import UriIndicator from 'component/uriIndicator';
import CommentReactions from 'component/commentReactions'; import CommentReactions from 'component/commentReactions';
// import CommentCreate from 'component/commentCreate'; import CommentCreate from 'component/commentCreate';
type Props = { type Props = {
notification: WebNotification, notification: WebNotification,
@ -26,10 +26,11 @@ type Props = {
children: any, children: any,
doReadNotifications: ([number]) => void, doReadNotifications: ([number]) => void,
doDeleteNotification: (number) => void, doDeleteNotification: (number) => void,
doResolveUri: (string) => void,
}; };
export default function Notification(props: Props) { export default function Notification(props: Props) {
const { notification, menuButton = false, doReadNotifications, doDeleteNotification } = props; const { notification, menuButton = false, doReadNotifications, doDeleteNotification, doResolveUri } = props;
const { push } = useHistory(); const { push } = useHistory();
const { notification_rule, notification_parameters, is_read, id } = notification; const { notification_rule, notification_parameters, is_read, id } = notification;
const [isReplying, setReplying] = React.useState(false); const [isReplying, setReplying] = React.useState(false);
@ -53,6 +54,12 @@ export default function Notification(props: Props) {
notificationTarget = notification_parameters.device.target; notificationTarget = notification_parameters.device.target;
} }
React.useEffect(() => {
if (isReplying && notificationTarget) {
doResolveUri(notificationTarget);
}
}, [doResolveUri, isReplying, notificationTarget]);
const creatorIcon = (channelUrl) => { const creatorIcon = (channelUrl) => {
return ( return (
<UriIndicator uri={channelUrl} link> <UriIndicator uri={channelUrl} link>
@ -213,16 +220,22 @@ export default function Notification(props: Props) {
)} )}
{isCommentNotification && ( {isCommentNotification && (
<div className="notification__reactions"> <>
<Button <div className="notification__reactions">
label={__('Reply')} <Button
className="comment__action" label={__('Reply')}
onClick={handleCommentReply} className="comment__action"
icon={ICONS.REPLY} onClick={(e) => {
/> e.stopPropagation();
<CommentReactions uri={notificationTarget} commentId={notification_parameters.dynamic.hash} /> e.preventDefault();
{/* figure out a better flow for this */} handleCommentReply();
{/* isReplying && ( }}
icon={ICONS.REPLY}
/>
<CommentReactions uri={notificationTarget} commentId={notification_parameters.dynamic.hash} />
</div>
{isReplying && (
<CommentCreate <CommentCreate
isReply isReply
uri={notificationTarget} uri={notificationTarget}
@ -234,8 +247,8 @@ export default function Notification(props: Props) {
setReplying(false); setReplying(false);
}} }}
/> />
) */} )}
</div> </>
)} )}
</div> </div>

4
ui/component/selectChannel/view.jsx
View file

@ -38,6 +38,10 @@ function SelectChannel(props: Props) {
onChange={handleChannelChange} onChange={handleChannelChange}
value={activeChannelClaim && activeChannelClaim.claim_id} value={activeChannelClaim && activeChannelClaim.claim_id}
disabled={fetchingChannels} disabled={fetchingChannels}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
}}
> >
{fetchingChannels ? ( {fetchingChannels ? (
<option>{__('Loading your channels...')}</option> <option>{__('Loading your channels...')}</option>

1
ui/scss/component/_comments.scss
View file

@ -267,6 +267,7 @@ $thumbnailWidthSmall: 1rem;
.comment__char-count { .comment__char-count {
font-size: var(--font-xsmall); font-size: var(--font-xsmall);
color: var(--color-text);
} }
.comment__char-count-mde { .comment__char-count-mde {