useSaveFieldsWidgetGroups.ts

import { fieldsWidgetGroupsDraftComponentState } from '@/page-layout/states/fieldsWidgetGroupsDraftComponentState';
import { fieldsWidgetGroupsPersistedComponentState } from '@/page-layout/states/fieldsWidgetGroupsPersistedComponentState';
import { UPSERT_FIELDS_WIDGET } from '@/page-layout/graphql/mutations/upsertFieldsWidget';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { useRefreshAllCoreViews } from '@/views/hooks/useRefreshAllCoreViews';
import { useMutation } from '@apollo/client';
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { type CoreViewFieldGroup } from '~/generated-metadata/graphql';

type UpsertFieldsWidgetInput = {
  widgetId: string;
  groups: {
    id: string;
    name: string;
    position: number;
    isVisible: boolean;
    fields: {
      viewFieldId: string;
      isVisible: boolean;
      position: number;
    }[];
  }[];
};

type UpsertFieldsWidgetResult = {
  upsertFieldsWidget: CoreViewFieldGroup[];
};

type UseSaveFieldsWidgetGroupsParams = {
  pageLayoutId: string;
};

export const useSaveFieldsWidgetGroups = ({
  pageLayoutId,
}: UseSaveFieldsWidgetGroupsParams) => {
  const fieldsWidgetGroupsDraftState = useRecoilComponentCallbackState(
    fieldsWidgetGroupsDraftComponentState,
    pageLayoutId,
  );

  const fieldsWidgetGroupsPersistedState = useRecoilComponentCallbackState(
    fieldsWidgetGroupsPersistedComponentState,
    pageLayoutId,
  );

  const [upsertFieldsWidgetMutation] = useMutation<
    UpsertFieldsWidgetResult,
    { input: UpsertFieldsWidgetInput }
  >(UPSERT_FIELDS_WIDGET);

  const { refreshAllCoreViews } = useRefreshAllCoreViews();

  const saveFieldsWidgetGroups = useRecoilCallback(
    ({ set, snapshot }) =>
      async () => {
        const allDraftGroups = snapshot
          .getLoadable(fieldsWidgetGroupsDraftState)
          .getValue();
        const allPersistedGroups = snapshot
          .getLoadable(fieldsWidgetGroupsPersistedState)
          .getValue();

        const widgetIds = new Set([
          ...Object.keys(allDraftGroups),
          ...Object.keys(allPersistedGroups),
        ]);

        for (const widgetId of widgetIds) {
          const draftGroups = allDraftGroups[widgetId] ?? [];

          await upsertFieldsWidgetMutation({
            variables: {
              input: {
                widgetId,
                groups: draftGroups.map((group) => ({
                  id: group.id,
                  name: group.name,
                  position: group.position,
                  isVisible: group.isVisible,
                  fields: group.fields.flatMap((field) => {
                    if (!isDefined(field.viewFieldId)) {
                      return [];
                    }

                    return [
                      {
                        viewFieldId: field.viewFieldId,
                        isVisible: field.isVisible,
                        position: field.position,
                      },
                    ];
                  }),
                })),
              },
            },
          });
        }

        set(fieldsWidgetGroupsPersistedState, allDraftGroups);

        await refreshAllCoreViews();

        return { status: 'successful' as const };
      },
    [
      fieldsWidgetGroupsDraftState,
      fieldsWidgetGroupsPersistedState,
      upsertFieldsWidgetMutation,
      refreshAllCoreViews,
    ],
  );

  return { saveFieldsWidgetGroups };
};