Added DetailedLink info for page from '?fullobject' request

src/actions/index.js

@@ -1,18 +1,16 @@
 import {
-    SET_SECTION_TABS,
-    GET_PARENT_FOLDER_DATA,
-    GET_NAV_ITEMS
+  SET_SECTION_TABS,
+  GET_PARENT_FOLDER_DATA,
+  GET_PAGE,
 } from '~/constants/ActionTypes';
 
-
 export function setSectionTabs(payload) {
   return {
     type: SET_SECTION_TABS,
     payload: payload,
   };
 }
 
-
 export function getParentFolderData(url) {
   return {
     type: GET_PARENT_FOLDER_DATA,
@@ -22,3 +20,14 @@ export function getParentFolderData(url) {
     },
   };
 }
+
+export function getPage(url) {
+  return {
+    type: GET_PAGE,
+    url,
+    request: {
+      op: 'get',
+      path: `${url}?fullobjects`,
+    },
+  };
+}

src/components/manage/Blocks/DetailedLink/AddLinkForm.jsx

@@ -6,13 +6,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
-import unionClassNames from 'union-class-names';
 import { connect } from 'react-redux';
 import { map } from 'lodash';
 import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { resetSearchContent, searchContent, getNavigation } from '@plone/volto/actions';
+import { resetSearchContent, searchContent } from '@plone/volto/actions';
 import URLUtils from '@plone/volto/components/manage/AnchorPlugin/utils/URLUtils';
 
 const messages = defineMessages({
@@ -106,13 +105,13 @@ class AddLinkForm extends Component {
       value: item['@id'],
       description: item.description,
       external: true,
-      url: item.getURL
+      url: item.getURL,
     };
     this.setState({
       value: itemToSave,
       isInvalid: false,
     });
-    this.props.onAddLink(itemToSave)
+    this.props.onAddLink(itemToSave);
     this.props.resetSearchContent();
     this.input.blur();
     this.onClose();
@@ -144,9 +143,13 @@ class AddLinkForm extends Component {
   }
 
   render() {
-    const { value, isInvalid } = this.state;
+    const { value } = this.state;
     return (
-      <div className="link-form-container" style={{ display: 'flex', flexDirection: 'column' }} ref={this.linkFormContainer}>
+      <div
+        className="link-form-container"
+        style={{ display: 'flex', flexDirection: 'column' }}
+        ref={this.linkFormContainer}
+      >
         <div
           style={{ marginLeft: '5px', display: 'flex', alignItems: 'center' }}
         >
@@ -163,18 +166,26 @@ class AddLinkForm extends Component {
             </g>
           </svg>
           <input
-            style={{ padding: "10px", border: 'none' }}
+            style={{ padding: '10px', border: 'none' }}
             onChange={this.onChange}
             onKeyDown={this.onKeyDown}
             ref={this.onRef}
             type="text"
-            value={value.title}
+            value={value.text}
+            defaultValue={this.props.initialValue}
             placeholder={this.props.intl.formatMessage(messages.placeholder)}
           />
         </div>
-        <div style={{ margin: 0, paddingLeft: '35px', display: 'flex', flexWrap: 'wrap' }}>
+        <div
+          style={{
+            margin: 0,
+            paddingLeft: '35px',
+            display: 'flex',
+            flexWrap: 'wrap',
+          }}
+        >
           {map(this.props.search, item => (
-            <div className="child-container">
+            <div key={item['@id']} className="child-container">
               <button
                 className="child-link"
                 style={{ cursor: 'pointer' }}
@@ -185,7 +196,6 @@ class AddLinkForm extends Component {
                 {item.title}
               </button>
             </div>
-
           ))}
         </div>
       </div>

src/components/manage/Blocks/DetailedLink/Edit.jsx

@@ -2,115 +2,70 @@
  * Edit map block.
  * @module components/manage/Blocks/Maps/Edit
  */
+import React, { useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { injectIntl } from 'react-intl';
 
-import React, { Component } from 'react';
-import PropTypes, { array } from 'prop-types';
-import { Link } from 'react-router-dom';
-import { Icon, SidebarPortal, TextWidget } from '@plone/volto/components';
-import { Dropdown, Segment, Checkbox, Input, Button } from 'semantic-ui-react';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { Card } from 'semantic-ui-react';
-import { settings } from '~/config';
-import AddLinkForm from './AddLinkForm';
-
-function removeDuplicates(myArr, prop) {
-  return myArr.filter((obj, pos, arr) => {
-    return arr.map(mapObj => mapObj[prop]).indexOf(obj[prop]) === pos;
-  });
-}
+import { SidebarPortal } from '@plone/volto/components';
+import { Segment } from 'semantic-ui-react';
 
-class Edit extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    selected: PropTypes.bool.isRequired,
-    block: PropTypes.string.isRequired,
-    index: PropTypes.number.isRequired,
-    data: PropTypes.objectOf(PropTypes.any).isRequired,
-    pathname: PropTypes.string.isRequired,
-    onChangeBlock: PropTypes.func.isRequired,
-    onSelectBlock: PropTypes.func.isRequired,
-    onDeleteBlock: PropTypes.func.isRequired,
-    onFocusPreviousBlock: PropTypes.func.isRequired,
-    onFocusNextBlock: PropTypes.func.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      link: this.props.data.link
-    };
-  }
-  getPath(url) {
-    if (!url) return '';
-    return url
-      .replace(settings.apiPath, '')
-      .replace(settings.internalApiPath, '');
-  }
+import AddLinkForm from './AddLinkForm';
+import View from './View';
 
+import { getPage } from '~/actions';
 
-  componentDidUpdate(prevProps, prevState) {
-    if (JSON.stringify(prevState) !== JSON.stringify(this.state)) {
-      this.onChangeData();
+const Edit = props => {
+  const [state, setState] = useState({
+    link: null,
+  });
+  useEffect(() => {
+    if (props.pages && props.pages?.[state.link?.value]) {
+      props.onChangeBlock(props.block, {
+        ...props.data,
+        detailedLink: {
+          ...props.data.detailedLink,
+          ...props.pages[state.link.value],
+        },
+      });
     }
-  }
-
-  onChangeData() {
-    this.props.onChangeBlock(this.props.block, {
-      ...this.props.data,
-      link: this.state.link,
-    });
-  }
-
-
-  onAddLink = link => {
-    this.setState({
-      link
-    });
-  };
-
-  render() {
-    return (
-      <div>
-        {this.state.link && (
-          <Link className="detailed-link-block" onClick={(e) => e.preventDefault} to={this.getPath(this.state.link.value)}>
-            <div className="detailed-link-block-item-title">
-              {this.state.link.text}
+    /* eslint-disable-next-line */
+  }, [props.pages])
+  return (
+    <div>
+      <SidebarPortal selected={props.selected}>
+        <Segment.Group raised>
+          <header className="header pulled">
+            <h2>{'Detailed Link'}</h2>
+          </header>
+          <Segment className="form sidebar-image-data">
+            <div className="segment-row">
+              <AddLinkForm
+                onAddLink={link => {
+                  setState({ ...state, link });
+                  props.dispatch(getPage(link.value));
+                  props.onChangeBlock(props.block, {
+                    ...props.data,
+                    detailedLink: {
+                      ...props.data.detailedLink,
+                      ...link,
+                    },
+                  });
+                }}
+                initialValue={props.data?.link?.text}
+              />
             </div>
-            <p>
-            {this.state.link.description && <p>{this.state.link.description}</p>}
-            </p>
-              <Button basic>Read more</Button>
-          </Link>
-        ) || 'Select a page from sidebar'}
-        <SidebarPortal selected={true}>
-          <Segment.Group raised>
-            <header className="header pulled">
-              <h2> Detailed Link </h2>
-            </header>
-            <Segment className="form sidebar-image-data">
-              <div className="segment-row">
-                <AddLinkForm onAddLink={this.onAddLink} />
-              </div>
-            </Segment>
-            <Segment>
-              {/* <input
-                onChange={this.onChange}
-                onKeyDown={this.onKeyDown}
-                ref={this.onRef}
-                type="text"
-                value={value.title}
-                placeholder={this.props.intl.formatMessage(messages.placeholder)}
-              /> */}
-            </Segment>
-          </Segment.Group>
-        </SidebarPortal>
-      </div>
-    );
-  }
-}
+          </Segment>
+        </Segment.Group>
+      </SidebarPortal>
+      <View {...props} />
+    </div>
+  );
+};
 
-export default injectIntl(Edit);
+export default compose(
+  injectIntl,
+  connect((state, props) => ({
+    pages: state.pages.items,
+  })),
+)(Edit);

src/components/manage/Blocks/DetailedLink/View.jsx

@@ -1,67 +1,38 @@
-/**
- * Edit map block.
- * @module components/manage/Blocks/Maps/Edit
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
+import React from 'react';
 import { injectIntl } from 'react-intl';
-import { settings } from '~/config';
-import { BodyClass } from '@plone/volto/helpers';
-
 import { Button } from 'semantic-ui-react';
-// import AddLinkForm from './AddLinkForm';
-
-function removeDuplicates(myArr, prop) {
-  return myArr.filter((obj, pos, arr) => {
-    return arr.map(mapObj => mapObj[prop]).indexOf(obj[prop]) === pos;
-  });
-}
-
-class View extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    data: PropTypes.objectOf(PropTypes.any).isRequired,
-    // pathname: PropTypes.string.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      link: this.props.data.link
-    };
-  }
-  getPath(url) {
-    if (!url) return '';
-    return url
-      .replace(settings.apiPath, '')
-      .replace(settings.internalApiPath, '');
-  }
-
+import { Link } from 'react-router-dom';
 
-  render() {
-    return (
-      <div>
-        {this.state.link && (
-          <Link className="detailed-link-block" onClick={(e) => e.preventDefault} to={this.getPath(this.state.link.value)}>
-            <div className="detailed-link-block-item-title">
-              {this.state.link.text}
-            </div>
-            <p>
+import { settings } from '~/config';
 
-              {this.state.link.description && <p>{this.state.link.description}</p>}
-            </p>
+const getPath = url => {
+  if (!url) return '';
+  return url
+    .replace(settings.apiPath, '')
+    .replace(settings.internalApiPath, '');
+};
+
+const View = props => {
+  return (
+    <div>
+      {(props.data?.detailedLink && (
+        <div>
+          <div className="detailed-link-block-item-title">
+            {props.data.detailedLink.title || props.data.detailedLink.text}
+          </div>
+          <p>{props.data.detailedLink.description || ''}</p>
+          <Link
+            className="detailed-link-block"
+            onClick={e => e.preventDefault}
+            to={getPath(props.data.detailedLink.value)}
+          >
             <Button basic>Read more</Button>
           </Link>
-        ) || 'Select a page from sidebar'}
-      </div>
-    );
-  }
-}
+        </div>
+      )) ||
+        'Select a page from sidebar'}
+    </div>
+  );
+};
 
 export default injectIntl(View);