LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

cleanup

Browse source
This commit is contained in:
Sean Yesmunt 2020-02-10 15:49:43 -05:00
parent 776de49c15
commit e1cfe6aa9a
7 changed files with 101 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
static/app-strings.json
View file

@ -929,5 +929,12 @@
"Custom": "Custom",
"Playing in %seconds_left% seconds": "Playing in %seconds_left% seconds",
"Up Next by %channel%": "Up Next by %channel%",
"Install Now": "Install Now"
}
"Install Now": "Install Now",
"Repost": "Repost",
"Repost your favorite claims to help more people discover them!": "Repost your favorite claims to help more people discover them!",
"Advanced": "Advanced",
"community name": "community name",
"Change this to repost to a different %lbry_naming_link%.": "Change this to repost to a different %lbry_naming_link%.",
"Reposting": "Reposting",
"Woohoo! Sucessfully reposted this claim.": "Woohoo! Sucessfully reposted this claim."
}

4
ui/modal/modalRepost/index.js
View file

@ -10,6 +10,8 @@ import {
selectRepostLoading,
doClearRepostError,
doToast,
selectMyClaimsWithoutChannels,
doFetchClaimListMine,
} from 'lbry-redux';
import ModalRepost from './view';
@ -20,6 +22,7 @@ const select = (state, props) => ({
balance: selectBalance(state),
error: selectRepostError(state),
reposting: selectRepostLoading(state),
myClaims: selectMyClaimsWithoutChannels(state),
});
export default connect(
@ -29,5 +32,6 @@ export default connect(
doRepost,
doClearRepostError,
doToast,
doFetchClaimListMine,
}
)(ModalRepost);

137
ui/modal/modalRepost/view.jsx
View file

