Merge pull request #1270 from lbryio/redesign-fixes

[redesign] even moar fixes
This commit is contained in:
Sean Yesmunt 2018-04-04 13:20:02 -04:00 committed by GitHub
commit f18aef3126
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 159 additions and 124 deletions

View file

@ -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>
);

View file

@ -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}

View file

@ -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),

View file

@ -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 (

View file

@ -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);
if (uri) {
resolveUri(uri);
return uri;
}
handleCancelPublish() {
const { clearPublish, scrollToTop } = this.props;
scrollToTop();
clearPublish();
}
editExistingClaim() {
const { myClaimForUri, prepareEdit, scrollToTop } = this.props;
if (myClaimForUri) {
prepareEdit(myClaimForUri);
scrollToTop();
}
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;
let uri;
try {
uri = buildURI({ contentName: name, channelName });
} catch (e) {
// something wrong with channel or name
editExistingClaim() {
const { myClaimForUri, prepareEdit, scrollToTop } = this.props;
if (myClaimForUri) {
prepareEdit(myClaimForUri);
scrollToTop();
}
}
if (uri) {
resolveUri(uri);
return uri;
handleCancelPublish() {
const { clearPublish, scrollToTop } = this.props;
scrollToTop();
clearPublish();
}
return '';
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;
}
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;
}
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"

View file

@ -3,11 +3,15 @@ import React from 'react';
const Theme = props => {
const { themePath } = props;
if (!themePath) {
// 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;

View file

@ -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);

View file

@ -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>

View file

@ -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>

View file

@ -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 => ({

View file

@ -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.")}

View file

@ -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 });

View file

@ -75,6 +75,12 @@ export type PublishParams = {
currency: string,
amount: number,
},
source?: {
contentType: string,
source: string,
sourceType: string,
version: string,
},
};
const defaultState: PublishState = {

View file

@ -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;

View file

@ -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],