twenty/packages/twenty-front/src/modules/metadata-store/effect-components/PageLayoutTabSSEEffect.tsx

import { useListenToMetadataOperationBrowserEvent } from '@/browser-event/hooks/useListenToMetadataOperationBrowserEvent';
import { useRefreshPageLayouts } from '@/page-layout/hooks/useRefreshPageLayouts';
import { useListenToEventsForQuery } from '@/sse-db-event/hooks/useListenToEventsForQuery';
import { AllMetadataName } from '~/generated-metadata/graphql';

export const PageLayoutTabSSEEffect = () => {
  const queryId = 'page-layout-tab-metadata-sse-effect';

  const { refreshPageLayouts } = useRefreshPageLayouts();

  useListenToEventsForQuery({
    queryId,
    operationSignature: {
      metadataName: AllMetadataName.pageLayoutTab,
      variables: {},
    },
  });

  useListenToMetadataOperationBrowserEvent({
    metadataName: AllMetadataName.pageLayoutTab,
    onMetadataOperationBrowserEvent: () => {
      refreshPageLayouts();
    },
  });

  return null;
};