Fixed DetailedLink; Layout functionality

eea · Sep 23, 2020 · 698e7ab · 698e7ab
1 parent 3655adf
commit 698e7ab
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 75 deletions.
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -15,6 +15,7 @@ import {
   GET_PARENT_FOLDER_DATA,
   GET_PAGE,
   GET_SPARQL_DATA,
+  GET_CONTENT_TYPE,
 } from '~/constants/ActionTypes';
 
 export function setSectionTabs(payload) {
@@ -55,3 +56,13 @@ export function getSparqlData(path) {
     },
   };
 }
+
+export function getContentType(type) {
+  return {
+    type: GET_CONTENT_TYPE,
+    request: {
+      op: 'get',
+      path: `@types/${type}`,
+    },
+  };
+}
diff --git a/src/components/manage/Blocks/DetailedLink/View.jsx b/src/components/manage/Blocks/DetailedLink/View.jsx
@@ -34,72 +34,68 @@ const View = (props) => {
     descriptionClassname = '',
     buttonClassname = '',
   } = props.data;
-
   return (
     <div
       className={cx(
         'detailed-link-container display-flex flex-column',
         `text-align-${textAlign || 'left'}`,
       )}
     >
-      {detailedLink ||
-        (backButton && (
-          <>
-            {!hideTitle && (title || detailedLink?.title) ? (
-              <div className={cx('detailed-link-title', titleClassname || '')}>
-                {title || detailedLink?.title || ''}
-              </div>
-            ) : (
-              ''
-            )}
-            {!hideDescription && (description || detailedLink?.description) ? (
-              <p
-                className={cx(
-                  'detailed-link-description',
-                  descriptionClassname || '',
-                )}
-              >
-                {description || detailedLink?.description || ''}
-              </p>
-            ) : (
-              ''
-            )}
-            <div>
-              <Link
-                className={cx(
-                  'detailed-link-button display-inline-block',
-                  buttonClassname || '',
-                )}
-                onClick={(e) => {
-                  if (
-                    props.discodata_query.search.facilityInspireId ||
-                    props.discodata_query.search.installationInspireId ||
-                    props.discodata_query.search.lcpInspireId
-                  ) {
-                    props.deleteQueryParam({
-                      queryParam: [
-                        'facilityInspireId',
-                        'installationInspireId',
-                        'lcpInspireId',
-                      ],
-                    });
-                  }
-                  if (backButton) {
-                    history.goBack();
-                  }
-                  return e.preventDefault;
-                }}
-                to={!backButton && getPath(detailedLink?.path)}
-              >
-                <span>{buttonTitle || detailedLink?.title || 'Go'}</span>
-              </Link>
+      {((detailedLink || backButton) && (
+        <>
+          {!hideTitle && (title || detailedLink?.title) ? (
+            <div className={cx('detailed-link-title', titleClassname || '')}>
+              {title || detailedLink?.title || ''}
             </div>
-          </>
-        )) || (
-          <p className="detailed-link-placeholder">
-            Select a page from sidebar
-          </p>
-        )}
+          ) : (
+            ''
+          )}
+          {!hideDescription && (description || detailedLink?.description) ? (
+            <p
+              className={cx(
+                'detailed-link-description',
+                descriptionClassname || '',
+              )}
+            >
+              {description || detailedLink?.description || ''}
+            </p>
+          ) : (
+            ''
+          )}
+          <div>
+            <Link
+              className={cx(
+                'detailed-link-button display-inline-block',
+                buttonClassname || '',
+              )}
+              onClick={(e) => {
+                if (
+                  props.discodata_query.search.facilityInspireId ||
+                  props.discodata_query.search.installationInspireId ||
+                  props.discodata_query.search.lcpInspireId
+                ) {
+                  props.deleteQueryParam({
+                    queryParam: [
+                      'facilityInspireId',
+                      'installationInspireId',
+                      'lcpInspireId',
+                    ],
+                  });
+                }
+                if (backButton) {
+                  history.goBack();
+                }
+                return e.preventDefault;
+              }}
+              to={!backButton && getPath(detailedLink?.path)}
+            >
+              <span>{buttonTitle || detailedLink?.title || 'Go'}</span>
+            </Link>
+          </div>
+        </>
+      )) || (
+        <p className="detailed-link-placeholder">Select a page from sidebar</p>
+      )}
     </div>
   );
 };

