[Feat] keep track of previously logged out users

src/components/accountsBottomSheet/container/accountsBottomSheetContainer.tsx

@@ -40,6 +40,8 @@ const AccountsBottomSheetContainer = () => {
   const currentAccount = useAppSelector((state) => state.account.currentAccount);
   const accounts = useAppSelector((state) => state.account.otherAccounts);
   const pinHash = useAppSelector((state) => state.application.pin);
+  const prevLoggedInUsers = useAppSelector((state) => state.account.prevLoggedInUsers);
+  const isLoggedIn = useAppSelector((state) => state.application.isLoggedIn);
 
   useEffect(() => {
     if (isVisibleAccountsBottomSheet) {
@@ -152,6 +154,9 @@ const AccountsBottomSheetContainer = () => {
       navigateToRoute={_navigateToRoute}
       switchAccount={_switchAccount}
       onClose={_onClose}
+      prevLoggedInUsers={prevLoggedInUsers}
+      dispatch={dispatch}
+      isLoggedIn={isLoggedIn}
     />
   );
 };

src/components/accountsBottomSheet/view/accountsBottomSheetStyles.js

@@ -44,9 +44,24 @@ export default EStyleSheet.create({
   checkIcon: {
     color: '$successColor',
   },
+  deleteIcon: {
+    color: '$iconColor',
+  },
   button: {
     justifyContent: 'center',
     backgroundColor: 'transparent',
     paddingVertical: 4,
   },
+  loggedOutAccountTileContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    height: 60,
+  },
+  loggedOutAccountTile: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
 });

src/components/accountsBottomSheet/view/accountsBottomSheetView.js

@@ -2,10 +2,10 @@ import React, { useRef, forwardRef, useImperativeHandle } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import { useIntl } from 'react-intl';
 import ActionSheet from 'react-native-actions-sheet';
-
+import { get } from 'lodash';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
 import { FlatList } from 'react-native-gesture-handler';
+import { setPrevLoggedInUsers } from '../../../redux/actions/accountAction';
 
 import { UserAvatar, Icon, Separator } from '../../index';
 
@@ -14,7 +14,19 @@ import { default as ROUTES } from '../../../constants/routeNames';
 import styles from './accountsBottomSheetStyles';
 
 const AccountsBottomSheet = forwardRef(
-  ({ accounts, currentAccount, navigateToRoute, switchAccount, onClose }, ref) => {
+  (
+    {
+      accounts,
+      currentAccount,
+      navigateToRoute,
+      switchAccount,
+      onClose,
+      prevLoggedInUsers,
+      dispatch,
+      isLoggedIn,
+    },
+    ref,
+  ) => {
     const bottomSheetModalRef = useRef();
     const userList = useRef();
     const insets = useSafeAreaInsets();
@@ -29,20 +41,95 @@ const AccountsBottomSheet = forwardRef(
       },
     }));
 
-    // _handlePressAccountTile(item)
-    const _renderAccountTile = ({ item }) => (
-      <TouchableOpacity style={styles.accountTile} onPress={() => switchAccount(item)}>
-        <View style={styles.avatarAndNameContainer}>
-          <UserAvatar username={item.username} />
-          <View style={styles.nameContainer}>
-            <Text style={styles.name}>{`@${item.username}`}</Text>
+    const _renderAccountTile = ({ item }) => {
+      return (
+        <TouchableOpacity style={styles.accountTile} onPress={() => switchAccount(item)}>
+          <View style={styles.avatarAndNameContainer}>
+            <UserAvatar username={item.username} />
+            <View style={styles.nameContainer}>
+              <Text style={styles.name}>{`@${item.username}`}</Text>
+            </View>
           </View>
-        </View>
-        {currentAccount.name === item.username && (
-          <Icon iconType="AntDesign" name="checkcircle" style={styles.checkIcon} size={24} />
-        )}
-      </TouchableOpacity>
-    );
+          {currentAccount.name === item.username && (
+            <Icon iconType="AntDesign" name="checkcircle" style={styles.checkIcon} size={24} />
+          )}
+        </TouchableOpacity>
+      );
+    };
+
+    const _handlePressLoggedOutAccountTile = (item) => {
+      if (item && item?.isLoggedOut === true) {
+        navigateToRoute(ROUTES.SCREENS.LOGIN, { username: item?.username || '' });
+      }
+    };
+
+    const _renderLoggedOutAccountTile = ({ item }) => {
+      if (
+        item &&
+        item?.isLoggedOut === true &&
+        accounts?.findIndex((el) => get(el, 'local.username', '') === item?.username) === -1
+      ) {
+        return (
+          <View style={styles.loggedOutAccountTileContainer}>
+            <TouchableOpacity
+              style={styles.loggedOutAccountTile}
+              onPress={() => _handlePressLoggedOutAccountTile(item)}
+            >
+              <View style={styles.avatarAndNameContainer}>
+                <UserAvatar username={item.username} />
+                <View style={styles.nameContainer}>
+                  <Text style={styles.name}>{`@${item.username}`}</Text>
+                </View>
+              </View>
+            </TouchableOpacity>
+            <Icon
+              iconType="AntDesign"
+              name="close"
+              style={styles.deleteIcon}
+              size={24}
+              onPress={() => _removePrevLoggedInUsersList(item?.username || '')}
+            />
+          </View>
+        );
+      }
+    };
+    const _renderPrevLoggedInUsersList = () =>
+      // render only if user is logged out
+      prevLoggedInUsers &&
+      prevLoggedInUsers?.length > 0 &&
+      prevLoggedInUsers?.filter((el) => el?.isLoggedOut === true).length > 0 ? (
+        <>
+          {!!isLoggedIn && <Separator style={styles.separator} />}
+          <Text style={styles.textButton}>
+            {intl.formatMessage({ id: 'side_menu.logged_out_accounts' })}
+          </Text>
+          <FlatList
+            data={prevLoggedInUsers}
+            ref={userList}
+            scrollEnabled
+            keyExtractor={(item, index) => `${item.name || item.username}${index}`}
+            renderItem={_renderLoggedOutAccountTile}
+            nestedScrollEnabled={true}
+            onScrollEndDrag={() => bottomSheetModalRef.current?.handleChildScrollEnd()}
+            onScrollAnimationEnd={() => bottomSheetModalRef.current?.handleChildScrollEnd()}
+            onMomentumScrollEnd={() => bottomSheetModalRef.current?.handleChildScrollEnd()}
+          />
+        </>
+      ) : null;
+
+    // update previously loggedin users list,
+    const _removePrevLoggedInUsersList = (username) => {
+      if (prevLoggedInUsers && prevLoggedInUsers.length > 0) {
+        const userIndex = prevLoggedInUsers.findIndex((el) => el?.username === username);
+        if (userIndex > -1) {
+          const updatedPrevLoggedInUsers = prevLoggedInUsers?.slice();
+          updatedPrevLoggedInUsers?.splice(userIndex, 1);
+          dispatch(setPrevLoggedInUsers(updatedPrevLoggedInUsers));
+        }
+      } else {
+        console.log('user not found in list');
+      }
+    };
 
     return (
       <View style={[styles.accountsModal]}>
@@ -66,6 +153,7 @@ const AccountsBottomSheet = forwardRef(
             onScrollAnimationEnd={() => bottomSheetModalRef.current?.handleChildScrollEnd()}
             onMomentumScrollEnd={() => bottomSheetModalRef.current?.handleChildScrollEnd()}
           />
+          {_renderPrevLoggedInUsersList()}
           <Separator style={styles.separator} />
           <View style={{ paddingBottom: insets.bottom + 16 }}>
             <TouchableOpacity

src/components/post-translation-modal/postTranslationModal.tsx

@@ -35,7 +35,7 @@ const PostTranslationModal = () => {
 
   useEffect(() => {
     if (translationModalVisible) {
-      if (bottomSheetModalRef.current) {
+      if (bottomSheetModalRef?.current) {
         if (!translationModalData) {
           Alert.alert(
             intl.formatMessage({ id: 'alert.something_wrong' }),
@@ -44,7 +44,7 @@ const PostTranslationModal = () => {
           return;
         }
         setContent(translationModalData);
-        bottomSheetModalRef.current.show();
+        bottomSheetModalRef?.current?.show();
         getSupportedLanguages();
       }
     } else {
@@ -116,8 +116,8 @@ const PostTranslationModal = () => {
     setSelectedSourceLang(srcLang);
     setSelectedTargetLang(targetLang);
     dispatch(hideTranslationModal());
-    if (bottomSheetModalRef.current) {
-      bottomSheetModalRef.current.hide();
+    if (bottomSheetModalRef?.current) {
+      bottomSheetModalRef?.current?.hide();
     }
   };
 

src/components/sideMenu/container/sideMenuContainer.tsx

@@ -18,6 +18,8 @@ const SideMenuContainer = ({ navigation }) => {
 
   const isLoggedIn = useSelector((state) => state.application.isLoggedIn);
   const currentAccount = useSelector((state) => state.account.currentAccount);
+  const prevLoggedInUsers = useSelector((state) => state.account.prevLoggedInUsers);
+
   const isVisibleAccountsBottomSheet = useSelector(
     (state) => state.ui.isVisibleAccountsBottomSheet,
   );
@@ -71,6 +73,8 @@ const SideMenuContainer = ({ navigation }) => {
       currentAccount={currentAccount}
       handleLogout={_handleLogout}
       handlePressOptions={_handlePressOptions}
+      prevLoggedInUsers={prevLoggedInUsers}
+      isVisibleAccountsBottomSheet={isVisibleAccountsBottomSheet}
     />
   );
 };

src/components/sideMenu/view/sideMenuView.js

@@ -1,13 +1,5 @@
-import React, { useEffect, useState, useRef } from 'react';
-import {
-  View,
-  Text,
-  ImageBackground,
-  FlatList,
-  TouchableOpacity,
-  Linking,
-  Share,
-} from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { View, Text, ImageBackground, FlatList, TouchableOpacity } from 'react-native';
 import { injectIntl, useIntl } from 'react-intl';
 import LinearGradient from 'react-native-linear-gradient';
 import VersionNumber from 'react-native-version-number';
@@ -30,7 +22,11 @@ import { getVotingPower } from '../../../utils/manaBar';
 
 // Styles
 import styles from './sideMenuStyles';
-import { showActionModal, toggleQRModal } from '../../../redux/actions/uiAction';
+import {
+  showActionModal,
+  toggleAccountsBottomSheet,
+  toggleQRModal,
+} from '../../../redux/actions/uiAction';
 
 // Images
 import SIDE_MENU_BACKGROUND from '../../../assets/side_menu_background.png';
@@ -41,6 +37,8 @@ const SideMenuView = ({
   handleLogout,
   navigateToRoute,
   handlePressOptions,
+  prevLoggedInUsers,
+  isVisibleAccountsBottomSheet,
 }) => {
   const intl = useIntl();
   const dispatch = useDispatch();
@@ -120,6 +118,15 @@ const SideMenuView = ({
       });
       return;
     }
+    // if there is any prevLoggedInUser, show account switch modal
+    if (item.id === 'add_account') {
+      if (prevLoggedInUsers && prevLoggedInUsers?.length > 0) {
+        dispatch(toggleAccountsBottomSheet(!isVisibleAccountsBottomSheet));
+      } else {
+        navigateToRoute(item.route);
+      }
+      return;
+    }
 
     navigateToRoute(item.route);
   };

src/components/tabbedPosts/view/listEmptyView.tsx

@@ -16,6 +16,7 @@ import {
 } from '../../../redux/actions/communitiesAction';
 import { fetchLeaderboard, followUser, unfollowUser } from '../../../redux/actions/userAction';
 import { getCommunity } from '../../../providers/hive/dhive';
+import { toggleAccountsBottomSheet } from '../../../redux/actions/uiAction';
 
 interface TabEmptyViewProps {
   filterKey: string;
@@ -32,6 +33,10 @@ const TabEmptyView = ({ filterKey, isNoPost }: TabEmptyViewProps) => {
   const subscribingCommunities = useSelector(
     (state) => state.communities.subscribingCommunitiesInFeedScreen,
   );
+  const isVisibleAccountsBottomSheet = useSelector(
+    (state) => state.ui.isVisibleAccountsBottomSheet,
+  );
+  const prevLoggedInUsers = useSelector((state) => state.account.prevLoggedInUsers);
   const [recommendedCommunities, setRecommendedCommunities] = useState([]);
   const [recommendedUsers, setRecommendedUsers] = useState([]);
   const followingUsers = useSelector((state) => state.user.followingUsersInFeedScreen);
@@ -218,7 +223,12 @@ const TabEmptyView = ({ filterKey, isNoPost }: TabEmptyViewProps) => {
   };
 
   const _handleOnPressLogin = () => {
-    navigation.navigate(ROUTES.SCREENS.LOGIN);
+    // if there is any prevLoggedInUser, show account switch modal
+    if (prevLoggedInUsers && prevLoggedInUsers?.length > 0) {
+      dispatch(toggleAccountsBottomSheet(!isVisibleAccountsBottomSheet));
+    } else {
+      navigation.navigate(ROUTES.SCREENS.LOGIN);
+    }
   };
 
   // render related operations

src/config/locales/en-US.json

@@ -457,7 +457,8 @@
     "add_an_existing_account": "Add an existing account",
     "accounts": "Accounts",
     "refer": "Refer & Earn",
-    "qr": "QR Scan"
+    "qr": "QR Scan",
+    "logged_out_accounts": "Other accounts"
   },
   "header": {
     "title": "Login to customize your feed",

src/redux/actions/accountAction.ts

@@ -8,7 +8,10 @@ import {
   UPDATE_CURRENT_ACCOUNT,
   UPDATE_UNREAD_ACTIVITY_COUNT,
   UPDATE_OTHER_ACCOUNT,
+  SET_PREV_LOGGED_IN_USERS,
+  CLEAR_PREV_LOGGED_IN_USERS,
 } from '../constants/constants';
+import { PrevLoggedInUsers } from '../reducers/accountReducer';
 
 export const fetchGlobalProperties = () => (dispatch) =>
   fetchGlobalProps().then((res) =>
@@ -56,3 +59,12 @@ export const setGlobalProps = (data) => ({
   type: SET_GLOBAL_PROPS,
   payload: data,
 });
+
+export const setPrevLoggedInUsers = (data: PrevLoggedInUsers[]) => ({
+  payload: data,
+  type: SET_PREV_LOGGED_IN_USERS,
+});
+
+export const clearPrevLoggedInUsers = () => ({
+  type: CLEAR_PREV_LOGGED_IN_USERS,
+});

src/redux/constants/constants.js

@@ -39,6 +39,8 @@ export const SET_SETTINGS_MIGRATED = 'SET_SETTINGS_MIGRATED';
 export const SET_TERMS_ACCEPTED = 'SET_TERMS_ACCEPTED';
 export const SET_IS_BIOMETRIC_ENABLED = 'SET_IS_BIOMETRIC_ENABLED';
 export const SET_ENC_UNLOCK_PIN = 'SET_ENC_UNLOCK_PIN';
+export const SET_PREV_LOGGED_IN_USERS = 'SET_PREV_LOGGED_IN_USERS';
+export const CLEAR_PREV_LOGGED_IN_USERS = 'CLEAR_PREV_LOGGED_IN_USERS';
 
 // Accounts
 export const ADD_OTHER_ACCOUNT = 'ADD_OTHER_ACCOUNT';