Merge pull request #3 from eea/develop

align folder contents item in 2 col grid

CHANGELOG.md

@@ -4,8 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.1.2](https://github.com/eea/volto-collection-block/compare/0.1.1...0.1.2)
+
+- eslint . [`3aa17f3`](https://github.com/eea/volto-collection-block/commit/3aa17f342993cbe8f425f9287a42de6efdcf84f7)
+- align folder contents item in 2 col grid [`d0c1eaf`](https://github.com/eea/volto-collection-block/commit/d0c1eafc0054b2128da21776e99854407a561c21)
+
 #### [0.1.1](https://github.com/eea/volto-collection-block/compare/0.1.0...0.1.1)
 
+> 5 May 2021
+
+- cypress tests [`#2`](https://github.com/eea/volto-collection-block/pull/2)
 - add cypress dummy tests [`8dff511`](https://github.com/eea/volto-collection-block/commit/8dff5115f08c80f67426ba869995e20cb8807402)
 - enable integration testing [`5e71b8c`](https://github.com/eea/volto-collection-block/commit/5e71b8c58fdc826ed924035c0e61dc86ac1805c5)
 -  [JENKINS] - Auto-release pipeline [`9050c1a`](https://github.com/eea/volto-collection-block/commit/9050c1aa2e01644c96853d6ad3bd30d9aea2889b)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-collection-block",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "volto-collection-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/components/manage/Blocks/Collection/TilesListing.jsx

@@ -1,47 +1,68 @@
 import React, { Component } from 'react';
-import { FormattedDate } from 'react-intl';
-import { Item } from 'semantic-ui-react';
-import { Breadcrumb, Placeholder } from 'semantic-ui-react';
+
+import { Item, Grid } from 'semantic-ui-react';
+import { Placeholder } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import config from '@plone/volto/registry';
-
+import { isEqual } from 'lodash';
 class TilesListing extends Component {
+  state = { searchItems: [] };
+
   getPath(url) {
     return url
       .replace(config.settings.apiPath, '')
       .replace(config.settings.internalApiPath, '');
   }
 
-  render() {
-    // const { items } = this.props;
-    const searchItems = this.props.items?.sort(
+  getSearchItems() {
+    return this.props.items?.sort(
       (a, b) => new Date(b.ModificationDate) - new Date(a.ModificationDate),
     );
+  }
+
+  componentDidMount() {
+    const searchItems = this.getSearchItems();
+    this.setState({ searchItems });
+  }
 
-    return searchItems.length ? (
-      searchItems.map((item) => (
-        <Item className="search-item" key={item['@id']}>
-          <Item.Content>
-            {/* <Item.Header>
-         
-            </Item.Header> */}
+  componentDidUpdate(prevProps, prevState) {
+    if (!isEqual(this.props.items, prevProps.items)) {
+      const searchItems = this.getSearchItems();
+      this.setState({ searchItems });
+    }
+  }
+
+  render() {
+    const { searchItems } = this.state;
+
+    return searchItems.length > 0 ? (
+      <Grid columns={2}>
+        {searchItems.map((item) => (
+          <Grid.Column>
+            <Item key={item['@id']}>
+              <Item.Content>
+                <Item.Header>
+                  <Link style={{ color: '#666' }} to={item.url}>
+                    <h2 className="item-title">{item.title || item.Title}</h2>
+                  </Link>
+                </Item.Header>
 
-            <Item.Description>
-              <div className="descriptionBody">
-                <Link style={{ color: '#444' }} to={item.url}>
-                  <h4 className="item-title">
-                    {item.description || item.title || item.Title}
-                  </h4>
-                </Link>
-              </div>
-              <div className="searchMetadata">
-                {item.topics && (
-                  <div>
-                    <span className="searchLabel black">Topic:</span>{' '}
-                    {item.topics?.join(', ')}
+                <Item.Description>
+                  <div className="descriptionBody">
+                    <Link style={{ color: '#444' }} to={item.url}>
+                      <p className="item-description">
+                        {item.description || item.title || item.Title}
+                      </p>
+                    </Link>
                   </div>
-                )}
-                <div>
+                  <div className="searchMetadata">
+                    {item.topics && (
+                      <div>
+                        <span className="searchLabel black">Topic:</span>{' '}
+                        {item.topics?.join(', ')}meri zinndagi kaa
+                      </div>
+                    )}
+                    {/* <div>
                   <span className="searchLabel black">Updated:</span>{' '}
                   <FormattedDate
                     value={item.ModificationDate}
@@ -52,7 +73,7 @@ class TilesListing extends Component {
                 </div>
                 <div>
                   <span className="searchLabel black">Location:</span>{' '}
-                  {item['@components'] && item['@components'].breadcrumbs && (
+                  {item['@components'] && item['@components']?.breadcrumbs && (
                     <Breadcrumb style={{ display: 'inline' }}>
                       {item['@components'].breadcrumbs.items
                         .slice(0, -1)
@@ -80,12 +101,14 @@ class TilesListing extends Component {
                         ])}
                     </Breadcrumb>
                   )}
-                </div>
-              </div>
-            </Item.Description>
-          </Item.Content>
-        </Item>
-      ))
+                </div> */}
+                  </div>
+                </Item.Description>
+              </Item.Content>
+            </Item>
+          </Grid.Column>
+        ))}
+      </Grid>
     ) : (
       <div>
         <p>No results.</p>