@commercetools-frontend/experimental-components 0.0.2

package/src/hooks/use-persisted-reminder/use-persisted-reminder.spec.js

@@ -0,0 +1,114 @@
+import PropTypes from 'prop-types';
+import {
+  screen,
+  renderApp,
+  fireEvent,
+  act,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { REMINDER_OPTION_1_HOUR } from '../../constants';
+import usePersistedReminder from './use-persisted-reminder';
+
+jest.useFakeTimers();
+
+const TestComponent = (props) => {
+  const [hasReminderExpired, hasChosenReminderRef, scheduleReminder] =
+    usePersistedReminder({
+      ...(props.reminderInterval && {
+        reminderInterval: props.reminderInterval,
+      }),
+      ...(props.pollingInterval && { pollingInterval: props.pollingInterval }),
+      ...{ storageKey: 'test-storage-key' },
+    });
+
+  return (
+    <ul>
+      <li>Expired: {hasReminderExpired ? 'Yes' : 'No'}</li>
+      <li>Reminder chosen: {hasChosenReminderRef.current ? 'Yes' : 'No'}</li>
+      <button onClick={() => scheduleReminder()}>Remind me later</button>
+    </ul>
+  );
+};
+TestComponent.propTypes = {
+  reminderInterval: PropTypes.string,
+  pollingInterval: PropTypes.number,
+};
+
+const render = ({ props } = {}) => {
+  const rendered = renderApp(<TestComponent {...props} />);
+  const clickReminder = () =>
+    fireEvent.click(screen.getByText(/Remind me later/i));
+
+  return {
+    clickReminder,
+    ...rendered,
+  };
+};
+
+describe('when the reminder is rendered for the first time', () => {
+  it('should indicate that the reminder has not been set yet', async () => {
+    window.localStorage.clear();
+
+    render();
+
+    await screen.findByText(/Expired: No/i);
+
+    await screen.findByText(/Reminder chosen: No/i);
+  });
+});
+
+describe('when the reminder has been set', () => {
+  it("should indicate the reminder has been set and hasn't expired yet", async () => {
+    window.localStorage.clear();
+
+    const { clickReminder } = render();
+
+    await screen.findByText(/Expired: No/i);
+
+    clickReminder();
+
+    await screen.findByText(/Reminder chosen: Yes/i);
+  });
+});
+
+describe('when the reminder has been set and not expired yet', () => {
+  it('should indicate the reminder has not expired yet', async () => {
+    window.localStorage.clear();
+
+    const { clickReminder } = render();
+
+    clickReminder();
+
+    await screen.findByText(/Expired: No/i);
+
+    await screen.findByText(/Reminder chosen: Yes/i);
+  });
+});
+
+describe('when the reminder has been set and expired', () => {
+  it('should indicate the reminder has expired', async () => {
+    window.localStorage.clear();
+
+    const reminderInterval = REMINDER_OPTION_1_HOUR;
+    const pollingInterval = 1;
+
+    const { clickReminder } = render({
+      props: {
+        reminderInterval,
+        pollingInterval,
+      },
+    });
+
+    clickReminder();
+
+    await screen.findByText(/Expired: No/i);
+
+    // NOTE: 4000000ms > 3600000ms which is 1h + interval.
+    act(() => {
+      jest.advanceTimersByTime(4000000);
+    });
+
+    expect(screen.getByText(/Expired: Yes/i)).toBeInTheDocument();
+
+    expect(screen.getByText(/Reminder chosen: Yes/i)).toBeInTheDocument();
+  });
+});

package/src/hooks/use-persisted-table-configuration/index.js

@@ -0,0 +1 @@
+export { default } from './use-persisted-table-configuration';

package/src/hooks/use-persisted-table-configuration/use-persisted-table-configuration.js

@@ -0,0 +1,136 @@
+import { useMemo, useCallback } from 'react';
+import pick from 'lodash.pick';
+import useStorage from '../use-storage';
+
+const prepareMutableColumnProps = (columnConfig, mutableColumnProps) => {
+  const updatedColumnProps = {};
+  mutableColumnProps.forEach((columnProp) => {
+    if (Object.prototype.hasOwnProperty.call(columnConfig, columnProp)) {
+      updatedColumnProps[columnProp] = columnConfig[columnProp];
+    }
+  });
+  return updatedColumnProps;
+};
+
+// Remove cachedColumns incase they are not part of allAvailableColumns (needed for toggled columns)
+// Then find the intial config and append the cached data to it
+const retrieveColumnsWithCachedConfiguration = ({
+  allAvailableColumnsConfiguration,
+  cachedVisibleTableConfiguration,
+  mutableColumnProps,
+}) =>
+  cachedVisibleTableConfiguration
+    .filter((cachedColumn) =>
+      allAvailableColumnsConfiguration.find(
+        (initialConfig) => initialConfig.key === cachedColumn.key
+      )
+    )
+    .map((cachedConfig) => {
+      const initialColumnConfig = allAvailableColumnsConfiguration.find(
+        (initialConfig) => initialConfig.key === cachedConfig.key
+      );
+      return {
+        ...initialColumnConfig,
+        ...prepareMutableColumnProps(cachedConfig, mutableColumnProps),
+      };
+    });
+
+const handleCacheUpdate = ({
+  update,
+  cachedVisibleTableConfiguration,
+  updateCachedTableConfiguration,
+}) =>
+  updateCachedTableConfiguration({
+    // since this feature is being used for quite sometime
+    // inorder to cleanup the local cache, we make that the cache value has only columnsConfig and displaySettings
+    ...pick(cachedVisibleTableConfiguration, [
+      'columnsConfig',
+      'displaySettings',
+    ]),
+    ...update,
+  });
+
+// Signature:
+// ColumnSettings => {key: String<columnsKey>, width: String<columnWidth>}
+// displaySettings => {isWrappingText: boolean, isCondensed: boolean}
+// allAvailableColumnsConfiguration => Array<ColumnSettings>
+// initialVisibleColumnKeys => List of initial visible columns keys
+// tableConfigurationStorageKey => storage key used for storing data in either local or session storages
+// mutableColumnProps => props of column that could be changed (mutated)
+// storageKey => location where the table config will be stored
+// displaySettings => table's display layout settings
+const usePersistedTableConfiguration = (props) => {
+  const {
+    allAvailableColumnsConfiguration,
+    initialVisibleColumnKeys,
+    tableConfigurationStorageKey,
+    mutableColumnProps = ['width'],
+    storageType = 'local',
+    displaySettings = { isWrappingText: false, isCondensed: false },
+  } = props;
+  const mappedInitialTableConfiguration = useMemo(() => {
+    return {
+      columnsConfig: initialVisibleColumnKeys.map((visibleColumnKey) => {
+        const visibleColumnConfig = allAvailableColumnsConfiguration.find(
+          (columnConfig) => columnConfig.key === visibleColumnKey
+        );
+        return {
+          key: visibleColumnKey,
+          ...prepareMutableColumnProps(visibleColumnConfig, mutableColumnProps),
+        };
+      }),
+      displaySettings,
+    };
+  }, [
+    allAvailableColumnsConfiguration,
+    initialVisibleColumnKeys,
+    mutableColumnProps,
+    displaySettings,
+  ]);
+  const [cachedVisibleTableConfiguration, updateCachedTableConfiguration] =
+    useStorage(
+      tableConfigurationStorageKey,
+      // initialize with all the available columns
+      mappedInitialTableConfiguration,
+      {
+        storageType,
+      }
+    );
+
+  /** The useStorage() hook won't store the key in the storage unless the component is fully rendered first.
+   * Therefore, if it will be missing from the local storage and hence we use the [] as default.
+   */
+  const getVisibleColumns = useCallback(() => {
+    if (cachedVisibleTableConfiguration?.columnsConfig) {
+      return retrieveColumnsWithCachedConfiguration({
+        allAvailableColumnsConfiguration,
+        cachedVisibleTableConfiguration:
+          cachedVisibleTableConfiguration.columnsConfig,
+        mutableColumnProps,
+      });
+    }
+    return allAvailableColumnsConfiguration;
+  }, [
+    allAvailableColumnsConfiguration,
+    cachedVisibleTableConfiguration,
+    mutableColumnProps,
+  ]);
+  const visibleColumns = getVisibleColumns();
+  const visibleColumnKeys = visibleColumns.map((column) => column.key);
+
+  return {
+    visibleColumns,
+    visibleColumnKeys,
+    cachedVisibleColumnsConfiguration:
+      cachedVisibleTableConfiguration?.columnsConfig,
+    cachedDisplaySettings: cachedVisibleTableConfiguration?.displaySettings,
+    handleCachedTableConfigurationUpdate: (update) =>
+      handleCacheUpdate({
+        update,
+        cachedVisibleTableConfiguration,
+        updateCachedTableConfiguration,
+      }),
+  };
+};
+
+export default usePersistedTableConfiguration;

package/src/hooks/use-persisted-table-configuration/use-persisted-table-configuration.spec.js

@@ -0,0 +1,170 @@
+import { hooks } from '@commercetools-frontend/application-shell/test-utils';
+import { act } from 'react-test-renderer';
+import usePersistedTableConfiguration from './use-persisted-table-configuration';
+
+const allAvailableColumnsConfiguration = [
+  { key: 'key', isSortable: true, width: '100px' },
+  { key: 'name', isSortable: true, width: '200px' },
+  { key: 'city', isSortable: true, width: '300px' },
+];
+const keysOfAllAvailableColumns = allAvailableColumnsConfiguration.map(
+  (column) => column.key
+);
+
+const subsetOfAllAvailableColumns = [
+  allAvailableColumnsConfiguration[0],
+  allAvailableColumnsConfiguration[1],
+];
+const keysOfSubsetOfAllAvailableColumns = subsetOfAllAvailableColumns.map(
+  (column) => column.key
+);
+const mappedAllAvailableColumnsConfiguration =
+  allAvailableColumnsConfiguration.map((columnConfig) => ({
+    key: columnConfig.key,
+    width: columnConfig.width,
+  }));
+const updatedColumnsConfiguration = [
+  { key: 'key', isSortable: true, width: '200px' },
+  { key: 'name', isSortable: true, width: '300px' },
+];
+const mappedUpdatedColumnsConfiguration = updatedColumnsConfiguration.map(
+  (columnConfig) => ({ key: columnConfig.key, width: columnConfig.width })
+);
+const tableConfigurationStorageKey = 'god-speed';
+
+const render = async (props) => {
+  const rendered = hooks.renderHook(() =>
+    usePersistedTableConfiguration(props)
+  );
+
+  return {
+    ...rendered,
+  };
+};
+
+describe('usePersistedTableConfiguration', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+  describe('when all columns in allAvailableColumnsConfiguration are visible', () => {
+    it('should return the visibleColumns same as the all available column config', async () => {
+      const { result } = await render({
+        allAvailableColumnsConfiguration,
+        initialVisibleColumnKeys: keysOfAllAvailableColumns,
+        tableConfigurationStorageKey,
+      });
+      expect(result.current.visibleColumns).toEqual(
+        allAvailableColumnsConfiguration
+      );
+    });
+    it('should return the visibleColumnKeys similar to those of all available columns', async () => {
+      const { result } = await render({
+        allAvailableColumnsConfiguration,
+        initialVisibleColumnKeys: keysOfAllAvailableColumns,
+        tableConfigurationStorageKey,
+      });
+      expect(result.current.visibleColumnKeys).toEqual(
+        keysOfAllAvailableColumns
+      );
+    });
+    it('should return cachedVisibleColumnsConfiguration having key and width props', async () => {
+      const { result } = await render({
+        allAvailableColumnsConfiguration,
+        initialVisibleColumnKeys: keysOfAllAvailableColumns,
+        tableConfigurationStorageKey,
+      });
+
+      expect(result.current.cachedVisibleColumnsConfiguration).toEqual(
+        mappedAllAvailableColumnsConfiguration
+      );
+    });
+
+    it('should update the cached columns config properly', async () => {
+      const { result } = await render({
+        allAvailableColumnsConfiguration,
+        initialVisibleColumnKeys: keysOfAllAvailableColumns,
+        tableConfigurationStorageKey,
+      });
+
+      act(() => {
+        result.current.handleCachedTableConfigurationUpdate({
+          columnsConfig: mappedUpdatedColumnsConfiguration,
+        });
+      });
+
+      expect(result.current.visibleColumns).toEqual(
+        updatedColumnsConfiguration
+      );
+    });
+  });
+  describe('when subset of columns in allAvailableColumnsConfiguration are visible', () => {
+    it('should return visibleColumns as subset of all available columns', async () => {
+      const { result } = await render({
+        allAvailableColumnsConfiguration,
+        initialVisibleColumnKeys: keysOfSubsetOfAllAvailableColumns,
+        tableConfigurationStorageKey,
+      });
+      expect(result.current.visibleColumns).toEqual(
+        subsetOfAllAvailableColumns
+      );
+    });
+    it('should return visibleColumnKeys that are keys of the subset columns of all available columns', async () => {
+      const { result } = await render({
+        allAvailableColumnsConfiguration,
+        initialVisibleColumnKeys: keysOfSubsetOfAllAvailableColumns,
+        tableConfigurationStorageKey,
+      });
+      expect(result.current.visibleColumnKeys).toEqual(
+        keysOfSubsetOfAllAvailableColumns
+      );
+    });
+  });
+  describe('displaySettings', () => {
+    it('should return the default displaySettings', async () => {
+      const { result } = await render({
+        allAvailableColumnsConfiguration,
+        initialVisibleColumnKeys: keysOfAllAvailableColumns,
+        tableConfigurationStorageKey,
+      });
+      expect(result.current.cachedDisplaySettings).toEqual({
+        isWrappingText: false,
+        isCondensed: false,
+      });
+    });
+
+    it('should initialize cache with specified the displaySettings', async () => {
+      const { result } = await render({
+        allAvailableColumnsConfiguration,
+        initialVisibleColumnKeys: keysOfAllAvailableColumns,
+        tableConfigurationStorageKey,
+        displaySettings: { isWrappingText: true, isCondensed: true },
+      });
+      expect(result.current.cachedDisplaySettings).toEqual({
+        isWrappingText: true,
+        isCondensed: true,
+      });
+    });
+
+    it('should update the cached display settings properly', async () => {
+      const { result } = await render({
+        allAvailableColumnsConfiguration,
+        initialVisibleColumnKeys: keysOfAllAvailableColumns,
+        tableConfigurationStorageKey,
+      });
+
+      act(() => {
+        result.current.handleCachedTableConfigurationUpdate({
+          displaySettings: {
+            isWrappingText: true,
+            isCondensed: false,
+          },
+        });
+      });
+
+      expect(result.current.cachedDisplaySettings).toEqual({
+        isWrappingText: true,
+        isCondensed: false,
+      });
+    });
+  });
+});

