Finish AccountsBottomSheet

src/components/accountsBottomSheet/container/accountsBottomSheetContainer.js

@@ -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}
+      switchAccount={_switchAccount}
     />
-      )}
-    </AccountContainer>
   );
 };
 

src/components/accountsBottomSheet/view/accountsBottomSheetView.js

@@ -16,39 +16,24 @@ 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 }, ref) => {
+const AccountsBottomSheet = forwardRef(
+  ({ accounts, currentAccount, navigateToRoute, switchAccount }, ref) => {
     const dispatch = useDispatch();
     const bottomSheetModalRef = useRef();
     const insets = useSafeAreaInsets();
     const intl = useIntl();
 
-  const snapPoints = useMemo(() => [data.length <= 4 ? data.length * 60 + 150 : 405], []);
+    const snapPoints = useMemo(() => [accounts.length <= 4 ? accounts.length * 60 + 150 : 405], []);
 
     useImperativeHandle(ref, () => ({
       showAccountsBottomSheet() {
         bottomSheetModalRef.current?.present();
       },
+      closeAccountsBottomSheet() {
+        bottomSheetModalRef.current?.dismiss();
+      },
     }));
 
     const _handleDismissBottomSheet = () => {
@@ -58,15 +43,15 @@ const AccountsBottomSheet = forwardRef(({ accounts, currentAccount, navigateToRo
 
     //_handlePressAccountTile(item)
     const _renderAccountTile = (item) => (
-    <TouchableOpacity style={styles.accountTile} onPress={() => {}}>
+      <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>
+            <Text style={styles.name}>{`@${item.name}`}</Text>
           </View>
         </View>
-      {item.isCurrentAccount && (
+        {currentAccount.name === item.name && (
           <Icon iconType="AntDesign" name="checkcircle" style={styles.checkIcon} size={24} />
         )}
       </TouchableOpacity>
@@ -90,7 +75,7 @@ const AccountsBottomSheet = forwardRef(({ accounts, currentAccount, navigateToRo
           shouldMeasureContentHeight={true}
         >
           <BottomSheetFlatList
-          data={data}
+            data={accounts}
             scrollEnabled
             keyExtractor={(item) => item.name}
             renderItem={({ item }) => _renderAccountTile(item)}
@@ -118,6 +103,7 @@ const AccountsBottomSheet = forwardRef(({ accounts, currentAccount, navigateToRo
         </BottomSheetModal>
       </BottomSheetModalProvider>
     );
-});
+  },
+);
 
 export default AccountsBottomSheet;