UIRS-33 Major rework using react-query

.eslintrc

@@ -1,4 +1,16 @@
 {
   "parser": "babel-eslint",
-  "extends": ["@folio/eslint-config-stripes/acquisitions"]
+  "extends": ["@folio/eslint-config-stripes/acquisitions"],
+  "rules": {
+    "no-multiple-empty-lines": "off"
+  },
+  "overrides": [
+    {
+      "files": ["*test.*", "test/**"],
+      "rules": {
+        "react/prop-types": "off",
+        "padding-line-between-statements": "off"
+      }
+    }
+  ]
 }

CHANGELOG.md

@@ -4,9 +4,10 @@
 * [UIRS-15](https://issues.folio.org/browse/UIRS-15) Remote Storage Settings: Credential properties (apiKey)
 * [UIRS-24](https://issues.folio.org/browse/UIRS-24) Add Returning workflow preference
 * [UIRS-27](https://issues.folio.org/browse/UIRS-27) Add to "Remote storage: Create, read, update, delete" all the missing permissions on configurations and providers
-* [UIRS-30](https://issues.folio.org/browse/UIRS-30) Compile Translation Files into AST Format.
+* [UIRS-30](https://issues.folio.org/browse/UIRS-30) Compile Translation Files into AST Format
 * [UIRS-41](https://issues.folio.org/browse/UIRS-41) Add Accession holdings workflow preference
 * [UIRS-42](https://issues.folio.org/browse/UIRS-42) Update "remote-storage-mappings" interface
+* [UIRS-33](https://issues.folio.org/browse/UIRS-33) Major rework using `react-query`
 
 ## [1.0.0](https://github.com/folio-org/ui-remote-storage/tree/v1.0.0) (2021-03-19)
 

jest.config.js

@@ -1,6 +1 @@
-const commonCofig = require('@folio/stripes-acq-components/jest.config');
-
-module.exports = {
-  ...commonCofig,
-  coverageDirectory: './artifacts/coverage-jest/',
-};
+module.exports = require('@folio/stripes-acq-components/jest.config');

package.json

@@ -76,19 +76,24 @@
     "@folio/stripes": "^6.0.0",
     "@folio/stripes-cli": "^2.0.0",
     "@formatjs/cli": "^4.2.10",
+    "@testing-library/dom": "^7.29.6",
     "@testing-library/jest-dom": "^5.11.1",
     "@testing-library/react": "^11.0.2",
+    "@testing-library/react-hooks": "^6.0.0",
+    "@testing-library/user-event": "^13.1.9",
     "babel-eslint": "^10.0.0",
     "babel-jest": "^26.3.0",
     "core-js": "^3.6.1",
-    "eslint": "^6.2.1",
+    "cross-fetch": "^3.1.4",
+    "eslint": "^7.26.0",
     "eslint-plugin-filenames": "^1.3.2",
     "eslint-plugin-jest": "^24.0.0",
     "faker": "^4.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.4.2",
     "jest-css-modules": "^2.1.0",
     "jest-junit": "^11.1.0",
+    "msw": "^0.28.2",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
     "react-intl": "^5.7.0",
@@ -98,8 +103,6 @@
   },
   "dependencies": {
     "@folio/stripes-acq-components": "^2.1.0",
-    "@testing-library/dom": "^7.29.6",
-    "@testing-library/user-event": "^12.8.0",
     "lodash": "^4.17.5",
     "moment": "^2.29.1",
     "prop-types": "^15.5.10",
@@ -111,10 +114,14 @@
   "peerDependencies": {
     "@folio/stripes": "^6.0.0",
     "final-form": "^4.18.2",
+    "ky": "*",
     "react": "*",
     "react-intl": "^5.7.0 ",
     "react-query": "^3.6.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0"
+  },
+  "resolutions": {
+    "babel-eslint/@babel/parser": "7.7.5"
   }
 }

src/API/Configurations.js

@@ -0,0 +1,90 @@
+import { useQueryClient } from 'react-query';
+
+import { useOkapiQuery } from './useOkapiQuery';
+import { useOkapiMutation } from './useOkapiMutation';
+
+
+export const useListQuery = options => {
+  const query = useOkapiQuery({
+    path: 'remote-storage/configurations',
+    queryKey: 'remote-storage/configurations',
+    ...options,
+  });
+
+  return {
+    configurations: query.data?.configurations ?? [],
+    ...query,
+  };
+};
+
+
+export const useSingleQuery = ({ id, onError, ...rest }) => {
+  const queryClient = useQueryClient();
+
+  const query = useOkapiQuery({
+    path: `remote-storage/configurations/${id}`,
+    queryKey: ['remote-storage/configurations', id],
+    onError: () => {
+      // One of the most possible sources of an error here
+      // is navigating to the item that was already deleted (from another workplace).
+      // Refreshing the list couldn't hurt in this case.
+      queryClient.invalidateQueries(['remote-storage/configurations'], { exact: true });
+
+      return onError?.();
+    },
+    ...rest,
+  });
+
+  return {
+    configuration: query.data ?? {},
+    ...query,
+  };
+};
+
+
+const useMutation = ({ onSettled, ...rest }) => {
+  const queryClient = useQueryClient();
+
+  return useOkapiMutation({
+    // We refresh the list on any result of item mutation, success or error:
+    // One of the most possible sources of an error here
+    // is trying to mutate the item that was already deleted (from another workplace).
+    // Refreshing the list couldn't hurt in this case.
+    onSettled: () => {
+      queryClient.invalidateQueries(['remote-storage/configurations'], { exact: true });
+
+      return onSettled?.();
+    },
+    ...rest,
+  });
+};
+
+
+export const useCreateMutation = options => useMutation({
+  method: 'post',
+  path: 'remote-storage/configurations',
+  ...options,
+});
+
+
+export const useUpdateMutation = ({ id, onSuccess, ...rest }) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    method: 'put',
+    path: `remote-storage/configurations/${id}`,
+    onSuccess: () => {
+      queryClient.invalidateQueries(['remote-storage/configurations', id], { exact: true });
+
+      return onSuccess?.();
+    },
+    ...rest,
+  });
+};
+
+
+export const useDeleteMutation = ({ id, ...options }) => useMutation({
+  method: 'delete',
+  path: `remote-storage/configurations/${id}`,
+  ...options,
+});

src/API/Mappings.js

@@ -0,0 +1,13 @@
+import { useOkapiQuery } from './useOkapiQuery';
+
+export const useListQuery = options => {
+  const query = useOkapiQuery({
+    path: 'remote-storage/mappings',
+    ...options,
+  });
+
+  return {
+    mappings: query?.data?.mappings ?? [],
+    ...query,
+  };
+};

src/API/index.js

@@ -0,0 +1,2 @@
+export * as Mappings from './Mappings';
+export * as Configurations from './Configurations';

src/API/test/Configurations/useCreateMutation.test.js

@@ -0,0 +1,73 @@
+import { server, rest, API_BASE } from '../../../test/net';
+import { renderAPIHook, ERROR_RESPONSE } from '../setup'; // must be imported before the tested hooks
+
+import { useCreateMutation, useListQuery } from '../../Configurations';
+
+
+const data = {
+  name: 'RS1',
+  providerName: 'DEMATIC_EMS',
+};
+
+const url = {
+  create: `${API_BASE}/configurations`,
+  list: `${API_BASE}/configurations`,
+};
+
+let request;
+
+beforeEach(() => {
+  request = undefined;
+  server.use(rest.post(
+    url.create,
+    (req, res, ctx) => {
+      request = req;
+
+      return res(ctx.status(201)); // "Created"
+    },
+  ));
+});
+
+
+it('POSTs data to server', async () => {
+  const { result, waitFor } = renderAPIHook(useCreateMutation);
+
+  result.current.mutate(data);
+
+  await waitFor(() => result.current.isSuccess);
+  expect(request?.body).toEqual(data);
+});
+
+describe('Invalidation of List query', () => {
+  const checkListInvalidatedOn = async (status) => {
+    const { result, waitFor } = renderAPIHook(useCreateMutation);
+
+    const listQueryHook = renderAPIHook(useListQuery);
+
+    await waitFor(() => listQueryHook.result.current.isFetching);
+    await waitFor(() => !listQueryHook.result.current.isFetching && listQueryHook.result.current.isSuccess);
+
+    result.current.mutate(data);
+
+    // await waitFor(() => result.current.isSuccess);
+    await waitFor(() => result.current.status === status);
+
+    return listQueryHook.result.current.isFetching;
+  };
+
+  beforeEach(() => {
+    server.use(rest.get(url.list, (req, res, ctx) => res(ctx.json({
+      configurations: [1, 2, 3],
+    }))));
+  });
+
+  it('is made on success', async () => {
+    expect(await checkListInvalidatedOn('success')).toBeTruthy();
+  });
+
+  it('is made on error', async () => {
+    server.use(rest.post(url.create, ERROR_RESPONSE));
+
+    expect(await checkListInvalidatedOn('error')).toBeTruthy();
+  });
+});

src/API/test/Configurations/useDeleteMutation.test.js

@@ -0,0 +1,62 @@
+import { server, rest, API_BASE } from '../../../test/net';
+import { renderAPIHook, ERROR_RESPONSE } from '../setup'; // must be imported before the tested hooks
+
+import { useDeleteMutation, useListQuery } from '../../Configurations';
+
+
+const id = 42;
+const url = {
+  delete: `${API_BASE}/configurations/${id}`,
+  list: `${API_BASE}/configurations`,
+};
+
+
+beforeEach(() => {
+  server.use(rest.delete(
+    url.delete,
+    (req, res, ctx) => res(ctx.status(204)), // "No Content"
+  ));
+});
+
+
+it('DELETESs data from server', async () => {
+  const { result, waitFor } = renderAPIHook(() => useDeleteMutation({ id }));
+
+  result.current.mutate();
+
+  await expect(waitFor(() => result.current.isSuccess)).resolves.not.toThrow();
+});
+
+
+describe('Invalidation of List query', () => {
+  const checkListInvalidatedOn = async (status) => {
+    const { result, waitFor } = renderAPIHook(() => useDeleteMutation({ id }));
+
+    const listQueryHook = renderAPIHook(useListQuery);
+
+    await waitFor(() => listQueryHook.result.current.isFetching);
+    await waitFor(() => !listQueryHook.result.current.isFetching && listQueryHook.result.current.isSuccess);
+
+    result.current.mutate();
+
+    await waitFor(() => result.current.status === status);
+
+    return listQueryHook.result.current.isFetching;
+  };
+
+  beforeEach(() => {
+    server.use(rest.get(url.list, (req, res, ctx) => res(ctx.json({
+      configurations: [1, 2, 3],
+    }))));
+  });
+
+  it('is made on success', async () => {
+    expect(await checkListInvalidatedOn('success')).toBeTruthy();
+  });
+
+  it('is made on error', async () => {
+    server.use(rest.delete(url.delete, ERROR_RESPONSE));
+
+    expect(await checkListInvalidatedOn('error')).toBeTruthy();
+  });
+});

src/API/test/Configurations/useListQuery.test.js

@@ -0,0 +1,40 @@
+// This should be imported before the tested hooks
+import { server, rest, API_BASE } from '../../../test/net';
+import { renderAPIHook, ERROR_RESPONSE } from '../setup'; // must be imported before the tested hooks
+
+import { useListQuery } from '../../Configurations';
+
+
+const url = `${API_BASE}/configurations`;
+
+beforeEach(() => {
+  server.use(rest.get(url, (req, res, ctx) => res(ctx.json({
+    configurations: [1, 2, 3],
+  }))));
+});
+
+
+it('returns list of configurations when loaded', async () => {
+  const { result, waitFor } = renderAPIHook(useListQuery);
+
+  expect(result.current.isLoading).toBeTruthy();
+
+  await waitFor(() => result.current.isSuccess);
+  expect(result.current.configurations).toEqual([1, 2, 3]);
+});
+
+it('returns empty list while loading', () => {
+  const { result } = renderAPIHook(useListQuery);
+
+  expect(result.current.configurations).toEqual([]);
+  expect(result.current.isLoading).toBeTruthy();
+});
+
+it('returns empty list on error', async () => {
+  server.use(rest.get(url, ERROR_RESPONSE));
+
+  const { result, waitFor } = renderAPIHook(useListQuery);
+
+  await waitFor(() => result.current.isError);
+  expect(result.current.configurations).toEqual([]);
+});