updates in component state

updates work

asset upload works

channelForm component

src/ui/component/channelForm/index.js

@@ -0,0 +1,34 @@
+import { connect } from 'react-redux';
+import {
+  makeSelectTitleForUri,
+  makeSelectThumbnailForUri,
+  makeSelectCoverForUri,
+  selectCurrentChannelPage,
+  makeSelectMetadataItemForUri,
+  doUpdateChannel,
+  makeSelectAmountForUri,
+} from 'lbry-redux';
+import ChannelPage from './view';
+
+const select = (state, props) => ({
+  title: makeSelectTitleForUri(props.uri)(state),
+  thumbnail: makeSelectThumbnailForUri(props.uri)(state),
+  cover: makeSelectCoverForUri(props.uri)(state),
+  page: selectCurrentChannelPage(state),
+  description: makeSelectMetadataItemForUri(props.uri, 'description')(state),
+  website: makeSelectMetadataItemForUri(props.uri, 'website_url')(state),
+  email: makeSelectMetadataItemForUri(props.uri, 'email')(state),
+  tags: makeSelectMetadataItemForUri(props.uri, 'tags')(state),
+  locations: makeSelectMetadataItemForUri(props.uri, 'locations')(state),
+  languages: makeSelectMetadataItemForUri(props.uri, 'languages')(state),
+  amount: makeSelectAmountForUri(props.uri)(state),
+});
+
+const perform = dispatch => ({
+  updateChannel: params => dispatch(doUpdateChannel(params)),
+});
+
+export default connect(
+  select,
+  perform
+)(ChannelPage);

src/ui/component/channelForm/view.jsx

@@ -0,0 +1,208 @@
+// @flow
+import React, { useState } from 'react';
+import { parseURI } from 'lbry-redux';
+import { Form, FormField } from 'component/common/form';
+import Button from 'component/button';
+
+import SelectAsset from '../../component/selectAsset/view';
+
+type Props = {
+  uri: string,
+
+  title: ?string,
+  amount: string,
+  cover: ?string,
+  thumbnail: ?string,
+  location: { search: string },
+  description: string,
+  website: string,
+  email: string,
+  balance: number,
+  tags: Array<string>,
+  locations: Array<string>,
+  languages: Array<string>,
+
+  updateChannel: any => void,
+
+  updateThumb: string => void,
+  updateCover: string => void,
+  setEditing: boolean => void,
+};
+
+function ChannelForm(props: Props) {
+  const {
+    uri,
+    title,
+    cover,
+    description,
+    website,
+    email,
+    thumbnail,
+    tags,
+    locations,
+    languages,
+    amount,
+    updateChannel,
+    setEditing,
+    updateThumb,
+    updateCover,
+  } = props;
+  const { claimId } = parseURI(uri);
+
+  // fill this in with sdk data
+  const channelParams = {
+    website: website,
+    email: email,
+    languages: languages || [],
+    cover: cover,
+    description: description,
+    locations: locations || [],
+    title: title,
+    thumbnail: thumbnail,
+    tags: tags || [],
+    claim_id: claimId,
+    amount: amount,
+  };
+
+  const [params, setParams] = useState(channelParams);
+  const [bidError, setBidError] = useState('');
+
+  const MINIMUM_PUBLISH_BID = 0.00000001;
+  // If a user changes tabs, update the url so it stays on the same page if they refresh.
+  // We don't want to use links here because we can't animate the tab change and using links
+  // would alter the Tab label's role attribute, which should stay role="tab" to work with keyboards/screen readers.
+
+  const handleBidChange = (bid: number) => {
+    const { balance, amount } = props;
+    const totalAvailableBidAmount = parseFloat(amount) + parseFloat(balance);
+    setParams({ ...params, amount: bid });
+    setBidError('');
+    if (bid <= 0.0 || isNaN(bid)) {
+      setBidError(__('Deposit cannot be 0'));
+    } else if (totalAvailableBidAmount === bid) {
+      setBidError(__('Please decrease your deposit to account for transaction fees'));
+    } else if (totalAvailableBidAmount < bid) {
+      setBidError(__('Deposit cannot be higher than your balance'));
+    } else if (bid <= MINIMUM_PUBLISH_BID) {
+      setBidError(__('Your deposit must be higher'));
+    }
+  };
+
+  const handleThumbnailChange = (url: string) => {
+    setParams({ ...params, thumbnail: url });
+    updateThumb(url);
+  };
+
+  const handleCoverChange = (url: string) => {
+    setParams({ ...params, cover: url });
+    updateCover(url);
+  };
+  // TODO clear and bail after submit
+  return (
+    <div className={'card--section'}>
+      <section>
+        <div className={'card__title--flex-between'}>
+          <header className="card__header">
+            <h2 className="card__title">{__('Edit')}</h2>
+          </header>
+          <div className={'card__actions'}>
+            <Button button="primary" label={__('Submit')} onClick={() => updateChannel(params)} />
+
+            <Button
+              button="link"
+              label={__('Cancel')}
+              onClick={() => {
+                setParams({ ...channelParams });
+                setEditing(false);
+              }}
+            />
+          </div>
+        </div>
+        <Form onSubmit={channelParams => updateChannel(channelParams)}>
+          <div className="card__content">
+            <SelectAsset
+              onUpdate={v => handleThumbnailChange(v)}
+              currentValue={params.thumbnail}
+              assetName={'Thumbnail'}
+              recommended={'(400x400)'}
+            />
+
+            <SelectAsset
+              onUpdate={v => handleCoverChange(v)}
+              currentValue={params.cover}
+              assetName={'Cover'}
+              recommended={'(1000x300)'}
+            />
+
+            <FormField
+              type="text"
+              name="channel_title2"
+              label={__('Title')}
+              placeholder={__('Titular Title')}
+              disabled={false}
+              value={params.title}
+              onChange={e => setParams({ ...params, title: e.target.value })}
+            />
+            <FormField
+              className="form-field--price-amount"
+              type="number"
+              name="content_bid2"
+              step="any"
+              label={__('Deposit (LBC)')}
+              postfix="LBC"
+              value={params.amount}
+              error={bidError}
+              min="0.0"
+              disabled={false}
+              onChange={event => handleBidChange(parseFloat(event.target.value))}
+              placeholder={0.1}
+              // helper={
+              //   <BidHelpText
+              //     uri={shortUri}
+              //     isResolvingUri={isResolvingUri}
+              //     amountNeededForTakeover={amountNeededForTakeover}
+              //   />
+              // }
+            />
+
+            <FormField
+              type="text"
+              name="channel_website2"
+              label={__('Website')}
+              placeholder={__('aprettygoodsite.com')}
+              disabled={false}
+              value={params.website}
+              onChange={e => setParams({ ...params, website: e.target.value })}
+            />
+
+            <FormField
+              type="text"
+              name="content_email2"
+              label={__('Email')}
+              placeholder={__('yourstruly@example.com')}
+              disabled={false}
+              value={params.email}
+              onChange={e => setParams({ ...params, email: e.target.value })}
+            />
+
+            <FormField
+              type="markdown"
+              name="content_description2"
+              label={__('Description')}
+              placeholder={__('Description of your content')}
+              value={params.description}
+              disabled={false}
+              onChange={text => setParams({ ...params, description: text })}
+            />
+            <div className={'card__actions'}>
+              <Button button="primary" label={__('Submit')} onClick={() => updateChannel(params)} />
+              <Button button="link" label={__('Cancel')} onClick={() => setParams({ ...channelParams })} />
+            </div>
+          </div>
+        </Form>
+      </section>
+    </div>
+  );
+}
+
+export default ChannelForm;