package/src/hooks/use-previous/index.js

@@ -0,0 +1 @@
+export { default } from './use-previous';

package/src/hooks/use-previous/use-previous.js

@@ -0,0 +1,12 @@
+import { useEffect, useRef } from 'react';
+
+const usePrevious = (value) => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+};
+
+export default usePrevious;

package/src/hooks/use-previous/use-previous.spec.js

@@ -0,0 +1,25 @@
+import { renderHook } from '@testing-library/react-hooks';
+import usePrevious from './use-previous';
+
+const renderUsePrevious = () =>
+  renderHook(({ name }) => usePrevious(name), {
+    initialProps: { name: 'test name 1' },
+  });
+
+describe('usePrevious', () => {
+  it('should return undefined on initial render', () => {
+    const { result } = renderUsePrevious();
+
+    expect(result.current).toBeUndefined();
+  });
+
+  it('should always return previous state after each update', () => {
+    const { result, rerender } = renderUsePrevious();
+
+    rerender({ name: 'test name 2' });
+    expect(result.current).toBe('test name 1');
+
+    rerender({ name: 'test name 3' });
+    expect(result.current).toBe('test name 2');
+  });
+});

package/src/hooks/use-product-selections-fetcher/conversions.js

@@ -0,0 +1,15 @@
+import { applyTransformedLocalizedFields } from '@commercetools-frontend/l10n';
+
+// eslint-disable-next-line import/prefer-default-export
+export const convertProductSelectionsFromGraphQl = (productSelections) =>
+  productSelections?.results && {
+    ...productSelections,
+    results: productSelections.results.map((productSelection) => ({
+      ...applyTransformedLocalizedFields(productSelection, [
+        {
+          from: 'nameAllLocales',
+          to: 'name',
+        },
+      ]),
+    })),
+  };

