review changes

2020-01-14 09:57:34 -05:00 · 2020-01-14 09:57:34 -05:00 · 94cc7a2d9d
commit 94cc7a2d9d
parent 7e2c9dc2b8
7 changed files with 176 additions and 103 deletions
--- a/ui/component/commentCreate/view.jsx
+++ b/ui/component/commentCreate/view.jsx
@ -59,7 +59,7 @@ export function CommentCreate(props: Props) {

  return (
    <Form onSubmit={handleSubmit}>
-      <ChannelSection channel={channel} onChannelChange={handleChannelChange} includeAnonymous includeNew />
+      <ChannelSection channel={channel} onChannelChange={handleChannelChange} />
      <FormField
        disabled={channel === CHANNEL_NEW}
        type="textarea"
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@ -183,10 +183,10 @@ const Header = (props: Props) => {
                    </MenuItem>

                    {/* Commented out until new invite system is implemented */}
-                    {/* <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.INVITE}`)}>
+                    <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.INVITE}`)}>
                      <Icon aria-hidden icon={ICONS.INVITE} />
-                      {__('Invite A Friend')}
-                    </MenuItem> */}
+                      {__('Invites')}
+                    </MenuItem>

                    {authenticated ? (
                      <MenuItem onSelect={signOut}>
--- a/ui/component/inviteNew/view.jsx
+++ b/ui/component/inviteNew/view.jsx
@ -15,7 +15,7 @@ type Props = {
  isPending: boolean,
  referralLink: string,
  referralCode: string,
-  channels: any,
+  channels: ?Array<ChannelClaim>,
  resolvingUris: Array<string>,
  resolveUris: (Array<string>) => void,
 };
@ -41,8 +41,9 @@ function InviteNew(props: Props) {
  function handleReferralChange(code) {
    setReferralSource(code);
    // TODO: keep track of this in an array?
-    if (code !== referralCode) {
-      analytics.apiLogPublish(channels.find(ch => ch.name === code));
+    const matchingChannel = channels && channels.find(ch => ch.name === code);
+    if (matchingChannel) {
+      analytics.apiLogPublish(matchingChannel);
    }
  }

@ -55,9 +56,11 @@ function InviteNew(props: Props) {

  const topChannel =
    channels &&
-    channels.reduce((top, channel) =>
-      (top && top.meta && top.meta.claims_in_channel) > channel.meta.claims_in_channel ? top : channel
-    );
+    channels.reduce((top, channel) => {
+      const topClaimCount = (top && top.meta && top.meta.claims_in_channel) || 0;
+      const currentClaimCount = (channel && channel.meta && channel.meta.claims_in_channel) || 0;
+      return topClaimCount >= currentClaimCount ? top : channel;
+    });
  const referralString =
    channels && channels.length && referralSource !== referralCode
      ? lookupUrlByClaimName(referralSource, channels)
@ -67,7 +70,7 @@ function InviteNew(props: Props) {

  useEffect(() => {
    // resolve once, after we have channel list
-    if (!hasResolved && !resolveStarted && channelCount) {
+    if (!hasResolved && !resolveStarted && channelCount && uris) {
      setResolveStarted(true);
      resolveUris(uris.split(','));
    }
@ -93,47 +96,71 @@ function InviteNew(props: Props) {
  }

  return (
-    <Card
-      title={__('Invite a Friend')}
-      subtitle={__('When your friends start using LBRY, the network gets stronger!')}
-      actions={
-        <React.Fragment>
-          <Form onSubmit={handleSubmit}>
-            <SelectChannel
-              channel={referralSource}
-              onChannelChange={channel => handleReferralChange(channel)}
-              label={'Code or Channel'}
-              injected={[referralCode]}
-            />
-
-            <CopyableText label={__('Or share this link with your friends')} copyable={referral} />
-            <FormField
-              type="text"
-              label="Email"
-              placeholder="youremail@example.org"
-              name="email"
-              value={email}
-              error={errorMessage}
-              inputButton={<Button button="secondary" type="submit" label="Invite" disabled={isPending || !email} />}
-              onChange={event => {
-                handleEmailChanged(event);
-              }}
-            />
-            <p className="help">
-              <I18nMessage
-                tokens={{
-                  rewards_link: <Button button="link" navigate="/$/rewards" label={__('rewards')} />,
-                  referral_faq_link: <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />,
+    <div className={'columns'}>
+      <Card
+        title={__('Refer by Email')}
+        subtitle={__('When your friends start using LBRY, the network gets stronger!')}
+        actions={
+          <React.Fragment>
+            <Form onSubmit={handleSubmit}>
+              <FormField
+                type="text"
+                label="Email"
+                placeholder="youremail@example.org"
+                name="email"
+                value={email}
+                error={errorMessage}
+                inputButton={<Button button="secondary" type="submit" label="Invite" disabled={isPending || !email} />}
+                onChange={event => {
+                  handleEmailChanged(event);
                }}
-              >
-                Earn %rewards_link% for inviting your friends. Read our %referral_faq_link% to learn more about
-                referrals.
-              </I18nMessage>
-            </p>
-          </Form>
-        </React.Fragment>
-      }
-    />
+              />
+              <p className="help">
+                <I18nMessage
+                  tokens={{
+                    rewards_link: <Button button="link" navigate="/$/rewards" label={__('rewards')} />,
+                    referral_faq_link: <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />,
+                  }}
+                >
+                  Earn %rewards_link% for inviting your friends. Read our %referral_faq_link% to learn more about
+                  referrals.
+                </I18nMessage>
+              </p>
+            </Form>
+          </React.Fragment>
+        }
+      />
+      <Card
+        title={__('Referral Codes')}
+        subtitle={__('Users!')}
+        actions={
+          <React.Fragment>
+            <Form onSubmit={handleSubmit}>
+              <SelectChannel
+                channel={referralSource}
+                onChannelChange={channel => handleReferralChange(channel)}
+                label={'Code or Channel'}
+                hideNew
+                hideAnon
+                injected={[referralCode]}
+              />
+              <CopyableText label={__('Or share this link with your friends')} copyable={referral} />
+              <p className="help">
+                <I18nMessage
+                  tokens={{
+                    rewards_link: <Button button="link" navigate="/$/rewards" label={__('rewards')} />,
+                    referral_faq_link: <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />,
+                  }}
+                >
+                  Earn %rewards_link% for inviting your friends. Read our %referral_faq_link% to learn more about
+                  referrals.
+                </I18nMessage>
+              </p>
+            </Form>
+          </React.Fragment>
+        }
+      />
+    </div>
  );
 }

--- a/ui/component/invited/view.jsx
+++ b/ui/component/invited/view.jsx
@ -71,19 +71,23 @@ function Invited(props: Props) {
  if (referrerSetError === ERRORS.ALREADY_CLAIMED) {
    return (
      <Card
-        title={__(`Welcome!`)}
-        subtitle={referrerIsChannel ? __(`We've followed your referrer for you. Check it out!`) : __(`Congrats!`)}
-        actions={
-          <>
-            {referrerIsChannel && (
-              <div key={refUri} className="claim-preview--channel">
-                <ClaimPreview key={refUri} uri={refUri} actions={''} type={'small'} />
-              </div>
-            )}
-            <div className="card__actions">
-              <Button button="primary" label={__('Done!')} onClick={handleDone} />
+        title={__(`Whoa`)}
+        subtitle={
+          referrerIsChannel
+            ? __(`You've already claimed your referrer, but we've followed this channel for you.`)
+            : __(`You've already claimed your referrer.`)
+        }
+        body={
+          referrerIsChannel && (
+            <div className="claim-preview--channel">
+              <ClaimPreview key={refUri} uri={refUri} actions={''} type={'small'} />
            </div>
-          </>
+          )
+        }
+        actions={
+          <div className="card__actions">
+            <Button button="primary" label={__('Done!')} onClick={handleDone} />
+          </div>
        }
      />
    );
@ -102,10 +106,10 @@ function Invited(props: Props) {
            <div className="card__actions">
              <Button
                button="primary"
-                label={hasVerifiedEmail ? __('Verify') : __('Sign in')}
+                label={hasVerifiedEmail ? __('Verify') : __('Create Account')}
                navigate={`/$/${PAGES.AUTH}?redirect=/$/${PAGES.REWARDS}`}
              />
-              <Button button="primary" label={__('Explore')} onClick={handleDone} />
+              <Button button="link" label={__('Explore')} onClick={handleDone} />
            </div>
          </>
        }
@ -117,23 +121,30 @@ function Invited(props: Props) {
    return (
      <Card
        title={__(`You're invited!`)}
-        subtitle={__(`A referral reward is waiting for you. Just complete sign-in to claim it.`)}
-        actions={
-          <>
-            {referrerIsChannel && (
-              <div key={refUri} className="claim-preview--channel">
-                <ClaimPreview key={refUri} uri={refUri} actions={''} type={'small'} />
-              </div>
-            )}
-            <div className="card__actions">
-              <Button
-                button="primary"
-                label={hasVerifiedEmail ? __('Verify') : __('Sign in')}
-                navigate={`/$/${PAGES.AUTH}?redirect=/$/${PAGES.INVITE}/${referrer}`}
-              />
-              <Button button="primary" label={__('Skip')} onClick={handleDone} />
+        subtitle={
+          referrerIsChannel
+            ? __(
+                `Content freedom and and a present from %channel_name% are waiting for you. Create an account to claim it.`,
+                { channel_name: referrer }
+              )
+            : __(`Content freedom and a present are waiting for you. Create an account to claim it.`)
+        }
+        body={
+          referrerIsChannel && (
+            <div className="claim-preview--channel">
+              <ClaimPreview key={refUri} uri={refUri} actions={''} type={'small'} />
            </div>
-          </>
+          )
+        }
+        actions={
+          <div className="card__actions">
+            <Button
+              button="primary"
+              label={hasVerifiedEmail ? __('Verify') : __('Create Account')}
+              navigate={`/$/${PAGES.AUTH}?redirect=/$/${PAGES.INVITE}/${referrer}`}
+            />
+            <Button button="link" label={__('Skip')} onClick={handleDone} />
+          </div>
        }
      />
    );
@ -143,17 +154,17 @@ function Invited(props: Props) {
    <Card
      title={__(`Welcome!`)}
      subtitle={referrerIsChannel ? __(`We've followed your referrer for you. Check it out!`) : __(`Congrats!`)}
-      actions={
-        <>
-          {referrerIsChannel && (
-            <div key={refUri} className="claim-preview--channel">
-              <ClaimPreview key={refUri} uri={refUri} actions={''} type={'small'} />
-            </div>
-          )}
-          <div className="card__actions">
-            <Button button="primary" label={__('Done!')} onClick={handleDone} />
+      body={
+        referrerIsChannel && (
+          <div className="claim-preview--channel">
+            <ClaimPreview key={refUri} uri={refUri} actions={''} type={'small'} />
          </div>
-        </>
+        )
+      }
+      actions={
+        <div className="card__actions">
+          <Button button="primary" label={__('Done!')} onClick={handleDone} />
+        </div>
      }
    />
  );
--- a/ui/component/publishForm/view.jsx
+++ b/ui/component/publishForm/view.jsx
@ -165,12 +165,7 @@ function PublishForm(props: Props) {
        <Card
          actions={
            <React.Fragment>
-              <SelectChannel
-                channel={channel}
-                onChannelChange={channel => updatePublishForm({ channel })}
-                includeAnonymous
-                includeNew
-              />
+              <SelectChannel channel={channel} onChannelChange={channel => updatePublishForm({ channel })} />
              <p className="help">
                {__('This is a username or handle that your content can be found under.')}{' '}
                {__('Ex. @Marvel, @TheBeatles, @BooksByJoe')}
--- a/ui/component/selectChannel/view.jsx
+++ b/ui/component/selectChannel/view.jsx
@ -14,11 +14,12 @@ type Props = {
  createChannel: (string, number) => Promise<any>,
  fetchChannelListMine: () => void,
  fetchingChannels: boolean,
-  emailVerified: boolean,
-  includeAnonymous?: boolean,
+  hideNew: boolean,
+  hideAnon: boolean,
  includeNew?: boolean,
  label?: string,
  injected?: Array<string>,
+  emailVerified: boolean,
 };

 type State = {
@ -73,9 +74,47 @@ class ChannelSection extends React.PureComponent<Props, State> {

  render() {
    const channel = this.state.addingChannel ? 'new' : this.props.channel;
-    const { fetchingChannels, channels = [], includeAnonymous, includeNew, label, injected = [] } = this.props;
+    const { fetchingChannels, channels = [], hideNew, hideAnon, label, injected = [] } = this.props;
    const { addingChannel } = this.state;

+    if (hideNew) {
+      return (
+        <Fragment>
+          {fetchingChannels ? (
+            <BusyIndicator message="Updating channels" />
+          ) : (
+            <>
+              <FormField
+                name="channel"
+                label={label || __('Channel')}
+                type="select"
+                onChange={this.handleChannelChange}
+                value={channel}
+              >
+                {!hideAnon && <option value={CHANNEL_ANONYMOUS}>{__('Anonymous')}</option>}
+                {channels &&
+                  channels.map(({ name, claim_id: claimId }) => (
+                    <option key={claimId} value={name}>
+                      {name}
+                    </option>
+                  ))}
+                {injected &&
+                  injected.map(item => (
+                    <option key={item} value={item}>
+                      {item}
+                    </option>
+                  ))}
+              </FormField>
+              {addingChannel && (
+                <div className="section">
+                  <ChannelCreate onSuccess={this.handleChangeToNewChannel} />
+                </div>
+              )}
+            </>
+          )}
+        </Fragment>
+      );
+    }
    return (
      <Fragment>
        {fetchingChannels ? (
@ -90,7 +129,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
                onChange={this.handleChannelChange}
                value={channel}
              >
-                {includeAnonymous && <option value={CHANNEL_ANONYMOUS}>{__('Anonymous')}</option>}
+                {!hideAnon && <option value={CHANNEL_ANONYMOUS}>{__('Anonymous')}</option>}
                {channels &&
                  channels.map(({ name, claim_id: claimId }) => (
                    <option key={claimId} value={name}>
@ -103,7 +142,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
                      {item}
                    </option>
                  ))}
-                {includeNew && <option value={CHANNEL_NEW}>{__('New channel...')}</option>}
+                <option value={CHANNEL_NEW}>{__('New channel...')}</option>}
              </FormField>
            </div>
            {addingChannel && (
--- a/ui/modal/modalSetReferrer/view.jsx
+++ b/ui/modal/modalSetReferrer/view.jsx
@ -3,6 +3,7 @@ import * as React from 'react';
 import { FormField, Form } from 'component/common/form';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';
+import HelpLink from 'component/common/help-link';

 type Props = {
  closeModal: () => void,
@ -49,7 +50,7 @@ class ModalSetReferrer extends React.PureComponent<Props, State> {
        <Form onSubmit={this.handleSubmit}>
          <p>
            {__('Tell us who referred you and get a reward!')}
-            <Button button="link" href="https://lbry.com/faq/referrals" label={__('?')} />.
+            <HelpLink href="https://lbry.com/faq/referrals" />.
          </p>
          <FormField
            autoFocus