diff --git a/src/components/theme/View/DefaultView.jsx b/src/components/theme/View/DefaultView.jsx
@@ -3,7 +3,9 @@
  * @module components/theme/View/DefaultView
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 
@@ -32,29 +34,38 @@ const messages = defineMessages({
  * @param {Object} content Content object.
  * @returns {string} Markup of the component.
  */
-const DefaultView = ({ content, intl, location }) => {
+const DefaultView = ({ content, contentType, intl, location }) => {
   const blocksFieldname = getBlocksFieldname(content);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(content);
-
+  const contentTypeBlocks =
+    contentType.data?.properties?.[blocksFieldname]?.default;
+  const contentTypeBlocksLayout =
+    contentType.data?.properties?.[blocksLayoutFieldname]?.default;
+  if (!contentType?.loaded) return '';
   return hasBlocksData(content) ? (
     <div id="page-document" className="ui container">
       {map(content[blocksLayoutFieldname].items, (block) => {
+        const contentBlock =
+          contentTypeBlocks?.[content[blocksFieldname]?.[block]?.['@layout']] &&
+          !content[blocksFieldname]?.[block]?.grid_overwrite_layout
+            ? contentTypeBlocks?.[
+                content[blocksFieldname]?.[block]?.['@layout']
+              ]
+            : content[blocksFieldname]?.[block];
         const Block =
-          blocks.blocksConfig[content[blocksFieldname]?.[block]?.['@type']]?.[
-            'view'
-          ] || null;
+          blocks.blocksConfig[contentBlock?.['@type']]?.['view'] || null;
         return Block !== null ? (
           <Block
             key={block}
             id={block}
             properties={content}
-            data={content[blocksFieldname][block]}
+            data={contentBlock}
             path={getBaseUrl(location?.pathname || '')}
           />
         ) : (
           <div key={block}>
             {intl.formatMessage(messages.unknownBlock, {
-              block: content[blocksFieldname]?.[block]?.['@type'],
+              block: contentBlock?.['@type'],
             })}
           </div>
         );
@@ -120,4 +131,11 @@ DefaultView.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(DefaultView);
+export default compose(
+  connect(
+    (state, props) => ({
+      contentType: state.contentType,
+    }),
+    {},
+  ),
+)(injectIntl(DefaultView));
diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js
@@ -9,3 +9,4 @@ export const GET_PARENT_FOLDER_DATA = 'GET_PARENT_FOLDER_DATA';
 export const GET_NAV_ITEMS = 'GET_NAV_ITEMS';
 export const GET_PAGE = 'GET_PAGE';
 export const GET_SPARQL_DATA = 'GET_SPARQL_DATA';
+export const GET_CONTENT_TYPE = 'GET_CONTENT_TYPE';
diff --git a/src/customizations/volto/components/theme/View/View.jsx b/src/customizations/volto/components/theme/View/View.jsx
@@ -15,6 +15,7 @@ import { views } from '~/config';
 
 import { Comments, Tags, Toolbar } from '@plone/volto/components';
 import { listActions, getContent } from '@plone/volto/actions';
+import { getContentType } from '~/actions';
 import {
   BodyClass,
   getBaseUrl,
@@ -120,10 +121,11 @@ class View extends Component {
    */
   UNSAFE_componentWillMount() {
     this.props.listActions(getBaseUrl(this.props.pathname));
-    this.props.getContent(
-      getBaseUrl(this.props.pathname),
-      this.props.versionId,
-    );
+    this.props
+      .getContent(getBaseUrl(this.props.pathname), this.props.versionId)
+      .then((response) => {
+        this.props.getContentType(response['@type']);
+      });
   }
 
   componentDidMount() {
@@ -151,10 +153,11 @@ class View extends Component {
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.pathname !== this.props.pathname) {
       this.props.listActions(getBaseUrl(nextProps.pathname));
-      this.props.getContent(
-        getBaseUrl(nextProps.pathname),
-        this.props.versionId,
-      );
+      this.props
+        .getContent(getBaseUrl(nextProps.pathname), this.props.versionId)
+        .then((response) => {
+          this.props.getContentType(response['@type']);
+        });
     }
 
     if (nextProps.actions.object_buttons) {
@@ -314,6 +317,7 @@ export default compose(
       actions: state.actions.actions,
       token: state.userSession.token,
       content: state.content.data,
+      contentType: state.contentType,
       error: state.content.get.error,
       apiError: state.apierror.error,
       connectionRefused: state.apierror.connectionRefused,
@@ -325,6 +329,7 @@ export default compose(
     {
       listActions,
       getContent,
+      getContentType,
     },
   ),
 )(View);
diff --git a/src/reducers/contentType.js b/src/reducers/contentType.js
@@ -0,0 +1,54 @@
+/**
+ * Content reducer.
+ * @module reducers/content/content
+ */
+import { GET_CONTENT_TYPE } from '~/constants/ActionTypes';
+
+const initialState = {
+  data: null,
+  loading: false,
+  loaded: false,
+  error: null,
+};
+
+/**
+ * Content reducer.
+ * @function content
+ * @param {Object} state Current state.
+ * @param {Object} action Action to be handled.
+ * @returns {Object} New state.
+ */
+export default function contentType(state = initialState, action = {}) {
+  let { result } = action;
+  switch (action.type) {
+    case `${GET_CONTENT_TYPE}_PENDING`:
+      return {
+        ...state,
+        data: null,
+        loading: true,
+        loaded: false,
+        error: null,
+      };
+    case `${GET_CONTENT_TYPE}_SUCCESS`:
+      const data = {
+        ...result,
+      };
+      return {
+        ...state,
+        data,
+        loading: false,
+        loaded: true,
+        error: null,
+      };
+    case `${GET_CONTENT_TYPE}_FAIL`:
+      return {
+        ...state,
+        data: null,
+        loading: false,
+        loaded: false,
+        error: action.error,
+      };
+    default:
+      return state;
+  }
+}
diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -8,6 +8,7 @@ import section_tabs from './section_tabs';
 import parent_folder_data from './parent_folder_data';
 import pages from './pages';
 import sparql from './sparql';
+import contentType from './contentType';
 /**
  * Root reducer.
  * @function
@@ -20,6 +21,7 @@ const reducers = {
   parent_folder_data,
   pages,
   sparql,
+  contentType,
   ...defaultReducers,
   // Add your reducers here
 };