Merge pull request #2287 from lbryio/invite-link

feat: add referral link

CHANGELOG.md

@@ -9,9 +9,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Added
 
 - Broken heart icon for unsubscribe ([#2272](https://github.com/lbryio/lbry-desktop/pull/2272))
+- Added referral link next to email input ([#2287](https://github.com/lbryio/lbry-desktop/pull/2287))
 
 ### Changed
-- Upgrade LBRY SDK to [0.32](https://github.com/lbryio/lbry/releases/tag/v0.32.0) for improved download performance. See [0.31](https://github.com/lbryio/lbry/releases/tag/v0.31.0) for other changes since last app release. 
+
+- Upgrade LBRY SDK to [0.32](https://github.com/lbryio/lbry/releases/tag/v0.32.0) for improved download performance. See [0.31](https://github.com/lbryio/lbry/releases/tag/v0.31.0) for other changes since last app release.
 
 ### Fixed
 

package.json

@@ -54,7 +54,7 @@
     "keytar": "^4.2.1",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
     "lbry-redux": "lbryio/lbry-redux#3ab065b11a52d3e2e6a50a25459f9ff0aac03b13",
-    "lbryinc": "lbryio/lbryinc#60d80401891743f991c040bafa8e51da7e939777",
+    "lbryinc": "lbryio/lbryinc#2334ad53e82c22d6291899785d5292347008f2a9",
     "localforage": "^1.7.1",
     "mammoth": "^1.4.6",
     "mime": "^2.3.1",

src/renderer/component/copyableText/view.jsx

@@ -9,34 +9,39 @@ type Props = {
   copyable: string,
   snackMessage: ?string,
   doToast: ({ message: string }) => void,
+  label?: string,
 };
 
 export default class CopyableText extends React.PureComponent<Props> {
   constructor() {
     super();
 
-    this.input = null;
+    this.input = React.createRef();
+    (this: any).onFocus = this.onFocus.bind(this);
   }
 
-  input: ?HTMLInputElement;
+  input: { current: React.ElementRef<any> };
+
+  onFocus() {
+    // We have to go a layer deep since the input is inside the form component
+    const topRef = this.input.current;
+    if (topRef && topRef.input && topRef.input.current) {
+      topRef.input.current.select();
+    }
+  }
 
   render() {
-    const { copyable, doToast, snackMessage } = this.props;
+    const { copyable, doToast, snackMessage, label } = this.props;
 
     return (
       <FormField
         type="text"
         className="form-field--copyable"
         readOnly
+        label={label}
         value={copyable || ''}
-        ref={input => {
-          this.input = input;
-        }}
-        onFocus={() => {
-          if (this.input) {
-            this.input.select();
-          }
-        }}
+        ref={this.input}
+        onFocus={this.onFocus}
         inputButton={
           <Button
             button="primary"

src/renderer/component/inviteNew/index.js

@@ -3,6 +3,7 @@ import {
   selectUserInvitesRemaining,
   selectUserInviteNewIsPending,
   selectUserInviteNewErrorMessage,
+  selectUserInviteReferralLink,
   doUserInviteNew,
 } from 'lbryinc';
 import InviteNew from './view';
@@ -10,6 +11,7 @@ import InviteNew from './view';
 const select = state => ({
   errorMessage: selectUserInviteNewErrorMessage(state),
   invitesRemaining: selectUserInvitesRemaining(state),
+  referralLink: selectUserInviteReferralLink(state),
   isPending: selectUserInviteNewIsPending(state),
 });
 

src/renderer/component/inviteNew/view.jsx

@@ -3,6 +3,7 @@
 import React from 'react';
 import Button from 'component/button';
 import { Form, FormField, Submit } from 'component/common/form';
+import CopyableText from 'component/copyableText';
 
 type FormProps = {
   inviteNew: string => void,
@@ -63,11 +64,12 @@ type Props = {
   inviteNew: string => void,
   isPending: boolean,
   rewardAmount: number,
+  referralLink: string,
 };
 
 class InviteNew extends React.PureComponent<Props> {
   render() {
-    const { errorMessage, inviteNew, isPending, rewardAmount } = this.props;
+    const { errorMessage, inviteNew, isPending, rewardAmount, referralLink } = this.props;
 
     return (
       <section className="card card--section">
@@ -86,6 +88,12 @@ class InviteNew extends React.PureComponent<Props> {
             isPending={isPending}
             rewardAmount={rewardAmount}
           />
+        </div>
+        <div className="card__content">
+          <CopyableText
+            label={__('Or share this link with your friends')}
+            copyable={referralLink}
+          />
 
           <p className="help">
             {__('Earn')} <Button button="link" navigate="/rewards" label={__('rewards')} />{' '}