feat: change column visibility on add (#1174)

* feat: change column visibility on add

* refactor: extract views business logic from table

front/src/modules/ui/table/components/EntityTableHeader.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useState } from 'react';
-import { getOperationName } from '@apollo/client/utilities';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
@@ -11,21 +10,14 @@ import type {
 } from '@/ui/editable-field/types/ViewField';
 import { IconPlus } from '@/ui/icon';
 import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
-import { GET_VIEW_FIELDS } from '@/views/queries/select';
-import { currentViewIdState } from '@/views/states/currentViewIdState';
-import {
-  useCreateViewFieldMutation,
-  useUpdateViewFieldMutation,
-} from '~/generated/graphql';
 
-import { toViewFieldInput } from '../hooks/useLoadViewFields';
 import { resizeFieldOffsetState } from '../states/resizeFieldOffsetState';
 import {
-  addableViewFieldDefinitionsState,
-  columnWidthByViewFieldIdState,
-  viewFieldsState,
-  visibleViewFieldsState,
-} from '../states/viewFieldsState';
+  hiddenTableColumnsState,
+  tableColumnsByIdState,
+  tableColumnsState,
+  visibleTableColumnsState,
+} from '../states/tableColumnsState';
 
 import { ColumnHead } from './ColumnHead';
 import { EntityTableColumnMenu } from './EntityTableColumnMenu';
@@ -86,17 +78,18 @@ const StyledEntityTableColumnMenu = styled(EntityTableColumnMenu)`
   z-index: ${({ theme }) => theme.lastLayerZIndex};
 `;
 
