added ChildrenLinks

package.json

@@ -66,6 +66,7 @@
     "http-server": "^0.12.1",
     "immutable": "^3.8.2",
     "less-loader": "5.0.0",
+    "lodash": "^4.17.15",
     "npm": "^6.13.7",
     "react": "^16.13.0",
     "react-component-queries": "^2.3.0",
@@ -78,6 +79,7 @@
     "react-stickynode": "^2.1.1",
     "react-toastify": "^5.3.2",
     "react-visibility-sensor": "^5.1.1",
+    "redux-connect": "^10.0.0",
     "semantic-ui-css": "^2.4.1",
     "slick-carousel": "^1.8.1",
     "start": "^5.1.0",

src/actions/index.js

@@ -1,12 +1,25 @@
 import {
     SET_SECTION_TABS,
+    GET_PARENT_FOLDER_DATA,
+    GET_NAV_ITEMS
 } from '~/constants/ActionTypes';
 
 
 export function setSectionTabs(payload) {
-    console.log('in action', payload)
-    return {
-      type: SET_SECTION_TABS,
-      payload: payload,
-    };
-}
+  return {
+    type: SET_SECTION_TABS,
+    payload: payload,
+  };
+}
+
+
+export function getParentFolderData(url) {
+  console.log('in action', url)
+  return {
+    type: GET_PARENT_FOLDER_DATA,
+    request: {
+      op: 'get',
+      path: `/${url}?fullobjects`,
+    },
+  };
+}

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

@@ -0,0 +1,98 @@
+import React, { Component } from 'react';
+import { injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Grid } from 'semantic-ui-react';
+import AddLinkForm from '../DetailedLink/AddLinkForm';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { getParentFolderData } from '~/actions';
+import { Link } from 'react-router-dom';
+import _ from 'lodash'
+
+
+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 = {
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.childrenLinks !== this.props.childrenLinks) {
+      this.onEditData()
+    }
+  }
+
+  handleLinkData = (link) => {
+    this.props.getParentFolderData(link.value)
+
+  }
+
+  onEditData() {
+    const childrenLinks = this.props.childrenLinks;
+    this.props.onChangeBlock(this.props.block, {
+      ...this.props.data,
+      links: childrenLinks,
+    });
+  }
+
+  render() {
+
+    const childrenLinks = this.props.data.links;
+
+    return (
+      <Grid columns={1}>
+        <Grid.Row>
+          {childrenLinks &&
+            childrenLinks.map(child =>
+              <div className="child-container">
+                <Link target="_blank" className="child-link" to={child.url}>
+                  {_.capitalize(child.title)}
+                </Link>
+              </div>
+            )
+          }
+        </Grid.Row>
+        <Grid.Column>
+            <p className="search-text">Search page</p>
+            <AddLinkForm onAddLink={this.handleLinkData} />
+        </Grid.Column>
+      </Grid>
+    );
+  }
+}
+
+
+
+const mapDispatchToProps = {
+  getParentFolderData,
+}
+
+export default compose(
+  injectIntl,
+  connect(
+    state => ({
+      state,
+      childrenLinks: state.parent_folder_data.items
+    }),
+    mapDispatchToProps,
+  )
+)(Edit)

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

@@ -0,0 +1,47 @@
+/**
+ * Edit map block.
+ * @module components/manage/Blocks/Maps/Edit
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl';
+import { Grid } from 'semantic-ui-react';
+import { Link } from 'react-router-dom';
+import _ from 'lodash'
+
+class View extends Component {
+    /**
+     * Property types.
+     * @property {Object} propTypes Property types.
+     * @static
+     */
+    static propTypes = {
+        data: PropTypes.objectOf(PropTypes.any).isRequired,
+        // pathname: PropTypes.string.isRequired,
+    };
+
+    render() {
+
+        const childrenLinks = this.props.data.links
+        return (
+            <div style={{marginBottom:"40px",marginTop:"40px"}}>
+            <Grid columns={1}>
+                {childrenLinks &&
+                    childrenLinks.map(child =>
+                        <div className="child-container">
+                            <Link target="_blank" className="child-link" to={child.url}>
+                                {_.capitalize(child.title)}
+
+                            </Link>
+                        </div>
+
+                    )
+                }
+            </Grid>
+            </div>
+        );
+    }
+}
+
+export default injectIntl(View);

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

@@ -12,7 +12,7 @@ import { map } from 'lodash';
 import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { resetSearchContent, searchContent } from '@plone/volto/actions';
