@plone/volto 17.0.0-alpha.16 → 17.0.0-alpha.17

package/CHANGELOG.md

@@ -8,6 +8,28 @@
 
 <!-- towncrier release notes start -->
 
+## 17.0.0-alpha.17 (2023-07-11)
+
+### Breaking
+
+- Remove useToken & useContent hooks-@Tishasoumya-02 [#4951](https://github.com/plone/volto/issues/4951)
+
+### Feature
+
+- Use container from component registry in content type views, if defined. @sneridagh [#4962](https://github.com/plone/volto/issues/4962)
+
+### Bugfix
+
+- Fix temporary rendering of folder contents while query results are loading. @davisagli [#4351](https://github.com/plone/volto/issues/4351)
+- Fix isBlacklisted method check for volto externalRoutes [#4725](https://github.com/plone/volto/issues/4725)
+- Add a marker in the props passed to `RenderBlocks` in the Grid block view @sneridagh [#4932](https://github.com/plone/volto/issues/4932)
+- Fix handling of overriden image in Teaser, improve in case that a custom image component is present. @sneridagh [#4964](https://github.com/plone/volto/issues/4964)
+
+### Documentation
+
+- Replace broken link for @albertcasado to use GitHub instead of Twitter. @stevepiercy [#4941](https://github.com/plone/volto/issues/4941)
+
+
 ## 17.0.0-alpha.16 (2023-06-28)
 
 ### Feature

package/news/4351.bugfix

@@ -0,0 +1 @@
+Fix temporary rendering of folder contents while query results are loading. @davisagli

package/news/4725.bugfix

@@ -0,0 +1 @@
+Fix isBlacklisted method check for volto externalRoutes

package/news/4932.bugfix

@@ -0,0 +1 @@
+Add a marker in the props passed to `RenderBlocks` in the Grid block view @sneridagh

package/news/4941.documentation

@@ -0,0 +1 @@
+Replace broken link for @albertcasado to use GitHub instead of Twitter. @stevepiercy

package/news/4951.breaking

@@ -0,0 +1 @@
+Remove useToken & useContent hooks-@Tishasoumya-02

package/news/4962.feature

@@ -0,0 +1 @@
+Use container from component registry in content type views, if defined. @sneridagh

package/news/4964.bugfix

@@ -0,0 +1 @@
+Fix handling of overriden image in Teaser, improve in case that a custom image component is present. @sneridagh

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "17.0.0-alpha.16",
+  "version": "17.0.0-alpha.17",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"

package/packages/volto-slate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "17.0.0-alpha.16",
+  "version": "17.0.0-alpha.17",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/Grid/View.jsx

@@ -33,6 +33,7 @@ const GridBlockView = (props) => {
           content={data}
           location={location}
           blocksConfig={blocksConfig}
+          isContainer
         />
       </Grid>
     </div>

package/src/components/manage/Blocks/Listing/withQuerystringResults.jsx

@@ -54,10 +54,9 @@ export default function withQuerystringResults(WrappedComponent) {
     const hasQuery = querystring?.query?.length > 0;
     const hasLoaded = hasQuery ? querystringResults?.[id]?.loaded : true;
 
-    const listingItems =
-      querystring?.query?.length > 0 && querystringResults?.[id]
-        ? querystringResults?.[id]?.items || []
-        : folderItems;
+    const listingItems = hasQuery
+      ? querystringResults?.[id]?.items || []
+      : folderItems;
 
     const showAsFolderListing = !hasQuery && content?.items_total > b_size;
     const showAsQueryListing =

package/src/components/manage/Blocks/Teaser/Body.jsx

@@ -24,7 +24,6 @@ const TeaserBody = (props) => {
 TeaserBody.propTypes = {
   data: PropTypes.objectOf(PropTypes.any).isRequired,
   isEditMode: PropTypes.bool,
-  variation: PropTypes.string,
 };
 
 export default TeaserBody;

package/src/components/manage/Blocks/Teaser/DefaultBody.jsx

@@ -18,20 +18,31 @@ const messages = defineMessages({
   },
 });
 
-const DefaultImage = (props) => <img {...props} alt={props.alt || ''} />;
-
 const TeaserDefaultTemplate = (props) => {
   const { className, data, isEditMode } = props;
   const intl = useIntl();
   const href = data.href?.[0];
-  const image = data.preview_image?.[0];
+  const imageOverride = data.preview_image?.[0];
   const align = data?.styles?.align;
 
-  const hasImageComponent = config.getComponent('Image').component;
-  const Image = config.getComponent('Image').component || DefaultImage;
   const { openExternalLinkInNewTab } = config.settings;
-  const defaultImageSrc =
-    href && flattenToAppURL(getTeaserImageURL({ href, image, align }));
+
+  let renderedImage = null;
+  if (href && (imageOverride || href.hasPreviewImage || href.image_field)) {
+    let Image = config.getComponent('Image').component;
+    if (Image) {
+      // custom image component expects item summary as src
+      renderedImage = (
+        <Image src={imageOverride || href} alt="" loading="lazy" />
+      );
+    } else {
+      // default img expects string src
+      const src = flattenToAppURL(
+        getTeaserImageURL({ href, imageOverride, align }),
+      );
+      renderedImage = <img src={src} alt="" loading="lazy" />;
+    }
+  }
 
   return (
     <div className={cx('block teaser', className)}>
@@ -57,14 +68,8 @@ const TeaserDefaultTemplate = (props) => {
             }
           >
             <div className="teaser-item default">
-              {(href.hasPreviewImage || href.image_field || image) && (
-                <div className="image-wrapper">
-                  <Image
-                    src={hasImageComponent ? href : defaultImageSrc}
-                    alt=""
-                    loading="lazy"
-                  />
-                </div>
+              {renderedImage && (
+                <div className="image-wrapper">{renderedImage}</div>
               )}
               <div className="content">
                 {data?.head_title && (

package/src/components/manage/UniversalLink/UniversalLink.jsx

@@ -12,7 +12,6 @@ import {
   isInternalURL,
   URLUtils,
 } from '@plone/volto/helpers/Url/Url';
-import { matchPath } from 'react-router';
 
 import config from '@plone/volto/registry';
 
@@ -66,11 +65,8 @@ const UniversalLink = ({
     }
   }
 
-  const isBlacklisted =
-    (config.settings.externalRoutes ?? []).find((route) =>
-      matchPath(flattenToAppURL(url), route.match),
-    )?.length > 0;
-  const isExternal = !isInternalURL(url) || isBlacklisted;
+  const isExternal = !isInternalURL(url);
+
   const isDownload = (!isExternal && url.includes('@@download')) || download;
   const isDisplayFile =
     (!isExternal && url.includes('@@display-file')) || false;

package/src/components/manage/UniversalLink/UniversalLink.test.jsx

@@ -157,6 +157,42 @@ describe('UniversalLink', () => {
     );
   });
 
+  it('UniversalLink renders external link where link is blacklisted', () => {
+    const notInEN = /^(?!.*(#|\/en|\/static|\/controlpanel|\/cypress|\/login|\/logout|\/contact-form)).*$/;
+    config.settings.externalRoutes = [
+      {
+        match: {
+          path: notInEN,
+          exact: false,
+          strict: false,
+        },
+        url(payload) {
+          return payload.location.pathname;
+        },
+      },
+    ];
+
+    const { getByTitle } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink
+            href="http://localhost:3000/blacklisted-app"
+            title="External blacklisted app"
+          >
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByTitle('External blacklisted app').getAttribute('target')).toBe(
+      '_blank',
+    );
+    expect(getByTitle('External blacklisted app').getAttribute('rel')).toBe(
+      'noopener noreferrer',
+    );
+  });
+
   it('check UniversalLink does not break with error in item', () => {
     const component = renderer.create(
       <Provider store={store}>

package/src/components/theme/Anontools/Anontools.jsx

@@ -3,13 +3,12 @@ import { Link } from 'react-router-dom';
 import { Menu } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import { useToken } from '@plone/volto/hooks/userSession/useToken';
-import { useContent } from '@plone/volto/hooks/content/useContent';
 import config from '@plone/volto/registry';
+import { useSelector, shallowEqual } from 'react-redux';
 
 const Anontools = () => {
-  const token = useToken();
-  const { data: content } = useContent();
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const content = useSelector((state) => state.content.data, shallowEqual);
 
   const { settings } = config;
   return (

package/src/components/theme/Header/Header.jsx

@@ -1,6 +1,6 @@
 import { Container, Segment } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
-import { useToken } from '@plone/volto/hooks/userSession/useToken';
+import { useSelector, shallowEqual } from 'react-redux';
 
 import {
   Anontools,
@@ -11,7 +11,7 @@ import {
 } from '@plone/volto/components';
 
 const Header = ({ pathname }) => {
-  const token = useToken();
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
 
   return (
     <Segment basic className="header-wrapper" role="banner">

package/src/components/theme/View/AlbumView.jsx

@@ -5,9 +5,14 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Container, GridColumn, Segment } from 'semantic-ui-react';
+import {
+  Container as SemanticContainer,
+  GridColumn,
+  Segment,
+} from 'semantic-ui-react';
 import { Button, Modal, Grid } from 'semantic-ui-react';
 import { Icon, UniversalLink, PreviewImage } from '@plone/volto/components';
+import config from '@plone/volto/registry';
 
 import openSVG from '@plone/volto/icons/open.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
@@ -56,6 +61,9 @@ class AlbumView extends Component {
 
   render() {
     const { content } = this.props;
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
     return (
       <Container className="view-wrapper">
         <article id="content">

package/src/components/theme/View/EventView.jsx

@@ -9,6 +9,8 @@ import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
 import { Image, Grid } from 'semantic-ui-react';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import { EventDetails } from '@plone/volto/components';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
 
 const EventTextfieldView = ({ content }) => (
   <React.Fragment>
@@ -41,9 +43,11 @@ const EventTextfieldView = ({ content }) => (
  */
 const EventView = (props) => {
   const { content } = props;
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
   return (
-    <div id="page-document" className="ui container view-wrapper event-view">
+    <Container id="page-document" className="view-wrapper event-view">
       <Grid>
         <Grid.Column width={7} className="mobile hidden">
           {hasBlocksData(content) ? (
@@ -83,7 +87,7 @@ const EventView = (props) => {
           )}
         </Grid.Column>
       </Grid>
-    </div>
+    </Container>
   );
 };
 

package/src/components/theme/View/FileView.jsx

@@ -5,9 +5,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from 'semantic-ui-react';
-
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 /**
  * File view component class.
@@ -15,22 +15,27 @@ import { flattenToAppURL } from '@plone/volto/helpers';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const FileView = ({ content }) => (
-  <Container className="view-wrapper">
-    <h1 className="documentFirstHeading">
-      {content.title}
-      {content.subtitle && ` - ${content.subtitle}`}
-    </h1>
-    {content.description && (
-      <p className="documentDescription">{content.description}</p>
-    )}
-    {content.file?.download && (
-      <a href={flattenToAppURL(content.file.download)}>
-        {content.file.filename}
-      </a>
-    )}
-  </Container>
-);
+const FileView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper">
+      <h1 className="documentFirstHeading">
+        {content.title}
+        {content.subtitle && ` - ${content.subtitle}`}
+      </h1>
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content.file?.download && (
+        <a href={flattenToAppURL(content.file.download)}>
+          {content.file.filename}
+        </a>
+      )}
+    </Container>
+  );
+};
 
 /**
  * Property types.

package/src/components/theme/View/ImageView.jsx

@@ -5,11 +5,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from 'semantic-ui-react';
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
 import prettybytes from 'pretty-bytes';
-
 import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 /**
  * Image view component class.
@@ -17,37 +17,42 @@ import { flattenToAppURL } from '@plone/volto/helpers';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const ImageView = ({ content }) => (
-  <Container className="view-wrapper">
-    <h1 className="documentFirstHeading">
-      {content.title}
-      {content.subtitle && ` - ${content.subtitle}`}
-    </h1>
-    {content.description && (
-      <p className="documentDescription">{content.description}</p>
-    )}
-    {content?.image?.download && (
-      <a href={flattenToAppURL(content.image.download)}>
-        <img
-          alt={content.title}
-          src={flattenToAppURL(content.image.scales.preview.download)}
-        />
-        <figcaption>
-          <FormattedMessage
-            id="Size: {size}"
-            defaultMessage="Size: {size}"
-            values={{ size: prettybytes(content.image.size) }}
-          />
-          &nbsp; &mdash; &nbsp;
-          <FormattedMessage
-            id="Click to download full sized image"
-            defaultMessage="Click to download full sized image"
+const ImageView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper">
+      <h1 className="documentFirstHeading">
+        {content.title}
+        {content.subtitle && ` - ${content.subtitle}`}
+      </h1>
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content?.image?.download && (
+        <a href={flattenToAppURL(content.image.download)}>
+          <img
+            alt={content.title}
+            src={flattenToAppURL(content.image.scales.preview.download)}
           />
-        </figcaption>
-      </a>
-    )}
-  </Container>
-);
+          <figcaption>
+            <FormattedMessage
+              id="Size: {size}"
+              defaultMessage="Size: {size}"
+              values={{ size: prettybytes(content.image.size) }}
+            />
+            &nbsp; &mdash; &nbsp;
+            <FormattedMessage
+              id="Click to download full sized image"
+              defaultMessage="Click to download full sized image"
+            />
+          </figcaption>
+        </a>
+      )}
+    </Container>
+  );
+};
 
 /**
  * Property types.

package/src/components/theme/View/LinkView.jsx

@@ -6,7 +6,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
-import { Container } from 'semantic-ui-react';
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import { FormattedMessage } from 'react-intl';
 import config from '@plone/volto/registry';
@@ -60,6 +60,9 @@ class LinkView extends Component {
   render() {
     const { remoteUrl } = this.props.content;
     const { openExternalLinkInNewTab } = config.settings;
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
     return (
       <Container id="page-document">
         <h1 className="documentFirstHeading">{this.props.content.title}</h1>

package/src/components/theme/View/ListingView.jsx

@@ -5,8 +5,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Segment, Container } from 'semantic-ui-react';
+import { Segment, Container as SemanticContainer } from 'semantic-ui-react';
 import { UniversalLink, PreviewImage } from '@plone/volto/components';
+import config from '@plone/volto/registry';
 
 /**
  * List view component class.
@@ -14,32 +15,37 @@ import { UniversalLink, PreviewImage } from '@plone/volto/components';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const ListingView = ({ content }) => (
-  <Container id="page-home">
-    <section id="content-core">
-      {content.items.map((item) => (
-        <Segment key={item.url} className="listing-item">
-          <Container>
-            <h2>
-              <UniversalLink item={item} title={item['@type']}>
-                {item.title}
-              </UniversalLink>
-            </h2>
-            {item.description && <p>{item.description}</p>}
-          </Container>
-          {item.image_field && (
-            <PreviewImage
-              item={item}
-              size="thumb"
-              alt={item.image_caption ? item.image_caption : item.title}
-              className="ui image"
-            />
-          )}
-        </Segment>
-      ))}
-    </section>
-  </Container>
-);
+const ListingView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container id="page-home">
+      <section id="content-core">
+        {content.items.map((item) => (
+          <Segment key={item.url} className="listing-item">
+            <Container>
+              <h2>
+                <UniversalLink item={item} title={item['@type']}>
+                  {item.title}
+                </UniversalLink>
+              </h2>
+              {item.description && <p>{item.description}</p>}
+            </Container>
+            {item.image_field && (
+              <PreviewImage
+                item={item}
+                size="thumb"
+                alt={item.image_caption ? item.image_caption : item.title}
+                className="ui image"
+              />
+            )}
+          </Segment>
+        ))}
+      </section>
+    </Container>
+  );
+};
 
 /**
  * Property types.

package/src/components/theme/View/SummaryView.jsx

@@ -6,9 +6,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
-import { Container } from 'semantic-ui-react';
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
 import PreviewImage from '../PreviewImage/PreviewImage';
+import config from '@plone/volto/registry';
 
 /**
  * Summary view component class.
@@ -16,43 +17,51 @@ import PreviewImage from '../PreviewImage/PreviewImage';
  * @param {Object} content Content object.
  * @returns {string} Markup of the component.
  */
-const SummaryView = ({ content }) => (
-  <Container className="view-wrapper summary-view">
-    <article id="content">
-      <header>
-        <h1 className="documentFirstHeading">{content.title}</h1>
-        {content.description && (
-          <p className="documentDescription">{content.description}</p>
-        )}
-      </header>
-      <section id="content-core">
-        {content.items.map((item) => (
-          <article key={item.url}>
-            <h2>
-              <UniversalLink item={item} title={item['@type']}>
-                {item.title}
-              </UniversalLink>
-            </h2>
-            {item.image_field && (
-              <PreviewImage
-                item={item}
-                alt={item.image_caption ? item.image_caption : item.title}
-                size="thumb"
-                className="ui image floated right clear"
-              />
-            )}
-            {item.description && <p>{item.description}</p>}
-            <p>
-              <UniversalLink item={item}>
-                <FormattedMessage id="Read More…" defaultMessage="Read More…" />
-              </UniversalLink>
-            </p>
-          </article>
-        ))}
-      </section>
-    </article>
-  </Container>
-);
+const SummaryView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper summary-view">
+      <article id="content">
+        <header>
+          <h1 className="documentFirstHeading">{content.title}</h1>
+          {content.description && (
+            <p className="documentDescription">{content.description}</p>
+          )}
+        </header>
+        <section id="content-core">
+          {content.items.map((item) => (
+            <article key={item.url}>
+              <h2>
+                <UniversalLink item={item} title={item['@type']}>
+                  {item.title}
+                </UniversalLink>
+              </h2>
+              {item.image_field && (
+                <PreviewImage
+                  item={item}
+                  alt={item.image_caption ? item.image_caption : item.title}
+                  size="thumb"
+                  className="ui image floated right clear"
+                />
+              )}
+              {item.description && <p>{item.description}</p>}
+              <p>
+                <UniversalLink item={item}>
+                  <FormattedMessage
+                    id="Read More…"
+                    defaultMessage="Read More…"
+                  />
+                </UniversalLink>
+              </p>
+            </article>
+          ))}
+        </section>
+      </article>
+    </Container>
+  );
+};
 
 /**
  * Property types.

package/src/components/theme/View/TabularView.jsx

@@ -6,8 +6,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
-import { Container, Table } from 'semantic-ui-react';
+import { Container as SemanticContainer, Table } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
+import config from '@plone/volto/registry';
 
 /**
  * Tabular view component class.
@@ -15,59 +16,64 @@ import { FormattedMessage } from 'react-intl';
  * @param {Object} content Content object.
  * @returns {string} Markup of the component.
  */
-const TabularView = ({ content }) => (
-  <Container className="view-wrapper">
-    <article id="content">
-      <header>
-        <h1 className="documentFirstHeading">{content.title}</h1>
-        {content.description && (
-          <p className="documentDescription">{content.description}</p>
-        )}
-      </header>
-      <section id="content-core">
-        <Table celled padded>
-          <Table.Header>
-            <Table.Row>
-              <Table.HeaderCell>
-                <FormattedMessage id="Title" defaultMessage="Title" />
-              </Table.HeaderCell>
-              <Table.HeaderCell>
-                <FormattedMessage
-                  id="Description"
-                  defaultMessage="Description"
-                />
-              </Table.HeaderCell>
-              <Table.HeaderCell>
-                <FormattedMessage id="Type" defaultMessage="Type" />
-              </Table.HeaderCell>
-              <Table.HeaderCell>
-                <FormattedMessage id="State" defaultMessage="State" />
-              </Table.HeaderCell>
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            {content.items.map((item) => (
-              <Table.Row key={item.url}>
-                <Table.Cell>
-                  <UniversalLink
-                    item={item}
-                    className="summary url"
-                    title={item['@type']}
-                  >
-                    {item.title}
-                  </UniversalLink>
-                </Table.Cell>
-                <Table.Cell>{item.description}</Table.Cell>
-                <Table.Cell>{item['@type']}</Table.Cell>
-                <Table.Cell>{item.review_state}</Table.Cell>
+const TabularView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper">
+      <article id="content">
+        <header>
+          <h1 className="documentFirstHeading">{content.title}</h1>
+          {content.description && (
+            <p className="documentDescription">{content.description}</p>
+          )}
+        </header>
+        <section id="content-core">
+          <Table celled padded>
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell>
+                  <FormattedMessage id="Title" defaultMessage="Title" />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage
+                    id="Description"
+                    defaultMessage="Description"
+                  />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage id="Type" defaultMessage="Type" />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage id="State" defaultMessage="State" />
+                </Table.HeaderCell>
               </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
-      </section>
-    </article>
-  </Container>
-);
+            </Table.Header>
+            <Table.Body>
+              {content.items.map((item) => (
+                <Table.Row key={item.url}>
+                  <Table.Cell>
+                    <UniversalLink
+                      item={item}
+                      className="summary url"
+                      title={item['@type']}
+                    >
+                      {item.title}
+                    </UniversalLink>
+                  </Table.Cell>
+                  <Table.Cell>{item.description}</Table.Cell>
+                  <Table.Cell>{item['@type']}</Table.Cell>
+                  <Table.Cell>{item.review_state}</Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+        </section>
+      </article>
+    </Container>
+  );
+};
 
 /**
  * Property types.

package/src/hooks/index.js

@@ -1,2 +1 @@
 export useClipboard from '@plone/volto/hooks/clipboard/useClipboard';
-export useToken from '@plone/volto/hooks/userSession/useToken';

package/src/hooks/content/useContent.js

@@ -1,31 +0,0 @@
-import { useSelector, shallowEqual } from 'react-redux';
-
-/**
- * useContent hook
- *
- * This hook returns the current content that is stored in the Redux store in the
- * `content` reducer, and returns it along with the related state (loading/loaded/error).
- *
- * @export
- * @return {{ data: ContentData, loading: boolean, loaded: boolean, error: Error }}
- */
-export function useContent() {
-  const data = useSelector((state) => state.content.data, shallowEqual);
-  const loading = useSelector((state) => state.content.get.loading);
-  const loaded = useSelector((state) => state.content.get.loaded);
-  const error = useSelector((state) => state.content.get.error, shallowEqual);
-
-  return { data, loading, loaded, error };
-}
-
-// For reference purposes: Potential future useQuery version
-// export function useContent() {
-//   // the cache will need to know the current location
-//   const pathname = useLocation();
-//   const query = useQuery(getContentQuery({ path }))
-
-//   // This might not be needed if we rename the properties
-//   const {isLoading: loading, isSuccess: loaded, ...rest} = query;
-
-//   return { loading, loaded, ...rest };
-// }

package/src/hooks/userSession/useToken.js

@@ -1,5 +0,0 @@
-import { useSelector, shallowEqual } from 'react-redux';
-
-export function useToken() {
-  return useSelector((state) => state.userSession.token, shallowEqual);
-}