@plone/volto 17.0.0-alpha.8 → 17.0.0

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);
+  });
+});

package/src/helpers/index.js

@@ -5,9 +5,9 @@
  */
 
 // export { injectLazyLibs } from './Loadable/Loadable';
-export Api from '@plone/volto/helpers/Api/Api';
+export { default as Api } from '@plone/volto/helpers/Api/Api';
 export { getAPIResourceWithAuth } from '@plone/volto/helpers/Api/APIResourceWithAuth';
-export Html from '@plone/volto/helpers/Html/Html';
+export { default as Html } from '@plone/volto/helpers/Html/Html';
 export {
   getAuthToken,
   persistAuthToken,
@@ -54,12 +54,14 @@ export {
   previousBlockId,
   applyBlockDefaults,
   applySchemaDefaults,
+  blocksFormGenerator,
   buildStyleClassNamesFromData,
   buildStyleClassNamesExtenders,
   getPreviousNextBlock,
+  findBlocks,
 } from '@plone/volto/helpers/Blocks/Blocks';
-export BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
-export ScrollToTop from '@plone/volto/helpers/ScrollToTop/ScrollToTop';
+export { default as BodyClass } from '@plone/volto/helpers/BodyClass/BodyClass';
+export { default as ScrollToTop } from '@plone/volto/helpers/ScrollToTop/ScrollToTop';
 export {
   getBoolean,
   getVocabName,
@@ -69,9 +71,10 @@ export {
   getFieldsVocabulary,
 } from '@plone/volto/helpers/Vocabularies/Vocabularies';
 
-export langmap from './LanguageMap/LanguageMap';
-export Helmet from './Helmet/Helmet';
-export FormValidation from './FormValidation/FormValidation';
+export { default as langmap } from './LanguageMap/LanguageMap';
+export { default as Helmet } from './Helmet/Helmet';
+export { default as FormValidation } from './FormValidation/FormValidation';
+export { validateFileUploadSize } from './FormValidation/FormValidation';
 export {
   difference,
   getColor,
@@ -90,6 +93,9 @@ export {
   cloneDeepSchema,
   arrayRange,
   reorderArray,
+  isInteractiveElement,
+  slugify,
+  normalizeString,
 } from '@plone/volto/helpers/Utils/Utils';
 export { messages } from './MessageLabels/MessageLabels';
 export {
@@ -109,10 +115,11 @@ export { useDetectClickOutside } from './Utils/useDetectClickOutside';
 export { useEvent } from './Utils/useEvent';
 export { usePrevious } from './Utils/usePrevious';
 export { usePagination } from './Utils/usePagination';
-export useUndoManager from './UndoManager/useUndoManager';
+export { default as useUndoManager } from './UndoManager/useUndoManager';
 export { getCookieOptions } from './Cookies/cookies';
 export { getWidgetView } from './Widget/widget';
 export {
   getCurrentStateMapping,
   getWorkflowOptions,
 } from './Workflows/Workflows';
+export { getSiteAsyncPropExtender } from './Site';

package/src/hooks/client/useClient.js

@@ -0,0 +1,11 @@
+//useClient hook to replace repetitive delcaration in the components
+import { useEffect, useState } from 'react';
+
+export function useClient() {
+  const [isClient, setisClient] = useState(false);
+  useEffect(() => {
+    setisClient(true);
+  }, []);
+
+  return isClient;
+}

package/src/hooks/clipboard/useClipboard.js

@@ -0,0 +1,26 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+export default function useClipboard(clipboardText = '') {
+  const stringToCopy = useRef(clipboardText);
+  const [copied, setCopied] = useState(false);
+
+  //synchronous: window.clipboardData.setData(options.format || "text", text);
+  const copyToClipboard = async (text) => {
+    if ('clipboard' in navigator) {
+      return await navigator.clipboard.writeText(text);
+    } else {
+      return document.execCommand('copy', true, text);
+    }
+  };
+
+  const copyAction = useCallback(() => {
+    const copiedString = copyToClipboard(stringToCopy.current);
+    setCopied(copiedString);
+  }, [stringToCopy]);
+
+  useEffect(() => {
+    stringToCopy.current = clipboardText;
+  }, [clipboardText]);
+
+  return [copied, copyAction, setCopied];
+}

package/src/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useClipboard } from '@plone/volto/hooks/clipboard/useClipboard';
+export { useClient } from '@plone/volto/hooks/client/useClient';

package/src/icons/grid-block.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="96" height="96" fill="currentcolor" rx="3"/>
+    <g fill="#FFF" opacity=".9" transform="translate(8 22)">
+      <rect width="18" height="53" x="42"/>
+      <rect width="18" height="53" x="63"/>
+      <rect width="18" height="53"/>
+      <rect width="18" height="53" x="21"/>
+    </g>
+  </g>
+</svg>