package/src/hooks/use-product-selections-fetcher/fetch-product-selections.ctp.graphql

@@ -0,0 +1,18 @@
+query FetchProductSelections($limit: Int, $offset: Int, $sort: [String!]) {
+  productSelections(limit: $limit, offset: $offset, sort: $sort) {
+    total
+    count
+    offset
+    results {
+      id
+      version
+      key
+      nameAllLocales {
+        locale
+        value
+      }
+      createdAt
+      lastModifiedAt
+    }
+  }
+}

package/src/hooks/use-product-selections-fetcher/index.js

@@ -0,0 +1,2 @@
+export { default } from './use-product-selections-fetcher';
+export { handlers as productSelectionsFetcherMockHandler } from './mocks';

package/src/hooks/use-product-selections-fetcher/mocks/handlers.js

@@ -0,0 +1,16 @@
+import { graphql } from 'msw';
+
+const handlers = {
+  ProductSelections: {
+    all: (productSelections) =>
+      graphql.query('FetchProductSelections', (req, res, ctx) =>
+        res(
+          ctx.data({
+            productSelections,
+          })
+        )
+      ),
+  },
+};
+
+export default handlers;

package/src/hooks/use-product-selections-fetcher/mocks/index.js

@@ -0,0 +1,3 @@
+import handlers from './handlers';
+
+export { handlers };

