diff --git a/src/component/AppNavigator.js b/src/component/AppNavigator.js index 859f93a..5f35446 100644 --- a/src/component/AppNavigator.js +++ b/src/component/AppNavigator.js @@ -214,7 +214,7 @@ const drawer = createDrawerNavigator( }, }, { - drawerWidth: 280, + drawerWidth: 300, drawerBackgroundColor: 'transparent', headerMode: 'none', backBehavior: 'none', diff --git a/src/component/drawerContent/index.js b/src/component/drawerContent/index.js index 3df7cec..48c9cc6 100644 --- a/src/component/drawerContent/index.js +++ b/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); diff --git a/src/component/drawerContent/view.js b/src/component/drawerContent/view.js index 0afd345..4ec8900 100644 --- a/src/component/drawerContent/view.js +++ b/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 ( + + {!signedIn && ( +