From 2c168f1a611858ced2d8f09d2b9b88c851d01b9e Mon Sep 17 00:00:00 2001 From: nileshgulia1 Date: Tue, 15 Feb 2022 20:04:49 +0530 Subject: [PATCH 1/4] WIP --- .../theme/CatalogueViews/AppHeader.jsx | 208 +++++++++--------- 1 file changed, 98 insertions(+), 110 deletions(-) diff --git a/src/components/theme/CatalogueViews/AppHeader.jsx b/src/components/theme/CatalogueViews/AppHeader.jsx index 3875a98..84fbf83 100644 --- a/src/components/theme/CatalogueViews/AppHeader.jsx +++ b/src/components/theme/CatalogueViews/AppHeader.jsx @@ -49,37 +49,37 @@ class App extends Component { // console.log('load:', nextProps.loadingContent); // return true; // } - // - /** - * @method componentWillReceiveProps - * @param {Object} nextProps Next properties - * @returns {undefined} - */ - componentWillReceiveProps(nextProps) { - if (nextProps.pathname !== this.props.pathname) { - this.props.purgeMessages(); - - if (this.state.hasError) { - this.setState({ hasError: false }); - } - } - } + // // + // /** + // * @method componentWillReceiveProps + // * @param {Object} nextProps Next properties + // * @returns {undefined} + // */ + // componentWillReceiveProps(nextProps) { + // if (nextProps.pathname !== this.props.pathname) { + // this.props.purgeMessages(); + + // if (this.state.hasError) { + // this.setState({ hasError: false }); + // } + // } + // } - /** - * ComponentDidCatch - * @method ComponentDidCatch - * @param {string} error The error - * @param {string} info The info - * @returns {undefined} - */ - componentDidCatch(error, info) { - this.setState({ hasError: true, error, errorInfo: info }); - if (__CLIENT__) { - if (window?.env?.RAZZLE_SENTRY_DSN || __SENTRY__?.SENTRY_DSN) { - Sentry.captureException(error); - } - } - } + // /** + // * ComponentDidCatch + // * @method ComponentDidCatch + // * @param {string} error The error + // * @param {string} info The info + // * @returns {undefined} + // */ + // componentDidCatch(error, info) { + // this.setState({ hasError: true, error, errorInfo: info }); + // if (__CLIENT__) { + // if (window?.env?.RAZZLE_SENTRY_DSN || __SENTRY__?.SENTRY_DSN) { + // Sentry.captureException(error); + // } + // } + // } /** * Render method. @@ -124,19 +124,7 @@ class App extends Component { leadImageCaption, }; - return ( - - -
- - ); + return ''; } } @@ -146,73 +134,73 @@ export const __test__ = connect( )(App); export default compose( - asyncConnect([ - { - key: 'content', - promise: ({ location, store: { dispatch } }) => - dispatch(getContent(getBaseUrl(location.pathname))), - }, - { - key: 'frontpage_slides', - promise: ({ store: { dispatch } }) => - __SERVER__ && dispatch(getFrontpageSlides()), - }, - { - key: 'defaultHeaderImage', - promise: ({ store: { dispatch } }) => - __SERVER__ && dispatch(getDefaultHeaderImage()), - }, - { - key: 'navigation', - promise: ({ location, store: { dispatch } }) => - __SERVER__ && - dispatch( - getNavigation( - getBaseUrl(location.pathname), - config.settings.navDepth, - ), - ), - }, - { - key: 'types', - promise: ({ location, store: { dispatch } }) => - __SERVER__ && dispatch(getTypes(getBaseUrl(location.pathname))), - }, - { - key: 'workflow', - promise: ({ location, store: { dispatch } }) => - __SERVER__ && dispatch(getWorkflow(getBaseUrl(location.pathname))), - }, - { - key: 'portlets', - promise: ({ location, store: { dispatch } }) => - __SERVER__ && dispatch(getPortlets(getBaseUrl(location.pathname))), - }, - { - key: 'portlets_left', - promise: ({ location, store: { dispatch } }) => - __SERVER__ && - dispatch( - getPortlets(getBaseUrl(location.pathname), 'plone.leftcolumn'), - ), - }, - { - key: 'portlets_right', - promise: ({ location, store: { dispatch } }) => - __SERVER__ && - dispatch( - getPortlets(getBaseUrl(location.pathname), 'plone.rightcolumn'), - ), - }, - { - key: 'portlets_footer', - promise: ({ location, store: { dispatch } }) => - __SERVER__ && - dispatch( - getPortlets(getBaseUrl(location.pathname), 'plone.footerportlets'), - ), - }, - ]), + // asyncConnect([ + // { + // key: 'content', + // promise: ({ location, store: { dispatch } }) => + // dispatch(getContent(getBaseUrl(location.pathname))), + // }, + // { + // key: 'frontpage_slides', + // promise: ({ store: { dispatch } }) => + // __SERVER__ && dispatch(getFrontpageSlides()), + // }, + // { + // key: 'defaultHeaderImage', + // promise: ({ store: { dispatch } }) => + // __SERVER__ && dispatch(getDefaultHeaderImage()), + // }, + // { + // key: 'navigation', + // promise: ({ location, store: { dispatch } }) => + // __SERVER__ && + // dispatch( + // getNavigation( + // getBaseUrl(location.pathname), + // config.settings.navDepth, + // ), + // ), + // }, + // { + // key: 'types', + // promise: ({ location, store: { dispatch } }) => + // __SERVER__ && dispatch(getTypes(getBaseUrl(location.pathname))), + // }, + // { + // key: 'workflow', + // promise: ({ location, store: { dispatch } }) => + // __SERVER__ && dispatch(getWorkflow(getBaseUrl(location.pathname))), + // }, + // { + // key: 'portlets', + // promise: ({ location, store: { dispatch } }) => + // __SERVER__ && dispatch(getPortlets(getBaseUrl(location.pathname))), + // }, + // { + // key: 'portlets_left', + // promise: ({ location, store: { dispatch } }) => + // __SERVER__ && + // dispatch( + // getPortlets(getBaseUrl(location.pathname), 'plone.leftcolumn'), + // ), + // }, + // { + // key: 'portlets_right', + // promise: ({ location, store: { dispatch } }) => + // __SERVER__ && + // dispatch( + // getPortlets(getBaseUrl(location.pathname), 'plone.rightcolumn'), + // ), + // }, + // { + // key: 'portlets_footer', + // promise: ({ location, store: { dispatch } }) => + // __SERVER__ && + // dispatch( + // getPortlets(getBaseUrl(location.pathname), 'plone.footerportlets'), + // ), + // }, + // ]), connect( (state, props) => ({ defaultHeaderImage: state.default_header_image.items?.[0], From 1e9901b3b9412ee5549395ccfef7d03f707a5a25 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Tue, 15 Feb 2022 18:10:22 +0200 Subject: [PATCH 2/4] WIP --- .../theme/CatalogueViews/AppHeader.jsx | 445 +++++++++--------- 1 file changed, 232 insertions(+), 213 deletions(-) diff --git a/src/components/theme/CatalogueViews/AppHeader.jsx b/src/components/theme/CatalogueViews/AppHeader.jsx index 84fbf83..87aef11 100644 --- a/src/components/theme/CatalogueViews/AppHeader.jsx +++ b/src/components/theme/CatalogueViews/AppHeader.jsx @@ -3,216 +3,235 @@ * @module components/theme/App/App */ -import React, { Component, Fragment } from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import { compose } from 'redux'; -import { asyncConnect } from 'redux-connect'; - -import { Header } from '@plone/volto/components'; -import { BodyClass, getBaseUrl, getView } from '@plone/volto/helpers'; -import { - getContent, - getNavigation, - getTypes, - getWorkflow, - purgeMessages, -} from '@plone/volto/actions'; -import { - getFrontpageSlides, - getDefaultHeaderImage, -} from '@eeacms/volto-forests-theme/actions'; -import { getPortlets } from '@eeacms/volto-addons-forest/actions'; -import config from '@plone/volto/registry'; -import * as Sentry from '@sentry/browser'; - -class App extends Component { - static propTypes = { - pathname: PropTypes.string.isRequired, - purgeMessages: PropTypes.func.isRequired, - folderHeader: PropTypes.any, - // getDefaultHeaderImage: PropTypes.func.isRequired, - // defaultHeaderImage: PropTypes.object.isRequired, - }; - - state = { - hasError: false, - error: null, - errorInfo: null, - }; - - // shouldComponentUpdate(nextProps, nextState) { - // if (nextProps.loadingContent.loading || nextProps.search.loading) { - // console.log('dont load'); - // return false; - // } - // console.log('load:', nextProps.loadingContent); - // return true; - // } - // // - // /** - // * @method componentWillReceiveProps - // * @param {Object} nextProps Next properties - // * @returns {undefined} - // */ - // componentWillReceiveProps(nextProps) { - // if (nextProps.pathname !== this.props.pathname) { - // this.props.purgeMessages(); - - // if (this.state.hasError) { - // this.setState({ hasError: false }); - // } - // } - // } - - // /** - // * ComponentDidCatch - // * @method ComponentDidCatch - // * @param {string} error The error - // * @param {string} info The info - // * @returns {undefined} - // */ - // componentDidCatch(error, info) { - // this.setState({ hasError: true, error, errorInfo: info }); - // if (__CLIENT__) { - // if (window?.env?.RAZZLE_SENTRY_DSN || __SENTRY__?.SENTRY_DSN) { - // Sentry.captureException(error); - // } - // } - // } - - /** - * Render method. - * @method render - * @returns {string} Markup for the component. - */ - render() { - const path = getBaseUrl(this.props.pathname); - const action = getView(this.props.pathname); - const leadImageCaption = - this.props.content?.lead_image_caption && - this.props.content.lead_image_caption !== null - ? this.props.content.lead_image_caption - : ''; - - const bigLeading = - this.props.content?.big_leading_image && - this.props.content.big_leading_image !== null - ? this.props.content.big_leading_image - : false; - - const inheritLeadingData = - this.props.content?.inherit_leading_data && - this.props.content.inherit_leading_data !== null - ? this.props.content.inherit_leading_data - : false; - - const leadNavigation = - this.props.content?.lead_navigation && - this.props.content.lead_navigation !== null - ? this.props.content.lead_navigation - : false; - - const headerImage = - this.props.content?.image?.download || this.props.defaultHeaderImage; - - const extraHeaderData = { - bigLeading, - inheritLeadingData, - parentData: this.props.content?.parent, - leadNavigation, - leadImageCaption, - }; - - return ''; - } -} - -export const __test__ = connect( - (state, props) => ({ pathname: props.location.pathname }), - { purgeMessages }, -)(App); - -export default compose( - // asyncConnect([ - // { - // key: 'content', - // promise: ({ location, store: { dispatch } }) => - // dispatch(getContent(getBaseUrl(location.pathname))), - // }, - // { - // key: 'frontpage_slides', - // promise: ({ store: { dispatch } }) => - // __SERVER__ && dispatch(getFrontpageSlides()), - // }, - // { - // key: 'defaultHeaderImage', - // promise: ({ store: { dispatch } }) => - // __SERVER__ && dispatch(getDefaultHeaderImage()), - // }, - // { - // key: 'navigation', - // promise: ({ location, store: { dispatch } }) => - // __SERVER__ && - // dispatch( - // getNavigation( - // getBaseUrl(location.pathname), - // config.settings.navDepth, - // ), - // ), - // }, - // { - // key: 'types', - // promise: ({ location, store: { dispatch } }) => - // __SERVER__ && dispatch(getTypes(getBaseUrl(location.pathname))), - // }, - // { - // key: 'workflow', - // promise: ({ location, store: { dispatch } }) => - // __SERVER__ && dispatch(getWorkflow(getBaseUrl(location.pathname))), - // }, - // { - // key: 'portlets', - // promise: ({ location, store: { dispatch } }) => - // __SERVER__ && dispatch(getPortlets(getBaseUrl(location.pathname))), - // }, - // { - // key: 'portlets_left', - // promise: ({ location, store: { dispatch } }) => - // __SERVER__ && - // dispatch( - // getPortlets(getBaseUrl(location.pathname), 'plone.leftcolumn'), - // ), - // }, - // { - // key: 'portlets_right', - // promise: ({ location, store: { dispatch } }) => - // __SERVER__ && - // dispatch( - // getPortlets(getBaseUrl(location.pathname), 'plone.rightcolumn'), - // ), - // }, - // { - // key: 'portlets_footer', - // promise: ({ location, store: { dispatch } }) => - // __SERVER__ && - // dispatch( - // getPortlets(getBaseUrl(location.pathname), 'plone.footerportlets'), - // ), - // }, - // ]), - connect( - (state, props) => ({ - defaultHeaderImage: state.default_header_image.items?.[0], - // content: state.content.data, - content: state.content.data, - frontpage_slides: state.frontpage_slides.items, - navigation: state.navigation.items, - pathname: state.router.location.pathname, //props.location.pathname, - - // loadingContent: state.content?.get, - // search: state.search, - }), - { purgeMessages }, - ), -)(App); +import React from 'react'; + +const App = () => { + return

Header

; +}; + +export default App; + +// import PropTypes from 'prop-types'; +// import { connect } from 'react-redux'; +// import { compose } from 'redux'; +// import { asyncConnect } from 'redux-connect'; + +// import { Header } from '@plone/volto/components'; +// import { BodyClass, getBaseUrl, getView } from '@plone/volto/helpers'; +// import { +// getContent, +// getNavigation, +// getTypes, +// getWorkflow, +// purgeMessages, +// } from '@plone/volto/actions'; +// import { +// getFrontpageSlides, +// getDefaultHeaderImage, +// } from '@eeacms/volto-forests-theme/actions'; +// import { getPortlets } from '@eeacms/volto-addons-forest/actions'; +// import config from '@plone/volto/registry'; +// import * as Sentry from '@sentry/browser'; + +// class App extends Component { +// static propTypes = { +// pathname: PropTypes.string.isRequired, +// purgeMessages: PropTypes.func.isRequired, +// folderHeader: PropTypes.any, +// // getDefaultHeaderImage: PropTypes.func.isRequired, +// // defaultHeaderImage: PropTypes.object.isRequired, +// }; + +// state = { +// hasError: false, +// error: null, +// errorInfo: null, +// }; + +// // shouldComponentUpdate(nextProps, nextState) { +// // if (nextProps.loadingContent.loading || nextProps.search.loading) { +// // console.log('dont load'); +// // return false; +// // } +// // console.log('load:', nextProps.loadingContent); +// // return true; +// // } +// // +// /** +// * @method componentWillReceiveProps +// * @param {Object} nextProps Next properties +// * @returns {undefined} +// */ +// componentWillReceiveProps(nextProps) { +// if (nextProps.pathname !== this.props.pathname) { +// this.props.purgeMessages(); + +// if (this.state.hasError) { +// this.setState({ hasError: false }); +// } +// } +// } + +// /** +// * ComponentDidCatch +// * @method ComponentDidCatch +// * @param {string} error The error +// * @param {string} info The info +// * @returns {undefined} +// */ +// componentDidCatch(error, info) { +// this.setState({ hasError: true, error, errorInfo: info }); +// if (__CLIENT__) { +// if (window?.env?.RAZZLE_SENTRY_DSN || __SENTRY__?.SENTRY_DSN) { +// Sentry.captureException(error); +// } +// } +// } + +// /** +// * Render method. +// * @method render +// * @returns {string} Markup for the component. +// */ +// render() { +// const path = getBaseUrl(this.props.pathname); +// const action = getView(this.props.pathname); +// const leadImageCaption = +// this.props.content?.lead_image_caption && +// this.props.content.lead_image_caption !== null +// ? this.props.content.lead_image_caption +// : ''; + +// const bigLeading = +// this.props.content?.big_leading_image && +// this.props.content.big_leading_image !== null +// ? this.props.content.big_leading_image +// : false; + +// const inheritLeadingData = +// this.props.content?.inherit_leading_data && +// this.props.content.inherit_leading_data !== null +// ? this.props.content.inherit_leading_data +// : false; + +// const leadNavigation = +// this.props.content?.lead_navigation && +// this.props.content.lead_navigation !== null +// ? this.props.content.lead_navigation +// : false; + +// const headerImage = +// this.props.content?.image?.download || this.props.defaultHeaderImage; + +// const extraHeaderData = { +// bigLeading, +// inheritLeadingData, +// parentData: this.props.content?.parent, +// leadNavigation, +// leadImageCaption, +// }; + +// return ( +// +// +//
+// +// ); +// } +// } + +// export const __test__ = connect( +// (state, props) => ({ pathname: props.location.pathname }), +// { purgeMessages }, +// )(App); + +// export default compose( +// asyncConnect([ +// { +// key: 'content', +// promise: ({ location, store: { dispatch } }) => +// dispatch(getContent(getBaseUrl(location.pathname))), +// }, +// { +// key: 'frontpage_slides', +// promise: ({ store: { dispatch } }) => +// __SERVER__ && dispatch(getFrontpageSlides()), +// }, +// { +// key: 'defaultHeaderImage', +// promise: ({ store: { dispatch } }) => +// __SERVER__ && dispatch(getDefaultHeaderImage()), +// }, +// { +// key: 'navigation', +// promise: ({ location, store: { dispatch } }) => +// __SERVER__ && +// dispatch( +// getNavigation( +// getBaseUrl(location.pathname), +// config.settings.navDepth, +// ), +// ), +// }, +// { +// key: 'types', +// promise: ({ location, store: { dispatch } }) => +// __SERVER__ && dispatch(getTypes(getBaseUrl(location.pathname))), +// }, +// { +// key: 'workflow', +// promise: ({ location, store: { dispatch } }) => +// __SERVER__ && dispatch(getWorkflow(getBaseUrl(location.pathname))), +// }, +// { +// key: 'portlets', +// promise: ({ location, store: { dispatch } }) => +// __SERVER__ && dispatch(getPortlets(getBaseUrl(location.pathname))), +// }, +// { +// key: 'portlets_left', +// promise: ({ location, store: { dispatch } }) => +// __SERVER__ && +// dispatch( +// getPortlets(getBaseUrl(location.pathname), 'plone.leftcolumn'), +// ), +// }, +// { +// key: 'portlets_right', +// promise: ({ location, store: { dispatch } }) => +// __SERVER__ && +// dispatch( +// getPortlets(getBaseUrl(location.pathname), 'plone.rightcolumn'), +// ), +// }, +// { +// key: 'portlets_footer', +// promise: ({ location, store: { dispatch } }) => +// __SERVER__ && +// dispatch( +// getPortlets(getBaseUrl(location.pathname), 'plone.footerportlets'), +// ), +// }, +// ]), +// connect( +// (state, props) => ({ +// defaultHeaderImage: state.default_header_image.items?.[0], +// // content: state.content.data, +// content: state.content.data, +// frontpage_slides: state.frontpage_slides.items, +// navigation: state.navigation.items, +// pathname: state.router.location.pathname, //props.location.pathname, + +// // loadingContent: state.content?.get, +// // search: state.search, +// }), +// { purgeMessages }, +// ), +// )(App); From 7f5d8c63fc4c97d86c9f49c5c74ad7eb220075e2 Mon Sep 17 00:00:00 2001 From: nileshgulia1 Date: Wed, 16 Feb 2022 14:43:50 +0530 Subject: [PATCH 3/4] bring back Html.jsx ssr data for datacatalogue --- .../theme/CatalogueViews/AppHeader.jsx | 457 +++++++++--------- .../volto/helpers/Html/Html.jsx | 129 +---- 2 files changed, 247 insertions(+), 339 deletions(-) diff --git a/src/components/theme/CatalogueViews/AppHeader.jsx b/src/components/theme/CatalogueViews/AppHeader.jsx index 87aef11..3875a98 100644 --- a/src/components/theme/CatalogueViews/AppHeader.jsx +++ b/src/components/theme/CatalogueViews/AppHeader.jsx @@ -3,235 +3,228 @@ * @module components/theme/App/App */ -import React from 'react'; - -const App = () => { - return

