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

* Wip refactoring view

* Post merge conflicts

* Fix review

* Add create view capability

* Fix create object missing view

* Fix tests

packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBar.tsx

@@ -28,8 +28,8 @@ const StyledContainerActionBar = styled.div`
 `;
 
 export const ActionBar = () => {
-  const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState());
-  const actionBarEntries = useRecoilValue(actionBarEntriesState());
+  const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState);
+  const actionBarEntries = useRecoilValue(actionBarEntriesState);
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   if (contextMenuIsOpen) {

packages/twenty-front/src/modules/ui/navigation/action-bar/components/__stories__/ActionBar.stories.tsx

@@ -9,7 +9,7 @@ import { actionBarOpenState } from '../../states/actionBarIsOpenState';
 import { ActionBar } from '../ActionBar';
 
 const FilledActionBar = () => {
-  const setActionBarOpenState = useSetRecoilState(actionBarOpenState());
+  const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
   setActionBarOpenState(true);
   return <ActionBar />;
 };

packages/twenty-front/src/modules/ui/navigation/context-menu/components/ContextMenu.tsx

@@ -37,10 +37,10 @@ const StyledContainerContextMenu = styled.div<StyledContainerProps>`
 `;
 
 export const ContextMenu = () => {
-  const contextMenuPosition = useRecoilValue(contextMenuPositionState());
-  const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState());
-  const contextMenuEntries = useRecoilValue(contextMenuEntriesState());
-  const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState());
+  const contextMenuPosition = useRecoilValue(contextMenuPositionState);
+  const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState);
+  const contextMenuEntries = useRecoilValue(contextMenuEntriesState);
+  const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   useListenClickOutside({

packages/twenty-front/src/modules/ui/navigation/context-menu/components/__stories__/ContextMenu.stories.tsx

@@ -10,12 +10,12 @@ import { contextMenuPositionState } from '../../states/contextMenuPositionState'
 import { ContextMenu } from '../ContextMenu';
 
 const FilledContextMenu = () => {
-  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState());
+  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
   setContextMenuPosition({
     x: 100,
     y: 10,
   });
-  const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState());
+  const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
   setContextMenuOpenState(true);
   return <ContextMenu />;
 };

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx

@@ -24,12 +24,8 @@ export const MenuItemToggle = ({
   onToggleChange,
   toggleSize,
 }: MenuItemToggleProps) => {
-  const handleOnClick = () => {
-    onToggleChange?.(!toggled);
-  };
-
   return (
-    <StyledMenuItemBase className={className} onClick={handleOnClick}>
+    <StyledMenuItemBase className={className}>
       <MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
       <StyledMenuItemRightContent>
         <Toggle

packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx

@@ -107,11 +107,13 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
     pointer-events: none;
     position: fixed;
     right: ${({ theme }) => theme.spacing(2)};
+    opacity: 0;
     transition: opacity ${({ theme }) => theme.animation.duration.instant}s ease;
   }
 
   &:hover {
     & .hoverable-buttons {
+      opacity: 1;
       pointer-events: auto;
       position: static;
     }

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx

@@ -37,7 +37,7 @@ export const NavigationDrawerBackButton = ({
 }: NavigationDrawerBackButtonProps) => {
   const theme = useTheme();
   const navigate = useNavigate();
-  const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState());
+  const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState);
 
   return (
     <StyledContainer>

packages/twenty-front/src/modules/ui/navigation/step-bar/hooks/__tests__/useStepBar.test.tsx

@@ -11,7 +11,7 @@ const renderHooks = (initialStep: number) => {
       const { nextStep, prevStep, reset, setStep } = useStepBar({
         initialStep,
       });
-      const stepBarInternal = useRecoilValue(stepBarInternalState());
+      const stepBarInternal = useRecoilValue(stepBarInternalState);
 
       return {
         nextStep,

packages/twenty-front/src/modules/ui/navigation/step-bar/hooks/useStepBar.ts

@@ -8,9 +8,8 @@ export type StepsOptions = {
 };
 
 export const useStepBar = ({ initialStep }: StepsOptions) => {
-  const [stepBarInternal, setStepBarInternal] = useRecoilState(
-    stepBarInternalState(),
-  );
+  const [stepBarInternal, setStepBarInternal] =
+    useRecoilState(stepBarInternalState);
 
   const nextStep = () => {
     setStepBarInternal((prevState) => ({