From 1e9901b3b9412ee5549395ccfef7d03f707a5a25 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Tue, 15 Feb 2022 18:10:22 +0200 Subject: [PATCH] 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);