fix: pr comments

devhatt · Aug 19, 2024 · 9ec440a · 9ec440a
1 parent dfbf07b
commit 9ec440a
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 49 deletions.
diff --git a/src/components/AccountCard/AccountCard.tsx b/src/components/AccountCard/AccountCard.tsx
@@ -21,19 +21,17 @@ export function AccountCard({
   ...props
 }: AccountCardProps): ReactNode {
   const [enabled, setEnabled] = useState(isEnabled);
-  const [favorited, setFavorited] = useState(isFavorited);
 
   const handleFavoriteChange = (): void => {
-    setFavorited(!favorited);
-    onFavoriteChange?.(!favorited);
+    onFavoriteChange?.(!isFavorited);
   };
 
   const handleEnableChange = (): void => {
     setEnabled(!enabled);
     if (onEnableChange) onEnableChange(!enabled);
   };
 
-  const favoriteIcon = favorited ? 'star-filled' : 'star';
+  const favoriteIcon = isFavorited ? 'star-filled' : 'star';
 
   return (
     <div className={classNames(scss.container, className)} {...props}>

diff --git a/src/pages/home/components/Sidebar/Sidebar.components.tsx b/src/pages/home/components/Sidebar/Sidebar.components.tsx
@@ -9,24 +9,24 @@ import scss from './Sidebar.module.scss';
 import { FilteredAccountsProps } from './Sidebar.types';
 
 export function FilteredAccounts(props: FilteredAccountsProps): ReactNode {
-  const { accounts, socialMedias } = useSocialMediaStore();
+  const { socialMedias } = useSocialMediaStore();
+
+  const socialMediasSortered = props.socialMedia.sort((a, b) => {
+    if (a.socialMediaId === 'FAVORITE_ACCOUNTS') return -1;
+    if (b.socialMediaId === 'FAVORITE_ACCOUNTS') return 1;
+    return 0;
+  });
+
   return (
     <div className={scss.accordionContainer}>
-      <SocialAccordion
-        accounts={accounts.favorites}
-        error={false}
-        key="FavoriteAccounts"
-        socialMediaId="FavoriteAccounts"
-        title="Favorite Accounts"
-      />
-      {props.socialMedia.map(
+      {socialMediasSortered.map(
         ({ socialMediaAccounts, socialMediaId }): ReactNode => (
           <SocialAccordion
             accounts={socialMediaAccounts}
             error={false}
             key={socialMediaId}
             socialMediaId={socialMediaId}
-            title={socialMedias.get(socialMediaId)?.name}
+            title={socialMedias.get(socialMediaId)?.name as string}
           />
         )
       )}

diff --git a/src/pages/home/components/Sidebar/Sidebar.spec.tsx b/src/pages/home/components/Sidebar/Sidebar.spec.tsx
@@ -71,7 +71,6 @@ describe('Sidebar component', () => {
       accounts: {
         data: mockedAccounts().data,
         error: '',
-        favorites: mockedAccounts().favorites,
         loading: false,
       },
       addAccount: mockedAddAccount,
@@ -94,7 +93,6 @@ describe('Sidebar component', () => {
           TWITTER_EXAMPLE_ID: [],
         },
         error: '',
-        favorites: [],
         loading: false,
       },
       addAccount: mockedAddAccount,

diff --git a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.spec.tsx b/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.spec.tsx
@@ -40,7 +40,7 @@ describe('SocialAccordion', () => {
         accounts={mockDiscordData}
         error={false}
         socialMediaId={socialMediaId}
-        title={mockedSocialMedias().get(socialMediaId)?.name}
+        title={mockedSocialMedias().get(socialMediaId)?.name as string}
       />
     );
     const accordion = screen.getByText(/discord/i);
@@ -56,7 +56,7 @@ describe('SocialAccordion', () => {
         accounts={mockDiscordData}
         error={false}
         socialMediaId={socialMediaId}
-        title={mockedSocialMedias().get(socialMediaId)?.name}
+        title={mockedSocialMedias().get(socialMediaId)?.name as string}
       />
     );
 
@@ -76,7 +76,7 @@ describe('SocialAccordion', () => {
         accounts={[]}
         error
         socialMediaId={socialMediaId}
-        title={mockedSocialMedias().get(socialMediaId)?.name}
+        title={mockedSocialMedias().get(socialMediaId)?.name as string}
       />
     );
     const error = screen.getByText(/error/i);
@@ -93,7 +93,7 @@ describe('SocialAccordion', () => {
           accounts={mockDiscordData}
           error={false}
           socialMediaId={socialMediaId}
-          title={mockedSocialMedias().get(socialMediaId)?.name}
+          title={mockedSocialMedias().get(socialMediaId)?.name as string}
         />
       );
 
@@ -116,7 +116,7 @@ describe('SocialAccordion', () => {
           accounts={mockDiscordData}
           error={false}
           socialMediaId={socialMediaId}
-          title={mockedSocialMedias().get(socialMediaId)?.name}
+          title={mockedSocialMedias().get(socialMediaId)?.name as string}
         />
       );
 
@@ -143,7 +143,7 @@ describe('SocialAccordion', () => {
           accounts={mockedAccounts().data.DISCORD_EXAMPLE_ID}
           error={false}
           socialMediaId={socialMediaId}
-          title={mockedSocialMedias().get(socialMediaId)?.name}
+          title={mockedSocialMedias().get(socialMediaId)?.name as string}
         />
       );
 
@@ -171,7 +171,7 @@ describe('SocialAccordion', () => {
           accounts={[]}
           error={false}
           socialMediaId={socialMediaId}
-          title={mockedSocialMedias().get(socialMediaId)?.name}
+          title={mockedSocialMedias().get(socialMediaId)?.name as string}
         />
       );
       const accountQuantity = screen.getByText(/0/);
@@ -188,7 +188,7 @@ describe('SocialAccordion', () => {
           accounts={[account]}
           error={false}
           socialMediaId={socialMediaId}
-          title={mockedSocialMedias().get(socialMediaId)?.name}
+          title={mockedSocialMedias().get(socialMediaId)?.name as string}
         />
       );
 

diff --git a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.type.ts b/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.type.ts
@@ -7,7 +7,7 @@ export type SocialAccordionProps = {
   error: boolean;
   icon?: ReactElement;
   socialMediaId: string;
-  title: string | undefined;
+  title: string;
 };
 
 export type IAccountList = {

diff --git a/src/stores/__mocks__/useSocialMediaStore.mock.ts b/src/stores/__mocks__/useSocialMediaStore.mock.ts
@@ -98,10 +98,20 @@ export const mockedAccounts = vi.fn(() => ({
         userName: 'Twitter User 6',
         valid: false,
       },
+      {
+        avatar: 'https://example.com/image2.jpg',
+        expiresAt: '',
+        favorite: true,
+        generatedAt: '',
+        id: '7',
+        socialMediaId: 'TWITTER_EXAMPLE_ID',
+        token: 'TWITTER_EXAMPLE_TOKEN_7',
+        userName: 'Twitter User 7',
+        valid: false,
+      },
     ],
   },
   error: '',
-  favorites: mockedFavoriteAccounts,
   loading: false,
 }));
 

diff --git a/src/stores/useSocialMediaStore/useSocialMediaStore.ts b/src/stores/useSocialMediaStore/useSocialMediaStore.ts
@@ -1,4 +1,3 @@
-import isEmpty from 'lodash.isempty';
 import { create } from 'zustand';
 
 import { octopostApi } from '~services/api';
@@ -18,7 +17,6 @@ export const useSocialMediaStore = create<SocialMediaState>((set) => ({
   accounts: {
     data: {},
     error: '',
-    favorites: [],
     loading: false,
   },
 
@@ -51,8 +49,38 @@ export const useSocialMediaStore = create<SocialMediaState>((set) => ({
   favoriteAccount: async (
     accountId: Account['id'],
     favorite: boolean
-  ): Promise<Account | undefined> =>
-    AccountsService.favorite(accountId, favorite),
+  ): Promise<void> => {
+    const account = await AccountsService.favorite(accountId, favorite);
+
+    if (account?.id) {
+      const favoritedAccount: StoreAccount = {
+        ...account,
+        favorite,
+        valid: false,
+      };
+
+      set((state) => {
+        const currentFavoriteAccounts =
+          state.accounts.data.FAVORITE_ACCOUNTS ?? [];
+        const currentSocialMediaAccounts =
+          state.accounts.data[account.socialMediaId] ?? [];
+
+        return {
+          accounts: {
+            ...state.accounts,
+            data: {
+              ...state.accounts.data,
+              [account.socialMediaId]: [
+                favoritedAccount,
+                ...currentSocialMediaAccounts,
+              ],
+              FAVORITE_ACCOUNTS: [favoritedAccount, ...currentFavoriteAccounts],
+            },
+          },
+        };
+      });
+    }
+  },
 
   getAllAccounts: async (): Promise<void> => {
     set((state) => ({ accounts: { ...state.accounts, loading: true } }));
@@ -63,7 +91,6 @@ export const useSocialMediaStore = create<SocialMediaState>((set) => ({
     const accountsBySocialMedia: SocialMediaData = {
       data: {},
     };
-    let favoriteSocialMedias: StoreAccount[] = [];
 
     accountsBySocialMedia.data = fetchedAccounts.reduce(
       (agg, account) => ({
@@ -79,39 +106,39 @@ export const useSocialMediaStore = create<SocialMediaState>((set) => ({
       accountsBySocialMedia.data
     );
 
-    if (!isEmpty(accountsBySocialMedia.data)) {
-      favoriteSocialMedias = Object.values(accountsBySocialMedia.data)
-        .flat()
-        .filter(
-          (socialMedia): socialMedia is StoreAccount =>
-            socialMedia?.favorite === true
-        );
-    }
+    const favoriteAccounts = fetchedAccounts
+      .filter((account) => account.favorite)
+      .map((account) => ({
+        ...account,
+        socialMediaId: 'FAVORITE_ACCOUNTS',
+        valid: false,
+      }));
+
+    accountsBySocialMedia.data.FAVORITE_ACCOUNTS = favoriteAccounts;
 
     const fetchedSocialMedias =
       await SocialMediaService.fetch(userSocialMedias);
 
     const fetchedSocialMediasMap = new Map<SocialMedia['id'], SocialMedia>();
 
-    for (const socialMedia of fetchedSocialMedias) {
-      fetchedSocialMediasMap.set(socialMedia.id, socialMedia);
-    }
-
-    const favoriteAccounts = {
+    const favoriteSocialMedia = {
       icon: 'Icon',
       id: 'FAVORITE_ACCOUNTS',
-      name: 'favorite',
+      name: 'Favorite Accounts',
       postModes: [],
     };
 
-    fetchedSocialMediasMap.set('FAVORITE_ACCOUNTS', favoriteAccounts);
+    fetchedSocialMediasMap.set('FAVORITE_ACCOUNTS', favoriteSocialMedia);
+
+    for (const socialMedia of fetchedSocialMedias) {
+      fetchedSocialMediasMap.set(socialMedia.id, socialMedia);
+    }
 
     set(() => ({ socialMedias: fetchedSocialMediasMap }));
     set(() => ({
       accounts: {
         data: accountsBySocialMedia.data,
         error: '',
-        favorites: favoriteSocialMedias,
         loading: false,
       },
     }));

diff --git a/src/stores/useSocialMediaStore/useSocialMediaStore.types.ts b/src/stores/useSocialMediaStore/useSocialMediaStore.types.ts
@@ -9,15 +9,14 @@ export type SocialMediaState = {
   accounts: {
     data: Record<string, StoreAccount[] | null>;
     error: string;
-    favorites: StoreAccount[];
     loading: boolean;
   };
   addAccount: (newAccount: NewAccount) => Promise<StoreAccount>;
 
   favoriteAccount: (
     accountId: Account['id'],
     favorite: boolean
-  ) => Promise<Account | undefined>;
+  ) => Promise<void>;
 
   getAllAccounts: () => Promise<void>;