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
      })
      .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) => {
      const 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} />
    )

    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)}
      />
    )
  }
}

export default Page