Merge pull request #1270 from lbryio/redesign-fixes

[redesign] even moar fixes

src/renderer/component/common/category-list.jsx

@@ -234,8 +234,7 @@ class CategoryList extends React.PureComponent<Props, State> {
           }}
           className="card-row__scrollhouse"
         >
-          {names &&
+          {names && names.map(name => <FileCard key={name} uri={normalizeURI(name)} />)}
-            names.map(name => <FileCard key={name} displayStyle="card" uri={normalizeURI(name)} />)}
         </div>
       </div>
     );

src/renderer/component/common/form-components/form-field-price.jsx

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

src/renderer/component/fileCard/index.js

@@ -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 pendingPublish;
-  let fileInfo;
+  if (props.checkPending) {
-  let metadata;
+    pendingPublish = selectPendingPublish(props.uri)(state);
-  let isResolvingUri;
+  }
-
-  const pendingPublish = selectPendingPublish(props.uri)(state);
 
   const fileCardInfo = pendingPublish || {
     claim: makeSelectClaimForUri(props.uri)(state),

src/renderer/component/fileList/view.jsx

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

src/renderer/component/publishForm/view.jsx

@@ -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() {
+  // Returns a new uri to be used in the form and begins to resolve that uri for bid help text
-    const {
+  getNewUri(name: string, channel: string) {
-      publish,
+    const { resolveUri } = this.props;
-      filePath,
+    // If they are midway through a channel creation, treat it as anonymous until it completes
-      bid,
+    const channelName = channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW ? '' : channel;
-      title,
-      thumbnail,
-      description,
-      language,
-      nsfw,
-      channel,
-      licenseType,
-      licenseUrl,
-      otherLicenseDescription,
-      copyrightNotice,
-      name,
-      contentIsFree,
-      price,
-      uri,
-    } = this.props;
 
-    let publishingLicense;
+    let uri;
-    switch (licenseType) {
+    try {
-      case COPYRIGHT:
+      uri = buildURI({ contentName: name, channelName });
-        publishingLicense = copyrightNotice;
+    } catch (e) {
-        break;
+      // something wrong with channel or name
-      case OTHER:
-        publishingLicense = otherLicenseDescription;
-        break;
-      default:
-        publishingLicense = licenseType;
     }
 
-    const publishingLicenseUrl = licenseType === COPYRIGHT ? '' : licenseUrl;
+    if (uri) {
-
+      resolveUri(uri);
-    const publishParams = {
+      return uri;
-      filePath,
-      bid,
-      title,
-      thumbnail,
-      description,
-      language,
-      nsfw,
-      channel,
-      license: publishingLicense,
-      licenseUrl: publishingLicenseUrl,
-      otherLicenseDescription,
-      copyrightNotice,
-      name,
-      contentIsFree,
-      price,
-      uri,
-    };
-
-    publish(publishParams);
     }
 
-  handleCancelPublish() {
+    return '';
-    const { clearPublish, scrollToTop } = this.props;
-    scrollToTop();
-    clearPublish();
-  }
-
-  editExistingClaim() {
-    const { myClaimForUri, prepareEdit, scrollToTop } = this.props;
-    if (myClaimForUri) {
-      prepareEdit(myClaimForUri);
-      scrollToTop();
-    }
   }
 
   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
+  editExistingClaim() {
-  getNewUri(name: string, channel: string) {
+    const { myClaimForUri, prepareEdit, scrollToTop } = this.props;
-    const { resolveUri } = this.props;
+    if (myClaimForUri) {
-    // If they are midway through a channel creation, treat it as anonymous until it completes
+      prepareEdit(myClaimForUri);
-    const channelName = channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW ? '' : channel;
+      scrollToTop();
-
+    }
-    let uri;
-    try {
-      uri = buildURI({ contentName: name, channelName });
-    } catch (e) {
-      // something wrong with channel or name
   }
 
-    if (uri) {
+  handleCancelPublish() {
-      resolveUri(uri);
+    const { clearPublish, scrollToTop } = this.props;
-      return uri;
+    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"

src/renderer/component/theme/view.jsx

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

src/renderer/component/walletSendTip/index.js

@@ -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, makeSelectClaimForUri } from 'redux/selectors/claims';
-import { makeSelectTitleForUri } 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);

src/renderer/component/walletSendTip/view.jsx

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

src/renderer/page/channel/view.jsx

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

src/renderer/page/fileListPublished/index.js

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

src/renderer/page/fileListPublished/view.jsx

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

src/renderer/redux/actions/publish.js

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

src/renderer/redux/reducers/publish.js

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

src/renderer/redux/selectors/publish.js

@@ -3,9 +3,15 @@ import { parseURI } from 'lbryURI';
 
 const selectState = state => state.publish || {};
 
-export const selectPendingPublishes = createSelector(selectState, state => {
+export const selectPendingPublishes = createSelector(
-  return state.pendingPublishes.map(pendingClaim => ({ ...pendingClaim, pending: true })) || [];
+  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;

src/renderer/store.js

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