@ -1,4 +1,5 @@
// @flow
import * as ICONS from 'constants/icons';
import { CHANNEL_NEW, MINIMUM_PUBLISH_BID, INVALID_NAME_ERROR } from 'constants/claim';
import React from 'react';
import { Modal } from 'modal/modal';
@ -8,6 +9,8 @@ import SelectChannel from 'component/selectChannel';
import ErrorText from 'component/common/error-text';
import { FormField } from 'component/common/form';
import { parseURI, isNameValid, creditsToString } from 'lbry-redux';
import usePersistedState from 'effects/use-persisted-state';
import I18nMessage from 'component/i18nMessage';
type Props = {
doHideModal: () => void,
@ -18,6 +21,8 @@ type Props = {
claim: ?StreamClaim,
balance: number,
channels: ?Array<ChannelClaim>,
myClaims: ?Array<StreamClaim>,
doFetchClaimListMine: () => void,
error: ?string,
reposting: boolean,
};
@ -34,60 +39,66 @@ function ModalRepost(props: Props) {
channels,
error,
reposting,
myClaims,
doFetchClaimListMine,
} = props;
const defaultName = claim && `${claim.name}-repost`;
const originalClaimId = claim && claim.claim_id;
const [repostChannel, setRepostChannel] = React.useState<?{ claimId: string, name: string }>();
const defaultName = claim && claim.name;
const contentClaimId = claim && claim.claim_id;
const [repostChannel, setRepostChannel] = usePersistedState('repost-channel');
const [repostBid, setRepostBid] = usePersistedState('repost-bid', 0.01);
const [showAdvanced, setShowAdvanced] = React.useState();
const [repostBid, setRepostBid] = React.useState(0.1);
const [repostName, setRepostName] = React.useState(defaultName);
const [repostNameError, setRepostNameError] = React.useState();
const [repostBidError, setRepostBidError] = React.useState();
let repostBidError;
if (repostBid === 0) {
repostBidError = __('Deposit cannot be 0');
} else if (balance === repostBid) {
repostBidError = __('Please decrease your deposit to account for transaction fees');
} else if (balance < repostBid) {
repostBidError = __('Deposit cannot be higher than your balance');
} else if (repostBid < MINIMUM_PUBLISH_BID) {
repostBidError = __('Your deposit must be higher');
}
let repostNameError;
if (!repostName) {
repostNameError = __('A name is required');
} else if (!isNameValid(repostName, false)) {
repostNameError = INVALID_NAME_ERROR;
} else if (
channels &&
channels.find(claim => claim.name === repostChannel) &&
myClaims &&
myClaims.find(claim => claim.name === repostName)
) {
repostNameError = __('You already have a claim with this name.');
}
const channelStrings = channels && channels.map(channel => channel.permanent_url).join(',');
React.useEffect(() => {
if (!repostChannel && channelStrings) {
const channels = channelStrings.split(',');
const newChannelUrl = channels[0];
const { claimName, claimId } = parseURI(newChannelUrl);
setRepostChannel({ name: claimName, claimId });
const { claimName } = parseURI(newChannelUrl);
setRepostChannel(claimName);
}
}, [channelStrings]);
const myClaimsString = myClaims && myClaims.map(channel => channel.permanent_url).join(',');
React.useEffect(() => {
let bidError;
if (repostBid === 0) {
bidError = __('Deposit cannot be 0');
} else if (balance === repostBid) {
bidError = __('Please decrease your deposit to account for transaction fees');
} else if (balance < repostBid) {
bidError = __('Deposit cannot be higher than your balance');
} else if (repostBid < MINIMUM_PUBLISH_BID) {
bidError = __('Your deposit must be higher');
if (myClaimsString === '') {
doFetchClaimListMine();
}
setRepostBidError(bidError);
}, [repostBid, balance]);
React.useEffect(() => {
let nameError;
if (!repostName) {
nameError = __('A name is required');
} else if (!isNameValid(repostName, false)) {
nameError = INVALID_NAME_ERROR;
}
setRepostNameError(nameError);
}, [repostName]);
}, [myClaimsString, doFetchClaimListMine]);
function handleSubmit() {
if (repostName && repostBid && repostChannel && originalClaimId) {
const channelToRepostTo = channels && channels.find(channel => channel.name === repostChannel);
if (channelToRepostTo && repostName && repostBid && repostChannel && contentClaimId) {
doRepost({
name: repostName,
bid: creditsToString(repostBid),
channel_id: repostChannel.claimId,
claim_id: originalClaimId,
channel_id: channelToRepostTo.claim_id,
claim_id: contentClaimId,
}).then(() => {
doHideModal();
doToast({ message: __('Woohoo! Sucessfully reposted this claim.') });
@ -100,41 +111,44 @@ function ModalRepost(props: Props) {
doHideModal();
}
const showAdvancedSection = showAdvanced || repostNameError || repostBidError;
return (
<Modal isOpen type="card" onAborted={handleCloseModal} onConfirmed={handleCloseModal}>
<Card
actionIconPadding={false}
icon={ICONS.REPOST}
title={
<span>
Repost <em>{title}</em>
</span>
}
subtitle={
error && <ErrorText>{__('There was an error reposting this claim. Please try again later.')}</ErrorText>
error ? (
<ErrorText>{__('There was an error reposting this claim. Please try again later.')}</ErrorText>
) : (
<span>{__('Repost your favorite claims to help more people discover them!')}</span>
)
}
body={
actions={
<div>
<SelectChannel
label="Channel to repost on"
hideAnon
channel={repostChannel ? repostChannel.name : undefined}
channel={repostChannel}
onChannelChange={newChannel => setRepostChannel(newChannel)}
/>
<div className="section__actions">
{!showAdvanced && (
<Button
button="link"
label={showAdvanced ? 'Hide' : __('Advanced')}
onClick={() => setShowAdvanced(!showAdvanced)}
/>
{!showAdvancedSection && (
<Button button="link" label={__('Advanced')} onClick={() => setShowAdvanced(true)} />
)}
</div>
{showAdvanced && (
{showAdvancedSection && (
<React.Fragment>
<fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
<fieldset-section>
<label>{__('Name')}</label>
<div className="form-field__prefix">{`lbry://${
!repostChannel || repostChannel.name === CHANNEL_NEW ? '' : `${repostChannel.name}/`
!repostChannel || repostChannel === CHANNEL_NEW ? '' : `${repostChannel}/`
}`}</div>
</fieldset-section>
<FormField
@ -146,7 +160,15 @@ function ModalRepost(props: Props) {
/>
</fieldset-group>
<div className="form-field__help">
{__('The name of your repost, something about reposting to help search')}
<I18nMessage
tokens={{
lbry_naming_link: (
<Button button="link" label={__('community name')} href="https://lbry.com/faq/naming" />
),
}}
>
Change this to repost to a different %lbry_naming_link%.
</I18nMessage>
</div>
<FormField
@ -166,19 +188,18 @@ function ModalRepost(props: Props) {
/>
</React.Fragment>
)}
<div className="section__actions">
<Button
disabled={reposting || repostBidError || repostNameError}
button="primary"
label={reposting ? __('Reposting') : __('Repost')}
onClick={handleSubmit}
/>
<Button button="link" label={__('Cancel')} onClick={handleCloseModal} />
</div>
</div>
}
actions={
<React.Fragment>
<Button
disabled={reposting || repostBidError || repostNameError}
button="primary"
label={reposting ? __('Reposting') : __('Repost')}
onClick={handleSubmit}
/>
<Button button="link" label={__('Cancel')} onClick={handleCloseModal} />
</React.Fragment>
}
/>
</Modal>
);

2
ui/scss/component/_claim-list.scss
View file

@ -373,6 +373,7 @@
.channel-thumbnail {
width: 2.1rem;
height: 2.1rem;
margin-right: var(--spacing-small);
}
}
@ -422,7 +423,6 @@
transform: translateY(calc(var(--spacing-small) * -1));
font-size: var(--font-xsmall);
color: var(--color-text-subtitle);
line-height: 1;
.icon {
margin-right: var(--spacing-miniscule);

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

@ -31,6 +31,11 @@
margin-bottom: var(--spacing-small);
}
.comment__meta-information {
justify-content: flex-start;
display: flex;
}
.comment__message {
white-space: pre-line;
margin-top: var(--spacing-small);

2
ui/scss/component/_media.scss
View file

@ -109,8 +109,8 @@
.media__actions {
@extend .section__actions;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
margin-top: 0;
}

4
yarn.lock
View file

@ -7174,9 +7174,9 @@ lazy-val@^1.0.4:
yargs "^13.2.2"
zstd-codec "^0.1.1"
lbry-redux@lbryio/lbry-redux#87ae7faf1c1d5ffa86feb578899596f6ea2a5fd9:
lbry-redux@lbryio/lbry-redux#ea215ac31c82338ce60963224380bf4e9ecc1702:
version "0.0.1"
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/87ae7faf1c1d5ffa86feb578899596f6ea2a5fd9"
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/ea215ac31c82338ce60963224380bf4e9ecc1702"
dependencies:
proxy-polyfill "0.1.6"
reselect "^3.0.0"