@plone/volto 17.0.0-alpha.3 → 17.0.0-alpha.30

package/src/helpers/Url/Url.test.js

@@ -10,10 +10,14 @@ import {
   isCmsUi,
   isInternalURL,
   isUrl,
+  getFieldURL,
   normalizeUrl,
   removeProtocol,
   addAppURL,
   expandToBackendURL,
+  checkAndNormalizeUrl,
+  normaliseMail,
+  normalizeTelephone,
 } from './Url';
 
 beforeEach(() => {
@@ -61,6 +65,17 @@ describe('Url', () => {
     it('return empty string if no url is empty string', () => {
       expect(getBaseUrl('')).toBe('');
     });
+    it('return a null/undefined mailto adress ', () => {
+      expect(normaliseMail(null)).toBe('mailto:null');
+      expect(normaliseMail(undefined)).toBe('mailto:undefined');
+    });
+    it('return a null/undefined telephone number', () => {
+      expect(normalizeTelephone(null)).toBe('tel:null');
+      expect(normalizeTelephone(undefined)).toBe('tel:undefined');
+    });
+    it('null returns an invalid link', () => {
+      expect(checkAndNormalizeUrl(null).isValid).toBe(false);
+    });
   });
 
   describe('getView', () => {
@@ -246,6 +261,46 @@ describe('Url', () => {
       expect(isUrl(href)).toBe(false);
     });
   });
+  describe('getFieldURL', () => {
+    it('returns app URL if the field is a string', () => {
+      const field = `${settings.apiPath}/foo/bar`;
+      expect(getFieldURL(field)).toBe('/foo/bar');
+    });
+    it('returns app URL if the field is an object with "@id"', () => {
+      const field = { '@id': '/foo/bar' };
+      expect(getFieldURL(field)).toBe('/foo/bar');
+    });
+    it('returns app URL if the field is an object with type URL', () => {
+      const field = { '@type': 'URL', value: '/foo/bar' };
+      expect(getFieldURL(field)).toBe('/foo/bar');
+    });
+    it('returns app URL if the field is an object with url or href properties', () => {
+      const fieldUrl = { url: '/foo/bar' };
+      const fieldHref = { href: '/foo/bar' };
+      expect(getFieldURL(fieldUrl)).toBe('/foo/bar');
+      expect(getFieldURL(fieldHref)).toBe('/foo/bar');
+    });
+    it('returns array of app URL if the field is an array of strings', () => {
+      const field = [
+        `${settings.apiPath}/foo/bar/1`,
+        `${settings.apiPath}/foo/bar/2`,
+      ];
+      expect(getFieldURL(field)).toStrictEqual(['/foo/bar/1', '/foo/bar/2']);
+    });
+    it('returns array of app URL if the field is an array of objects', () => {
+      const field = [
+        {
+          '@type': 'URL',
+          value: `${settings.apiPath}/foo/bar/1`,
+        },
+        {
+          '@type': 'URL',
+          value: `${settings.apiPath}/foo/bar/2`,
+        },
+      ];
+      expect(getFieldURL(field)).toStrictEqual(['/foo/bar/1', '/foo/bar/2']);
+    });
+  });
   describe('normalizeUrl', () => {
     it('normalizeUrl test', () => {
       const href = `www.example.com`;

package/src/helpers/Utils/UseDetectClickOutside.stories.jsx

@@ -0,0 +1,190 @@
+import React from 'react';
+import { useDetectClickOutside } from './useDetectClickOutside';
+import { Portal } from 'react-portal';
+import { usePopper } from 'react-popper';
+import { BlockChooser } from '@plone/volto/components';
+
+function OpenedChooser(props) {
+  const blockChooserRef = useDetectClickOutside({
+    onTriggered: () => props.setOpenMenu(false),
+    triggerKeys: ['Escape'],
+  });
+
+  return (
+    <div ref={blockChooserRef} style={{ marginLeft: '20px' }}>
+      Hello
+    </div>
+  );
+}
+
+function TestComponent(props) {
+  const [isOpenMenu, setOpenMenu] = React.useState(false);
+
+  return (
+    <div style={{ display: 'flex', marginBottom: '20px' }}>
+      <button onClick={() => setOpenMenu(true)}>Click me</button>
+      {isOpenMenu && <OpenedChooser setOpenMenu={setOpenMenu} />}
+    </div>
+  );
+}
+
+function StoryComponent(args) {
+  return (
+    <>
+      <TestComponent />
+      <TestComponent />
+      <TestComponent />
+    </>
+  );
+}
+
+function OpenedChooserWithPortal(props) {
+  const blockChooserRef = useDetectClickOutside({
+    onTriggered: () => props.setOpenMenu(false),
+    triggerKeys: ['Escape'],
+  });
+
+  return (
+    <Portal node={document.getElementById('body')}>
+      <div ref={blockChooserRef}>{`Hello ${props.id}`}</div>
+    </Portal>
+  );
+}
+
+function TestComponentWithPortal(props) {
+  const [isOpenMenu, setOpenMenu] = React.useState(false);
+
+  return (
+    <div style={{ display: 'flex', marginBottom: '20px' }}>
+      <button
+        onClick={() => setOpenMenu(true)}
+      >{`Click me ${props.id}`}</button>
+      {isOpenMenu && (
+        <OpenedChooserWithPortal {...props} setOpenMenu={setOpenMenu} />
+      )}
+    </div>
+  );
+}
+
+function StoryComponentWithPortal(args) {
+  return (
+    <>
+      <TestComponentWithPortal id={1} />
+      <TestComponentWithPortal id={2} />
+      <TestComponentWithPortal id={3} />
+    </>
+  );
+}
+
+function OpenedChooserWithPortalAndPopper(props) {
+  const { showBlockChooser } = props;
+
+  const blockChooserRef = useDetectClickOutside({
+    onTriggered: () => props.setOpenMenu(false),
+    triggerKeys: ['Escape'],
+  });
+
+  return showBlockChooser ? (
+    <BlockChooser
+      // onMutateBlock={onMutateBlock}
+      // currentBlock={block}
+      showRestricted
+      // blocksConfig={blocksConfig}
+      ref={blockChooserRef}
+    />
+  ) : (
+    <div ref={blockChooserRef}>{`Hello ${props.id}`}</div>
+  );
+}
+
+function TestComponentWithPortalAndPopper(props) {
+  const [isOpenMenu, setOpenMenu] = React.useState(false);
+  const [referenceElement, setReferenceElement] = React.useState(null);
+  const [popperElement, setPopperElement] = React.useState(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: 'right',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [-10, 10],
+        },
+      },
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: ['top-start'],
+        },
+      },
+    ],
+  });
+  return (
+    <div style={{ display: 'flex', marginBottom: '20px' }}>
+      <button
+        ref={setReferenceElement}
+        onClick={() => setOpenMenu(true)}
+      >{`Click me ${props.id}`}</button>
+      <Portal node={document.getElementById('body')}>
+        <div
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          {isOpenMenu && (
+            <OpenedChooserWithPortalAndPopper
+              {...props}
+              setOpenMenu={setOpenMenu}
+            />
+          )}
+        </div>
+      </Portal>
+    </div>
+  );
+}
+
+function StoryComponentWithPortalAndPopper(args) {
+  const { showBlockChooser } = args;
+  return (
+    <>
+      <TestComponentWithPortalAndPopper
+        id={1}
+        showBlockChooser={showBlockChooser}
+      />
+      <TestComponentWithPortalAndPopper
+        id={2}
+        showBlockChooser={showBlockChooser}
+      />
+      <TestComponentWithPortalAndPopper
+        id={3}
+        showBlockChooser={showBlockChooser}
+      />
+    </>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {};
+
+export const WithPortal = StoryComponentWithPortal.bind({});
+WithPortal.args = {};
+
+export const WithPortalAndPopper = StoryComponentWithPortalAndPopper.bind({});
+WithPortalAndPopper.args = {};
+
+export const WithPortalAndPopperUsingBlockChooser =
+  StoryComponentWithPortalAndPopper.bind({});
+WithPortalAndPopperUsingBlockChooser.args = {
+  showBlockChooser: true,
+};
+
+export default {
+  title: 'Internal Components/useDetectClickOutside',
+  component: TestComponent,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '600px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/helpers/Utils/Utils.js

@@ -174,13 +174,13 @@ export const parseDateTime = (locale, value, format, moment) => {
 };
 
 /**
- * Converts a language code to the format `lang_region`
+ * Converts a language code like pt-br to the format `pt_BR` (`lang_region`)
  * Useful for passing from Plone's i18n lang names to Xnix locale names
- * eg. LC_MESSAGES/lang_region.po filenames
+ * eg. LC_MESSAGES/lang_region.po filenames. Also used in the I18N_LANGUAGE cookie.
  * @param {string} language Language to be converted
  * @returns {string} Language converted
  */
-export const normalizeLanguageName = (language) => {
+export const toGettextLang = (language) => {
   if (language.includes('-')) {
     let normalizedLang = language.split('-');
     normalizedLang = `${normalizedLang[0]}_${normalizedLang[1].toUpperCase()}`;
@@ -189,23 +189,35 @@ export const normalizeLanguageName = (language) => {
 
   return language;
 };
+export const normalizeLanguageName = toGettextLang;
 
 /**
- * Converts a language code to the format `lang-region`
- * `react-intl` only supports this syntax, so coming from the language
- * negotiation of the `locale` lib, one need to convert it first
+ * Converts a language code like pt-br or pt_BR to the format `pt-BR`.
+ * `react-intl` only supports this syntax. We also use it for the locales
+ * in the volto Redux store.
  * @param {string} language Language to be converted
  * @returns {string} Language converted
  */
-export const toLangUnderscoreRegion = (language) => {
-  if (language.includes('_')) {
-    let langCode = language.split('_');
+export const toReactIntlLang = (language) => {
+  if (language.includes('_') || language.includes('-')) {
+    let langCode = language.split(/[-_]/);
     langCode = `${langCode[0]}-${langCode[1].toUpperCase()}`;
     return langCode;
   }
 
   return language;
 };
+export const toLangUnderscoreRegion = toReactIntlLang; // old name for backwards-compat
+
+/**
+ * Converts a language code like pt_BR or pt-BR to the format `pt-br`.
+ * This format is used on the backend and in volto config settings.
+ * @param {string} language Language to be converted
+ * @returns {string} Language converted
+ */
+export const toBackendLang = (language) => {
+  return toReactIntlLang(language).toLowerCase();
+};
 
 /**
  * Lookup if a given expander is set in apiExpanders for the given path and action type
@@ -258,11 +270,11 @@ export const removeFromArray = (array, index) => {
 };
 
 /**
- * Reorder array
+ * Moves an item from origin to target inside an array in an immutable way
  * @param {Array} array Array with data
- * @param {number} origin Index of item to be reordered
- * @param {number} target Index of item to be reordered to
- * @returns {Array} Array with reordered elements
+ * @param {number} origin Index of item to be moved from
+ * @param {number} target Index of item to be moved to
+ * @returns {Array} Resultant array
  */
 export const reorderArray = (array, origin, target) => {
   const result = Array.from(array);
@@ -272,6 +284,16 @@ export const reorderArray = (array, origin, target) => {
   return result;
 };
 
+/**
+ * Normalize (unicode) string to a normalized plain ascii string
+ * @method normalizeString
+ * @param {string} str The string to be normalized
+ * @returns {string} Normalized plain ascii string
+ */
+export function normalizeString(str) {
+  return str.normalize('NFD').replace(/\p{Diacritic}/gu, '');
+}
+
 /**
  * Slugify a string: remove whitespaces, special chars and replace with _
  * @param {string} string String to be slugified
@@ -299,3 +321,41 @@ export const cloneDeepSchema = (object) => {
     }
   });
 };
+
+/**
+ * Creates an array given a range of numbers
+ * @param {number} start start number from
+ * @param {number} stop stop number at
+ * @param {number} step step every each number in the sequence
+ * @returns {array} The result, eg. [0, 1, 2, 3, 4]
+ */
+export const arrayRange = (start, stop, step) =>
+  Array.from(
+    { length: (stop - start) / step + 1 },
+    (value, index) => start + index * step,
+  );
+
+/**
+ * Given an event target element returns if it's an interactive element
+ * of the one in the list.
+ * @param {node} element event.target element type
+ * @returns {boolean} If it's an interactive element of the list
+ */
+export function isInteractiveElement(
+  element,
+  interactiveElements = [
+    'button',
+    'input',
+    'textarea',
+    'select',
+    'option',
+    'svg',
+    'path',
+  ],
+) {
+  if (interactiveElements.includes(element.tagName.toLowerCase())) {
+    return true;
+  }
+
+  return false;
+}

package/src/helpers/Utils/Utils.test.js

@@ -6,7 +6,7 @@ import {
   getColor,
   getInitials,
   hasApiExpander,
-  normalizeLanguageName,
+  toGettextLang,
   parseDateTime,
   removeFromArray,
   reorderArray,
@@ -14,6 +14,7 @@ import {
   safeWrapper,
   slugify,
   cloneDeepSchema,
+  normalizeString,
 } from './Utils';
 import moment from 'moment';
 import deepFreeze from 'deep-freeze';
@@ -284,12 +285,12 @@ describe('Utils tests', () => {
     });
   });
 
-  describe('normalizeLanguageName', () => {
+  describe('toGettextLang', () => {
     it('Normalizes an extended language (pt_BR)', () => {
-      expect(normalizeLanguageName('pt-br')).toStrictEqual('pt_BR');
+      expect(toGettextLang('pt-br')).toStrictEqual('pt_BR');
     });
     it('Normalizes a simple language (ca)', () => {
-      expect(normalizeLanguageName('ca')).toStrictEqual('ca');
+      expect(toGettextLang('ca')).toStrictEqual('ca');
     });
   });
 
@@ -386,6 +387,18 @@ describe('Utils tests', () => {
     });
   });
 
+  describe('normalizeString', () => {
+    it('normalizeString no diacritics', () => {
+      const str = `my string without diacritics`;
+      expect(normalizeString(str)).toBe('my string without diacritics');
+    });
+
+    it('normalizeString with diacritics', () => {
+      const str = `my Ü Ú é à ñ string with diacritics`;
+      expect(normalizeString(str)).toBe('my U U e a n string with diacritics');
+    });
+  });
+
   describe('slugify', () => {
     it('slugifies a standard string', () => {
       expect(slugify('Content Type')).toBe('content_type');

package/src/helpers/Utils/usePagination.js

@@ -1,25 +1,78 @@
-import React from 'react';
-import { isEqual } from 'lodash';
-import { usePrevious } from './usePrevious';
-import useDeepCompareEffect from 'use-deep-compare-effect';
+import React, { useRef, useEffect } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import qs from 'query-string';
+import { useSelector } from 'react-redux';
+import { findBlocks, slugify } from '@plone/volto/helpers';
+
+/**
+ * @function useCreatePageQueryStringKey
+ * @description A hook that creates a key with an id if there are multiple blocks with pagination.
+ * @returns {string} Example: page || page_012345678
+ */
+const useCreatePageQueryStringKey = (id) => {
+  const blockTypesWithPagination = ['search', 'listing'];
+  const blocks = useSelector((state) => state?.content?.data?.blocks) || [];
+  const hasMultiplePaginations =
+    findBlocks(blocks, blockTypesWithPagination).length > 1;
+
+  return hasMultiplePaginations ? slugify(`page-${id}`) : 'page';
+};
+
+const useGetBlockType = (id) => {
+  const blocks = useSelector((state) => state?.content?.data?.blocks) || [];
+  const block = blocks[id];
+  return block ? block?.['@type'] : null;
+};
 
 /**
  * A pagination helper that tracks the query and resets pagination in case the
  * query changes.
  */
-export const usePagination = (query, defaultPage = 1) => {
-  const previousQuery = usePrevious(query);
-  const [currentPage, setCurrentPage] = React.useState(defaultPage);
+export const usePagination = (id = null, defaultPage = 1) => {
+  const location = useLocation();
+  const history = useHistory();
+  const pageQueryStringKey = useCreatePageQueryStringKey(id);
+  const block_type = useGetBlockType(id);
+  const pageQueryParam =
+    qs.parse(location.search)[pageQueryStringKey] || defaultPage;
+  const [currentPage, setCurrentPageState] = React.useState(
+    parseInt(pageQueryParam),
+  );
+  const setCurrentPage = (page) => {
+    setCurrentPageState(page);
+    const newParams = {
+      ...qs.parse(location.search),
+      [pageQueryStringKey]: page,
+    };
+    history.push({ search: qs.stringify(newParams) });
+  };
 
-  useDeepCompareEffect(() => {
-    setCurrentPage(defaultPage);
-  }, [query, previousQuery, defaultPage]);
+  const queryRef = useRef(qs.parse(location.search)?.query);
+  useEffect(() => {
+    if (
+      queryRef.current !== qs.parse(location.search)?.query &&
+      block_type === 'search'
+    ) {
+      setCurrentPageState(defaultPage);
+      const newParams = {
+        ...qs.parse(location.search),
+        [pageQueryStringKey]: defaultPage,
+      };
+      delete newParams[pageQueryStringKey];
+      history.replace({ search: qs.stringify(newParams) });
+      queryRef.current = qs.parse(location.search)?.query;
+    } else {
+      setCurrentPageState(
+        parseInt(
+          qs.parse(location.search)?.[pageQueryStringKey] || defaultPage,
+        ),
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.search, block_type]);
 
   return {
-    currentPage:
-      previousQuery && !isEqual(previousQuery, query)
-        ? defaultPage
-        : currentPage,
+    currentPage,
     setCurrentPage,
   };
 };

package/src/helpers/Utils/usePagination.test.js

@@ -0,0 +1,115 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { usePagination } from './usePagination';
+import * as redux from 'react-redux';
+import routeData from 'react-router';
+import { slugify } from '@plone/volto/helpers/Utils/Utils';
+
+const searchBlockId = '545b33de-92cf-4747-969d-68851837b317';
+const searchBlockId2 = '454b33de-92cf-4747-969d-68851837b713';
+const searchBlock = {
+  '@type': 'search',
+  query: {
+    b_size: '4',
+    query: [
+      {
+        i: 'path',
+        o: 'plone.app.querystring.operation.string.relativePath',
+        v: '',
+      },
+    ],
+    sort_order: 'ascending',
+  },
+  showSearchInput: true,
+  showTotalResults: true,
+};
+let state = {
+  content: {
+    data: {
+      blocks: {
+        [searchBlockId]: searchBlock,
+      },
+      blocks_layout: {
+        items: [searchBlockId],
+      },
+    },
+  },
+};
+
+let mockUseLocationValue = {
+  pathname: '/testroute',
+  search: '',
+};
+
+const setUp = (searchParam, numberOfSearches) => {
+  mockUseLocationValue.search = searchParam;
+  if (numberOfSearches > 1) {
+    state.content.data.blocks[searchBlockId2] = searchBlock;
+    state.content.data.blocks_layout.items.push(searchBlockId2);
+  }
+  return renderHook(({ id, defaultPage }) => usePagination(id, defaultPage), {
+    initialProps: {
+      id: searchBlockId,
+      defaultPage: 1,
+    },
+  });
+};
+
+describe(`Tests for usePagination, for the block ${searchBlockId}`, () => {
+  const useLocation = jest.spyOn(routeData, 'useLocation');
+  const useHistory = jest.spyOn(routeData, 'useHistory');
+  const useSelector = jest.spyOn(redux, 'useSelector');
+  beforeEach(() => {
+    useLocation.mockReturnValue(mockUseLocationValue);
+    useHistory.mockReturnValue({ replace: jest.fn() });
+    useSelector.mockImplementation((cb) => cb(state));
+  });
+
+  it('1 paginated block with id and defaultPage 1 - shoud be 1', () => {
+    const { result } = setUp();
+    expect(result.current.currentPage).toBe(1);
+  });
+
+  it('1 paginated block without params - shoud be 1', () => {
+    const { result } = setUp();
+    expect(result.current.currentPage).toBe(1);
+  });
+
+  const param1 = '?page=2';
+  it(`1 paginated block with params: ${param1} - shoud be 2`, () => {
+    const { result } = setUp(param1);
+    expect(result.current.currentPage).toBe(2);
+  });
+
+  const param2 = `?${slugify(`page-${searchBlockId}`)}=2`;
+  it(`2 paginated blocks with current block in the params: ${param2} - shoud be 2`, () => {
+    const { result } = setUp(param2, 2);
+    expect(result.current.currentPage).toBe(2);
+  });
+
+  const param3 = `?${slugify(`page-${searchBlockId2}`)}=2`;
+  it(`2 paginated blocks with the other block in the params: ${param3} - shoud be 1`, () => {
+    const { result } = setUp(param3, 2);
+    expect(result.current.currentPage).toBe(1);
+  });
+
+  const param4 = `?${slugify(`page-${searchBlockId}`)}=2&${slugify(
+    `page-${searchBlockId2}`,
+  )}=1`;
+  it(`2 paginated blocks with both blocks in the params, current 2: ${param4} - shoud be 2`, () => {
+    const { result } = setUp(param4, 2);
+    expect(result.current.currentPage).toBe(2);
+  });
+
+  const param5 = `?${slugify(`page-${searchBlockId}`)}=1&${slugify(
+    `page-${searchBlockId2}`,
+  )}=2`;
+  it(`2 paginated blocks with both blocks in the params, current 1: ${param5} - shoud be 1`, () => {
+    const { result } = setUp(param5, 2);
+    expect(result.current.currentPage).toBe(1);
+  });
+
+  it(`2 paginated blocks with wrong page param: ${param1} - shoud be 1`, () => {
+    const { result } = setUp(param1, 2);
+    expect(result.current.currentPage).toBe(1);
+  });
+});