Header

; -}; - -export default App; - -// import PropTypes from 'prop-types'; -// import { connect } from 'react-redux'; -// import { compose } from 'redux'; -// import { asyncConnect } from 'redux-connect'; - -// import { Header } from '@plone/volto/components'; -// import { BodyClass, getBaseUrl, getView } from '@plone/volto/helpers'; -// import { -// getContent, -// getNavigation, -// getTypes, -// getWorkflow, -// purgeMessages, -// } from '@plone/volto/actions'; -// import { -// getFrontpageSlides, -// getDefaultHeaderImage, -// } from '@eeacms/volto-forests-theme/actions'; -// import { getPortlets } from '@eeacms/volto-addons-forest/actions'; -// import config from '@plone/volto/registry'; -// import * as Sentry from '@sentry/browser'; - -// class App extends Component { -// static propTypes = { -// pathname: PropTypes.string.isRequired, -// purgeMessages: PropTypes.func.isRequired, -// folderHeader: PropTypes.any, -// // getDefaultHeaderImage: PropTypes.func.isRequired, -// // defaultHeaderImage: PropTypes.object.isRequired, -// }; - -// state = { -// hasError: false, -// error: null, -// errorInfo: null, -// }; - -// // shouldComponentUpdate(nextProps, nextState) { -// // if (nextProps.loadingContent.loading || nextProps.search.loading) { -// // console.log('dont load'); -// // return false; -// // } -// // console.log('load:', nextProps.loadingContent); -// // return true; -// // } -// // -// /** -// * @method componentWillReceiveProps -// * @param {Object} nextProps Next properties -// * @returns {undefined} -// */ -// componentWillReceiveProps(nextProps) { -// if (nextProps.pathname !== this.props.pathname) { -// this.props.purgeMessages(); - -// if (this.state.hasError) { -// this.setState({ hasError: false }); -// } -// } -// } - -// /** -// * ComponentDidCatch -// * @method ComponentDidCatch -// * @param {string} error The error -// * @param {string} info The info -// * @returns {undefined} -// */ -// componentDidCatch(error, info) { -// this.setState({ hasError: true, error, errorInfo: info }); -// if (__CLIENT__) { -// if (window?.env?.RAZZLE_SENTRY_DSN || __SENTRY__?.SENTRY_DSN) { -// Sentry.captureException(error); -// } -// } -// } - -// /** -// * Render method. -// * @method render -// * @returns {string} Markup for the component. -// */ -// render() { -// const path = getBaseUrl(this.props.pathname); -// const action = getView(this.props.pathname); -// const leadImageCaption = -// this.props.content?.lead_image_caption && -// this.props.content.lead_image_caption !== null -// ? this.props.content.lead_image_caption -// : ''; - -// const bigLeading = -// this.props.content?.big_leading_image && -// this.props.content.big_leading_image !== null -// ? this.props.content.big_leading_image -// : false; - -// const inheritLeadingData = -// this.props.content?.inherit_leading_data && -// this.props.content.inherit_leading_data !== null -// ? this.props.content.inherit_leading_data -// : false; - -// const leadNavigation = -// this.props.content?.lead_navigation && -// this.props.content.lead_navigation !== null -// ? this.props.content.lead_navigation -// : false; - -// const headerImage = -// this.props.content?.image?.download || this.props.defaultHeaderImage; - -// const extraHeaderData = { -// bigLeading, -// inheritLeadingData, -// parentData: this.props.content?.parent, -// leadNavigation, -// leadImageCaption, -// }; - -// return ( -// -// -//
-// -// ); -// } -// } - -// export const __test__ = connect( -// (state, props) => ({ pathname: props.location.pathname }), -// { purgeMessages }, -// )(App); - -// export default compose( -// asyncConnect([ -// { -// key: 'content', -// promise: ({ location, store: { dispatch } }) => -// dispatch(getContent(getBaseUrl(location.pathname))), -// }, -// { -// key: 'frontpage_slides', -// promise: ({ store: { dispatch } }) => -// __SERVER__ && dispatch(getFrontpageSlides()), -// }, -// { -// key: 'defaultHeaderImage', -// promise: ({ store: { dispatch } }) => -// __SERVER__ && dispatch(getDefaultHeaderImage()), -// }, -// { -// key: 'navigation', -// promise: ({ location, store: { dispatch } }) => -// __SERVER__ && -// dispatch( -// getNavigation( -// getBaseUrl(location.pathname), -// config.settings.navDepth, -// ), -// ), -// }, -// { -// key: 'types', -// promise: ({ location, store: { dispatch } }) => -// __SERVER__ && dispatch(getTypes(getBaseUrl(location.pathname))), -// }, -// { -// key: 'workflow', -// promise: ({ location, store: { dispatch } }) => -// __SERVER__ && dispatch(getWorkflow(getBaseUrl(location.pathname))), -// }, -// { -// key: 'portlets', -// promise: ({ location, store: { dispatch } }) => -// __SERVER__ && dispatch(getPortlets(getBaseUrl(location.pathname))), -// }, -// { -// key: 'portlets_left', -// promise: ({ location, store: { dispatch } }) => -// __SERVER__ && -// dispatch( -// getPortlets(getBaseUrl(location.pathname), 'plone.leftcolumn'), -// ), -// }, -// { -// key: 'portlets_right', -// promise: ({ location, store: { dispatch } }) => -// __SERVER__ && -// dispatch( -// getPortlets(getBaseUrl(location.pathname), 'plone.rightcolumn'), -// ), -// }, -// { -// key: 'portlets_footer', -// promise: ({ location, store: { dispatch } }) => -// __SERVER__ && -// dispatch( -// getPortlets(getBaseUrl(location.pathname), 'plone.footerportlets'), -// ), -// }, -// ]), -// connect( -// (state, props) => ({ -// defaultHeaderImage: state.default_header_image.items?.[0], -// // content: state.content.data, -// content: state.content.data, -// frontpage_slides: state.frontpage_slides.items, -// navigation: state.navigation.items, -// pathname: state.router.location.pathname, //props.location.pathname, - -// // loadingContent: state.content?.get, -// // search: state.search, -// }), -// { purgeMessages }, -// ), -// )(App); +import React, { Component, Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { compose } from 'redux'; +import { asyncConnect } from 'redux-connect'; + +import { Header } from '@plone/volto/components'; +import { BodyClass, getBaseUrl, getView } from '@plone/volto/helpers'; +import { + getContent, + getNavigation, + getTypes, + getWorkflow, + purgeMessages, +} from '@plone/volto/actions'; +import { + getFrontpageSlides, + getDefaultHeaderImage, +} from '@eeacms/volto-forests-theme/actions'; +import { getPortlets } from '@eeacms/volto-addons-forest/actions'; +import config from '@plone/volto/registry'; +import * as Sentry from '@sentry/browser'; + +class App extends Component { + static propTypes = { + pathname: PropTypes.string.isRequired, + purgeMessages: PropTypes.func.isRequired, + folderHeader: PropTypes.any, + // getDefaultHeaderImage: PropTypes.func.isRequired, + // defaultHeaderImage: PropTypes.object.isRequired, + }; + + state = { + hasError: false, + error: null, + errorInfo: null, + }; + + // shouldComponentUpdate(nextProps, nextState) { + // if (nextProps.loadingContent.loading || nextProps.search.loading) { + // console.log('dont load'); + // return false; + // } + // console.log('load:', nextProps.loadingContent); + // return true; + // } + // + /** + * @method componentWillReceiveProps + * @param {Object} nextProps Next properties + * @returns {undefined} + */ + componentWillReceiveProps(nextProps) { + if (nextProps.pathname !== this.props.pathname) { + this.props.purgeMessages(); + + if (this.state.hasError) { + this.setState({ hasError: false }); + } + } + } + + /** + * ComponentDidCatch + * @method ComponentDidCatch + * @param {string} error The error + * @param {string} info The info + * @returns {undefined} + */ + componentDidCatch(error, info) { + this.setState({ hasError: true, error, errorInfo: info }); + if (__CLIENT__) { + if (window?.env?.RAZZLE_SENTRY_DSN || __SENTRY__?.SENTRY_DSN) { + Sentry.captureException(error); + } + } + } + + /** + * Render method. + * @method render + * @returns {string} Markup for the component. + */ + render() { + const path = getBaseUrl(this.props.pathname); + const action = getView(this.props.pathname); + const leadImageCaption = + this.props.content?.lead_image_caption && + this.props.content.lead_image_caption !== null + ? this.props.content.lead_image_caption + : ''; + + const bigLeading = + this.props.content?.big_leading_image && + this.props.content.big_leading_image !== null + ? this.props.content.big_leading_image + : false; + + const inheritLeadingData = + this.props.content?.inherit_leading_data && + this.props.content.inherit_leading_data !== null + ? this.props.content.inherit_leading_data + : false; + + const leadNavigation = + this.props.content?.lead_navigation && + this.props.content.lead_navigation !== null + ? this.props.content.lead_navigation + : false; + + const headerImage = + this.props.content?.image?.download || this.props.defaultHeaderImage; + + const extraHeaderData = { + bigLeading, + inheritLeadingData, + parentData: this.props.content?.parent, + leadNavigation, + leadImageCaption, + }; + + return ( + + +
+ + ); + } +} + +export const __test__ = connect( + (state, props) => ({ pathname: props.location.pathname }), + { purgeMessages }, +)(App); + +export default compose( + asyncConnect([ + { + key: 'content', + promise: ({ location, store: { dispatch } }) => + dispatch(getContent(getBaseUrl(location.pathname))), + }, + { + key: 'frontpage_slides', + promise: ({ store: { dispatch } }) => + __SERVER__ && dispatch(getFrontpageSlides()), + }, + { + key: 'defaultHeaderImage', + promise: ({ store: { dispatch } }) => + __SERVER__ && dispatch(getDefaultHeaderImage()), + }, + { + key: 'navigation', + promise: ({ location, store: { dispatch } }) => + __SERVER__ && + dispatch( + getNavigation( + getBaseUrl(location.pathname), + config.settings.navDepth, + ), + ), + }, + { + key: 'types', + promise: ({ location, store: { dispatch } }) => + __SERVER__ && dispatch(getTypes(getBaseUrl(location.pathname))), + }, + { + key: 'workflow', + promise: ({ location, store: { dispatch } }) => + __SERVER__ && dispatch(getWorkflow(getBaseUrl(location.pathname))), + }, + { + key: 'portlets', + promise: ({ location, store: { dispatch } }) => + __SERVER__ && dispatch(getPortlets(getBaseUrl(location.pathname))), + }, + { + key: 'portlets_left', + promise: ({ location, store: { dispatch } }) => + __SERVER__ && + dispatch( + getPortlets(getBaseUrl(location.pathname), 'plone.leftcolumn'), + ), + }, + { + key: 'portlets_right', + promise: ({ location, store: { dispatch } }) => + __SERVER__ && + dispatch( + getPortlets(getBaseUrl(location.pathname), 'plone.rightcolumn'), + ), + }, + { + key: 'portlets_footer', + promise: ({ location, store: { dispatch } }) => + __SERVER__ && + dispatch( + getPortlets(getBaseUrl(location.pathname), 'plone.footerportlets'), + ), + }, + ]), + connect( + (state, props) => ({ + defaultHeaderImage: state.default_header_image.items?.[0], + // content: state.content.data, + content: state.content.data, + frontpage_slides: state.frontpage_slides.items, + navigation: state.navigation.items, + pathname: state.router.location.pathname, //props.location.pathname, + + // loadingContent: state.content?.get, + // search: state.search, + }), + { purgeMessages }, + ), +)(App); diff --git a/src/customizations/volto/helpers/Html/Html.jsx b/src/customizations/volto/helpers/Html/Html.jsx index f448654..621d5c1 100644 --- a/src/customizations/volto/helpers/Html/Html.jsx +++ b/src/customizations/volto/helpers/Html/Html.jsx @@ -5,33 +5,11 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import Helmet from '@plone/volto/helpers/Helmet/Helmet'; +import { Helmet } from '@plone/volto/helpers'; import serialize from 'serialize-javascript'; import { join } from 'lodash'; -import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass'; +import { BodyClass } from '@plone/volto/helpers'; import { runtimeConfig } from '@plone/volto/runtime_config'; -import config from '@plone/volto/registry'; - -const CRITICAL_CSS_TEMPLATE = `function alter() { - document.querySelectorAll("head link[rel='prefetch']").forEach(function(el) { el.rel = 'stylesheet'}); - } - if (window.addEventListener) { - window.addEventListener('DOMContentLoaded', alter, false) - } else { - window.onload=alter - }`; - -export const loadReducers = (state = {}) => { - const { settings } = config; - return Object.assign( - {}, - ...Object.keys(state).map((name) => - settings.initialReducersBlacklist.includes(name) - ? {} - : { [name]: state[name] }, - ), - ); -}; /** * Html class. @@ -42,14 +20,6 @@ export const loadReducers = (state = {}) => { * The only thing this component doesn't (and can't) include is the * HTML doctype declaration, which is added to the rendered output * by the server.js file. - * - * Critical.css behaviour: when a file `public/critical.css` is present, the - * loading of stylesheets is changed. The styles in critical.css are inlined in - * the generated HTML, and the whole story needs to change completely: instead - * of treating stylesheets as priority for rendering, we want to defer their - * loading as much as possible. So we change the stylesheets to be prefetched - * and we switch their rel back to stylesheets at document ready event. - * * @function Html * @param {Object} props Component properties. * @param {Object} props.assets Assets to be rendered. @@ -87,16 +57,11 @@ class Html extends Component { * @returns {string} Markup for the component. */ render() { - const { - extractor, - markup, - store, - criticalCss, - apiPath, - publicURL, - } = this.props; + const { extractor, markup, store } = this.props; const head = Helmet.rewind(); const bodyClass = join(BodyClass.rewind(), ' '); + const pathName = store.getState()?.router.location.pathname; + const renderScripts = ['/header', '/head', '/footer'].includes(pathName); return ( @@ -104,79 +69,32 @@ class Html extends Component { {head.base.toComponent()} {head.title.toComponent()} {head.meta.toComponent()} - {head.link.toComponent()} - {head.script.toComponent()} + {!renderScripts && head.link.toComponent()} + {!renderScripts && head.script.toComponent()} - {extractor.getStyleElements().map((elem) => ( - - ))} - - ) : ( - extractor.getStyleElements() - ) - ) : undefined} + {!renderScripts && process.env.NODE_ENV === 'production' && ( + <>{extractor.getStyleElements()} + )}