mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-12-23 05:13:04 +03:00
Finish AccountsBottomSheet
This commit is contained in:
Furkan Kılıç
parent
ee9a79d511
commit
8067aa1227
@ -1,16 +1,26 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { View } from 'react-native';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
|
||||
import { navigate } from '../../../navigation/service';
|
||||
|
||||
import { updateCurrentAccount } from '../../../redux/actions/accountAction';
|
||||
import { isRenderRequired } from '../../../redux/actions/applicationActions';
|
||||
|
||||
import { getUserDataWithUsername } from '../../../realm/realm';
|
||||
import { switchAccount } from '../../../providers/hive/auth';
|
||||
|
||||
import { AccountContainer } from '../../../containers';
|
||||
import AccountsBottomSheet from '../view/accountsBottomSheetView';
|
||||
|
||||
const AccountsBottomSheetContainer = ({ navigation }) => {
|
||||
const dispatch = useDispatch();
|
||||
const accountsBottomSheetRef = useRef();
|
||||
|
||||
const isVisibleAccountsBottomSheet = useSelector(
|
||||
(state) => state.ui.isVisibleAccountsBottomSheet,
|
||||
);
|
||||
const currentAccount = useSelector((state) => state.account.currentAccount);
|
||||
const accounts = useSelector((state) => state.account.otherAccounts);
|
||||
|
||||
useEffect(() => {
|
||||
if (isVisibleAccountsBottomSheet) {
|
||||
@ -18,23 +28,60 @@ const AccountsBottomSheetContainer = ({ navigation }) => {
|
||||
}
|
||||
}, [isVisibleAccountsBottomSheet]);
|
||||
|
||||
const _navigateToRoute = (route = null) => {
|
||||
if (route) {
|
||||
//navigation.navigate(route);
|
||||
const _navigateToRoute = (routeName = null) => {
|
||||
if (routeName) {
|
||||
accountsBottomSheetRef.current?.closeAccountsBottomSheet();
|
||||
navigate({ routeName });
|
||||
}
|
||||
};
|
||||
|
||||
const _switchAccount = async (switchingAccount = {}) => {
|
||||
accountsBottomSheetRef.current?.closeAccountsBottomSheet();
|
||||
|
||||
//TODO: Remove setTimeout
|
||||
const timeout = setTimeout(async () => {
|
||||
if (switchingAccount.username !== currentAccount.name) {
|
||||
const accountData = accounts.filter(
|
||||
(account) => account.username === switchingAccount.username,
|
||||
)[0];
|
||||
|
||||
// control user persist whole data or just username
|
||||
if (accountData.name) {
|
||||
accountData.username = accountData.name;
|
||||
|
||||
dispatch(updateCurrentAccount(accountData));
|
||||
dispatch(isRenderRequired(true));
|
||||
|
||||
const upToDateCurrentAccount = await switchAccount(accountData.name);
|
||||
const realmData = await getUserDataWithUsername(accountData.name);
|
||||
|
||||
upToDateCurrentAccount.username = upToDateCurrentAccount.name;
|
||||
upToDateCurrentAccount.local = realmData[0];
|
||||
|
||||
dispatch(updateCurrentAccount(upToDateCurrentAccount));
|
||||
} else {
|
||||
const _currentAccount = await switchAccount(accountData.username);
|
||||
const realmData = await getUserDataWithUsername(accountData.username);
|
||||
|
||||
_currentAccount.username = _currentAccount.name;
|
||||
_currentAccount.local = realmData[0];
|
||||
|
||||
dispatch(updateCurrentAccount(_currentAccount));
|
||||
dispatch(isRenderRequired(true));
|
||||
}
|
||||
}
|
||||
}, 750);
|
||||
clearTimeout(timeout);
|
||||
};
|
||||
|
||||
return (
|
||||
<AccountContainer>
|
||||
{({ accounts, currentAccount, isLoggedIn, isLoginDone, username }) => (
|
||||
<AccountsBottomSheet
|
||||
ref={accountsBottomSheetRef}
|
||||
accounts={accounts}
|
||||
currentAccount={currentAccount}
|
||||
navigateToRoute={_navigateToRoute}
|
||||
/>
|
||||
)}
|
||||
</AccountContainer>
|
||||
<AccountsBottomSheet
|
||||
ref={accountsBottomSheetRef}
|
||||
accounts={accounts}
|
||||
currentAccount={currentAccount}
|
||||
navigateToRoute={_navigateToRoute}
|
||||
switchAccount={_switchAccount}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -16,108 +16,94 @@ import { UserAvatar, Icon, TextButton, Separator } from '../../index';
|
||||
import { default as ROUTES } from '../../../constants/routeNames';
|
||||
|
||||
import styles from './accountsBottomSheetStyles';
|
||||
import { switchAccount } from '../../../providers/hive/auth';
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: 'example',
|
||||
username: 'furkankilic',
|
||||
isCurrentAccount: true,
|
||||
},
|
||||
{
|
||||
name: 'example',
|
||||
username: 'furkankilic',
|
||||
},
|
||||
{
|
||||
name: 'example',
|
||||
username: 'furkankilic',
|
||||
},
|
||||
{
|
||||
name: 'example',
|
||||
username: 'furkankilic',
|
||||
},
|
||||
];
|
||||
const AccountsBottomSheet = forwardRef(
|
||||
({ accounts, currentAccount, navigateToRoute, switchAccount }, ref) => {
|
||||
const dispatch = useDispatch();
|
||||
const bottomSheetModalRef = useRef();
|
||||
const insets = useSafeAreaInsets();
|
||||
const intl = useIntl();
|
||||
|
||||
const AccountsBottomSheet = forwardRef(({ accounts, currentAccount, navigateToRoute }, ref) => {
|
||||
const dispatch = useDispatch();
|
||||
const bottomSheetModalRef = useRef();
|
||||
const insets = useSafeAreaInsets();
|
||||
const intl = useIntl();
|
||||
const snapPoints = useMemo(() => [accounts.length <= 4 ? accounts.length * 60 + 150 : 405], []);
|
||||
|
||||
const snapPoints = useMemo(() => [data.length <= 4 ? data.length * 60 + 150 : 405], []);
|
||||
useImperativeHandle(ref, () => ({
|
||||
showAccountsBottomSheet() {
|
||||
bottomSheetModalRef.current?.present();
|
||||
},
|
||||
closeAccountsBottomSheet() {
|
||||
bottomSheetModalRef.current?.dismiss();
|
||||
},
|
||||
}));
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
showAccountsBottomSheet() {
|
||||
bottomSheetModalRef.current?.present();
|
||||
},
|
||||
}));
|
||||
const _handleDismissBottomSheet = () => {
|
||||
bottomSheetModalRef.current?.dismiss();
|
||||
dispatch(toggleAccountsBottomSheet());
|
||||
};
|
||||
|
||||
const _handleDismissBottomSheet = () => {
|
||||
bottomSheetModalRef.current?.dismiss();
|
||||
dispatch(toggleAccountsBottomSheet());
|
||||
};
|
||||
|
||||
//_handlePressAccountTile(item)
|
||||
const _renderAccountTile = (item) => (
|
||||
<TouchableOpacity style={styles.accountTile} onPress={() => {}}>
|
||||
<View style={styles.avatarAndNameContainer}>
|
||||
<UserAvatar username={item.username} />
|
||||
<View style={styles.nameContainer}>
|
||||
{item.displayName && <Text style={styles.displayName}>{item.displayName}</Text>}
|
||||
<Text style={styles.name}>{item.name}</Text>
|
||||
//_handlePressAccountTile(item)
|
||||
const _renderAccountTile = (item) => (
|
||||
<TouchableOpacity style={styles.accountTile} onPress={() => switchAccount(item)}>
|
||||
<View style={styles.avatarAndNameContainer}>
|
||||
<UserAvatar username={item.username} />
|
||||
<View style={styles.nameContainer}>
|
||||
{item.displayName && <Text style={styles.displayName}>{item.displayName}</Text>}
|
||||
<Text style={styles.name}>{`@${item.name}`}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{item.isCurrentAccount && (
|
||||
<Icon iconType="AntDesign" name="checkcircle" style={styles.checkIcon} size={24} />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
return (
|
||||
<BottomSheetModalProvider>
|
||||
<BottomSheetModal
|
||||
backdropComponent={() => (
|
||||
<TouchableOpacity
|
||||
style={styles.backdrop}
|
||||
activeOpacity={1}
|
||||
onPress={bottomSheetModalRef.current?.dismiss}
|
||||
// when call the onPress, it calls onDismiss.
|
||||
/>
|
||||
{currentAccount.name === item.name && (
|
||||
<Icon iconType="AntDesign" name="checkcircle" style={styles.checkIcon} size={24} />
|
||||
)}
|
||||
ref={bottomSheetModalRef}
|
||||
index={0}
|
||||
snapPoints={snapPoints}
|
||||
onDismiss={_handleDismissBottomSheet}
|
||||
shouldMeasureContentHeight={true}
|
||||
>
|
||||
<BottomSheetFlatList
|
||||
data={data}
|
||||
scrollEnabled
|
||||
keyExtractor={(item) => item.name}
|
||||
renderItem={({ item }) => _renderAccountTile(item)}
|
||||
//contentContainerStyle={styles.contentContainer}
|
||||
/>
|
||||
<Separator style={styles.separator} />
|
||||
<View style={{ paddingBottom: insets.bottom }}>
|
||||
<View style={styles.buttonContainer}>
|
||||
<TextButton
|
||||
text={intl.formatMessage({ id: 'side_menu.create_a_new_account' })}
|
||||
textStyle={styles.textButton}
|
||||
onPress={() => navigateToRoute(ROUTES.SCREENS.REGISTER)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
return (
|
||||
<BottomSheetModalProvider>
|
||||
<BottomSheetModal
|
||||
backdropComponent={() => (
|
||||
<TouchableOpacity
|
||||
style={styles.backdrop}
|
||||
activeOpacity={1}
|
||||
onPress={bottomSheetModalRef.current?.dismiss}
|
||||
// when call the onPress, it calls onDismiss.
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
ref={bottomSheetModalRef}
|
||||
index={0}
|
||||
snapPoints={snapPoints}
|
||||
onDismiss={_handleDismissBottomSheet}
|
||||
shouldMeasureContentHeight={true}
|
||||
>
|
||||
<BottomSheetFlatList
|
||||
data={accounts}
|
||||
scrollEnabled
|
||||
keyExtractor={(item) => item.name}
|
||||
renderItem={({ item }) => _renderAccountTile(item)}
|
||||
//contentContainerStyle={styles.contentContainer}
|
||||
/>
|
||||
<Separator style={styles.separator} />
|
||||
<View style={styles.buttonContainer}>
|
||||
<TextButton
|
||||
text={intl.formatMessage({ id: 'side_menu.add_an_existing_account' })}
|
||||
textStyle={styles.textButton}
|
||||
onPress={() => navigateToRoute(ROUTES.SCREENS.LOGIN)}
|
||||
/>
|
||||
<View style={{ paddingBottom: insets.bottom }}>
|
||||
<View style={styles.buttonContainer}>
|
||||
<TextButton
|
||||
text={intl.formatMessage({ id: 'side_menu.create_a_new_account' })}
|
||||
textStyle={styles.textButton}
|
||||
onPress={() => navigateToRoute(ROUTES.SCREENS.REGISTER)}
|
||||
/>
|
||||
</View>
|
||||
<Separator style={styles.separator} />
|
||||
<View style={styles.buttonContainer}>
|
||||
<TextButton
|
||||
text={intl.formatMessage({ id: 'side_menu.add_an_existing_account' })}
|
||||
textStyle={styles.textButton}
|
||||
onPress={() => navigateToRoute(ROUTES.SCREENS.LOGIN)}
|
||||
/>
|
||||
</View>
|
||||
<Separator style={styles.separator} />
|
||||
</View>
|
||||
<Separator style={styles.separator} />
|
||||
</View>
|
||||
</BottomSheetModal>
|
||||
</BottomSheetModalProvider>
|
||||
);
|
||||
});
|
||||
</BottomSheetModal>
|
||||
</BottomSheetModalProvider>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export default AccountsBottomSheet;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user