fix: dynamic tabs (#1058)

xgeekshq · Feb 9, 2023 · e52bc78 · e52bc78
1 parent 0a937e4
commit e52bc78
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 42 deletions.
diff --git a/frontend/src/components/CreateBoard/RegularBoard/SettingsTabs/index.tsx b/frontend/src/components/CreateBoard/RegularBoard/SettingsTabs/index.tsx
@@ -5,15 +5,23 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { ToastStateEnum } from '@/utils/enums/toast-types';
 import { toastState } from '@/store/toast/atom/toast.atom';
 import Text from '@/components/Primitives/Text';
-import Tab, { TabContent } from '@/components/Primitives/Tab';
+import Tab, { TabList } from '@/components/Primitives/Tab';
 import { createBoardError } from '@/store/createBoard/atoms/create-board.atom';
 import ParticipantsTab from '../ParticipantsTab';
 import BoardConfigurations from '../../Configurations/BoardConfigurations';
 
 const SettingsTabs = () => {
-  const tabList = [
-    { value: 'participants', text: 'Participants' },
-    { value: 'config', text: 'Configurations' },
+  const tabList: TabList[] = [
+    {
+      value: 'participants',
+      label: 'Participants',
+      content: <ParticipantsTab />,
+    },
+    {
+      value: 'config',
+      label: 'Configurations',
+      content: <BoardConfigurations isRegularBoard />,
+    },
   ];
   const initialTabValue = tabList[0].value;
 
@@ -59,14 +67,7 @@ const SettingsTabs = () => {
         defaultValue={initialTabValue}
         activeValue={activeTab}
         onChangeActiveValue={handleTabChange}
-      >
-        <TabContent value="participants">
-          <ParticipantsTab />
-        </TabContent>
-        <TabContent value="config">
-          <BoardConfigurations isRegularBoard />
-        </TabContent>
-      </Tab>
+      />
     </>
   );
 };

diff --git a/frontend/src/components/CreateBoard/SplitBoard/SettingsTabs.tsx b/frontend/src/components/CreateBoard/SplitBoard/SettingsTabs.tsx
@@ -5,21 +5,13 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { ToastStateEnum } from '@/utils/enums/toast-types';
 import { toastState } from '@/store/toast/atom/toast.atom';
 import Text from '@/components/Primitives/Text';
-import Tab, { TabContent } from '@/components/Primitives/Tab';
+import Tab, { TabList } from '@/components/Primitives/Tab';
 import { usePrevious } from '@/utils/previousState';
 import { createBoardError, createBoardTeam } from '@/store/createBoard/atoms/create-board.atom';
 import TeamSubTeamsConfigurations from './SubTeamsTab/TeamSubTeamsConfigurations';
 import BoardConfigurations from '../Configurations/BoardConfigurations';
 
 const Settings = () => {
-  const tabList = [
-    { value: 'teams', text: 'Team/Sub-teams configurations' },
-    { value: 'config', text: 'Configurations' },
-  ];
-  const initialTabValue = tabList[0].value;
-
-  const [activeTab, setActiveTab] = useState(initialTabValue);
-
   /**
    * Recoil Atoms
    */
@@ -29,6 +21,22 @@ const Settings = () => {
   const selectedTeam = useRecoilValue(createBoardTeam);
   const prevTeam = usePrevious(selectedTeam?.id);
 
+  const tabList: TabList[] = [
+    {
+      value: 'teams',
+      label: 'Team/Sub-teams configurations',
+      content: <TeamSubTeamsConfigurations previousTeam={prevTeam} />,
+    },
+    {
+      value: 'config',
+      label: 'Configurations',
+      content: <BoardConfigurations />,
+    },
+  ];
+  const initialTabValue = tabList[0].value;
+
+  const [activeTab, setActiveTab] = useState(initialTabValue);
+
   const {
     formState: { errors },
   } = useFormContext();
@@ -63,14 +71,7 @@ const Settings = () => {
         defaultValue={initialTabValue}
         activeValue={activeTab}
         onChangeActiveValue={handleTabChange}
-      >
-        <TabContent value="teams">
-          <TeamSubTeamsConfigurations previousTeam={prevTeam} />
-        </TabContent>
-        <TabContent value="config">
-          <BoardConfigurations />
-        </TabContent>
-      </Tab>
+      />
     </>
   );
 };

diff --git a/frontend/src/components/Primitives/Tab.tsx b/frontend/src/components/Primitives/Tab.tsx
@@ -2,6 +2,7 @@ import * as Tabs from '@radix-ui/react-tabs';
 
 import { styled } from '@/styles/stitches/stitches.config';
 
+import { ReactNode } from 'react';
 import Flex from './Flex';
 import Text from './Text';
 
@@ -29,9 +30,10 @@ const StyledTabsTrigger = styled(Tabs.Trigger, Text, {
   },
 });
 
-type TabList = {
+export type TabList = {
   value: string;
-  text: string;
+  label: string;
+  content: ReactNode;
 };
 
 type TabType = {
@@ -62,16 +64,20 @@ const Tab: React.FC<TabProps> = ({
       <StyledTabsList>
         {tabList.map((tab) => (
           <StyledTabsTrigger value={tab.value} key={tab.value}>
-            {tab.text}
+            {tab.label}
           </StyledTabsTrigger>
         ))}
       </StyledTabsList>
       <Flex direction="column" css={{ mt: '$24' }}>
+        {tabList.map((tab) => (
+          <Tabs.Content value={tab.value} key={tab.value}>
+            {tab.content}
+          </Tabs.Content>
+        ))}
         {children}
       </Flex>
     </StyledTabsRoot>
   );
 };
 
 export default Tab;
-export const TabContent = Tabs.Content;
diff --git a/frontend/src/stories/Tab.stories.tsx b/frontend/src/stories/Tab.stories.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { ComponentStory } from '@storybook/react';
 
-import Tab, { TabContent } from '@/components/Primitives/Tab';
+import Tab from '@/components/Primitives/Tab';
+import Flex from '@/components/Primitives/Flex';
 
 export default {
   title: 'Primitives/Tab',
@@ -15,8 +16,16 @@ export default {
   },
   args: {
     tabList: [
-      { value: 'participants', text: 'Participants' },
-      { value: 'config', text: 'Configurations' },
+      {
+        value: 'participants',
+        label: 'Participants',
+        content: <Flex>Participants Tab Content</Flex>,
+      },
+      {
+        value: 'config',
+        label: 'Configurations',
+        content: <Flex>Config Tab Content</Flex>,
+      },
     ],
     defaultValue: 'config',
   },
@@ -37,12 +46,7 @@ export default {
   },
 };
 
-const Template: ComponentStory<typeof Tab> = ({ ...args }) => (
-  <Tab {...args}>
-    <TabContent value="participants">Content For Tab 1</TabContent>
-    <TabContent value="config">Content For Tab 2</TabContent>
-  </Tab>
-);
+const Template: ComponentStory<typeof Tab> = ({ ...args }) => <Tab {...args} />;
 
 export const Default = Template.bind({});
 Default.storyName = 'Basic Usage';