@k-int/stripes-kint-components 5.22.0 → 5.24.0

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -1,13 +1,16 @@
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
 
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { useQuery } from 'react-query';
 
-import {
-  useNamespace,
-  useOkapiKy
-} from '@folio/stripes/core';
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
 
 import {
   CollapseFilterPaneButton,
@@ -25,7 +28,12 @@ import {
 } from '@folio/stripes/components';
 
 import { generateKiwtQuery } from '../utils';
-import { useKintIntl, useKiwtSASQuery, useLocalStorageState, usePrevNextPagination } from '../hooks';
+import {
+  useKintIntl,
+  useKiwtSASQuery,
+  useLocalStorageState,
+  usePrevNextPagination,
+} from '../hooks';
 
 import TableBody from './TableBody';
 import SearchKeyControl from '../SearchKeyControl';
@@ -41,7 +49,12 @@ const SASQLookupComponent = forwardRef((props, ref) => {
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     labelOverrides = {},
-    lookupQueryNamespaceGenerator = ({ currentPage, namespace, id: passedId, query }) => {
+    lookupQueryNamespaceGenerator = ({
+      currentPage,
+      namespace,
+      id: passedId,
+      query,
+    }) => {
       const queryNamespace = [namespace, 'SASQ'];
       if (passedId) {
         queryNamespace.push(passedId);
@@ -52,6 +65,8 @@ const SASQLookupComponent = forwardRef((props, ref) => {
 
       return queryNamespace;
     },
+    lookupQueryPromise = ({ endpoint, ky, queryParams }) => ky.get(`${endpoint}${queryParams}`).json(),
+    lookupResponseTransform = (response) => response, // Function to transform the response from the query
     mainPaneProps = {},
     mclProps = {},
     noResultsProps = {},
@@ -73,60 +88,87 @@ const SASQLookupComponent = forwardRef((props, ref) => {
     query: sasqPropsQuery, // If these are overriden we need to make use of them
     queryGetter: sasqPropsQueryGetter,
     querySetter: sasqPropsQuerySetter,
-    syncToLocation = true
+    syncToLocation = true,
   } = sasqProps ?? {};
 
-  const { currentPage, paginationMCLProps, paginationSASQProps } = usePrevNextPagination({
-    count,
-    pageSize: fetchParameters.SASQ_MAP?.perPage,
-    syncToLocation
-  });
+  // We manage our internal state of pagination (URL vs MCL page state) using usePrevNextPagination.
+  // Below the queryParameterGenerator can then choose to use the outputs (namely totalRecords and page) as it sees fit.
+  const { currentPage, paginationMCLProps, paginationSASQProps } =
+    usePrevNextPagination({
+      count, // totalRecord
+      pageSize: fetchParameters.SASQ_MAP?.perPage,
+      syncToLocation,
+    });
 
   const {
     query: kintSASQQuery,
     queryGetter: kintSASQQueryGetter,
-    querySetter: kintSASQQuerySetter
+    querySetter: kintSASQQuerySetter,
   } = useKiwtSASQuery();
 
-  const query = useMemo(() => sasqPropsQuery ?? kintSASQQuery, [sasqPropsQuery, kintSASQQuery]);
-  const queryGetter = useMemo(() => sasqPropsQueryGetter ?? kintSASQQueryGetter, [sasqPropsQueryGetter, kintSASQQueryGetter]);
-  const querySetter = useMemo(() => sasqPropsQuerySetter ?? kintSASQQuerySetter, [sasqPropsQuerySetter, kintSASQQuerySetter]);
+  const query = useMemo(
+    () => sasqPropsQuery ?? kintSASQQuery,
+    [sasqPropsQuery, kintSASQQuery]
+  );
+  const queryGetter = useMemo(
+    () => sasqPropsQueryGetter ?? kintSASQQueryGetter,
+    [sasqPropsQueryGetter, kintSASQQueryGetter]
+  );
+  const querySetter = useMemo(
+    () => sasqPropsQuerySetter ?? kintSASQQuerySetter,
+    [sasqPropsQuerySetter, kintSASQQuerySetter]
+  );
 
   const { 0: namespace } = useNamespace();
   const ky = useOkapiKy();
 
   const filterPaneVisibileKey = `${namespace}-${id}-filterPaneVisibility`;
 
-  const queryParams = useMemo(() => (
-    queryParameterGenerator(
-      {
-        ...fetchParameters.SASQ_MAP,
-        page: currentPage,
-      }, (query ?? {})
-    )
-  ), [currentPage, fetchParameters.SASQ_MAP, query, queryParameterGenerator]);
+  const queryParams = useMemo(
+    () => queryParameterGenerator(
+        // With Typescript this would be a type of SASQ_MAP, and so totalRecords is a valid property in our new shape
+        // In generateKiwtQueryParams we can choose to ignore totalRecords, which while being a valid property is not necessary for KIWT queries
+        {
+          page: currentPage,
+          totalRecords: count,
+          ...fetchParameters.SASQ_MAP,
+        },
+        query ?? {}
+      ),
+    [count, currentPage, fetchParameters.SASQ_MAP, query, queryParameterGenerator]
+  );
 
-  const [filterPaneVisible, setFilterPaneVisible] = useLocalStorageState(filterPaneVisibileKey, true);
+  const [filterPaneVisible, setFilterPaneVisible] = useLocalStorageState(
+    filterPaneVisibileKey,
+    true
+  );
   const toggleFilterPane = () => setFilterPaneVisible(!filterPaneVisible);
 
-  const {
-    data = {},
-    ...restOfQueryProps
-  } = useQuery(
+  const { data = {}, ...restOfQueryProps } = useQuery(
     lookupQueryNamespaceGenerator({
       currentPage,
       endpoint: fetchParameters.endpoint,
       namespace,
       id,
       query,
-      queryParams
+      queryParams,
     }),
     () => {
-      return ky.get(`${fetchParameters.endpoint}${queryParams}`).json();
+      return lookupQueryPromise({
+        ky,
+        queryParams,
+        endpoint: fetchParameters.endpoint
+      });
     },
     {
       enabled: (!!query?.filters || !!query?.query) && !!currentPage,
-      ...(fetchParameters.queryOptions ?? {})
+      ...(fetchParameters.queryOptions ?? {}),
+      // select is a parameter supported by useQuery to transform the response
+      // Could be possible to instead pass this down along with the queryOptions
+      // Additionally this is assuming the lookupResponseTransform is a func as opposed to an object
+      select: (selectData) => {
+        return lookupResponseTransform(selectData);
+      },
     }
   );
 
@@ -136,15 +178,13 @@ const SASQLookupComponent = forwardRef((props, ref) => {
     }
   }, [count, data.totalRecords]);
 
-  useImperativeHandle(ref, () => (
-    {
-      lookupQueryProps: {
-        data,
-        ...restOfQueryProps
-      },
-      queryParams
-    }
-  ));
+  useImperativeHandle(ref, () => ({
+    lookupQueryProps: {
+      data,
+      ...restOfQueryProps,
+    },
+    queryParams,
+  }));
 
   return (
     <SearchAndSortQuery
@@ -155,231 +195,234 @@ const SASQLookupComponent = forwardRef((props, ref) => {
       {...sasqProps}
       {...paginationSASQProps}
     >
-      {
-        (sasqRenderProps) => {
-          const {
-            activeFilters,
-            filterChanged,
-            getFilterHandlers,
-            getSearchHandlers,
-            onSubmitSearch,
-            resetAll,
-            searchChanged,
-            searchValue
-          } = sasqRenderProps;
+      {(sasqRenderProps) => {
+        const {
+          activeFilters,
+          filterChanged,
+          getFilterHandlers,
+          getSearchHandlers,
+          onSubmitSearch,
+          resetAll,
+          searchChanged,
+          searchValue,
+        } = sasqRenderProps;
 
-          const searchHandlers = getSearchHandlers();
-          const disableReset = !filterChanged && !searchChanged;
+        const searchHandlers = getSearchHandlers();
+        const disableReset = !filterChanged && !searchChanged;
 
-          const filterCount = activeFilters.string ? activeFilters.string.split(',').length : 0;
+        const filterCount = activeFilters.string
+          ? activeFilters.string.split(',').length
+          : 0;
 
-          const Body = RenderBody ?? TableBody;
+        const Body = RenderBody ?? TableBody;
 
-          const {
-            filterPaneFirstMenu,
-            filterPaneLastMenu,
-            ...restOfFilterPaneProps
-          } = filterPaneProps;
-          const {
-            mainPaneFirstMenu,
-            mainPaneLastMenu,
-            ...restOfMainPaneProps
-          } = mainPaneProps;
+        const {
+          filterPaneFirstMenu,
+          filterPaneLastMenu,
+          ...restOfFilterPaneProps
+        } = filterPaneProps;
+        const { mainPaneFirstMenu, mainPaneLastMenu, ...restOfMainPaneProps } =
+          mainPaneProps;
 
-          const internalStateProps = {
-            activeFilters,
-            filterCount,
-            filterPaneVisible,
-            searchChanged,
-            searchValue,
-            setFilterPaneVisible,
-            toggleFilterPane
-          };
+        const internalStateProps = {
+          activeFilters,
+          filterCount,
+          filterPaneVisible,
+          searchChanged,
+          searchValue,
+          setFilterPaneVisible,
+          toggleFilterPane,
+        };
 
-          return (
-            <PersistedPaneset
-              appId={namespace}
-              id={`${id}-paneset`}
-              {...persistedPanesetProps}
-            >
-              {filterPaneVisible &&
-                <Pane
-                  defaultWidth="20%"
-                  firstMenu={filterPaneFirstMenu ?
-                    filterPaneFirstMenu(internalStateProps) :
-                    null
-                  }
-                  id={`${id}-filter-pane`}
-                  lastMenu={filterPaneLastMenu ?
-                    filterPaneLastMenu(internalStateProps) :
+        const renderFirstMenu = () => {
+          if (mainPaneFirstMenu) {
+            return mainPaneFirstMenu(internalStateProps);
+          }
+
+          if (!filterPaneVisible) {
+            return (
+              <PaneMenu>
+                <ExpandFilterPaneButton
+                  filterCount={filterCount}
+                  onClick={toggleFilterPane}
+                />
+              </PaneMenu>
+            );
+          }
+          return null;
+        };
+
+        return (
+          <PersistedPaneset
+            appId={namespace}
+            id={`${id}-paneset`}
+            {...persistedPanesetProps}
+          >
+            {filterPaneVisible && (
+              <Pane
+                defaultWidth="20%"
+                firstMenu={
+                  filterPaneFirstMenu
+                    ? filterPaneFirstMenu(internalStateProps)
+                    : null
+                }
+                id={`${id}-filter-pane`}
+                lastMenu={
+                  filterPaneLastMenu ? (
+                    filterPaneLastMenu(internalStateProps)
+                  ) : (
                     <PaneMenu>
                       <CollapseFilterPaneButton onClick={toggleFilterPane} />
                     </PaneMenu>
-                  }
-                  paneTitle={<FormattedMessage id="stripes-smart-components.searchAndFilter" />}
-                  {...restOfFilterPaneProps}
-                >
-                  <form onSubmit={onSubmitSearch}>
-                    <FilterPaneHeaderComponent />
-                    {!noSearchField &&
-                      <>
-                        <SearchField
-                          ariaLabel={searchFieldAriaLabel}
-                          autoFocus
-                          id={`sasq-search-field-${id}`}
-                          name="query"
-                          onChange={e => {
-                            if (e.target?.value) {
-                              searchHandlers.query(e); // SASQ needs the whole event here
-                            } else {
-                              searchHandlers.reset();
-                            }
-                          }}
-                          onClear={searchHandlers.reset}
-                          value={searchValue.query}
-                          {...searchFieldProps}
-                        />
-                        {searchableIndexes?.length > 0 && (
-                          <SearchKeyControl options={searchableIndexes} />
-                        )}
-                        <Button
-                          buttonStyle="primary"
-                          disabled={!searchValue.query}
-                          fullWidth
-                          type="submit"
-                        >
-                          <FormattedMessage id="stripes-smart-components.search" />
-                        </Button>
-                        <Button
-                          buttonStyle="none"
-                          disabled={disableReset}
-                          id="clickable-reset-all"
-                          onClick={resetAll}
-                        >
-                          <Icon icon="times-circle-solid">
-                            <FormattedMessage id="stripes-smart-components.resetAll" />
-                          </Icon>
-                        </Button>
-                      </>
-                    }
-                    <FilterComponent
-                      activeFilters={activeFilters.state}
-                      filterChanged={filterChanged}
-                      filterHandlers={getFilterHandlers()}
-                      resetAll={resetAll}
-                      searchChanged={searchChanged}
-                      searchHandlers={getSearchHandlers()}
-                      searchValue={searchValue}
-                    />
-                  </form>
-                </Pane>
-              }
-              <Pane
-                defaultWidth="fill"
-                firstMenu={mainPaneFirstMenu ?
-                  mainPaneFirstMenu(internalStateProps) :
-                  !filterPaneVisible ?
-                    <PaneMenu>
-                      <ExpandFilterPaneButton filterCount={filterCount} onClick={toggleFilterPane} />
-                    </PaneMenu> :
-                    null
+                  )
                 }
-                id={`${id}-main-pane`}
-                lastMenu={mainPaneLastMenu ?
-                  mainPaneLastMenu(internalStateProps) :
-                  null
+                paneTitle={
+                  <FormattedMessage id="stripes-smart-components.searchAndFilter" />
                 }
-                noOverflow
-                padContent={false}
-                paneSub={
-                  kintIntl.formatKintMessage({
-                    id: 'found#Values',
-                    overrideValue: labelOverrides?.foundValues
-                  }, { total: data?.total })
-                }
-                {...restOfMainPaneProps}
+                {...restOfFilterPaneProps}
               >
-                <Body
-                  data={data}
-                  filterPaneVisible={filterPaneVisible}
-                  intlKey={passedIntlKey}
-                  intlNS={passedIntlNS}
-                  labelOverrides={labelOverrides}
-                  noResultsProps={noResultsProps}
-                  query={query}
-                  rowNavigation={rowNavigation}
-                  toggleFilterPane={toggleFilterPane}
-                  {...restOfQueryProps}
-                  {...sasqRenderProps}
-                  /*
-                   * This is insane, it looks like SASQProps `initialSortState`
-                   * needs to be passed through to MCL, as it relies on MCL calling the initial
-                   * sort handler. Passing through SASQProps.
-                   */
-                  {...sasqProps}
-                  // pass down all props handed to us except mclProps (pass those down below with our extra prev/next goodies)
-                  {
-                    ...{
-                      ...props,
-                      mclProps: {
-                        ...paginationMCLProps,
-                        ...mclProps,
-                      }
-                    }
-                  }
-                />
+                <form onSubmit={onSubmitSearch}>
+                  <FilterPaneHeaderComponent />
+                  {!noSearchField && (
+                    <>
+                      <SearchField
+                        ariaLabel={searchFieldAriaLabel}
+                        autoFocus
+                        id={`sasq-search-field-${id}`}
+                        name="query"
+                        onChange={(e) => {
+                          if (e.target?.value) {
+                            searchHandlers.query(e); // SASQ needs the whole event here
+                          } else {
+                            searchHandlers.reset();
+                          }
+                        }}
+                        onClear={searchHandlers.reset}
+                        value={searchValue.query}
+                        {...searchFieldProps}
+                      />
+                      {searchableIndexes?.length > 0 && (
+                        <SearchKeyControl options={searchableIndexes} />
+                      )}
+                      <Button
+                        buttonStyle="primary"
+                        disabled={!searchValue.query}
+                        fullWidth
+                        type="submit"
+                      >
+                        <FormattedMessage id="stripes-smart-components.search" />
+                      </Button>
+                      <Button
+                        buttonStyle="none"
+                        disabled={disableReset}
+                        id="clickable-reset-all"
+                        onClick={resetAll}
+                      >
+                        <Icon icon="times-circle-solid">
+                          <FormattedMessage id="stripes-smart-components.resetAll" />
+                        </Icon>
+                      </Button>
+                    </>
+                  )}
+                  <FilterComponent
+                    activeFilters={activeFilters.state}
+                    filterChanged={filterChanged}
+                    filterHandlers={getFilterHandlers()}
+                    resetAll={resetAll}
+                    searchChanged={searchChanged}
+                    searchHandlers={getSearchHandlers()}
+                    searchValue={searchValue}
+                  />
+                </form>
               </Pane>
-              {children}
-            </PersistedPaneset>
-          );
-        }
-      }
+            )}
+            <Pane
+              defaultWidth="fill"
+              firstMenu={renderFirstMenu()}
+              id={`${id}-main-pane`}
+              lastMenu={
+                mainPaneLastMenu ? mainPaneLastMenu(internalStateProps) : null
+              }
+              noOverflow
+              padContent={false}
+              paneSub={kintIntl.formatKintMessage(
+                {
+                  id: 'found#Values',
+                  overrideValue: labelOverrides?.foundValues,
+                },
+                { total: data?.total }
+              )}
+              {...restOfMainPaneProps}
+            >
+              <Body
+                data={data}
+                filterPaneVisible={filterPaneVisible}
+                intlKey={passedIntlKey}
+                intlNS={passedIntlNS}
+                labelOverrides={labelOverrides}
+                noResultsProps={noResultsProps}
+                query={query}
+                rowNavigation={rowNavigation}
+                toggleFilterPane={toggleFilterPane}
+                {...restOfQueryProps}
+                {...sasqRenderProps}
+                /*
+                 * This is insane, it looks like SASQProps `initialSortState`
+                 * needs to be passed through to MCL, as it relies on MCL calling the initial
+                 * sort handler. Passing through SASQProps.
+                 */
+                {...sasqProps}
+                // pass down all props handed to us except mclProps (pass those down below with our extra prev/next goodies)
+                {...{
+                  ...props,
+                  mclProps: {
+                    ...paginationMCLProps,
+                    ...mclProps,
+                  },
+                }}
+              />
+            </Pane>
+            {children}
+          </PersistedPaneset>
+        );
+      }}
     </SearchAndSortQuery>
   );
 });
 
 SASQLookupComponent.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.node
-  ]),
+  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   fetchParameters: PropTypes.object,
   filterPaneProps: PropTypes.object,
-  FilterComponent: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.node
-  ]),
+  FilterComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   FilterPaneHeaderComponent: PropTypes.oneOfType([
     PropTypes.func,
-    PropTypes.node
+    PropTypes.node,
   ]),
   queryParameterGenerator: PropTypes.func,
-  history: PropTypes.object,
   id: PropTypes.string.isRequired,
   intlKey: PropTypes.string,
   intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
-  location: PropTypes.object,
+  lookupQueryNamespaceGenerator: PropTypes.func,
+  lookupQueryPromise: PropTypes.func,
+  lookupResponseTransform: PropTypes.func,
   mainPaneProps: PropTypes.object,
-  match: PropTypes.object,
   mclProps: PropTypes.object,
+  noResultsProps: PropTypes.object,
   noSearchField: PropTypes.bool,
-  path: PropTypes.string.isRequired,
   persistedPanesetProps: PropTypes.object,
-  RenderBody: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.node
-  ]),
-  resource: PropTypes.object,
-  resultColumns: PropTypes.arrayOf(PropTypes.object),
+  RenderBody: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   rowNavigation: PropTypes.bool,
   sasqProps: PropTypes.object,
-  searchableIndexes: PropTypes.arrayOf(PropTypes.shape({
-    key: PropTypes.string.isRequired,
-    label: PropTypes.string
-  })),
+  searchableIndexes: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    })
+  ),
   searchFieldAriaLabel: PropTypes.string,
-  searchFieldProps: PropTypes.object
+  searchFieldProps: PropTypes.object,
 };
 
 export default SASQLookupComponent;