209 lines
3.8 KiB
JavaScript
209 lines
3.8 KiB
JavaScript
/*
|
|
* Lightbox window
|
|
*/
|
|
import { Component } from 'react';
|
|
import Events from '../_events';
|
|
|
|
import { client } from './_apollo';
|
|
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;
|