display connected email on About page (#327)

* display connected email on About page
* add mailing preferences link

app/src/page/about/index.js

@@ -1,6 +1,14 @@
 import { connect } from 'react-redux';
+import { doFetchAccessToken, selectAccessToken, selectUserEmail } from 'lbryinc';
 import AboutPage from './view';
 
-const perform = dispatch => ({});
+const select = state => ({
+  accessToken: selectAccessToken(state),
+  userEmail: selectUserEmail(state),
+});
 
-export default connect(null, perform)(AboutPage);
+const perform = dispatch => ({
+  fetchAccessToken: () => dispatch(doFetchAccessToken()),
+});
+
+export default connect(select, perform)(AboutPage);

app/src/page/about/view.js

@@ -28,10 +28,12 @@ class AboutPage extends React.PureComponent {
         lbryId: info.installation_id,
       });
     });
+
+    if (!this.props.accessToken) this.props.fetchAccessToken();
   }
 
   render() {
-    const { navigation } = this.props;
+    const { accessToken, navigation, userEmail } = this.props;
     const loading = 'Loading...';
     const ver = this.state.versionInfo ? this.state.versionInfo : null;
 
@@ -63,7 +65,21 @@ class AboutPage extends React.PureComponent {
             <Link style={aboutStyle.link} href="https://reddit.com/r/lbry" text="Reddit" />
             <Link style={aboutStyle.link} href="https://t.me/lbryofficial" text="Telegram" />
           </View>
-          <Text style={aboutStyle.releaseInfoTitle}>Release information</Text>
+          <Text style={aboutStyle.releaseInfoTitle}>App info</Text>
+          {userEmail && userEmail.trim().length > 0 &&
+          <View style={aboutStyle.verticalRow}>
+            <View style={aboutStyle.innerRow}>
+              <View style={aboutStyle.col}><Text style={aboutStyle.text}>Connected Email</Text></View>
+              <View style={aboutStyle.col}><Text selectable={true} style={aboutStyle.valueText}>{userEmail}</Text></View>
+            </View>
+            <View>
+              <Link
+                style={aboutStyle.emailPreferencesLink}
+                href={`http://lbry.io/list/edit/${accessToken}`}
+                text="Update mailing preferences" />
+            </View>
+          </View>}
+
           <View style={aboutStyle.row}>
             <View style={aboutStyle.col}><Text style={aboutStyle.text}>App version</Text></View>
             <View style={aboutStyle.col}><Text selectable={true} style={aboutStyle.valueText}>{this.state.appVersion}</Text></View>
@@ -74,11 +90,6 @@ class AboutPage extends React.PureComponent {
             <View style={aboutStyle.col}><Text selectable={true} style={aboutStyle.valueText}>{ver ? ver.lbrynet_version : loading }</Text></View>
           </View>
 
-          <View style={aboutStyle.row}>
-            <View style={aboutStyle.col}><Text style={aboutStyle.text}>Wallet (lbryum)</Text></View>
-            <View style={aboutStyle.col}><Text selectable={true} style={aboutStyle.valueText}>{ver ? ver.lbryum_version : loading }</Text></View>
-          </View>
-
           <View style={aboutStyle.row}>
             <View style={aboutStyle.col}><Text style={aboutStyle.text}>Platform</Text></View>
             <View style={aboutStyle.col}><Text selectable={true} style={aboutStyle.valueText}>{ver ? ver.platform : loading }</Text></View>

app/src/styles/about.js

@@ -16,6 +16,18 @@ const aboutStyle = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between'
   },
+  innerRow: {
+    marginBottom: 4,
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  verticalRow: {
+    marginBottom: 1,
+    backgroundColor: '#f9f9f9',
+    padding: 16,
+    flex: 1
+  },
   title: {
     color: Colors.LbryGreen,
     fontSize: 24,
@@ -44,6 +56,12 @@ const aboutStyle = StyleSheet.create({
     fontSize: 16,
     marginBottom: 24
   },
+  emailPreferencesLink: {
+    color: Colors.LbryGreen,
+    fontFamily: 'Metropolis-Regular',
+    fontSize: 15,
+    alignSelf: 'flex-end'
+  },
   col: {
     alignSelf: 'stretch'
   },