package/src/hooks/use-product-selections-fetcher/use-product-selections-fetcher.js

@@ -0,0 +1,39 @@
+import { useQuery } from '@apollo/client/react/hooks';
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+import { convertProductSelectionsFromGraphQl } from './conversions';
+import { FetchProductSelections } from './fetch-product-selections.ctp.graphql';
+
+const createQueryVariables = (ownProps) => ({
+  limit: ownProps.limit,
+  offset: ownProps.offset,
+  sort: ownProps.sort,
+});
+
+const emptyProductSelections = {
+  total: 0,
+  count: 0,
+  offset: 0,
+  results: [],
+};
+
+const useProductSelectionsFetcher = (props) => {
+  const queryVariables = createQueryVariables(props);
+
+  const { loading, data, refetch } = useQuery(FetchProductSelections, {
+    context: {
+      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+    },
+    variables: queryVariables,
+    fetchPolicy: 'network-only',
+  });
+
+  return {
+    isLoading: loading,
+    productSelections:
+      convertProductSelectionsFromGraphQl(data?.productSelections) ||
+      emptyProductSelections,
+    refetch,
+  };
+};
+
+export default useProductSelectionsFetcher;

package/src/hooks/use-product-selections-fetcher/use-product-selections-fetcher.spec.js

@@ -0,0 +1,71 @@
+import { LocalizedString } from '@commercetools-test-data/commons';
+import { buildGraphqlList } from '@commercetools-test-data/core';
+import { setupServer } from 'msw/node';
+import { hooks } from '@commercetools-frontend/application-shell/test-utils';
+import { ProductSelection } from '@commercetools-local/test-data';
+import { handlers } from './mocks';
+import useProductSelectionsFetcher from './use-product-selections-fetcher';
+
+// create mock data
+const productSelectionId = '98a626bc-c323-4bcf-8fae-2caa2e7923dc';
+const productSelectionKey = 'star-lab-product-selection';
+const productSelectionEnglishName = 'Star Lab Product Selection';
+const localizedProductSelectionName = LocalizedString.presets
+  .empty()
+  .en(productSelectionEnglishName);
+const testProductSelection = ProductSelection.random()
+  .id(productSelectionId)
+  .key(productSelectionKey)
+  .name(localizedProductSelectionName);
+const productSelectionList = buildGraphqlList([testProductSelection], {
+  name: 'ProductSelection',
+  total: 1,
+});
+
+// setup mock server
+const mockServer = setupServer(
+  handlers.ProductSelections.all(productSelectionList)
+);
+afterEach(() => {
+  mockServer.resetHandlers();
+});
+beforeAll(() => mockServer.listen({ onUnhandledRequest: 'error' }));
+afterAll(() => mockServer.close());
+
+// render
+const render = async (custom = {}) => {
+  const rendered = hooks.renderHook(() => useProductSelectionsFetcher({}), {
+    disableApolloMocks: true,
+    ...custom,
+  });
+
+  return {
+    waitUntilReady: rendered.waitForNextUpdate,
+    ...rendered,
+  };
+};
+
+describe('useProductSelectionsFetcher', () => {
+  it('should return the product selection list', async () => {
+    const { waitUntilReady, result } = await render();
+    // check the loading state
+    expect(result.current.isLoading).toBeTruthy();
+
+    // wait for the rendering to complete
+    await waitUntilReady();
+
+    // check the loading state and rest of the response
+    expect(result.current.isLoading).toBeFalsy();
+    expect(result.current.productSelections.total).toEqual(1);
+    expect(result.current.productSelections.results).toHaveLength(1);
+    expect(result.current.productSelections.results[0].id).toEqual(
+      productSelectionId
+    );
+    expect(result.current.productSelections.results[0].key).toEqual(
+      productSelectionKey
+    );
+    expect(result.current.productSelections.results[0].name.en).toEqual(
+      productSelectionEnglishName
+    );
+  });
+});

package/src/hooks/use-product-selections-total-fetcher/fetch-product-selections-total.ctp.graphql

@@ -0,0 +1,5 @@
+query FetchProductSelectionsTotal {
+  productSelections {
+    total
+  }
+}

package/src/hooks/use-product-selections-total-fetcher/index.js

@@ -0,0 +1,2 @@
+export { default } from './use-product-selections-total-fetcher';
+export { handlers as productSelectionsTotalFetcherMockHandler } from './mocks';

package/src/hooks/use-product-selections-total-fetcher/mocks/handlers.js

@@ -0,0 +1,19 @@
+import { graphql } from 'msw';
+
+const handlers = {
+  ProductSelections: {
+    total: (total) =>
+      graphql.query('FetchProductSelectionsTotal', (req, res, ctx) =>
+        res(
+          ctx.data({
+            productSelections: {
+              total,
+              __typename: 'ProductSelectionQueryResult',
+            },
+          })
+        )
+      ),
+  },
+};
+
+export default handlers;

package/src/hooks/use-product-selections-total-fetcher/mocks/index.js

@@ -0,0 +1,3 @@
+import handlers from './handlers';
+
+export { handlers };