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

Refactor Views by cleaning the code, relying on apolloCache and improving performances (#4516)

Browse Source 
* Wip refactoring view

* Post merge conflicts

* Fix review

* Add create view capability

* Fix create object missing view

* Fix tests
This commit is contained in:
Charles Bochet
2024-03-20 14:21:58 +01:00
committed by GitHub
parent 20e14cb455
commit cfb0cce9b8
392 changed files with 3474 additions and 4410 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx
View File

@ -30,13 +30,14 @@ const StyledInputContainer = styled.div`
export const DropdownMenuInput = forwardRef<
HTMLInputElement,
InputHTMLAttributes<HTMLInputElement>
>(({ autoFocus, defaultValue, placeholder }, ref) => {
>(({ autoFocus, defaultValue, placeholder, onChange }, ref) => {
return (
<StyledInputContainer>
<StyledInput
autoFocus={autoFocus}
defaultValue={defaultValue}
placeholder={placeholder}
onChange={onChange}
ref={ref}
/>
</StyledInputContainer>

2
packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useInternalHotkeyScopeManagement.test.tsx
View File

@ -27,7 +27,7 @@ describe('useInternalHotkeyScopeManagement', () => {
const { dropdownHotkeyScopeState } = useDropdownStates({
dropdownScopeId,
});
const dropdownHotkeyScope = useRecoilValue(dropdownHotkeyScopeState());
const dropdownHotkeyScope = useRecoilValue(dropdownHotkeyScopeState);
return { dropdownHotkeyScope };
},
{

10
packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts
View File

@ -20,14 +20,12 @@ export const useDropdown = (dropdownId?: string) => {
goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope();
const [dropdownHotkeyScope] = useRecoilState(dropdownHotkeyScopeState());
const [dropdownHotkeyScope] = useRecoilState(dropdownHotkeyScopeState);
const [dropdownWidth, setDropdownWidth] =
useRecoilState(dropdownWidthState());
const [dropdownWidth, setDropdownWidth] = useRecoilState(dropdownWidthState);
const [isDropdownOpen, setIsDropdownOpen] = useRecoilState(
isDropdownOpenState(),
);
const [isDropdownOpen, setIsDropdownOpen] =
useRecoilState(isDropdownOpenState);
const closeDropdown = () => {
goBackToPreviousHotkeyScope();

2
packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useInternalHotkeyScopeManagement.ts
View File

@ -15,7 +15,7 @@ export const useInternalHotkeyScopeManagement = ({
const { dropdownHotkeyScopeState } = useDropdownStates({ dropdownScopeId });
const [dropdownHotkeyScope, setDropdownHotkeyScope] = useRecoilState(
dropdownHotkeyScopeState(),
dropdownHotkeyScopeState,
);
useEffect(() => {

10
packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
View File

@ -42,12 +42,12 @@ const StyledRightDrawer = styled.div`
export const RightDrawer = () => {
const [isRightDrawerOpen, setIsRightDrawerOpen] = useRecoilState(
isRightDrawerOpenState(),
isRightDrawerOpenState,
);
const isRightDrawerExpanded = useRecoilValue(isRightDrawerExpandedState());
const isRightDrawerExpanded = useRecoilValue(isRightDrawerExpandedState);
const rightDrawerPage = useRecoilValue(rightDrawerPageState());
const rightDrawerPage = useRecoilValue(rightDrawerPageState);
const { closeRightDrawer } = useRightDrawer();
@ -63,11 +63,11 @@ export const RightDrawer = () => {
({ snapshot, set }) =>
(event) => {
const isRightDrawerOpen = snapshot
.getLoadable(isRightDrawerOpenState())
.getLoadable(isRightDrawerOpenState)
.getValue();
if (isRightDrawerOpen) {
set(rightDrawerCloseEventState(), event);
set(rightDrawerCloseEventState, event);
closeRightDrawer();
}
},

2
packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx
View File

@ -47,7 +47,7 @@ const RIGHT_DRAWER_PAGES_CONFIG = {
};
export const RightDrawerRouter = () => {
const [rightDrawerPage] = useRecoilState(rightDrawerPageState());
const [rightDrawerPage] = useRecoilState(rightDrawerPageState);
const { topBar = null, page = null } = rightDrawerPage
? RIGHT_DRAWER_PAGES_CONFIG[rightDrawerPage]

2
packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx
View File

@ -10,7 +10,7 @@ import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState
export const RightDrawerTopBarExpandButton = () => {
const [isRightDrawerExpanded, setIsRightDrawerExpanded] = useRecoilState(
isRightDrawerExpandedState(),
isRightDrawerExpandedState,
);
const handleButtonClick = () => {

8
packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/__tests__/useRightDrawer.test.tsx
View File

@ -12,12 +12,10 @@ describe('useRightDrawer', () => {
it('Should test the default behavior of useRightDrawer and change the states as the function calls', async () => {
const useCombinedHooks = () => {
const { openRightDrawer, closeRightDrawer } = useRightDrawer();
const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState());
const isRightDrawerExpanded = useRecoilValue(
isRightDrawerExpandedState(),
);
const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
const isRightDrawerExpanded = useRecoilValue(isRightDrawerExpandedState);
const rightDrawerPage = useRecoilValue(rightDrawerPageState());
const rightDrawerPage = useRecoilValue(rightDrawerPageState);
return {
openRightDrawer,

16
packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts
View File

@ -8,16 +8,16 @@ import { rightDrawerPageState } from '../states/rightDrawerPageState';
import { RightDrawerPages } from '../types/RightDrawerPages';
export const useRightDrawer = () => {
const [isRightDrawerOpen] = useRecoilState(isRightDrawerOpenState());
const [isRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
const [rightDrawerPage] = useRecoilState(rightDrawerPageState());
const [rightDrawerPage] = useRecoilState(rightDrawerPageState);
const openRightDrawer = useRecoilCallback(
({ set }) =>
(rightDrawerPage: RightDrawerPages) => {
set(rightDrawerPageState(), rightDrawerPage);
set(isRightDrawerExpandedState(), false);
set(isRightDrawerOpenState(), true);
set(rightDrawerPageState, rightDrawerPage);
set(isRightDrawerExpandedState, false);
set(isRightDrawerOpenState, true);
},
[],
);
@ -25,8 +25,8 @@ export const useRightDrawer = () => {
const closeRightDrawer = useRecoilCallback(
({ set }) =>
() => {
set(isRightDrawerExpandedState(), false);
set(isRightDrawerOpenState(), false);
set(isRightDrawerExpandedState, false);
set(isRightDrawerOpenState, false);
},
[],
);
@ -35,7 +35,7 @@ export const useRightDrawer = () => {
({ snapshot }) =>
(event: MouseEvent | TouchEvent) => {
const rightDrawerCloseEvent = snapshot
.getLoadable(rightDrawerCloseEventState())
.getLoadable(rightDrawerCloseEventState)
.getValue();
const isSameEvent =

7
packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/__tests__/useSelectableList.test.ts
View File

@ -21,7 +21,7 @@ describe('useSelectableList', () => {
selectableListScopeId,
});
const selectableItemIds = useRecoilValue(selectableItemIdsState());
const selectableItemIds = useRecoilValue(selectableItemIdsState);
return {
setSelectableItemIds,
@ -51,9 +51,8 @@ describe('useSelectableList', () => {
selectableListScopeId,
});
const [selectedItemId, setSelectedItemId] = useRecoilState(
selectedItemIdState(),
);
const [selectedItemId, setSelectedItemId] =
useRecoilState(selectedItemIdState);
return {
resetSelectedItem,

13
packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.tsx
View File

@ -40,13 +40,10 @@ export const useSelectableListHotKeys = (
const handleSelect = useRecoilCallback(
({ snapshot, set }) =>
(direction: Direction) => {
const selectedItemId = getSnapshotValue(
snapshot,
selectedItemIdState(),
);
const selectedItemId = getSnapshotValue(snapshot, selectedItemIdState);
const selectableItemIds = getSnapshotValue(
snapshot,
selectableItemIdsState(),
selectableItemIdsState,
);
const currentPosition = findPosition(selectableItemIds, selectedItemId);
@ -107,7 +104,7 @@ export const useSelectableListHotKeys = (
if (selectedItemId !== nextId) {
if (isNonEmptyString(nextId)) {
set(isSelectedItemIdSelector(nextId), true);
set(selectedItemIdState(), nextId);
set(selectedItemIdState, nextId);
}
if (isNonEmptyString(selectedItemId)) {
@ -138,11 +135,11 @@ export const useSelectableListHotKeys = (
() => {
const selectedItemId = getSnapshotValue(
snapshot,
selectedItemIdState(),
selectedItemIdState,
);
const onEnter = getSnapshotValue(
snapshot,
selectableListOnEnterState(),
selectableListOnEnterState,
);
if (isNonEmptyString(selectedItemId)) {

6
packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/useSelectableList.ts
View File

@ -13,12 +13,12 @@ export const useSelectableList = (selectableListId?: string) => {
selectableListScopeId: selectableListId,
});
const setSelectableItemIds = useSetRecoilState(selectableItemIdsState());
const setSelectableItemIds = useSetRecoilState(selectableItemIdsState);
const setSelectableListOnEnter = useSetRecoilState(
selectableListOnEnterState(),
selectableListOnEnterState,
);
const resetSelectedItemIdState = useResetRecoilState(selectedItemIdState());
const resetSelectedItemIdState = useResetRecoilState(selectedItemIdState);
const resetSelectedItem = () => {
resetSelectedItemIdState();

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

@ -26,7 +26,7 @@ export const ShowPageMoreButton = ({
objectNameSingular: string;
}) => {
const { closeDropdown, toggleDropdown } = useDropdown('more-show-page');
const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState());
const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState);
const navigate = useNavigate();
const { deleteOneRecord } = useDeleteOneRecord({

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

@ -61,8 +61,8 @@ export const ShowPageRightContainer = ({
notes,
emails,
}: ShowPageRightContainerProps) => {
const { getActiveTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
const activeTabId = useRecoilValue(getActiveTabIdState());
const { activeTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
const activeTabId = useRecoilValue(activeTabIdState);
const shouldDisplayCalendarTab = useIsFeatureEnabled('IS_CALENDAR_ENABLED');
const shouldDisplayEmailsTab =

4
packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
View File

@ -36,9 +36,9 @@ const StyledContainer = styled.div`
export const TabList = ({ tabs, tabListId }: TabListProps) => {
const initialActiveTabId = tabs[0].id;
const { getActiveTabIdState, setActiveTabId } = useTabList(tabListId);
const { activeTabIdState, setActiveTabId } = useTabList(tabListId);
const activeTabId = useRecoilValue(getActiveTabIdState());
const activeTabId = useRecoilValue(activeTabIdState);
React.useEffect(() => {
setActiveTabId(initialActiveTabId);

6
packages/twenty-front/src/modules/ui/layout/tab/hooks/__tests__/useTabList.test.tsx
View File

@ -8,12 +8,11 @@ describe('useTabList', () => {
it('Should update the activeTabId state', async () => {
const { result } = renderHook(
() => {
const { getActiveTabIdState, setActiveTabId } =
const { activeTabIdState, setActiveTabId } =
useTabList('TEST_TAB_LIST_ID');
const activeTabId = useRecoilValue(getActiveTabIdState());
const activeTabId = useRecoilValue(activeTabIdState);
return {
getActiveTabIdState: getActiveTabIdState,
activeTabId,
setActiveTabId: setActiveTabId,
};
@ -22,7 +21,6 @@ describe('useTabList', () => {
wrapper: RecoilRoot,
},
);
expect(result.current.getActiveTabIdState).toBeInstanceOf(Function);
expect(result.current.setActiveTabId).toBeInstanceOf(Function);
expect(result.current.activeTabId).toBeNull();

5
packages/twenty-front/src/modules/ui/layout/tab/hooks/internal/useTabListStates.ts
View File

@ -15,9 +15,6 @@ export const useTabListStates = ({ tabListScopeId }: useTabListStatesProps) => {
return {
scopeId,
getActiveTabIdState: extractComponentState(
activeTabIdComponentState,
scopeId,
),
activeTabIdState: extractComponentState(activeTabIdComponentState, scopeId),
};
};

6
packages/twenty-front/src/modules/ui/layout/tab/hooks/useTabList.ts
View File

@ -3,14 +3,14 @@ import { useSetRecoilState } from 'recoil';
import { useTabListStates } from '@/ui/layout/tab/hooks/internal/useTabListStates';
export const useTabList = (tabListId?: string) => {
const { getActiveTabIdState } = useTabListStates({
const { activeTabIdState } = useTabListStates({
tabListScopeId: `${tabListId}-scope`,
});
const setActiveTabId = useSetRecoilState(getActiveTabIdState());
const setActiveTabId = useSetRecoilState(activeTabIdState);
return {
getActiveTabIdState,
activeTabIdState,
setActiveTabId,
};
};