[QUESTION] model props updates duplicates the component

[Yomna-Raouf]

Hey @artf

I'm trying to build a custom component that gets data from an API that the user enters, user will also enter the API keys.

Here is what I tried to implement this ( The problem with this is every time the prop value changes a new component gets added to the canvas and the old one doesn't get updated. )

 const fetchProductData = (url, productNameKey) => {
    let content;
    if (url) {
      return fetch(url)
        .then((response) => response.json())
        .then((data) => {
          content = generateProductContent(data, productNameKey);
          return content;
        })
        .catch((error) => {
          console.error('Error fetching product data:', error);
        });
    }
  };

const  generateProductContent = (data, productNameKey) => {
    let content = '<div class="product-component">';
    data.forEach((item) => {
      content += `<div class="product-item">
        <h3 id="product-name" class="product-name">${item[productNameKey]}</h3>
        <img id="product-image" class="product-image" src="${item.picture}" alt="${item[productNameKey]}" style="width: 375px; height: auto;">
        <p id="product-description" class="product-description">${item.description}</p>
        <button class="add-to-cart-button" data-product-id="${item.id}">Add to Cart</button>
      </div>`;
    });
    content += '</div>';
    return content;
  }

  editor.DomComponents.addType('product-component', {
    model: {
      defaults: {
        script,
        apiUrl: 'http://localhost:3001/products',
        actionApiEndpoint: 'http://localhost:3001/products',
        productNameKey: 'productName',
        traits: [
          {
            name: 'actionApiEndpoint',
            label: 'API Endpoint',
            type: 'text',
            changeProp: true,
          },
          {
            name: 'productNameKey',
            label: 'product Name Key',
            type: 'text',
            changeProp: true,
          },
        ],
        'script-props': [
          'apiUrl',
          'actionApiEndpoint',
          'productNameKey',
        ],
      },
    },
    view: {
      async onRender() {
        const url = this.model.get('apiUrl');

        const content = await fetchProductData(
          url,
          this.model.get('productNameKey')
        );

        const component = editor.addComponents(content);
        return component;
      },
    },
  });

  editor.BlockManager.add('product-block', {
    label: 'Product Block',
    category: 'Dynamic Blocks',
    content: {
      type: 'product-component',
    },
  });
  

[artf]

You're appending the content to the entire page on the render with this part const component = editor.addComponents(content);, I guess you want to update the current component...

const content = await fetchProductData(...);
this.model.components(content);

[Yomna-Raouf]

It works fine now. Thanks a lot @artf