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

59
packages/twenty-front/src/modules/views/components/ViewsDropdownButton.tsx
View File

@ -1,7 +1,7 @@
import { MouseEvent } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilCallback, useRecoilValue } from 'recoil';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import {
IconChevronDown,
@ -20,10 +20,11 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { VIEWS_DROPDOWN_ID } from '@/views/constants/ViewsDropdownId';
import { useViewBar } from '@/views/hooks/useViewBar';
import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
import { useHandleViews } from '@/views/hooks/useHandleViews';
import { isDefined } from '~/utils/isDefined';
import { useViewScopedStates } from '../hooks/internal/useViewScopedStates';
import { useViewStates } from '../hooks/internal/useViewStates';
const StyledBoldDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
font-weight: ${({ theme }) => theme.font.weight.regular};
@ -65,18 +66,18 @@ export const ViewsDropdownButton = ({
optionsDropdownScopeId,
}: ViewsDropdownButtonProps) => {
const theme = useTheme();
const { removeView, changeViewInUrl } = useViewBar();
const { viewsState, currentViewSelector, entityCountInCurrentViewState } =
useViewScopedStates();
const { removeView, selectView } = useHandleViews();
const { entityCountInCurrentViewState, viewEditModeState } = useViewStates();
const { currentViewWithCombinedFiltersAndSorts, viewsOnCurrentObject } =
useGetCurrentView();
const views = useRecoilValue(viewsState);
const currentView = useRecoilValue(currentViewSelector);
const entityCountInCurrentView = useRecoilValue(
entityCountInCurrentViewState,
);
const { setViewEditMode, setCurrentViewId, loadView } = useViewBar();
const setViewEditMode = useSetRecoilState(viewEditModeState);
const {
isDropdownOpen: isViewsDropdownOpen,
@ -87,14 +88,10 @@ export const ViewsDropdownButton = ({
optionsDropdownScopeId,
);
const handleViewSelect = useRecoilCallback(
() => async (viewId: string) => {
changeViewInUrl(viewId);
loadView(viewId);
closeViewsDropdown();
},
[changeViewInUrl, closeViewsDropdown, loadView],
);
const handleViewSelect = (viewId: string) => {
selectView(viewId);
closeViewsDropdown();
};
const handleAddViewButtonClick = () => {
setViewEditMode('create');
@ -108,8 +105,7 @@ export const ViewsDropdownButton = ({
viewId: string,
) => {
event.stopPropagation();
changeViewInUrl(viewId);
setCurrentViewId(viewId);
selectView(viewId);
setViewEditMode('edit');
onViewEditModeChange?.();
closeViewsDropdown();
@ -123,11 +119,12 @@ export const ViewsDropdownButton = ({
event.stopPropagation();
await removeView(viewId);
selectView(viewsOnCurrentObject.filter((view) => view.id !== viewId)[0].id);
closeViewsDropdown();
};
const { getIcon } = useIcons();
const CurrentViewIcon = getIcon(currentView?.icon);
const CurrentViewIcon = getIcon(currentViewWithCombinedFiltersAndSorts?.icon);
return (
<Dropdown
@ -135,12 +132,14 @@ export const ViewsDropdownButton = ({
dropdownHotkeyScope={hotkeyScope}
clickableComponent={
<StyledDropdownButtonContainer isUnfolded={isViewsDropdownOpen}>
{currentView && CurrentViewIcon ? (
{currentViewWithCombinedFiltersAndSorts && CurrentViewIcon ? (
<CurrentViewIcon size={theme.icon.size.md} />
) : (
<IconList size={theme.icon.size.md} />
)}
<StyledViewName>{currentView?.name ?? 'All'}</StyledViewName>
<StyledViewName>
{currentViewWithCombinedFiltersAndSorts?.name ?? 'All'}
</StyledViewName>
<StyledDropdownLabelAdornments>
· {entityCountInCurrentView}{' '}
<IconChevronDown size={theme.icon.size.sm} />
@ -150,16 +149,18 @@ export const ViewsDropdownButton = ({
dropdownComponents={
<>
<DropdownMenuItemsContainer>
{views.map((view) => (
{viewsOnCurrentObject.map((view) => (
<MenuItem
key={view.id}
iconButtons={[
{
Icon: IconPencil,
onClick: (event: MouseEvent<HTMLButtonElement>) =>
handleEditViewButtonClick(event, view.id),
},
views.length > 1
currentViewWithCombinedFiltersAndSorts?.id === view.id
? {
Icon: IconPencil,
onClick: (event: MouseEvent<HTMLButtonElement>) =>
handleEditViewButtonClick(event, view.id),
}
: null,
viewsOnCurrentObject.length > 1
? {
Icon: IconTrash,
onClick: (event: MouseEvent<HTMLButtonElement>) =>