lundi 4 octobre 2021

Which design pattern to implement for a dynamic UI builder? [closed]

I got a JSON object from an API. This object can contain different references to UI components like this:

{
  slug: 'about-us',
  sections: [
    {
      contentTypeId: 'mainImage',
      title: 'Hello World',
      subtitle: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor',
      imgURL: '//images.ctfassets.net/4rz1gbow9005/4WYxceO0c8vo9bc8YLYZKu/08a4fdf5cab8d7695f0bef3b9c7ff506/cab.png',
      sections: [
        {
          contentTypeId: 'introText',
          title: 'Something',
          subtitle: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor',
          textAlign: 'Left',
        },
        {
          contentTypeId: 'ctaText',
          title: 'Something',
          subtitle: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor',
          textAlign: 'Left',
        },
      ],
    },
    {
      contentTypeId: 'secondBlockText',
      title: 'Something',
      subtitle: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor',
      textAlign: 'Left',
    },
    {
      contentTypeId: 'contentBlock',
      title: 'Hello World',
      subtitle: '<p>Lorem ipsum dolor sit amet,</p> <p>consectetuer adipiscing <span>elit</span>. Aenean commodo ligula eget dolor</p>',
      sections: [
        {
          contentTypeId: 'Text',
          subTitle: 'Something',
          textContent: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor',
          textAlign: 'Left',
        },
      ],
    },
  ],
};

This is just an example, the end JSON structure may differ a bit.

I need to end up with a page builder using this JSON definition (depending on the URL a call to an API will be made and the JSON can differ in content).

I'm using Next.js as middleware for the SSR and React on the frontEnd, but the only important thing here is that Next can handle dynamic routing by itself so the call can be done depending on this "param" which is the slug to get a unique JSON.

Then I need to check this contentTypeId property and structure and style the content of this component accordingly.

I was thinking on a Visitor Design Pattern to check the contentTypeId and apply the corresponding styling and structure to it or maybe a Builder Design Pattern but this is the first time I do something like this and I would like the help of the community to discern which design pattern fits better to this use case and please, explain why so I can understand it and learn

Aucun commentaire:

Enregistrer un commentaire