feat(edit-profile): profile media uploads - [CU-869atccd6] (#78)

Co-authored-by: Youssef Noser <121557650+Exo1i@users.noreply.github.com>

Author: HelanaNady

src/__tests__/components/ui/sidebar/SidebarAccountSection.test.tsx

@@ -1,23 +1,19 @@
 import { fireEvent, render } from '@testing-library/react-native';
 
 import SidebarAccountSection from '@/components/sidebar/SidebarAccountSection';
+import { useSessionStore } from '@/stores/sessionStore';
 
 import type { AccountSession } from '@/stores/sessionStore';
 
 jest.mock('@/hooks/useTheme', () => ({
   useTheme: () => ({ theme: 'light' }),
 }));
 
-describe('SidebarAccountSection', () => {
-  const mockCurrentAccount: AccountSession = {
-    id: '1',
-    username: 'johndoe',
-    displayName: 'John Doe',
-    avatarUrl: 'https://example.com/avatar.jpg',
-    tokens: { accessToken: 'token123', refreshToken: 'refresh123' },
-    lastUsedAt: Date.now(),
-  };
+jest.mock('@/stores/sessionStore', () => ({
+  useSessionStore: jest.fn(),
+}));
 
+describe('SidebarAccountSection', () => {
   const mockOtherAccounts: AccountSession[] = [
     {
       id: '1',
@@ -55,15 +51,18 @@ describe('SidebarAccountSection', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    // Setup the store mock
+    (useSessionStore as unknown as jest.Mock).mockReturnValue({
+      accounts: mockOtherAccounts,
+      activeAccountId: '1',
+    });
   });
 
   it('renders current account information', () => {
     const { getByText } = render(
       <SidebarAccountSection
-        currentAccount={mockCurrentAccount}
         userStats={mockUserStats}
         otherAccounts={mockOtherAccounts}
-        activeAccountId="1"
         onAvatarPress={mockOnAvatarPress}
         onMorePress={mockOnMorePress}
       />
@@ -76,10 +75,8 @@ describe('SidebarAccountSection', () => {
   it('renders follower and following stats', () => {
     const { getByText } = render(
       <SidebarAccountSection
-        currentAccount={mockCurrentAccount}
         userStats={mockUserStats}
         otherAccounts={mockOtherAccounts}
-        activeAccountId="1"
         onAvatarPress={mockOnAvatarPress}
         onMorePress={mockOnMorePress}
       />
@@ -99,10 +96,8 @@ describe('SidebarAccountSection', () => {
 
     const { getByText } = render(
       <SidebarAccountSection
-        currentAccount={mockCurrentAccount}
         userStats={largeStats}
         otherAccounts={mockOtherAccounts}
-        activeAccountId="1"
         onAvatarPress={mockOnAvatarPress}
         onMorePress={mockOnMorePress}
       />
@@ -115,10 +110,8 @@ describe('SidebarAccountSection', () => {
   it('renders up to 3 account avatars', () => {
     const { getByTestId } = render(
       <SidebarAccountSection
-        currentAccount={mockCurrentAccount}
         userStats={mockUserStats}
         otherAccounts={mockOtherAccounts}
-        activeAccountId="1"
         onAvatarPress={mockOnAvatarPress}
         onMorePress={mockOnMorePress}
       />
@@ -132,10 +125,8 @@ describe('SidebarAccountSection', () => {
   it('calls onAvatarPress when avatar is pressed', () => {
     const { getByTestId } = render(
       <SidebarAccountSection
-        currentAccount={mockCurrentAccount}
         userStats={mockUserStats}
         otherAccounts={mockOtherAccounts}
-        activeAccountId="1"
         onAvatarPress={mockOnAvatarPress}
         onMorePress={mockOnMorePress}
       />
@@ -148,10 +139,8 @@ describe('SidebarAccountSection', () => {
   it('calls onMorePress when more button is pressed', () => {
     const { getByTestId } = render(
       <SidebarAccountSection
-        currentAccount={mockCurrentAccount}
         userStats={mockUserStats}
         otherAccounts={mockOtherAccounts}
-        activeAccountId="1"
         onAvatarPress={mockOnAvatarPress}
         onMorePress={mockOnMorePress}
       />
@@ -164,10 +153,8 @@ describe('SidebarAccountSection', () => {
   it('does not render stats when userStats is null', () => {
     const { queryByText } = render(
       <SidebarAccountSection
-        currentAccount={mockCurrentAccount}
         userStats={null}
         otherAccounts={mockOtherAccounts}
-        activeAccountId="1"
         onAvatarPress={mockOnAvatarPress}
         onMorePress={mockOnMorePress}
       />
@@ -178,12 +165,15 @@ describe('SidebarAccountSection', () => {
   });
 
   it('renders correctly when currentAccount is null', () => {
+    (useSessionStore as unknown as jest.Mock).mockReturnValue({
+      accounts: mockOtherAccounts,
+      activeAccountId: null,
+    });
+
     const { queryByText } = render(
       <SidebarAccountSection
-        currentAccount={null}
         userStats={null}
         otherAccounts={mockOtherAccounts}
-        activeAccountId={null}
         onAvatarPress={mockOnAvatarPress}
         onMorePress={mockOnMorePress}
       />
@@ -196,10 +186,8 @@ describe('SidebarAccountSection', () => {
   it('has proper accessibility attributes', () => {
     const { getByTestId } = render(
       <SidebarAccountSection
-        currentAccount={mockCurrentAccount}
         userStats={mockUserStats}
         otherAccounts={mockOtherAccounts}
-        activeAccountId="1"
         onAvatarPress={mockOnAvatarPress}
         onMorePress={mockOnMorePress}
       />

src/components/sidebar/SidebarAccountSection.tsx

@@ -6,7 +6,7 @@ import { Feather } from '@expo/vector-icons';
 
 import AccountAvatarButton from '@/components/ui/AccountAvatarButton';
 import { useTheme } from '@/hooks/useTheme';
-import { type AccountSession } from '@/stores/sessionStore';
+import { useSessionStore, type AccountSession } from '@/stores/sessionStore';
 import { colors } from '@/utils/colorTheme';
 import { formatCount } from '@/utils/formatCount';
 
@@ -16,26 +16,20 @@ interface UserStats {
 }
 
 interface SidebarAccountSectionProps {
-  currentAccount: AccountSession | null;
   userStats: UserStats | null;
   otherAccounts: AccountSession[];
-  activeAccountId: string | null;
   onAvatarPress: (accountId: string) => void;
   onMorePress: () => void;
 }
 
 const SidebarAccountSection = memo(
-  ({
-    currentAccount,
-    userStats,
-    otherAccounts,
-    activeAccountId,
-    onAvatarPress,
-    onMorePress,
-  }: SidebarAccountSectionProps) => {
+  ({ userStats, otherAccounts, onAvatarPress, onMorePress }: SidebarAccountSectionProps) => {
     const { theme } = useTheme();
     const currentColors = colors[theme];
 
+    const { accounts, activeAccountId } = useSessionStore();
+    const currentAccount = accounts.find((a) => a.id === activeAccountId) || null;
+
     return (
       <View
         style={[

src/navigation/app/CustomDrawerContent.tsx

@@ -103,10 +103,8 @@ export default function CustomDrawerContent(props: DrawerContentComponentProps)
       style={{ backgroundColor: currentColors.background }}
     >
       <SidebarAccountSection
-        currentAccount={activeAccount}
         userStats={userStats}
         otherAccounts={accounts}
-        activeAccountId={activeAccountId}
         onAvatarPress={handleAvatarPress}
         onMorePress={openAccountSwitcher}
       />