+import { resetSearchContent, searchContent, getNavigation } from '@plone/volto/actions';
 import URLUtils from '@plone/volto/components/manage/AnchorPlugin/utils/URLUtils';
 
 const messages = defineMessages({
@@ -106,6 +106,7 @@ class AddLinkForm extends Component {
       value: item['@id'],
       description: item.description,
       external: true,
+      url: item.getURL
     };
     this.setState({
       value: itemToSave,
@@ -144,9 +145,9 @@ class AddLinkForm extends Component {
 
   render() {
     const { value, isInvalid } = this.state;
-    console.log('link value', this.props);
+    console.log('link value', this.props.search);
     return (
-      <div className="link-form-container" 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,6 +164,7 @@ class AddLinkForm extends Component {
             </g>
           </svg>
           <input
+            style={{ padding: "10px", border: 'none' }}
             onChange={this.onChange}
             onKeyDown={this.onKeyDown}
             ref={this.onRef}
@@ -171,20 +173,22 @@ class AddLinkForm extends Component {
             placeholder={this.props.intl.formatMessage(messages.placeholder)}
           />
         </div>
-        <ul style={{ margin: 0, paddingLeft: '35px' }}>
+        <div style={{ margin: 0, paddingLeft: '35px', display: 'flex', flexWrap: 'wrap' }}>
           {map(this.props.search, item => (
-            <li style={{ padding: '5px' }}>
+            <div className="child-container">
               <button
+                className="child-link"
                 style={{ cursor: 'pointer' }}
                 onClick={e => this.onSelectItem(e, item)}
                 title={item['@id']}
                 role="link"
               >
                 {item.title}
               </button>
-            </li>
+            </div>
+
           ))}
-        </ul>
+        </div>
       </div>
     );
   }

src/constants/ActionTypes.js

@@ -1 +1,5 @@
-export const SET_SECTION_TABS = 'SET_SECTION_TABS';
+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';
+
+

src/localconfig.js

@@ -12,8 +12,12 @@ import FolderContentsBlockEdit from '~/components/manage/Blocks/FolderContentsBl
 import ArticlesListView from '~/components/manage/Blocks/ArticlesList/View';
 import ArticlesListEdit from '~/components/manage/Blocks/ArticlesList/Edit';
 
+import ChildrenLinksView from '~/components/manage/Blocks/ChildrenLinks/View'
+import ChildrenLinksEdit from '~/components/manage/Blocks/ChildrenLinks/Edit'
+
+
 const applyConfig = config => {
-console.log('config', config)
+  console.log('config', config)
   config.views = {
     ...config.views,
     layoutViews: {
@@ -55,6 +59,15 @@ console.log('config', config)
     edit: ArticlesListEdit,
     icon: config.blocks.blocksConfig.text.icon,
   };
+
+  config.blocks.blocksConfig.children_links = {
+    id: 'children_links',
+    group: 'custom_addons',
+    title: 'Children Links',
+    view: ChildrenLinksView,
+    edit: ChildrenLinksEdit,
+    icon: config.blocks.blocksConfig.text.icon,
+  };
   return config;
 }
 

src/reducers/index.js

@@ -1,8 +1,10 @@
 import defaultReducers from '@plone/volto/reducers';
 import section_tabs from './section_tabs';
+import parent_folder_data from "./parent_folder_data"
 
 const reducers = {
     section_tabs,
+    parent_folder_data,
     ...defaultReducers
 }
 

src/reducers/parent_folder_data.js

@@ -0,0 +1,62 @@
+/**
+ * Navigation reducer.
+ * @module reducers/frontpage_slides
+ */
+
+import { map } from 'lodash';
+import { settings } from '~/config';
+
+import { GET_PARENT_FOLDER_DATA } from '~/constants/ActionTypes';
+
+const initialState = {
+  error: null,
+  items: [],
+  loaded: false,
+  loading: false,
+};
+
+/**
+ * Navigation reducer.
+ * @function navigation
+ * @param {Object} state Current state.
+ * @param {Object} action Action to be handled.
+ * @returns {Object} New state.
+ */
+export default function parent_folder_data(state = initialState, action = {}) {
+
+
+  switch (action.type) {
+    case `${GET_PARENT_FOLDER_DATA}_PENDING`:
+      return {
+        ...state,
+        error: null,
+        loaded: false,
+        loading: true,
+      };
+    case `${GET_PARENT_FOLDER_DATA}_SUCCESS`:
+      const parent = action.result.id
+      const routedLinks = action.result.items.map(item => {
+        return {
+          ...item,
+          url: `${parent}/${item.id}`
+        }
+      })
+      return {
+        ...state,
+        error: null,
+        items: routedLinks,
+        loaded: true,
+        loading: false,
+      };
+    case `${GET_PARENT_FOLDER_DATA}_FAIL`:
+      return {
+        ...state,
+        error: action.error,
+        items: [],
+        loaded: false,
+        loading: false,
+      };
+    default:
+      return state;
+  }
+}

theme/themes/pastanaga/globals/site.overrides

@@ -178,4 +178,25 @@ h1.documentFirstHeading {
     -webkit-box-orient: vertical;
     margin-bottom: 20px;
   }
+}
+
+.child-container {
+  display: flex;
+  justify-content: center;
+  border: 1px solid #33536B;
+  border-radius: 40px;
+  margin: 5px;
+
+  .child-link {
+    padding: 10px 25px;
+    color: #33536B;
+    font-size: 20px;
+    font-weight: 300 !important;
+    text-decoration: none;
+  }
+}
+
+.search-text {
+  margin: 10px !important;
+  font-size: 20px !important;
 }