fix: users pinned to the wrong account (#183)

fix: mismatching avatar on hub tabs
suvam0451 · Jan 1, 2025 · bdd844f · bdd844f
1 parent e605870
commit bdd844f
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 205 deletions.
diff --git a/apps/mobile/app/(tabs)/_layout.tsx b/apps/mobile/app/(tabs)/_layout.tsx
@@ -1,92 +1,28 @@
 import { Tabs } from 'expo-router';
-import FontAwesome6 from '@expo/vector-icons/FontAwesome6';
 import Ionicons from '@expo/vector-icons/Ionicons';
 import { View } from 'react-native';
-import { useAppNotificationBadge } from '../../hooks/app/useAppNotificationBadge';
 import WithAppAssetsContext from '../../hooks/app/useAssets';
-import AntDesign from '@expo/vector-icons/AntDesign';
 import {
 	HomeNavigationIcon,
 	ProfileTabNavbarIcon,
 } from '../../components/lib/Icon';
-import useGlobalState from '../../states/_global';
-import { useShallow } from 'zustand/react/shallow';
+import { useAppTheme } from '../../hooks/utility/global-state-extractors';
 
 export default function TabLayout() {
-	const { notificationCount } = useAppNotificationBadge();
-	const { theme } = useGlobalState(
-		useShallow((o) => ({
-			theme: o.colorScheme,
-		})),
-	);
+	const { theme } = useAppTheme();
 
 	return (
 		<View style={{ height: '100%' }}>
 			<WithAppAssetsContext>
 				<Tabs
 					initialRouteName={'index'}
 					detachInactiveScreens={false}
-					screenOptions={({ route }) => {
-						let badgeCount = undefined;
-						if (route.name === 'notifications') {
-							badgeCount =
-								notificationCount === 0 ? undefined : notificationCount;
-						}
+					screenOptions={() => {
 						return {
-							tabBarItemStyle: { flex: 1 },
 							tabBarHideOnKeyboard: true,
-							tabBarIcon: ({ focused, color, size }) => {
-								let iconName;
-								let renderer = 'ionicons';
-								console.log(route.name);
-								switch (route.name) {
-									case 'Home': {
-										iconName = focused ? 'index' : 'index';
-										break;
-									}
-									case 'SearchTab': {
-										iconName = focused ? 'compass' : 'compass';
-										renderer = 'fa6';
-										break;
-									}
-									case 'Favourites': {
-										iconName = focused ? 'appstore1' : 'appstore1';
-										renderer = 'antdesign';
-										break;
-									}
-									case 'Notifications': {
-										iconName = focused ? 'notifications' : 'notifications';
-										break;
-									}
-									case 'Accounts': {
-										iconName = focused ? 'person' : 'person';
-									}
-								}
-								switch (renderer) {
-									case 'antdesign':
-										return (
-											<AntDesign name={iconName} size={size} color={color} />
-										);
-									case 'fa6':
-										return (
-											<FontAwesome6.default
-												name={iconName}
-												size={size}
-												color={color}
-											/>
-										);
-									default:
-										return <View />;
-								}
-							}, // tabBarBadge: badgeCount,
-							tabBarBadgeStyle: {
-								// backgroundColor: 'black',
-								color: 'yellow',
-							},
 							tabBarStyle: {
 								backgroundColor: theme.palette.bg,
 								borderTopWidth: 0,
-								height: 52,
 							},
 							tabBarIconStyle: {
 								height: 42,

diff --git a/...ile/components/dhaaga-bottom-sheet/modules/select-account/AppBottomSheetSelectAccount.tsx b/...ile/components/dhaaga-bottom-sheet/modules/select-account/AppBottomSheetSelectAccount.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { AnimatedFlashList } from '@shopify/flash-list';
-import { Pressable, Text, TouchableOpacity, View } from 'react-native';
+import { Pressable, Text, View } from 'react-native';
 import { APP_FONTS } from '../../../../styles/AppFonts';
 import {
 	AccountDetails,
@@ -16,13 +16,12 @@ import {
 import useGlobalState from '../../../../states/_global';
 import { useShallow } from 'zustand/react/shallow';
 import { useAppListAccounts } from '../../../../hooks/db/useAppListAccounts';
-import { AppIcon } from '../../../lib/Icon';
 import { APP_ROUTING_ENUM } from '../../../../utils/route-list';
-import { APP_COLOR_PALETTE_EMPHASIS } from '../../../../utils/theming.util';
 import {
 	useAppBottomSheet_Improved,
 	useAppTheme,
 } from '../../../../hooks/utility/global-state-extractors';
+import { AppBottomSheetMenu } from '../../../lib/Menu';
 
 type FlashListItemProps = {
 	acct: Account;
@@ -148,39 +147,15 @@ const AppBottomSheetSelectAccount = memo(() => {
 			<AnimatedFlashList
 				estimatedItemSize={72}
 				ListHeaderComponent={() => (
-					<View
-						style={{
-							marginVertical: 16,
-							justifyContent: 'space-between',
-							flexDirection: 'row',
-							marginHorizontal: 16,
-							alignItems: 'center',
-							marginTop: 32,
-						}}
-					>
-						<Text
-							style={{
-								fontFamily: APP_FONTS.INTER_700_BOLD,
-								color: theme.textColor.high,
-								fontSize: 20,
-								flex: 1,
-							}}
-						>
-							Select Account
-						</Text>
-						<TouchableOpacity
-							style={{
-								paddingHorizontal: 8,
-							}}
-							onPress={onPressMoreAccountOptions}
-						>
-							<AppIcon
-								id={'cog'}
-								emphasis={APP_COLOR_PALETTE_EMPHASIS.A10}
-								onPress={onPressMoreAccountOptions}
-							/>
-						</TouchableOpacity>
-					</View>
+					<AppBottomSheetMenu.Header
+						title={'Select Account'}
+						menuItems={[
+							{
+								iconId: 'cog',
+								onPress: onPressMoreAccountOptions,
+							},
+						]}
+					/>
 				)}
 				data={data}
 				renderItem={({ item }) => <FlashListItem acct={item} />}

diff --git a/apps/mobile/components/lib/Avatar.tsx b/apps/mobile/components/lib/Avatar.tsx
@@ -1,9 +1,9 @@
 import { memo } from 'react';
 import { Image } from 'expo-image';
-import useGlobalState from '../../states/_global';
-import { useShallow } from 'zustand/react/shallow';
 import { StyleProp, Text, View, ViewStyle } from 'react-native';
 import { APP_FONTS } from '../../styles/AppFonts';
+import { Account } from '../../database/_schema';
+import { useAppTheme } from '../../hooks/utility/global-state-extractors';
 
 type AppAvatarProps = {
 	uri: string;
@@ -29,18 +29,15 @@ export const AppAvatar = memo(({ uri, size }: AppAvatarProps) => {
 type SocialHubAvatarCircleProps = {
 	size?: number;
 	style?: StyleProp<ViewStyle>;
+	acct: Account;
 };
 
 export function SocialHubAvatarCircle({
 	size,
 	style,
+	acct,
 }: SocialHubAvatarCircleProps) {
-	const { acct, theme } = useGlobalState(
-		useShallow((o) => ({
-			acct: o.acct,
-			theme: o.colorScheme,
-		})),
-	);
+	const { theme } = useAppTheme();
 
 	if (!acct) return <View />;
 

diff --git a/apps/mobile/components/lib/Menu.tsx b/apps/mobile/components/lib/Menu.tsx
@@ -12,6 +12,7 @@ import { useShallow } from 'zustand/react/shallow';
 import { APP_ICON_ENUM, AppIcon } from './Icon';
 import { useAppTheme } from '../../hooks/utility/global-state-extractors';
 import { Loader } from './Loader';
+import { APP_COLOR_PALETTE_EMPHASIS } from '../../utils/theming.util';
 
 type AppMenuOptionType = {
 	appIconId: any;
@@ -170,11 +171,64 @@ type AppBottomSheetMenuWithBackNavigationProps = {
 	nextLoading?: boolean;
 };
 
+type AppBottomSheetMenuHeaderProps = {
+	title: string;
+	desc?: string;
+	menuItems: {
+		iconId: string;
+		onPress: () => void;
+	}[];
+};
+
 /**
  *
  * @constructor
  */
 export class AppBottomSheetMenu {
+	static Header({ title, menuItems }: AppBottomSheetMenuHeaderProps) {
+		const { theme } = useAppTheme();
+		return (
+			<View
+				style={{
+					marginVertical: 16,
+					justifyContent: 'space-between',
+					flexDirection: 'row',
+					marginHorizontal: 16,
+					alignItems: 'center',
+					marginTop: 32,
+				}}
+			>
+				<Text
+					style={{
+						fontFamily: APP_FONTS.INTER_700_BOLD,
+						color: theme.textColor.high,
+						fontSize: 20,
+						flex: 1,
+					}}
+				>
+					{title}
+				</Text>
+				<View>
+					{menuItems.map((o, i) => (
+						<Pressable
+							key={i}
+							style={{
+								paddingHorizontal: 8,
+							}}
+							onPress={o.onPress}
+						>
+							<AppIcon
+								id={o.iconId as APP_ICON_ENUM}
+								emphasis={APP_COLOR_PALETTE_EMPHASIS.A10}
+								onPress={o.onPress}
+							/>
+						</Pressable>
+					))}
+				</View>
+			</View>
+		);
+	}
+
 	static WithBackNavigation({
 		onBack,
 		onNext,

diff --git a/apps/mobile/components/screens/home/SocialHub.tsx b/apps/mobile/components/screens/home/SocialHub.tsx
@@ -203,7 +203,11 @@ function SocialHubTab({ account }: SocialHubTabProps) {
 					style={{ marginTop: 8 }}
 					leftDecorator={
 						<View style={{ flexDirection: 'row', alignItems: 'center' }}>
-							<SocialHubAvatarCircle size={36} style={{ marginRight: 6 }} />
+							<SocialHubAvatarCircle
+								size={36}
+								style={{ marginRight: 6 }}
+								acct={account}
+							/>
 						</View>
 					}
 					index={Index}

diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -9,7 +9,7 @@
     "aab": "eas build -p android --profile aab",
     "client": "eas build -p android --profile dev",
     "lite": "react-native build-android --mode=release && cd android && ./gradlew assembleRelease",
-    "postins tall": "cd ../.. && yarn build"
+    "postinstall": "cd ../.. && yarn build"
   },
   "dependencies": {
     "@atproto/api": "^0.13.23",
@@ -20,6 +20,7 @@
     "@expo/metro-config": "~0.19.0",
     "@expo/vector-icons": "^14.0.4",
     "@huggingface/inference": "^2.8.1",
+    "@react-native-masked-view/masked-view": "0.3.2",
     "@rneui/base": "^4.0.0-rc.7",
     "@rneui/themed": "^4.0.0-rc.8",
     "@shopify/flash-list": "1.7.1",
@@ -37,7 +38,6 @@
     "expo-image-picker": "~16.0.3",
     "expo-linking": "~7.0.3",
     "expo-localization": "^16.0.0",
-    "expo-notifications": "~0.29.11",
     "expo-router": "~4.0.15",
     "expo-splash-screen": "~0.29.18",
     "expo-sqlite": "~15.0.5",
@@ -51,7 +51,6 @@
     "react": "18.3.1",
     "react-i18next": "^15.2.0",
     "react-native": "0.76.5",
-    "react-native-awesome-gallery": "^0.4.3",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-pager-view": "6.5.1",
     "react-native-reanimated": "~3.16.1",

diff --git a/apps/mobile/states/_global.ts b/apps/mobile/states/_global.ts
@@ -338,6 +338,7 @@ const useGlobalState = create<State & Actions>()(
 						get().db,
 						restoreResult.value.acct,
 					);
+					state.profileSessionManager = new ProfileSessionManager(get().db);
 					state.router = restoreResult.value.router;
 					state.driver = restoreResult.value.acct.driver as KNOWN_SOFTWARE;
 					state.publishers.postPub = new PostPublisherService(