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/EntityTableColumnMenu.tsx

@@ -1,6 +1,7 @@
 import { cloneElement, ComponentProps, useRef } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
 
 import { IconButton } from '@/ui/button/components/IconButton';
 import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
@@ -9,32 +10,27 @@ import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMen
 import { IconPlus } from '@/ui/icon';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
-import type {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '../../editable-field/types/ViewField';
+import { hiddenTableColumnsState } from '../states/tableColumnsState';
 
 const StyledColumnMenu = styled(DropdownMenu)`
   font-weight: ${({ theme }) => theme.font.weight.regular};
 `;
 
 type EntityTableColumnMenuProps = {
-  onAddViewField: (
-    viewFieldDefinition: ViewFieldDefinition<ViewFieldMetadata>,
-  ) => void;
+  onAddColumn: (columnId: string) => void;
   onClickOutside?: () => void;
-  viewFieldDefinitions: ViewFieldDefinition<ViewFieldMetadata>[];
 } & ComponentProps<'div'>;
 
 export const EntityTableColumnMenu = ({
-  onAddViewField,
+  onAddColumn,
   onClickOutside = () => undefined,
-  viewFieldDefinitions,
   ...props
 }: EntityTableColumnMenuProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const theme = useTheme();
 
+  const hiddenColumns = useRecoilValue(hiddenTableColumnsState);
+
   useListenClickOutside({
     refs: [ref],
     callback: onClickOutside,
@@ -43,21 +39,21 @@ export const EntityTableColumnMenu = ({
   return (
     <StyledColumnMenu {...props} ref={ref}>
       <DropdownMenuItemsContainer>
-        {viewFieldDefinitions.map((viewFieldDefinition) => (
+        {hiddenColumns.map((column) => (
           <DropdownMenuItem
-            key={viewFieldDefinition.id}
+            key={column.id}
             actions={
               <IconButton
                 icon={<IconPlus size={theme.icon.size.sm} />}
-                onClick={() => onAddViewField(viewFieldDefinition)}
+                onClick={() => onAddColumn(column.id)}
               />
             }
           >
-            {viewFieldDefinition.columnIcon &&
-              cloneElement(viewFieldDefinition.columnIcon, {
+            {column.columnIcon &&
+              cloneElement(column.columnIcon, {
                 size: theme.icon.size.md,
               })}
-            {viewFieldDefinition.columnLabel}
+            {column.columnLabel}
           </DropdownMenuItem>
         ))}
       </DropdownMenuItemsContainer>