webpack-bootstrap-ui-kit/src/js/ajax/models/element.jsx

/*
 * Lightbox window
 */
import { Component } from "react";
import Events from "../../events";

import { client } from "../apollo/init";
import { gql } from "@apollo/client";

class Page extends Component {
  state = {
    type: [],
    shown: false,
    loading: false,
    error: false,
    current: null,
    ID: null,
    URLSegment: null,
    ClassName: "Page",
    CSSClass: null,
    Title: null,
    Summary: null,
    Link: null,
    URL: null,
    Elements: [],
    page: null,
  };

  componentDidUpdate() {
    const ui = this;

    if (ui.state.Title) {
      document.title = ui.state.Title;

      if (ui.state.URL) {
        window.history.pushState(
          {
            page: JSON.stringify(ui.state),
          },
          ui.state.Title,
          ui.state.URL
        );
      }
    }

    if (ui.state.Elements.length) {
      window.dispatchEvent(new Event(Events.AJAX));
    }
  }

  constructor(props) {
    super(props);

    const ui = this;
    ui.name = ui.constructor.name;
    console.log(`${ui.name}: init`);
  }

  reset = () => {
    const ui = this;

    ui.setState({
      type: [],
      shown: false,
      loading: false,
      error: false,
      ID: null,
      Title: null,
      URL: null,
      Elements: [],
    });
  };

  load = (link) => {
    const ui = this;
    const query = gql(`
			query Pages {
			  readPages(URLSegment: "home", limit: 1, offset: 0) {
			    edges {
			      node {
			        __typename
			        _id
			        ID
			        Title
			        ClassName
			        CSSClass
			        Summary
			        Link
			        URLSegment
			        Elements {
			          edges {
			            node {
			              __typename
			        	 _id
			              ID
			              Title
			              Render
			            }
			          }
			          pageInfo {
			            hasNextPage
			            hasPreviousPage
			            totalCount
			          }
			        }
			      }
			    }
			    pageInfo {
			      hasNextPage
			      hasPreviousPage
			      totalCount
			    }
			  }
			}
		`);

    ui.reset();
    ui.setState({
      Title: "Loading ...",
      loading: true,
    });
    console.log(
      client.readQuery({
        query,
      })
    );
    client
      .query({
        query: query,
      })
      .then((resp) => {
        const page = resp.data.readPages.edges[0].node;

        // write to cache
        client.writeQuery({
          query,
          data: {
            resp,
          },
        });
        console.log(
          client.readQuery({
            query,
          })
        );

        ui.setState({
          ID: page.ID,
          Title: page.Title,
          ClassName: page.ClassName,
          URLSegment: page.URLSegment,
          CSSClass: page.CSSClass,
          Summary: page.Summary,
          Link: page.Link,
          Elements: page.Elements.edges,
          URL: page.Link || link,
          loading: false,
        });
      })
      .catch((error) => {
        console.error(error);

        let msg = "";

        if (error.response) {
          switch (error.response.status) {
            case 404:
              msg = "Not Found.";
              break;
            case 500:
              msg = "Server issue, please try again latter.";
              break;
            default:
              msg = "Something went wrong.";
              break;
          }
        } else if (error.request) {
          msg = "No response received";
        } else {
          console.warn("Error", error.message);
        }

        ui.setState({
          error: msg,
        });
      });
  };

  getHtml = (html) => {
    const decodeHtmlEntity = (input) => {
      var doc = new DOMParser().parseFromString(input, "text/html");
      return doc.documentElement.textContent;
    };

    return {
      __html: decodeHtmlEntity(html),
    };
  };

  render() {
    const ui = this;
    const name = ui.name;
    const className = `elemental-area page-${ui.state.CSSClass} url-${ui.state.URLSegment}`;

    const ElementItem = (props) => (
      <div dangerouslySetInnerHTML={props.html}></div>
    );

    let html = "";
    if (ui.state.Elements.length) {
      ui.state.Elements.map((el) => {
        html += el.node.Render;
      });
    } else {
      html += '<div class="loading">Loading ...</div>';
    }

    return (
      <div
        className={className}
        dangerouslySetInnerHTML={ui.getHtml(html)}
      ></div>
    );
  }
}

export default Page;