Active post modes

src/components/Tabber/Tabber.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition -- to avoid lint error that will be remove soon on a changhe of how the data will be dealed */
-import { ChangeEvent, ReactNode, useState } from 'react';
+import { ChangeEvent, ReactNode, useEffect, useState } from 'react';
 
+import { Account } from '~services/api/accounts/accounts.types';
 import { PostMode } from '~services/api/social-media/social-media.types';
+import { AccountPost, useAccountStore } from '~stores/useAccountStore';
 import { useSocialMediaStore } from '~stores/useSocialMediaStore/useSocialMediaStore';
 
 import { accountsToTabs } from './utils';
@@ -15,27 +17,49 @@ import Tabs from './Tabs/Tabs';
 
 import { Tab, TabId, Tabs as TabsType } from './Tabber.types';
 
+const makeId = (account: AccountPost): `${string}-${string}` =>
+  `${account.id}-${account.socialMediaId}`;
+
 function Tabber(): ReactNode {
-  const { accounts, socialMedias } = useSocialMediaStore();
+  const { accounts } = useAccountStore();
+  const { socialMedias } = useSocialMediaStore();
 
   const [currentTab, setCurrentTab] = useState<TabId>(
-    `${accounts.data?.[0]?.id}-${accounts.data?.[0]?.socialMediaId}`
-  );
-
-  const [tabs, setTabs] = useState<TabsType>(
-    accountsToTabs(accounts.data ?? [], socialMedias)
+    makeId(accounts[0] || {})
   );
-
-  const currentPostMode = socialMedias
-    .get(currentTab.split('-')[1])
-    ?.postModes.find(
-      (postMode: PostMode) => postMode.id === tabs[currentTab].postModeOnView
+  const [tabs, setTabs] = useState<TabsType>({});
+
+  useEffect(() => {
+    if (accounts.length > 0) {
+      const initialTabId = accounts.length > 0 ? makeId(accounts[0]) : '';
+      setCurrentTab(initialTabId as TabId);
+      setTabs(accountsToTabs(accounts, socialMedias));
+    } else {
+      setTabs({});
+      setCurrentTab('' as unknown as TabId);
+    }
+  }, [accounts, socialMedias]);
+
+  const getCurrentPostMode = (): PostMode | undefined => {
+    if (!currentTab) return;
+    const [, socialMediaId] = currentTab.split('-');
+    const socialMedia = socialMedias.get(socialMediaId);
+    if (!socialMedia) return;
+    const postModeOnView = tabs[currentTab]?.postModeOnView;
+    return socialMedia.postModes.find(
+      (postMode: PostMode) => postMode.id === postModeOnView
     );
+  };
+
+  const currentPostMode = getCurrentPostMode();
 
   const handleContentChange = (e: ChangeEvent<HTMLTextAreaElement>): void => {
+    if (!currentTab || !tabs[currentTab]) return;
     const tab = { ...tabs[currentTab] };
     const postId = tab.postModeOnView;
-    tab.posts[postId].text = e.target.value;
+    if (tab.posts[postId]) {
+      tab.posts[postId].text = e.target.value;
+    }
 
     setTabs({
       ...tabs,
@@ -48,6 +72,7 @@ function Tabber(): ReactNode {
   };
 
   const changePostMode = (postMode: PostMode): void => {
+    if (!currentTab || !tabs[currentTab]) return;
     const tab = { ...tabs[currentTab] };
     tab.postModeOnView = postMode.id;
 
@@ -61,6 +86,10 @@ function Tabber(): ReactNode {
     });
   };
 
+  if (!currentTab || !tabs[currentTab]) {
+    return <div>No tabs available</div>;
+  }
+
   return (
     <div>
       <Tabs
@@ -72,21 +101,22 @@ function Tabber(): ReactNode {
         <div className={scss.postModesContainer}>
           <PostModes
             currentPostModeId={tabs[currentTab].postModeOnView}
-            currentTab={tabs[currentTab].account}
+            currentTab={tabs[currentTab].account as Account}
             onChangePostMode={changePostMode}
           />
           <MainComposerBase
             accountId={tabs[currentTab].account.id.toString()}
             onChange={handleContentChange}
-            postMode={currentPostMode}
+            postMode={currentPostMode ?? undefined}
             value={
-              tabs[currentTab].posts[tabs[currentTab].postModeOnView].text ?? ''
+              tabs[currentTab].posts[tabs[currentTab].postModeOnView]?.text ??
+              ''
             }
           />
         </div>
         <div className={scss.previewContainer}>
           <Preview>
-            {tabs[currentTab].posts[tabs[currentTab].postModeOnView].text}
+            {tabs[currentTab].posts[tabs[currentTab].postModeOnView]?.text}
           </Preview>
         </div>
       </div>

src/components/Tabber/Tabber.types.ts

@@ -3,11 +3,12 @@ import {
   Post,
   SocialMedia,
 } from '~services/api/social-media/social-media.types';
+import { AccountPost } from '~stores/useAccountStore';
 
 export type TabId = `${Account['socialMediaId']}-${SocialMedia['id']}`;
 
 export type Tab = {
-  account: Account;
+  account: AccountPost;
   id: TabId;
   postModeOnView: SocialMedia['postModes'][number]['id'];
   posts: Record<SocialMedia['postModes'][number]['id'], Post['data']>;

src/components/Tabber/Tabs/Tabs.tsx

@@ -25,7 +25,7 @@ function Tabs(props: TabsProps): ReactNode {
       key={tabId}
       onClick={() => props.onChangeTab(tab, tabId)}
     >
-      {renderSocialMediaIcon(tab.account)}
+      {renderSocialMediaIcon(tab.account as Account)}
       <span className={scss.tabTitle}>{tab.account.userName}</span>
     </div>
   );

src/components/Tabber/utils.ts

@@ -1,24 +1,39 @@
-import { Account } from '~services/api/accounts/accounts.types';
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+// @ts-nocheck
+import { Account } from '~services/api/accounts/accounts.types';
 import { SocialMedia } from '~services/api/social-media/social-media.types';
+import { AccountPost } from '~stores/useAccountStore';
 import { SocialMediaState } from '~stores/useSocialMediaStore/useSocialMediaStore.types';
 
 import { Tab, TabId, Tabs } from './Tabber.types';
 
 export const getFirstPostModeId = (
   socialMedia: SocialMedia
-): SocialMedia['postModes'][number]['id'] => socialMedia.postModes[0].id;
+): SocialMedia['postModes'][number]['id'] => {
+  if (!socialMedia.postModes || socialMedia.postModes.length === 0) {
+    throw new Error('Invalid social media or no post modes available');
+  }
+  return socialMedia.postModes[0].id;
+};
 
-export const createTabId = (account: Account): TabId =>
-  `${account.id}-${account.socialMediaId}`;
+export const createTabId = (account: Account): TabId => {
+  if (!account) throw new Error('Account is required to create a TabId');
+  return `${account.id}-${account.socialMediaId}`;
+};
 
 export const accountsToTabs = (
-  accounts: Account[],
+  accounts: AccountPost[],
   socialMedias: SocialMediaState['socialMedias']
-): Record<TabId, Tab> =>
-  accounts.reduce<Tabs>((acc, account) => {
-    const tabId = createTabId(account);
+): Record<TabId, Tab> => {
+  if (!accounts || accounts.length === 0) {
+    return {};
+  }
+
+  return accounts.reduce<Tabs>((acc, account) => {
+    const tabId = createTabId(account as Account);
     const socialMedia = socialMedias.get(account.socialMediaId);
-    if (!socialMedia) throw new Error('No social media found');
+    if (!socialMedia) throw new Error('No social media found for the account');
 
     const postModeOnView = getFirstPostModeId(socialMedia);
 
@@ -33,3 +48,4 @@ export const accountsToTabs = (
 
     return acc;
   }, {});
+};

src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.spec.tsx

@@ -10,7 +10,7 @@ const mockList: StoreAccount[] = [
     avatar: 'https://example.com/avatar1.jpg',
     expiresAt: '2022-12-31T23:59:59Z',
     generatedAt: '2022-01-01T00:00:00Z',
-    id: 1,
+    id: '1',
     socialMediaId: 'social1',
     token: 'token1',
     userName: 'User 1',
@@ -20,7 +20,7 @@ const mockList: StoreAccount[] = [
     avatar: 'https://example.com/avatar2.jpg',
     expiresAt: '2023-12-31T23:59:59Z',
     generatedAt: '2023-01-01T00:00:00Z',
-    id: 2,
+    id: '2',
     socialMediaId: 'social2',
     token: 'token2',
     userName: 'User 2',

src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.stories.tsx

@@ -9,7 +9,7 @@ const accounts: SocialAccordionProps['accounts'] = [
     avatar: 'http://someurl.com',
     expiresAt: '2022-12-31T23:59:59Z',
     generatedAt: '2022-01-01T00:00:00Z',
-    id: 21_231,
+    id: '21_231',
     socialMediaId: '123',
     token: 'token1',
     userName: 'jhon doe',
@@ -19,7 +19,7 @@ const accounts: SocialAccordionProps['accounts'] = [
     avatar: 'http://someurl.com',
     expiresAt: '2022-12-31T23:59:59Z',
     generatedAt: '2022-01-01T00:00:00Z',
-    id: 1234,
+    id: '1234',
     socialMediaId: '456',
     token: 'token2',
     userName: 'joão da silva',

src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx

@@ -1,6 +1,8 @@
 import { ReactNode, useState } from 'react';
 
+import { useAccountStore } from '~stores/useAccountStore';
 import { useSocialMediaStore } from '~stores/useSocialMediaStore/useSocialMediaStore';
+import { StoreAccount } from '~stores/useSocialMediaStore/useSocialMediaStore.types';
 
 import Accordion from '~components/Accordion/Accordion';
 import { AccountCard } from '~components/AccountCard/AccountCard';
@@ -15,9 +17,15 @@ import { SocialAccordionProps } from './SocialAccordion.type';
 function SocialAccordion(props: SocialAccordionProps): ReactNode {
   const [isOpen, setIsOpen] = useState(false);
   const { socialMedias } = useSocialMediaStore();
+  const { addAccount, removeAccount } = useAccountStore();
 
   const handleOpenAccordion = (): void => setIsOpen((prev) => !prev);
 
+  const activateSocialTab = (enabled: boolean, account: StoreAccount): void => {
+    if (enabled) addAccount(account);
+    if (!enabled) removeAccount(account.id);
+  };
+
   const renderError = (): ReactNode => (
     <span className={scss.error}>error!!!!</span>
   );
@@ -28,6 +36,7 @@ function SocialAccordion(props: SocialAccordionProps): ReactNode {
         <AccountCard
           avatarURL={account.avatar}
           isEnabled={account.valid}
+          onEnableChange={(enable) => activateSocialTab(enable, account)}
           username={account.userName}
         />
       </li>

src/services/api/accounts/accounts.types.ts

@@ -2,7 +2,7 @@ export type Account = {
   avatar: string;
   expiresAt: string;
   generatedAt: string;
-  id: number;
+  id: string;
   socialMediaId: string;
   token: string;
   userName: string;

src/stores/useAccountStore.ts

@@ -0,0 +1,37 @@
+import { create } from './zustand';
+
+import { StoreAccount } from './useSocialMediaStore/useSocialMediaStore.types';
+
+export type AccountPost = Pick<
+  StoreAccount,
+  'id' | 'socialMediaId' | 'userName'
+>;
+
+type StoreState = {
+  accounts: AccountPost[];
+  addAccount: (account: StoreAccount) => void;
+  removeAccount: (accountId: string) => void;
+};
+
+export const useAccountStore = create<StoreState>((set) => ({
+  accounts: [],
+
+  addAccount: (account: StoreAccount): void => {
+    set((state) => ({
+      accounts: [
+        ...state.accounts,
+        {
+          id: account.id,
+          socialMediaId: account.socialMediaId,
+          userName: account.userName,
+        },
+      ],
+    }));
+  },
+
+  removeAccount: (accountId: string): void => {
+    set((state) => ({
+      accounts: state.accounts.filter((account) => account.id !== accountId),
+    }));
+  },
+}));