customDrawer
/* eslint-disable react/no-unstable-nested-components */ import React, { useEffect } from 'react'; import { FlatList, Image, Pressable, StyleSheet, Text, TouchableOpacity, View, } from 'react-native'; import { colors } from '../theme'; import { Strings, width } from '../constants/constants'; import fonts from '../assets/fonts'; import Icon from 'react-native-vector-icons/Ionicons'; import Images from '../assets/Images'; import { GuestUserIcon, PencilIcon } from '../assets/Icons'; import { useDispatch, useSelector } from 'react-redux'; import { setLogOut, storeUserDetails } from '../redux/actions/users'; import routes from './routes'; import { getUserProfile } from '../api'; import { ShowErrorMessage } from '../component/common/showErrorMessage'; import { IMAGE_URL } from '../api/Urls'; import { fontSize } from '../utils/fontUtils'; function CustomDrawer({ navigation }) { const dispatch = useDispatch(); const { user, userType } = useSelector(store => store?.userDetails) useEffect(() => { getUserProfileData() }, []) const getUserProfileData = () => { getUserProfile().then(val => { if (val.data) { dispatch(storeUserDetails(val.data.data)); } else { ShowErrorMessage('something went wrong'); } }).catch(err => console.log(err)) } const mainMenuArray = [ { title: 'Home', onPress: () => navigation.navigate(routes.statBurnStack) }, { title: 'Track your Activity', onPress: () => navigation.navigate(routes.trackActivityStack) }, { title: 'Connected Device and Apps', onPress: () => navigation.navigate(routes.connectDevicesStack) }, { title: 'All Reports', onPress: () => navigation.navigate(routes.allReportsStack) }, { title: 'Expert Panel', onPress: () => navigation.navigate(routes.expertPanelStack) }, { title: 'Share with Friends', onPress: () => navigation.navigate(routes.shareAppStack) }, { title: 'Blogs', onPress: () => navigation.navigate(routes.blogsStack) }, { title: 'Order History', onPress: () => { navigation?.navigate(routes.orderHistoryStack) } }, { title: 'Call Request', onPress: () => navigation.navigate(routes.callRequest) }, { title: 'Collaboration', onPress: () => navigation.navigate(routes.collaboration), isCollabIcon: true }, { title: 'Settings', onPress: () => navigation.navigate(routes.settingsStack), }, ]; const otherMenuArray = [ { title: 'Order History', onPress: () => { navigation?.navigate(routes.orderHistoryStack) } }, { title: 'Call Request', onPress: () => navigation.navigate(routes.callRequest) }, { title: 'Settings', onPress: () => navigation.navigate(routes.settingsStack), }, ]; function LogOut() { dispatch(setLogOut()); } function ListFooterComponent() { return ( <> <TouchableOpacity onPress={() => navigation?.closeDrawer()} style={styles.closeIconContainer}> <Icon name="close" size={25} color={colors.c666666} /> </TouchableOpacity> </> ); } const ListHeaderComponent = () => { const subscription_name = userType == Strings.GUEST ? "Guest" : userType == Strings.FREE ? "Free Plan" : user?.subscription[0]?.subscription_name return ( <View style={styles.headerContainer}> <View style={styles.planContainer}> <Text style={styles.planText}>Membership plan</Text> </View> <Pressable style={styles.profileCardContainer} onPress={() => navigation.navigate(routes.profileStack)}> {user?.profile_photo ? <Image style={styles.userImage} source={{ uri: IMAGE_URL + user?.profile_photo }} /> : <View style={styles.geustUserIcon} > <GuestUserIcon /> </View> } <View style={styles.userNameContainer}> <Text style={styles.profileHeadText}>{user?.username ?? 'Guest'}</Text> <Text style={styles.profileText}>{subscription_name}</Text> <Text style={[styles.profileText, { fontFamily: fonts.PoppinsRegular }]}> {user?.mobile_number} </Text> </View> <View style={styles.editIconContainer}> <PencilIcon width={width / 20} height={width / 20} /> </View> </Pressable> <Text style={styles.headingText}>Main</Text> </View> ); }; const renderItem = ({ item }): React.JSX.Element => { if (item.isCollabIcon && !user?.isFromPartner) { return null; } const { onPress, title } = item; const partnerLogo = user?.partner?.logo; return ( <TouchableOpacity onPress={onPress} style={styles.itemContainer}> <View style={styles.flexCenter}> <Text style={styles.itemContainerText}>{title}</Text> {item.isCollabIcon && ( <Image style={styles.collabIcon} source={{ uri: IMAGE_URL + partnerLogo }} /> )} </View> <Icon name={'chevron-forward'} color={colors.c666666} size={18} /> </TouchableOpacity> ); }; return ( <View style={styles.container}> {/* <StatusBar translucent backgroundColor={'transparent'} barStyle={'dark-content'} /> */} <FlatList showsVerticalScrollIndicator={false} style={{ alignSelf: 'center' }} ListHeaderComponent={ListHeaderComponent} ListFooterComponent={ListFooterComponent} data={mainMenuArray} renderItem={renderItem} /> <Image style={styles.logoIcon} source={Images.toneopicon} /> </View> ); } export default CustomDrawer; const styles = StyleSheet.create({ container: { flex: 1, // backgroundColor: colors.green, backgroundColor: colors.WHITE_F3F3F3, paddingTop: width / 7, }, logoIcon: { width: width / 3, height: width / 2, resizeMode: 'contain', position: 'absolute', bottom: 0, right: 0, }, itemContainerText: { fontSize: fontSize.fs16, fontFamily: fonts.PoppinsMedium, color: colors.c666666, }, itemContainer: { width: width / 1.1, height: width / 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', }, planContainer: { width: width / 1.1, flexDirection: 'row', alignItems: 'center', marginBottom: 5, }, planText: { fontFamily: fonts.PoppinsMedium, fontSize: fontSize.fs16, // color: colors.white, color: colors.c434343, }, profileCardContainer: { width: width / 1.1, height: width / 4.8, // backgroundColor: colors.white, backgroundColor: colors.green, borderRadius: 10, marginTop: 10, marginBottom: width / 12, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 15, }, profileHeadText: { fontFamily: fonts.PoppinsMedium, color: colors.white }, profileText: { fontFamily: fonts.PoppinsMedium, fontSize: fontSize.fs12, color: colors.white, width: width / 2, marginVertical: 1 }, headerContainer: { alignItems: 'center', flex: 1 }, headingText: { fontFamily: fonts.PoppinsRegular, fontSize: fontSize.fs12, color: colors.c999999, textAlign: 'left', width: width / 1.1, }, closeIconContainer: { width: width / 7, height: width / 7, alignItems: 'center', justifyContent: 'center', marginTop: width / 10, backgroundColor: colors.white, borderRadius: 100, alignSelf: 'center', }, editIconContainer: { width: width / 12, height: width / 12, alignItems: 'center', justifyContent: 'center', backgroundColor: colors.cf9f9f9, borderRadius: 100, }, collabIcon: { height: 20, resizeMode: 'contain', width: 35, marginLeft: 10, }, flexCenter: { flexDirection: 'row', alignItems: 'center' }, userNameContainer:{ flex: 1, paddingLeft: 15 }, profilePicture: { width: width / 6, height: width / 6, borderRadius: 100 }, geustUserIcon: { width: width / 6, height: width / 6, backgroundColor: colors.white, borderRadius: 100, overflow: 'hidden', paddingTop: 5 }, userImage: { width: width / 6, height: width / 6, borderRadius: 100 } });
Leave a Comment