228 lines
4.3 KiB
JavaScript
228 lines
4.3 KiB
JavaScript
/*
|
|
* 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
|