cleanup

static/app-strings.json

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

ui/modal/modalRepost/index.js

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

ui/modal/modalRepost/view.jsx

@@ -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 defaultName = claim && claim.name;
-  const originalClaimId = claim && claim.claim_id;
+  const contentClaimId = claim && claim.claim_id;
-
+  const [repostChannel, setRepostChannel] = usePersistedState('repost-channel');
-  const [repostChannel, setRepostChannel] = React.useState<?{ claimId: string, name: string }>();
+  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);
+      const { claimName } = parseURI(newChannelUrl);
-      setRepostChannel({ name: claimName, claimId });
+      setRepostChannel(claimName);
     }
   }, [channelStrings]);
 
+  const myClaimsString = myClaims && myClaims.map(channel => channel.permanent_url).join(',');
   React.useEffect(() => {
-    let bidError;
+    if (myClaimsString === '') {
-    if (repostBid === 0) {
+      doFetchClaimListMine();
-      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');
     }
-
+  }, [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]);
 
   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,
+        channel_id: channelToRepostTo.claim_id,
-        claim_id: originalClaimId,
+        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 && (
+              {!showAdvancedSection && (
-                <Button
+                <Button button="link" label={__('Advanced')} onClick={() => setShowAdvanced(true)} />
-                  button="link"
-                  label={showAdvanced ? 'Hide' : __('Advanced')}
-                  onClick={() => setShowAdvanced(!showAdvanced)}
-                />
               )}
             </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>
   );

ui/scss/component/_claim-list.scss

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

ui/scss/component/_comments.scss

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

ui/scss/component/_media.scss

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

yarn.lock

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