Merge pull request #1270 from lbryio/redesign-fixes
[redesign] even moar fixes
This commit is contained in:
commit
f18aef3126
15 changed files with 159 additions and 124 deletions
|
@ -234,8 +234,7 @@ class CategoryList extends React.PureComponent<Props, State> {
|
|||
}}
|
||||
className="card-row__scrollhouse"
|
||||
>
|
||||
{names &&
|
||||
names.map(name => <FileCard key={name} displayStyle="card" uri={normalizeURI(name)} />)}
|
||||
{names && names.map(name => <FileCard key={name} uri={normalizeURI(name)} />)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -25,9 +25,10 @@ export class FormFieldPrice extends React.PureComponent<Props> {
|
|||
|
||||
handleAmountChange(event: SyntheticInputEvent<*>) {
|
||||
const { price, onChange } = this.props;
|
||||
const amount = event.target.value ? parseFloat(event.target.value) : '';
|
||||
onChange({
|
||||
currency: price.currency,
|
||||
amount: parseFloat(event.target.value),
|
||||
amount,
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -50,7 +51,7 @@ export class FormFieldPrice extends React.PureComponent<Props> {
|
|||
type="number"
|
||||
className="form-field input--price-amount"
|
||||
min={min}
|
||||
value={price.amount || ''}
|
||||
value={price.amount}
|
||||
onChange={this.handleAmountChange}
|
||||
placeholder={placeholder || 5}
|
||||
disabled={disabled}
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { doNavigate } from 'redux/actions/navigation';
|
||||
import { doResolveUri } from 'redux/actions/content';
|
||||
|
@ -10,12 +9,10 @@ import { selectPendingPublish } from 'redux/selectors/publish';
|
|||
import FileCard from './view';
|
||||
|
||||
const select = (state, props) => {
|
||||
let claim;
|
||||
let fileInfo;
|
||||
let metadata;
|
||||
let isResolvingUri;
|
||||
|
||||
const pendingPublish = selectPendingPublish(props.uri)(state);
|
||||
let pendingPublish;
|
||||
if (props.checkPending) {
|
||||
pendingPublish = selectPendingPublish(props.uri)(state);
|
||||
}
|
||||
|
||||
const fileCardInfo = pendingPublish || {
|
||||
claim: makeSelectClaimForUri(props.uri)(state),
|
||||
|
|
|
@ -25,6 +25,7 @@ type Props = {
|
|||
sortByHeight?: boolean,
|
||||
claimsById: Array<{}>,
|
||||
fileInfos: Array<FileInfo>,
|
||||
checkPending?: boolean,
|
||||
};
|
||||
|
||||
type State = {
|
||||
|
@ -138,7 +139,7 @@ class FileList extends React.PureComponent<Props, State> {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { fileInfos, hideFilter } = this.props;
|
||||
const { fileInfos, hideFilter, checkPending } = this.props;
|
||||
const { sortBy } = this.state;
|
||||
const content = [];
|
||||
|
||||
|
@ -166,7 +167,7 @@ class FileList extends React.PureComponent<Props, State> {
|
|||
|
||||
const uri = buildURI(uriParams);
|
||||
|
||||
content.push(<FileCard key={uri} uri={uri} showPrice={false} />);
|
||||
content.push(<FileCard key={uri} uri={uri} checkPending={checkPending} />);
|
||||
});
|
||||
|
||||
return (
|
||||
|
|
|
@ -38,6 +38,11 @@ type Props = {
|
|||
winningBidForClaimUri: number,
|
||||
myClaimForUri: ?{
|
||||
amount: number,
|
||||
value: {
|
||||
stream: {
|
||||
source: { source: string },
|
||||
},
|
||||
},
|
||||
},
|
||||
licenseType: string,
|
||||
otherLicenseDescription: ?string,
|
||||
|
@ -68,75 +73,25 @@ class PublishForm extends React.PureComponent<Props> {
|
|||
(this: any).getNewUri = this.getNewUri.bind(this);
|
||||
}
|
||||
|
||||
handlePublish() {
|
||||
const {
|
||||
publish,
|
||||
filePath,
|
||||
bid,
|
||||
title,
|
||||
thumbnail,
|
||||
description,
|
||||
language,
|
||||
nsfw,
|
||||
channel,
|
||||
licenseType,
|
||||
licenseUrl,
|
||||
otherLicenseDescription,
|
||||
copyrightNotice,
|
||||
name,
|
||||
contentIsFree,
|
||||
price,
|
||||
uri,
|
||||
} = this.props;
|
||||
// Returns a new uri to be used in the form and begins to resolve that uri for bid help text
|
||||
getNewUri(name: string, channel: string) {
|
||||
const { resolveUri } = this.props;
|
||||
// If they are midway through a channel creation, treat it as anonymous until it completes
|
||||
const channelName = channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW ? '' : channel;
|
||||
|
||||
let publishingLicense;
|
||||
switch (licenseType) {
|
||||
case COPYRIGHT:
|
||||
publishingLicense = copyrightNotice;
|
||||
break;
|
||||
case OTHER:
|
||||
publishingLicense = otherLicenseDescription;
|
||||
break;
|
||||
default:
|
||||
publishingLicense = licenseType;
|
||||
let uri;
|
||||
try {
|
||||
uri = buildURI({ contentName: name, channelName });
|
||||
} catch (e) {
|
||||
// something wrong with channel or name
|
||||
}
|
||||
|
||||
const publishingLicenseUrl = licenseType === COPYRIGHT ? '' : licenseUrl;
|
||||
|
||||
const publishParams = {
|
||||
filePath,
|
||||
bid,
|
||||
title,
|
||||
thumbnail,
|
||||
description,
|
||||
language,
|
||||
nsfw,
|
||||
channel,
|
||||
license: publishingLicense,
|
||||
licenseUrl: publishingLicenseUrl,
|
||||
otherLicenseDescription,
|
||||
copyrightNotice,
|
||||
name,
|
||||
contentIsFree,
|
||||
price,
|
||||
uri,
|
||||
};
|
||||
|
||||
publish(publishParams);
|
||||
}
|
||||
|
||||
handleCancelPublish() {
|
||||
const { clearPublish, scrollToTop } = this.props;
|
||||
scrollToTop();
|
||||
clearPublish();
|
||||
}
|
||||
|
||||
editExistingClaim() {
|
||||
const { myClaimForUri, prepareEdit, scrollToTop } = this.props;
|
||||
if (myClaimForUri) {
|
||||
prepareEdit(myClaimForUri);
|
||||
scrollToTop();
|
||||
if (uri) {
|
||||
resolveUri(uri);
|
||||
return uri;
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
handleFileChange(filePath: string, fileName: string) {
|
||||
|
@ -144,13 +99,14 @@ class PublishForm extends React.PureComponent<Props> {
|
|||
const newFileParams: {
|
||||
filePath: string,
|
||||
name?: string,
|
||||
uri?: string
|
||||
uri?: string,
|
||||
} = { filePath };
|
||||
|
||||
if (!name) {
|
||||
const parsedFileName = fileName.replace(regexInvalidURI, '');
|
||||
const uri = this.getNewUri(parsedFileName, channel);
|
||||
newFileParams.name = parsedFileName;
|
||||
newFileParams.uri = uri;
|
||||
}
|
||||
|
||||
updatePublishForm(newFileParams);
|
||||
|
@ -203,25 +159,82 @@ class PublishForm extends React.PureComponent<Props> {
|
|||
updatePublishForm({ bid, bidError });
|
||||
}
|
||||
|
||||
// Returns a new uri to be used in the form and begins to resolve that uri for bid help text
|
||||
getNewUri(name: string, channel: string) {
|
||||
const { resolveUri } = this.props;
|
||||
// If they are midway through a channel creation, treat it as anonymous until it completes
|
||||
const channelName = channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW ? '' : channel;
|
||||
editExistingClaim() {
|
||||
const { myClaimForUri, prepareEdit, scrollToTop } = this.props;
|
||||
if (myClaimForUri) {
|
||||
prepareEdit(myClaimForUri);
|
||||
scrollToTop();
|
||||
}
|
||||
}
|
||||
|
||||
let uri;
|
||||
try {
|
||||
uri = buildURI({ contentName: name, channelName });
|
||||
} catch (e) {
|
||||
// something wrong with channel or name
|
||||
handleCancelPublish() {
|
||||
const { clearPublish, scrollToTop } = this.props;
|
||||
scrollToTop();
|
||||
clearPublish();
|
||||
}
|
||||
|
||||
handlePublish() {
|
||||
const {
|
||||
publish,
|
||||
filePath,
|
||||
bid,
|
||||
title,
|
||||
thumbnail,
|
||||
description,
|
||||
language,
|
||||
nsfw,
|
||||
channel,
|
||||
licenseType,
|
||||
licenseUrl,
|
||||
otherLicenseDescription,
|
||||
copyrightNotice,
|
||||
name,
|
||||
contentIsFree,
|
||||
price,
|
||||
uri,
|
||||
myClaimForUri,
|
||||
} = this.props;
|
||||
|
||||
let publishingLicense;
|
||||
switch (licenseType) {
|
||||
case COPYRIGHT:
|
||||
publishingLicense = copyrightNotice;
|
||||
break;
|
||||
case OTHER:
|
||||
publishingLicense = otherLicenseDescription;
|
||||
break;
|
||||
default:
|
||||
publishingLicense = licenseType;
|
||||
}
|
||||
|
||||
if (uri) {
|
||||
resolveUri(uri);
|
||||
return uri;
|
||||
const publishingLicenseUrl = licenseType === COPYRIGHT ? '' : licenseUrl;
|
||||
|
||||
const publishParams = {
|
||||
filePath,
|
||||
bid,
|
||||
title,
|
||||
thumbnail,
|
||||
description,
|
||||
language,
|
||||
nsfw,
|
||||
channel,
|
||||
license: publishingLicense,
|
||||
licenseUrl: publishingLicenseUrl,
|
||||
otherLicenseDescription,
|
||||
copyrightNotice,
|
||||
name,
|
||||
contentIsFree,
|
||||
price,
|
||||
uri,
|
||||
};
|
||||
|
||||
// Editing a claim
|
||||
if (!filePath && myClaimForUri) {
|
||||
const { source } = myClaimForUri.value.stream;
|
||||
publishParams.sources = source;
|
||||
}
|
||||
|
||||
return '';
|
||||
publish(publishParams);
|
||||
}
|
||||
|
||||
checkIsFormValid() {
|
||||
|
@ -421,7 +434,9 @@ class PublishForm extends React.PureComponent<Props> {
|
|||
<FormField
|
||||
stretch
|
||||
prefix={`lbry://${
|
||||
channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW ? '' : `${channel}/`
|
||||
!channel || channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW
|
||||
? ''
|
||||
: `${channel}/`
|
||||
}`}
|
||||
type="text"
|
||||
name="content_name"
|
||||
|
|
|
@ -3,11 +3,15 @@ import React from 'react';
|
|||
const Theme = props => {
|
||||
const { themePath } = props;
|
||||
|
||||
if (!themePath) {
|
||||
return null;
|
||||
}
|
||||
// Force light mode while until dark mode is ready
|
||||
// This is so we don't have to change users settings for them
|
||||
return null;
|
||||
|
||||
return <link href={themePath} rel="stylesheet" type="text/css" media="screen,print" />;
|
||||
// if (!themePath) {
|
||||
// return null;
|
||||
// }
|
||||
//
|
||||
// return <link href={themePath} rel="stylesheet" type="text/css" media="screen,print" />;
|
||||
};
|
||||
|
||||
export default Theme;
|
||||
|
|
|
@ -1,17 +1,17 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { doSendSupport } from 'redux/actions/wallet';
|
||||
import WalletSendTip from './view';
|
||||
import { makeSelectTitleForUri } from 'redux/selectors/claims';
|
||||
import { makeSelectTitleForUri, makeSelectClaimForUri } from 'redux/selectors/claims';
|
||||
import { selectIsSendingSupport } from 'redux/selectors/wallet';
|
||||
import WalletSendTip from './view';
|
||||
|
||||
const select = (state, props) => ({
|
||||
isPending: selectIsSendingSupport(state),
|
||||
title: makeSelectTitleForUri(props.uri)(state),
|
||||
claim: makeSelectClaimForUri(props.uri)(state),
|
||||
});
|
||||
|
||||
const perform = dispatch => ({
|
||||
sendSupport: (amount, claim_id, uri) => dispatch(doSendSupport(amount, claim_id, uri)),
|
||||
sendSupport: (amount, claimId, uri) => dispatch(doSendSupport(amount, claimId, uri)),
|
||||
});
|
||||
|
||||
export default connect(select, perform)(WalletSendTip);
|
||||
|
|
|
@ -5,9 +5,9 @@ import { FormField } from 'component/common/form';
|
|||
import UriIndicator from 'component/uriIndicator';
|
||||
|
||||
type Props = {
|
||||
claim_id: string,
|
||||
uri: string,
|
||||
title: string,
|
||||
claim: { claim_id: string },
|
||||
errorMessage: string,
|
||||
isPending: boolean,
|
||||
sendSupport: (number, string, string) => void,
|
||||
|
@ -31,7 +31,8 @@ class WalletSendTip extends React.PureComponent<Props, State> {
|
|||
}
|
||||
|
||||
handleSendButtonClicked() {
|
||||
const { claim_id: claimId, uri, sendSupport, sendTipCallback } = this.props;
|
||||
const { claim, uri, sendSupport, sendTipCallback } = this.props;
|
||||
const { claim_id: claimId } = claim;
|
||||
const { amount } = this.state;
|
||||
|
||||
sendSupport(amount, claimId, uri);
|
||||
|
@ -49,7 +50,7 @@ class WalletSendTip extends React.PureComponent<Props, State> {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { errorMessage, isPending, title, uri, onCancel } = this.props;
|
||||
const { title, errorMessage, isPending, uri, onCancel } = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
|
|
@ -3,11 +3,9 @@ import React from 'react';
|
|||
import BusyIndicator from 'component/common/busy-indicator';
|
||||
import { FormField, FormRow } from 'component/common/form';
|
||||
import ReactPaginate from 'react-paginate';
|
||||
import Button from 'component/button';
|
||||
import SubscribeButton from 'component/subscribeButton';
|
||||
import Page from 'component/page';
|
||||
import FileList from 'component/fileList';
|
||||
import * as modals from 'constants/modal_types';
|
||||
|
||||
type Props = {
|
||||
uri: string,
|
||||
|
@ -23,7 +21,6 @@ type Props = {
|
|||
fetchClaims: (string, number) => void,
|
||||
fetchClaimCount: string => void,
|
||||
navigate: (string, {}) => void,
|
||||
openModal: (string, {}) => void,
|
||||
};
|
||||
|
||||
class ChannelPage extends React.PureComponent<Props> {
|
||||
|
@ -61,7 +58,7 @@ class ChannelPage extends React.PureComponent<Props> {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { fetching, claimsInChannel, claim, uri, page, totalPages, openModal } = this.props;
|
||||
const { fetching, claimsInChannel, claim, uri, page, totalPages } = this.props;
|
||||
const { name } = claim;
|
||||
|
||||
let contentList;
|
||||
|
@ -81,12 +78,6 @@ class ChannelPage extends React.PureComponent<Props> {
|
|||
<section className="card__channel-info card__channel-info--large">
|
||||
<h1>{name}</h1>
|
||||
<div className="card__actions card__actions--no-margin">
|
||||
<Button
|
||||
button="alt"
|
||||
iconRight="Send"
|
||||
label={__('Enjoy this? Send a tip')}
|
||||
onClick={() => openModal(modals.SEND_TIP, { uri })}
|
||||
/>
|
||||
<SubscribeButton uri={uri} channelName={name} />
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
import { connect } from 'react-redux';
|
||||
import { selectMyClaimsWithoutChannels } from 'redux/selectors/claims';
|
||||
import { selectPendingPublishes } from 'redux/selectors/publish';
|
||||
import { selectPendingPublishesLessEdits } from 'redux/selectors/publish';
|
||||
import { doNavigate } from 'redux/actions/navigation';
|
||||
import { doCheckPendingPublishes } from 'redux/actions/publish';
|
||||
import FileListPublished from './view';
|
||||
|
||||
const select = state => ({
|
||||
claims: selectMyClaimsWithoutChannels(state),
|
||||
pendingPublishes: selectPendingPublishes(state),
|
||||
pendingPublishes: selectPendingPublishesLessEdits(state),
|
||||
});
|
||||
|
||||
const perform = dispatch => ({
|
||||
|
|
|
@ -1,9 +1,17 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import Button from 'component/button';
|
||||
import FileList from 'component/fileList';
|
||||
import Page from 'component/page';
|
||||
|
||||
class FileListPublished extends React.PureComponent {
|
||||
type Props = {
|
||||
pendingPublishes: Array<{}>,
|
||||
claims: Array<{}>,
|
||||
checkIfPublishesConfirmed: (Array<{}>) => void,
|
||||
navigate: (string, ?{}) => void,
|
||||
};
|
||||
|
||||
class FileListPublished extends React.PureComponent<Props> {
|
||||
componentDidMount() {
|
||||
const { pendingPublishes, checkIfPublishesConfirmed } = this.props;
|
||||
if (pendingPublishes.length) {
|
||||
|
@ -18,7 +26,7 @@ class FileListPublished extends React.PureComponent {
|
|||
return (
|
||||
<Page notContained>
|
||||
{fileInfos.length ? (
|
||||
<FileList fileInfos={fileInfos} sortByHeight />
|
||||
<FileList checkPending fileInfos={fileInfos} sortByHeight />
|
||||
) : (
|
||||
<div className="page__empty">
|
||||
{__("It looks like you haven't published anything to LBRY yet.")}
|
||||
|
|
|
@ -84,6 +84,7 @@ export const doPublish = (params: PublishParams): ThunkAction => {
|
|||
contentIsFree,
|
||||
price,
|
||||
uri,
|
||||
sources,
|
||||
} = params;
|
||||
|
||||
const channelName = channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW ? '' : channel;
|
||||
|
@ -107,13 +108,18 @@ export const doPublish = (params: PublishParams): ThunkAction => {
|
|||
}
|
||||
|
||||
const publishPayload = {
|
||||
file_path: filePath,
|
||||
name,
|
||||
channel_name: channelName,
|
||||
bid,
|
||||
metadata,
|
||||
};
|
||||
|
||||
if (filePath) {
|
||||
publishPayload.file_path = filePath;
|
||||
} else {
|
||||
publishPayload.sources = sources;
|
||||
}
|
||||
|
||||
return (dispatch: Dispatch) => {
|
||||
dispatch({ type: ACTIONS.PUBLISH_START });
|
||||
|
||||
|
|
|
@ -75,6 +75,12 @@ export type PublishParams = {
|
|||
currency: string,
|
||||
amount: number,
|
||||
},
|
||||
source?: {
|
||||
contentType: string,
|
||||
source: string,
|
||||
sourceType: string,
|
||||
version: string,
|
||||
},
|
||||
};
|
||||
|
||||
const defaultState: PublishState = {
|
||||
|
|
|
@ -3,9 +3,15 @@ import { parseURI } from 'lbryURI';
|
|||
|
||||
const selectState = state => state.publish || {};
|
||||
|
||||
export const selectPendingPublishes = createSelector(selectState, state => {
|
||||
return state.pendingPublishes.map(pendingClaim => ({ ...pendingClaim, pending: true })) || [];
|
||||
});
|
||||
export const selectPendingPublishes = createSelector(
|
||||
selectState,
|
||||
state => state.pendingPublishes.map(pendingClaim => ({ ...pendingClaim, pending: true })) || []
|
||||
);
|
||||
|
||||
export const selectPendingPublishesLessEdits = createSelector(
|
||||
selectPendingPublishes,
|
||||
pendingPublishes => pendingPublishes.filter(pendingPublish => !pendingPublish.sources)
|
||||
);
|
||||
|
||||
export const selectPublishFormValues = createSelector(selectState, state => {
|
||||
const { pendingPublish, ...formValues } = state;
|
||||
|
|
|
@ -98,7 +98,7 @@ const saveClaimsFilter = createFilter('claims', ['byId', 'claimsByUri']);
|
|||
const subscriptionsFilter = createFilter('subscriptions', ['subscriptions']);
|
||||
|
||||
const persistOptions = {
|
||||
whitelist: ['claims', 'subscriptions', 'navigation', 'publish'],
|
||||
whitelist: ['claims', 'subscriptions', 'publish'],
|
||||
// Order is important. Needs to be compressed last or other transforms can't
|
||||
// read the data
|
||||
transforms: [saveClaimsFilter, subscriptionsFilter, compressor],
|
||||
|
|
Loading…
Reference in a new issue