2021-01-31 21:44:01 +01:00
|
|
|
/*
|
2021-02-16 07:45:57 +01:00
|
|
|
* page #MainContent area
|
2021-01-31 21:44:01 +01:00
|
|
|
*/
|
|
|
|
import { Component } from 'react';
|
2021-02-08 01:30:14 +01:00
|
|
|
import Events from '../_events';
|
2021-02-12 18:57:33 +01:00
|
|
|
|
2021-02-16 07:45:57 +01:00
|
|
|
import { useQuery, gql } from '@apollo/client';
|
2021-02-12 18:57:33 +01:00
|
|
|
import { client } from './_apollo';
|
2021-02-16 07:45:57 +01:00
|
|
|
import { cache } from './_apollo.cache';
|
|
|
|
|
|
|
|
const D = document;
|
|
|
|
const BODY = document.body;
|
2021-01-31 21:44:01 +01:00
|
|
|
|
|
|
|
class Page extends Component {
|
|
|
|
state = {
|
|
|
|
type: [],
|
|
|
|
shown: false,
|
2021-02-16 07:45:57 +01:00
|
|
|
Title: 'Loading ...',
|
|
|
|
loading: true,
|
2021-01-31 21:44:01 +01:00
|
|
|
error: false,
|
|
|
|
current: null,
|
|
|
|
ID: null,
|
2021-02-12 18:57:33 +01:00
|
|
|
URLSegment: null,
|
2021-01-31 21:44:01 +01:00
|
|
|
ClassName: 'Page',
|
2021-02-12 18:57:33 +01:00
|
|
|
CSSClass: null,
|
2021-02-21 08:05:58 +01:00
|
|
|
Summary: null,
|
2021-02-12 18:57:33 +01:00
|
|
|
Link: null,
|
2021-02-08 01:30:14 +01:00
|
|
|
URL: null,
|
2021-01-31 21:44:01 +01:00
|
|
|
Elements: [],
|
2021-02-08 01:30:14 +01:00
|
|
|
page: null,
|
2021-01-31 21:44:01 +01:00
|
|
|
};
|
|
|
|
|
2021-02-08 01:30:14 +01:00
|
|
|
componentDidUpdate() {
|
|
|
|
const ui = this;
|
|
|
|
|
|
|
|
if (ui.state.Title) {
|
|
|
|
document.title = ui.state.Title;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (ui.state.Elements.length) {
|
|
|
|
window.dispatchEvent(new Event(Events.AJAX));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-01-31 21:44:01 +01:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
const ui = this;
|
2021-02-16 07:45:57 +01:00
|
|
|
|
2021-01-31 21:44:01 +01:00
|
|
|
ui.name = ui.constructor.name;
|
2021-02-16 07:45:57 +01:00
|
|
|
ui.empty_state = ui.state;
|
|
|
|
|
2021-01-31 21:44:01 +01:00
|
|
|
console.log(`${ui.name}: init`);
|
|
|
|
}
|
|
|
|
|
2021-02-16 07:45:57 +01:00
|
|
|
isOnline = () => {
|
|
|
|
return BODY.classList.contains('is-online');
|
2021-01-31 21:44:01 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
load = (link) => {
|
|
|
|
const ui = this;
|
2021-02-16 07:45:57 +01:00
|
|
|
const url_segment = link.split('/').pop();
|
|
|
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
const query = gql(`
|
2021-02-12 18:57:33 +01:00
|
|
|
query Pages {
|
2021-02-16 07:45:57 +01:00
|
|
|
readPages(URLSegment: "${url_segment}", limit: 1, offset: 0) {
|
2021-02-12 18:57:33 +01:00
|
|
|
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
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`);
|
2021-01-31 21:44:01 +01:00
|
|
|
|
2021-02-16 07:45:57 +01:00
|
|
|
if (!ui.isOnline()) {
|
2021-02-18 03:12:01 +01:00
|
|
|
const data = client.readQuery({ query });
|
2021-02-16 07:45:57 +01:00
|
|
|
|
2021-02-18 03:12:01 +01:00
|
|
|
if (data && ui.processResponse(data)) {
|
2021-02-16 07:45:57 +01:00
|
|
|
console.log(`${ui.name}: Offline cached response`);
|
2021-02-18 03:12:01 +01:00
|
|
|
resolve(data);
|
2021-01-31 21:44:01 +01:00
|
|
|
} else {
|
2021-02-16 07:45:57 +01:00
|
|
|
console.log(`${ui.name}: No offline response`);
|
2021-02-18 03:12:01 +01:00
|
|
|
|
|
|
|
ui.setState(
|
|
|
|
Object.assign(ui.empty_state, {
|
|
|
|
Title: 'Offline',
|
|
|
|
CSSClass: 'graphql__status-523',
|
|
|
|
Summary:
|
|
|
|
"You're Offline. The page is not available now.",
|
|
|
|
loading: false,
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
|
|
|
|
reject({ status: 523 });
|
2021-02-16 07:45:57 +01:00
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (!ui.state.loading) {
|
|
|
|
ui.setState(ui.empty_state);
|
2021-01-31 21:44:01 +01:00
|
|
|
}
|
|
|
|
|
2021-02-16 07:45:57 +01:00
|
|
|
client
|
|
|
|
.query({
|
|
|
|
query: query,
|
|
|
|
fetchPolicy: ui.isOnline() ? 'no-cache' : 'cache-first',
|
|
|
|
})
|
|
|
|
.then((resp) => {
|
|
|
|
// write to cache
|
2021-02-18 03:12:01 +01:00
|
|
|
const data = resp.data;
|
|
|
|
client.writeQuery({ query, data: data });
|
|
|
|
|
|
|
|
if (ui.processResponse(data)) {
|
2021-02-16 07:45:57 +01:00
|
|
|
console.log(`${ui.name}: got the server response`);
|
2021-02-18 03:12:01 +01:00
|
|
|
resolve(data);
|
2021-02-16 07:45:57 +01:00
|
|
|
} else {
|
|
|
|
console.log(`${ui.name}: not found`);
|
2021-02-18 03:12:01 +01:00
|
|
|
reject({ status: 404 });
|
2021-02-16 07:45:57 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
processResponse = (data) => {
|
|
|
|
const ui = this;
|
|
|
|
|
|
|
|
if (!data.readPages.edges.length) {
|
|
|
|
console.log(`${ui.name}: not found`);
|
|
|
|
|
2021-02-18 03:12:01 +01:00
|
|
|
ui.setState(
|
|
|
|
Object.assign(ui.empty_state, {
|
|
|
|
Title: 'Not Found',
|
|
|
|
CSSClass: 'graphql__status-404',
|
|
|
|
Summary: 'The page is not found.',
|
|
|
|
loading: false,
|
|
|
|
}),
|
|
|
|
);
|
2021-02-16 07:45:57 +01:00
|
|
|
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
const page = data.readPages.edges[0].node;
|
|
|
|
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,
|
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
|
|
|
|
return true;
|
2021-01-31 21:44:01 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
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;
|
2021-02-18 03:12:01 +01:00
|
|
|
const className = `elemental-area graphql__page page-${ui.state.CSSClass} url-${ui.state.URLSegment}`;
|
2021-01-31 21:44:01 +01:00
|
|
|
|
|
|
|
const ElementItem = (props) => (
|
|
|
|
<div dangerouslySetInnerHTML={props.html}></div>
|
|
|
|
);
|
|
|
|
|
|
|
|
let html = '';
|
2021-02-12 18:57:33 +01:00
|
|
|
if (ui.state.Elements.length) {
|
2021-02-16 07:45:57 +01:00
|
|
|
console.log(`${ui.name}: render`);
|
2021-02-12 18:57:33 +01:00
|
|
|
ui.state.Elements.map((el) => {
|
|
|
|
html += el.node.Render;
|
|
|
|
});
|
2021-02-21 08:05:58 +01:00
|
|
|
} else if (ui.state.Summary && ui.state.Summary.length) {
|
2021-02-18 03:12:01 +01:00
|
|
|
console.log(`${ui.name}: summary only`);
|
2021-02-21 08:05:58 +01:00
|
|
|
html = `<div class="summary">${ui.state.Summary}</div>`;
|
|
|
|
} else {
|
|
|
|
const spinner = D.getElementById('PageLoading');
|
|
|
|
html = `<div class="loading">Loading ...</div>`;
|
2021-02-12 18:57:33 +01:00
|
|
|
}
|
2021-01-31 21:44:01 +01:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
2021-02-12 18:57:33 +01:00
|
|
|
className={className}
|
2021-01-31 21:44:01 +01:00
|
|
|
dangerouslySetInnerHTML={ui.getHtml(html)}
|
|
|
|
></div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Page;
|