diff --git a/src/actions/index.js b/src/actions/index.js index 3beded3..0616987 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -1,10 +1,9 @@ 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, @@ -12,7 +11,6 @@ export function setSectionTabs(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`, + }, + }; +} diff --git a/src/components/manage/Blocks/DetailedLink/AddLinkForm.jsx b/src/components/manage/Blocks/DetailedLink/AddLinkForm.jsx index 656e9ea..679a2e4 100644 --- a/src/components/manage/Blocks/DetailedLink/AddLinkForm.jsx +++ b/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 ( -
+
@@ -163,18 +166,26 @@ class AddLinkForm extends Component {
-
+
{map(this.props.search, item => ( -
+
- ))}
diff --git a/src/components/manage/Blocks/DetailedLink/Edit.jsx b/src/components/manage/Blocks/DetailedLink/Edit.jsx index 48d523a..5b231f3 100644 --- a/src/components/manage/Blocks/DetailedLink/Edit.jsx +++ b/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 ( -
- {this.state.link && ( - e.preventDefault} to={this.getPath(this.state.link.value)}> -
- {this.state.link.text} + /* eslint-disable-next-line */ + }, [props.pages]) + return ( +
+ + +
+

{'Detailed 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} + />
-

- {this.state.link.description &&

{this.state.link.description}

} -

- - - ) || 'Select a page from sidebar'} - - -
-

Detailed Link

-
- -
- -
- - - {/* */} - - - -
- ); - } -} + + + + +
+ ); +}; -export default injectIntl(Edit); +export default compose( + injectIntl, + connect((state, props) => ({ + pages: state.pages.items, + })), +)(Edit); diff --git a/src/components/manage/Blocks/DetailedLink/View.jsx b/src/components/manage/Blocks/DetailedLink/View.jsx index 785ec6f..7c8bbe0 100644 --- a/src/components/manage/Blocks/DetailedLink/View.jsx +++ b/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 ( -
- {this.state.link && ( - e.preventDefault} to={this.getPath(this.state.link.value)}> -
- {this.state.link.text} -
-

+import { settings } from '~/config'; - {this.state.link.description &&

{this.state.link.description}

} -

+const getPath = url => { + if (!url) return ''; + return url + .replace(settings.apiPath, '') + .replace(settings.internalApiPath, ''); +}; + +const View = props => { + return ( +
+ {(props.data?.detailedLink && ( +
+
+ {props.data.detailedLink.title || props.data.detailedLink.text} +
+

{props.data.detailedLink.description || ''}

+ e.preventDefault} + to={getPath(props.data.detailedLink.value)} + > - ) || 'Select a page from sidebar'} -
- ); - } -} +
+ )) || + 'Select a page from sidebar'} +
+ ); +}; export default injectIntl(View); diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js index 4aa5ef8..25bad32 100644 --- a/src/constants/ActionTypes.js +++ b/src/constants/ActionTypes.js @@ -1,5 +1,4 @@ export const SET_SECTION_TABS = 'SET_SECTION_TABS'; export const GET_PARENT_FOLDER_DATA = 'GET_PARENT_FOLDER_DATA'; export const GET_NAV_ITEMS = 'GET_NAV_ITEMS'; - - +export const GET_PAGE = 'GET_PAGE'; diff --git a/src/reducers/index.js b/src/reducers/index.js index 8ba4aec..07fd94b 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,11 +1,13 @@ import defaultReducers from '@plone/volto/reducers'; import section_tabs from './section_tabs'; -import parent_folder_data from "./parent_folder_data" +import parent_folder_data from './parent_folder_data'; +import pages from './pages'; const reducers = { - section_tabs, - parent_folder_data, - ...defaultReducers -} + section_tabs, + parent_folder_data, + pages, + ...defaultReducers, +}; -export default reducers \ No newline at end of file +export default reducers; diff --git a/src/reducers/pages.js b/src/reducers/pages.js new file mode 100644 index 0000000..68d5a23 --- /dev/null +++ b/src/reducers/pages.js @@ -0,0 +1,42 @@ +import { GET_PAGE } from '~/constants/ActionTypes'; + +const initialState = { + error: null, + items: {}, + loaded: false, + loading: false, +}; + +export default function pages(state = initialState, action = {}) { + switch (action.type) { + case `${GET_PAGE}_PENDING`: + return { + ...state, + error: null, + loaded: false, + loading: true, + }; + case `${GET_PAGE}_SUCCESS`: + const items = { + ...state.items, + }; + items[action.url] = action.result; + return { + ...state, + error: null, + items, + loaded: true, + loading: false, + }; + case `${GET_PAGE}_FAIL`: + return { + ...state, + error: action.error, + items: {}, + loaded: false, + loading: false, + }; + default: + return state; + } +}