src/ui/component/channelThumbnail/view.jsx

@@ -8,10 +8,11 @@ type Props = {
   thumbnail: ?string,
   uri: string,
   className?: string,
+  thumbnailPreview: ?string,
 };
 
 function ChannelThumbnail(props: Props) {
-  const { thumbnail, uri, className } = props;
+  const { thumbnail, uri, className, thumbnailPreview } = props;
 
   // Generate a random color class based on the first letter of the channel name
   const { channelName } = parseURI(uri);
@@ -24,8 +25,8 @@ function ChannelThumbnail(props: Props) {
         [colorClassName]: !thumbnail,
       })}
     >
-      {!thumbnail && <img className="channel-thumbnail__default" src={Gerbil} />}
-      {thumbnail && <img className="channel-thumbnail__custom" src={thumbnail} />}
+      {!thumbnail && <img className="channel-thumbnail__default" src={thumbnailPreview || Gerbil} />}
+      {thumbnail && <img className="channel-thumbnail__custom" src={thumbnailPreview || thumbnail} />}
     </div>
   );
 }

src/ui/component/common/file-selector.jsx

@@ -12,7 +12,7 @@ type FileFilters = {
 
 type Props = {
   type: string,
-  currentPath: ?string,
+  currentPath?: ?string,
   onFileChosen: (string, string) => void,
   label?: string,
   placeholder?: string,

src/ui/component/selectAsset/index.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import { doOpenModal } from 'redux/actions/app';
+import SelectThumbnail from './view';
+
+const perform = dispatch => ({
+  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
+});
+
+export default connect(
+  null,
+  perform
+)(SelectThumbnail);