twenty/packages/twenty-front/src/modules/page-layout/hooks/useSavePageLayout.ts

import { usePageLayoutDraftState } from '@/page-layout/hooks/usePageLayoutDraftState';
import { useUpdatePageLayoutWithTabsAndWidgets } from '@/page-layout/hooks/useUpdatePageLayoutWithTabsAndWidgets';
import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
import { pageLayoutPersistedComponentState } from '@/page-layout/states/pageLayoutPersistedComponentState';
import { type PageLayout } from '@/page-layout/types/PageLayout';
import { convertPageLayoutDraftToUpdateInput } from '@/page-layout/utils/convertPageLayoutDraftToUpdateInput';
import { convertPageLayoutToTabLayouts } from '@/page-layout/utils/convertPageLayoutToTabLayouts';
import { transformPageLayout } from '@/page-layout/utils/transformPageLayout';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-shared/utils';

export const useSavePageLayout = (pageLayoutIdFromProps: string) => {
  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
    PageLayoutComponentInstanceContext,
    pageLayoutIdFromProps,
  );

  const pageLayoutPersistedCallbackState = useRecoilComponentCallbackState(
    pageLayoutPersistedComponentState,
    pageLayoutId,
  );

  const pageLayoutCurrentLayoutsCallbackState = useRecoilComponentCallbackState(
    pageLayoutCurrentLayoutsComponentState,
    pageLayoutId,
  );

  const { pageLayoutDraft } = usePageLayoutDraftState(pageLayoutId);

  const { updatePageLayoutWithTabsAndWidgets } =
    useUpdatePageLayoutWithTabsAndWidgets();

  const savePageLayout = useRecoilCallback(
    ({ set }) =>
      async () => {
        const updateInput =
          convertPageLayoutDraftToUpdateInput(pageLayoutDraft);

        const result = await updatePageLayoutWithTabsAndWidgets(
          pageLayoutId,
          updateInput,
        );

        if (result.status === 'successful') {
          const updatedPageLayout =
            result.response.data?.updatePageLayoutWithTabsAndWidgets;

          if (isDefined(updatedPageLayout)) {
            const pageLayoutToPersist: PageLayout =
              transformPageLayout(updatedPageLayout);

            set(pageLayoutPersistedCallbackState, pageLayoutToPersist);
            set(
              pageLayoutCurrentLayoutsCallbackState,
              convertPageLayoutToTabLayouts(pageLayoutToPersist),
            );
          }
        }

        return result;
      },
    [
      pageLayoutCurrentLayoutsCallbackState,
      pageLayoutDraft,
      pageLayoutId,
      pageLayoutPersistedCallbackState,
      updatePageLayoutWithTabsAndWidgets,
    ],
  );

  return { savePageLayout };
};