feat: persist resized column widths (#1017)

* feat: persist resized column widths

Closes #981

* test: mock company and person view fields

front/src/modules/ui/table/hooks/useLoadView.ts

@@ -0,0 +1,81 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { useSetRecoilState } from 'recoil';
+
+import { GET_VIEW_FIELDS } from '@/views/queries/select';
+import {
+  SortOrder,
+  useCreateViewFieldsMutation,
+  useGetViewFieldsQuery,
+} from '~/generated/graphql';
+
+import { entityTableDimensionsState } from '../states/entityTableDimensionsState';
+import { viewFieldsFamilyState } from '../states/viewFieldsState';
+import {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+  ViewFieldTextMetadata,
+} from '../types/ViewField';
+
+const DEFAULT_VIEW_FIELD_METADATA: ViewFieldTextMetadata = {
+  type: 'text',
+  placeHolder: '',
+  fieldName: '',
+};
+
+export const useLoadView = ({
+  objectName,
+  viewFieldDefinitions,
+}: {
+  objectName: 'company' | 'person';
+  viewFieldDefinitions: ViewFieldDefinition<ViewFieldMetadata>[];
+}) => {
+  const setEntityTableDimensions = useSetRecoilState(
+    entityTableDimensionsState,
+  );
+  const setViewFields = useSetRecoilState(viewFieldsFamilyState);
+
+  const [createViewFieldsMutation] = useCreateViewFieldsMutation();
+
+  useGetViewFieldsQuery({
+    variables: {
+      orderBy: { index: SortOrder.Asc },
+      where: { objectName: { equals: objectName } },
+    },
+    onCompleted: (data) => {
+      if (data.viewFields.length) {
+        setViewFields(
+          data.viewFields.map<ViewFieldDefinition<ViewFieldMetadata>>(
+            (viewField) => ({
+              ...(viewFieldDefinitions.find(
+                ({ columnLabel }) => viewField.fieldName === columnLabel,
+              ) || { metadata: DEFAULT_VIEW_FIELD_METADATA }),
+              id: viewField.id,
+              columnLabel: viewField.fieldName,
+              columnOrder: viewField.index,
+              columnSize: viewField.sizeInPx,
+            }),
+          ),
+        );
+        setEntityTableDimensions((prevState) => ({
+          ...prevState,
+          numberOfColumns: data.viewFields.length,
+        }));
+        return;
+      }
+
+      // Populate if empty
+      createViewFieldsMutation({
+        variables: {
+          data: viewFieldDefinitions.map((viewFieldDefinition) => ({
+            fieldName: viewFieldDefinition.columnLabel,
+            index: viewFieldDefinition.columnOrder,
+            isVisible: true,
+            objectName,
+            sizeInPx: viewFieldDefinition.columnSize,
+          })),
+        },
+        refetchQueries: [getOperationName(GET_VIEW_FIELDS) ?? ''],
+      });
+    },
+  });
+};

front/src/modules/ui/table/hooks/useSetEntityTableData.ts

@@ -8,11 +8,6 @@ import { isFetchingEntityTableDataState } from '@/ui/table/states/isFetchingEnti
 import { TableContext } from '@/ui/table/states/TableContext';
 import { tableEntitiesFamilyState } from '@/ui/table/states/tableEntitiesFamilyState';
 import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
-import { viewFieldsFamilyState } from '@/ui/table/states/viewFieldsState';
-import {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '@/ui/table/types/ViewField';
 import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
 
 export function useSetEntityTableData() {
@@ -24,7 +19,6 @@ export function useSetEntityTableData() {
     ({ set, snapshot }) =>
       <T extends { id: string }>(
         newEntityArray: T[],
-        viewFields: ViewFieldDefinition<ViewFieldMetadata>[],
         filters: FilterDefinition[],
       ) => {
         for (const entity of newEntityArray) {
@@ -49,15 +43,13 @@ export function useSetEntityTableData() {
 
         resetTableRowSelection();
 
-        set(entityTableDimensionsState, {
-          numberOfColumns: viewFields.length,
+        set(entityTableDimensionsState, (prevState) => ({
+          ...prevState,
           numberOfRows: entityIds.length,
-        });
+        }));
 
         set(availableFiltersScopedState(tableContextScopeId), filters);
 
-        set(viewFieldsFamilyState, viewFields);
-
         set(isFetchingEntityTableDataState, false);
       },
     [],