-export function EntityTableHeader() {
+export type EntityTableHeaderProps = {
+  onColumnsChange?: (columns: ViewFieldDefinition<ViewFieldMetadata>[]) => void;
+};
+
+export function EntityTableHeader({ onColumnsChange }: EntityTableHeaderProps) {
   const theme = useTheme();
 
-  const [{ objectName }, setViewFieldsState] = useRecoilState(viewFieldsState);
-  const currentViewId = useRecoilValue(currentViewIdState);
-  const viewFields = useRecoilValue(visibleViewFieldsState);
-  const columnWidths = useRecoilValue(columnWidthByViewFieldIdState);
-  const addableViewFieldDefinitions = useRecoilValue(
-    addableViewFieldDefinitionsState,
-  );
+  const [columns, setColumns] = useRecoilState(tableColumnsState);
   const [offset, setOffset] = useRecoilState(resizeFieldOffsetState);
+  const columnsById = useRecoilValue(tableColumnsByIdState);
+  const hiddenColumns = useRecoilValue(hiddenTableColumnsState);
+  const visibleColumns = useRecoilValue(visibleTableColumnsState);
 
   const [initialPointerPositionX, setInitialPointerPositionX] = useState<
     number | null
@@ -104,9 +97,6 @@ export function EntityTableHeader() {
   const [resizedFieldId, setResizedFieldId] = useState<string | null>(null);
   const [isColumnMenuOpen, setIsColumnMenuOpen] = useState(false);
 
-  const [createViewFieldMutation] = useCreateViewFieldMutation();
-  const [updateViewFieldMutation] = useUpdateViewFieldMutation();
-
   const handleResizeHandlerStart = useCallback((positionX: number) => {
     setInitialPointerPositionX(positionX);
   }, []);
@@ -126,37 +116,28 @@ export function EntityTableHeader() {
 
         const nextWidth = Math.round(
           Math.max(
-            columnWidths[resizedFieldId] +
+            columnsById[resizedFieldId].columnSize +
               snapshot.getLoadable(resizeFieldOffsetState).valueOrThrow(),
             COLUMN_MIN_WIDTH,
           ),
         );
 
-        if (nextWidth !== columnWidths[resizedFieldId]) {
-          // Optimistic update to avoid "bouncing width" visual effect on resize.
-          setViewFieldsState((previousState) => ({
-            ...previousState,
-            viewFields: previousState.viewFields.map((viewField) =>
-              viewField.id === resizedFieldId
-                ? { ...viewField, columnSize: nextWidth }
-                : viewField,
-            ),
-          }));
+        if (nextWidth !== columnsById[resizedFieldId].columnSize) {
+          const nextColumns = columns.map((column) =>
+            column.id === resizedFieldId
+              ? { ...column, columnSize: nextWidth }
+              : column,
+          );
 
-          updateViewFieldMutation({
-            variables: {
-              data: { sizeInPx: nextWidth },
-              where: { id: resizedFieldId },
-            },
-            refetchQueries: [getOperationName(GET_VIEW_FIELDS) ?? ''],
-          });
+          setColumns(nextColumns);
+          onColumnsChange?.(nextColumns);
         }
 
         set(resizeFieldOffsetState, 0);
         setInitialPointerPositionX(null);
         setResizedFieldId(null);
       },
-    [resizedFieldId, columnWidths, setResizedFieldId],
+    [resizedFieldId, columnsById, setResizedFieldId],
   );
 
   useTrackPointer({
@@ -170,26 +151,18 @@ export function EntityTableHeader() {
     setIsColumnMenuOpen((previousValue) => !previousValue);
   }, []);
 
-  const handleAddViewField = useCallback(
-    (viewFieldDefinition: ViewFieldDefinition<ViewFieldMetadata>) => {
+  const handleAddColumn = useCallback(
+    (columnId: string) => {
       setIsColumnMenuOpen(false);
 
-      if (!objectName) return;
+      const nextColumns = columns.map((column) =>
+        column.id === columnId ? { ...column, isVisible: true } : column,
+      );
 
-      createViewFieldMutation({
-        variables: {
-          data: {
-            ...toViewFieldInput(objectName, {
-              ...viewFieldDefinition,
-              columnOrder: viewFields.length + 1,
-            }),
-            view: { connect: { id: currentViewId } },
-          },
-        },
-        refetchQueries: [getOperationName(GET_VIEW_FIELDS) ?? ''],
-      });
+      setColumns(nextColumns);
+      onColumnsChange?.(nextColumns);
     },
-    [createViewFieldMutation, currentViewId, objectName, viewFields.length],
+    [columns, onColumnsChange, setColumns],
   );
 
   return (
@@ -205,31 +178,31 @@ export function EntityTableHeader() {
           <SelectAllCheckbox />
         </th>
 
-        {viewFields.map((viewField) => (
+        {visibleColumns.map((column) => (
           <StyledColumnHeaderCell
-            key={viewField.id}
-            isResizing={resizedFieldId === viewField.id}
+            key={column.id}
+            isResizing={resizedFieldId === column.id}
             columnWidth={Math.max(
-              columnWidths[viewField.id] +
-                (resizedFieldId === viewField.id ? offset : 0),
+              columnsById[column.id].columnSize +
+                (resizedFieldId === column.id ? offset : 0),
               COLUMN_MIN_WIDTH,
             )}
           >
             <ColumnHead
-              viewName={viewField.columnLabel}
-              viewIcon={viewField.columnIcon}
+              viewName={column.columnLabel}
+              viewIcon={column.columnIcon}
             />
             <StyledResizeHandler
               className="cursor-col-resize"
               role="separator"
               onPointerDown={() => {
-                setResizedFieldId(viewField.id);
+                setResizedFieldId(column.id);
               }}
             />
           </StyledColumnHeaderCell>
         ))}
         <th>
-          {addableViewFieldDefinitions.length > 0 && (
+          {hiddenColumns.length > 0 && (
             <StyledAddIconButtonWrapper>
               <StyledAddIconButton
                 size="large"
@@ -238,9 +211,8 @@ export function EntityTableHeader() {
               />
               {isColumnMenuOpen && (
                 <StyledEntityTableColumnMenu
-                  onAddViewField={handleAddViewField}
+                  onAddColumn={handleAddColumn}
                   onClickOutside={toggleColumnMenu}
-                  viewFieldDefinitions={addableViewFieldDefinitions}
                 />
               )}
             </StyledAddIconButtonWrapper>