Merge remote-tracking branch 'origin/sign-in' into product-review

src/component/AppNavigator.js

@@ -214,7 +214,7 @@ const drawer = createDrawerNavigator(
     },
   },
   {
-    drawerWidth: 280,
+    drawerWidth: 300,
     drawerBackgroundColor: 'transparent',
     headerMode: 'none',
     backBehavior: 'none',

src/component/drawerContent/index.js

@@ -1,4 +1,18 @@
 import { connect } from 'react-redux';
+import { doFetchChannelListMine, selectMyChannelClaims } from 'lbry-redux';
+import { selectUser } from 'lbryinc';
 import DrawerContent from './view';
 
-export default connect()(DrawerContent);
+const select = state => ({
+  channels: selectMyChannelClaims(state),
+  user: selectUser(state),
+});
+
+const perform = dispatch => ({
+  fetchChannelListMine: () => dispatch(doFetchChannelListMine()),
+});
+
+export default connect(
+  select,
+  perform
+)(DrawerContent);

src/component/drawerContent/view.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { DrawerItems, SafeAreaView } from 'react-navigation';
-import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { Image, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import Button from 'component/button';
 import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
 import Icon from 'react-native-vector-icons/FontAwesome5';
+import channelIconStyle from 'styles/channelIcon';
 import discoverStyle from 'styles/discover';
 
 const groupedMenuItems = {
@@ -30,14 +32,73 @@ const groupedMenuItems = {
 const groupNames = Object.keys(groupedMenuItems);
 
 class DrawerContent extends React.PureComponent {
+  componentDidMount() {
+    const { fetchChannelListMine } = this.props;
+    fetchChannelListMine();
+  }
+
+  getAvatarImageUrl = () => {
+    const { channels = [] } = this.props;
+    if (channels) {
+      // get the first channel thumbnail found. In the future, allow the user to select a default channel thumbnail?
+      for (let i = 0; i < channels.length; i++) {
+        if (channels[i].value && channels[i].value.thumbnail) {
+          return channels[i].value.thumbnail.url;
+        }
+      }
+    }
+
+    return null;
+  };
+
+  launchSignInFlow = () => {
+    // for now, sync flow (email, then password input) will be the default sign in flow
+    const { navigation } = this.props;
+    navigation.navigate({ routeName: 'Verification', key: 'verification', params: { syncFlow: true } });
+  };
+
   render() {
-    const { activeTintColor, navigation, onItemPress } = this.props;
+    const { activeTintColor, navigation, user, onItemPress } = this.props;
     const { state } = navigation;
 
     const activeItemKey = state.routes[state.index] ? state.routes[state.index].key : null;
+    const signedIn = user && user.has_verified_email;
+    const avatarImageUrl = this.getAvatarImageUrl();
 
     return (
       <View style={discoverStyle.drawerContentArea}>
+        <View style={discoverStyle.signInContainer}>
+          {!signedIn && (
+            <Button
+              style={discoverStyle.signInButton}
+              theme={'light'}
+              text={'Sign in'}
+              onPress={this.launchSignInFlow}
+            />
+          )}
+          {signedIn && (
+            <View style={discoverStyle.signedIn}>
+              <View style={discoverStyle.signedInAvatar}>
+                {avatarImageUrl && (
+                  <Image
+                    style={discoverStyle.signedInAvatarImage}
+                    resizeMode={'cover'}
+                    source={{ uri: avatarImageUrl }}
+                  />
+                )}
+                {!avatarImageUrl && (
+                  <Text style={channelIconStyle.autothumbCharacter}>
+                    {user.primary_email.substring(0, 1).toUpperCase()}
+                  </Text>
+                )}
+              </View>
+              <Text style={discoverStyle.signedInEmail} numberOfLines={1}>
+                {user.primary_email}
+              </Text>
+            </View>
+          )}
+        </View>
+
         <ScrollView contentContainerStyle={discoverStyle.menuScrollContent}>
           <SafeAreaView
             style={discoverStyle.drawerContentContainer}

src/styles/discover.js

@@ -296,7 +296,7 @@ const discoverStyle = StyleSheet.create({
     marginRight: 6,
   },
   menuScrollContent: {
-    paddingTop: 16,
+    paddingTop: 12,
   },
   menuGroup: {
     marginTop: 8,
@@ -336,6 +336,37 @@ const discoverStyle = StyleSheet.create({
     fontFamily: 'Inter-UI-Regular',
     fontSize: 16,
   },
+  signInContainer: {
+    backgroundColor: Colors.LbryGreen,
+    height: 140,
+    padding: 16,
+  },
+  signInButton: {
+    backgroundColor: Colors.White,
+    alignSelf: 'flex-start',
+    position: 'absolute',
+    bottom: 16,
+    left: 16,
+  },
+  signedInEmail: {
+    fontFamily: 'Inter-UI-SemiBold',
+    fontSize: 15,
+    color: Colors.White,
+  },
+  signedInAvatar: {
+    backgroundColor: Colors.NextLbryGreen,
+    width: 80,
+    height: 80,
+    marginBottom: 12,
+    borderRadius: 160,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  signedInAvatarImage: {
+    width: '100%',
+    height: '100%',
+  },
 });
 
 export default discoverStyle;