admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Migrate tab list to scope map (#3333)

Browse Source 
* Migrate tab list to scope map

* Return state to hook and let client subscribe to state

* Run prettier

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
This commit is contained in:
Thomas Trompette
2024-01-09 17:01:27 +01:00
committed by GitHub
parent 8d2758ee5e
commit ebf7688e3d
11 changed files with 108 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
View File

@ -15,12 +15,11 @@ import {
IconTimelineEvent,
} from '@/ui/display/icon';
import { TabList } from '@/ui/layout/tab/components/TabList';
import { activeTabIdScopedState } from '@/ui/layout/tab/states/activeTabIdScopedState';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { ShowPageRecoilScopeContext } from '../../states/ShowPageRecoilScopeContext';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import { useRecoilValue } from 'recoil';
const StyledShowPageRightContainer = styled.div`
display: flex;
@ -40,6 +39,8 @@ const StyledTabListContainer = styled.div`
height: 40px;
`;
const TAB_LIST_COMPONENT_ID = 'show-page-right-tab-list';
type ShowPageRightContainerProps = {
targetableObject?: ActivityTargetableObject;
timeline?: boolean;
@ -56,10 +57,9 @@ export const ShowPageRightContainer = ({
emails,
}: ShowPageRightContainerProps) => {
const isMessagingEnabled = useIsFeatureEnabled('IS_MESSAGING_ENABLED');
const [activeTabId] = useRecoilScopedState(
activeTabIdScopedState,
ShowPageRecoilScopeContext,
);
const { activeTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
const activeTabId = useRecoilValue(activeTabIdState);
if (!targetableObject) return <></>;
@ -105,7 +105,7 @@ export const ShowPageRightContainer = ({
return (
<StyledShowPageRightContainer>
<StyledTabListContainer>
<TabList context={ShowPageRecoilScopeContext} tabs={TASK_TABS} />
<TabList tabListId={TAB_LIST_COMPONENT_ID} tabs={TASK_TABS} />
</StyledTabListContainer>
{activeTabId === 'timeline' && (
<Timeline targetableObject={targetableObject} />