Switching Page Content

[RakulAgn]

Here's what I am trying to achieve: I have two pages and I want to switch content between them. If the current selected page is 2, when I select "switch page," it should switch to page 1, and vice versa.

const handleStepSwitch = () => {
    const step1Page = findPageById(PageTypes.Step1.id);
    const step2Page = findPageById(PageTypes.Step2.id);

    if (step1Page && step2Page) {

      const step1Content = step1Page.getMainComponent().toJSON();
      const step2Content = step2Page.getMainComponent().toJSON();


      step1Page.getMainComponent().components().reset();
      step2Page.getMainComponent().components().reset();


      if (step2Content.components) {
        step1Page.getMainComponent().components().add(step2Content.components);
      }
      if (step1Content.components) {
        step2Page.getMainComponent().components().add(step1Content.components);
      }

      editor.trigger('component:update');
    }
  };

@artf

[artf]

toJSON doesn't give you a fully serialized result, so when you reset, you actually clearing components internally.

I'd expect something like this to work based on your need:

const rootPage1 = step1Page.getMainComponent();
const rootPage2 = step2Page.getMainComponent();

const componentsPage1 = JSON.parse(JSON.stringify(rootPage1.components()));
const componentsPage2 = JSON.parse(JSON.stringify(rootPage2.components()));

rootPage1.components(componentsPage2);
rootPage2.components(componentsPage1);

[RakulAgn]

Its Not worked properly The Swap is Happening but not properly happening its missed the style and some times the component is lost.