@k-int/stripes-kint-components 5.10.0 → 5.12.0

package/src/lib/Tags/hooks/useTags.js

@@ -0,0 +1,16 @@
+import { useQuery } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+import { defaultTagQuery, tagNamespaceArray } from '../tagsConfig';
+
+const useTags = (namespaceArray, options) => {
+  const ky = useOkapiKy();
+  const nsArray = namespaceArray ?? tagNamespaceArray;
+
+  return useQuery(
+    nsArray,
+    () => ky.get(defaultTagQuery).json(),
+    options
+  );
+};
+
+export default useTags;

package/src/lib/Tags/hooks/useTagsEnabled.js

@@ -0,0 +1,19 @@
+import { useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+import { MOD_SETTINGS_ENDPOINT } from '../../constants/endpoints';
+
+export const tagsEnabledQueryKey = [MOD_SETTINGS_ENDPOINT, 'query=(module==TAGS and configName==tags_enabled)', 'stripes-kint-components', 'useTagsEnabled'];
+
+const useTagsEnabled = () => {
+  const ky = useOkapiKy();
+
+  const queryObject = useQuery(
+    tagsEnabledQueryKey,
+    () => ky.get(`${MOD_SETTINGS_ENDPOINT}?query=(module==TAGS and configName==tags_enabled)`).json()
+  );
+
+  const { data: { configs: { 0: { value } = {} } = [] } = {} } = queryObject;
+  return !value || value === 'true';
+};
+
+export default useTagsEnabled;

package/src/lib/Tags/index.js

@@ -0,0 +1,4 @@
+export { default as Tags } from './Tags';
+
+export * from './tagsConfig';
+export * from './hooks';

package/src/lib/Tags/tagsConfig.js

@@ -0,0 +1,16 @@
+const tagNamespaceArray = ['tags', 'stripes-kint-components', 'Tags'];
+
+const tagsPath = 'tags';
+const defaultTagsParams = [
+  'limit=1000',
+  'query=cql.allRecords%3D1%20sortby%20label'
+];
+
+const defaultTagQuery = `${tagsPath}?${defaultTagsParams?.join('&')}`;
+
+export {
+  tagsPath,
+  defaultTagsParams,
+  defaultTagQuery,
+  tagNamespaceArray
+};

package/src/lib/constants/pagination.js

@@ -0,0 +1,10 @@
+export const NEXT = 'next';
+export const PREV = 'prev';
+
+// THIS SHOULD BE SET BY CALLING CODE, ONLY DEFAULTED TO AVOID DIVISION BY UNDEFINED
+export const DEFAULT_PAGINATION_SIZE = 25;
+// Only here because we need argument 3 from onNeedMoreData
+// and want to avoid "magic number" sonarlint
+export const MCL_NEED_MORE_DATA_PREV_NEXT_ARG_INDEX = 3;
+
+export const DEFAULT_PAGE_KEY = 'defaultPageKey';

package/src/lib/hooks/index.js

@@ -20,3 +20,5 @@ export { default as useMutateRefdataValue } from './useMutateRefdataValue';
 export { default as useMutateRefdataCategory } from './useMutateRefdataCategory';
 export { default as useMutateCustomProperties } from './useMutateCustomProperties';
 export { default as useMutateModConfigEntry } from './useMutateModConfigEntry';
+
+export { default as usePrevNextPagination } from './usePrevNextPagination';

package/src/lib/hooks/useHelperApp.js

@@ -1,15 +1,16 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 
 import queryString from 'query-string';
 import isEqual from 'lodash/isEqual';
 
-let helperObject = {};
-
 const useHelperApp = (helpers) => {
   const history = useHistory();
   const location = useLocation();
 
+  const [helperObject, setHelperObject] = useState({});
+  const [helperToggleFunctions, setHelperToggleFunctions] = useState({});
+
   const query = queryString.parse(location.search);
 
   const [currentHelper, setCurrentHelper] = useState(query?.helper);
@@ -22,9 +23,18 @@ const useHelperApp = (helpers) => {
   };
 
   useEffect(() => {
-    // Keep object outside of hook to avoid redraw, oncly change when keys change
     if (!isEqual(Object.keys(helperObject), Object.keys(helpers))) {
-      helperObject = helpers;
+      setHelperObject(helpers);
+    }
+
+    const newHelperToggleFunctions = {};
+    Object.keys(helperObject).forEach(h => {
+      newHelperToggleFunctions[h] = () => handleToggleHelper(h);
+    });
+
+    if (!isEqual(Object.keys(helperToggleFunctions), Object.keys(newHelperToggleFunctions))) {
+      // This makes sure adding/removing helpers changes the functions
+      setHelperToggleFunctions(newHelperToggleFunctions);
     }
 
     if (currentHelper !== query?.helper) {
@@ -37,11 +47,14 @@ const useHelperApp = (helpers) => {
         pathname: location.pathname,
         search: `?${queryString.stringify(newQuery)}`
       });
+
+      // When helper changes, reset helperToggleFunctions
+      setHelperToggleFunctions(newHelperToggleFunctions);
     }
-  }, [currentHelper, helpers, history, location, query]);
+  }, [currentHelper, handleToggleHelper, helperObject, helperToggleFunctions, helpers, history, location, query]);
 
   // Set the HelperComponent
-  const HelperComponent = useMemo(() => ((props) => {
+  const HelperComponent = useCallback((props) => {
     if (!query?.helper) return null;
 
     let Component = null;
@@ -56,13 +69,8 @@ const useHelperApp = (helpers) => {
         {...props}
       />
     );
-  }), [handleToggleHelper, query.helper]);
+  }, [handleToggleHelper, helperObject, query?.helper]);
 
-  // Set up the helperToggleFunctions
-  const helperToggleFunctions = {};
-  Object.keys(helperObject).forEach(h => {
-    helperToggleFunctions[h] = () => handleToggleHelper(h);
-  });
 
   return { currentHelper, HelperComponent, helperToggleFunctions, isOpen };
 };

package/src/lib/hooks/useLocalPageStore.js

@@ -0,0 +1,18 @@
+import { create } from 'zustand';
+import { DEFAULT_PAGE_KEY } from '../constants/pagination';
+
+// Any time that usePrevNextPagination is NOT synced to location,
+// store a keyed currentPage here instead
+const useLocalPageStore = create(
+  (set) => ({
+    pageStore: {},
+    setPage: (id, page) => set((state) => {
+      // Any non-id keyed pages will go into a single storage slot
+      const key = id ?? DEFAULT_PAGE_KEY;
+
+      return { ...state, pageStore: { ...state.pageStore, [key]: page } };
+    }),
+  }),
+);
+
+export default useLocalPageStore;

package/src/lib/hooks/usePrevNextPagination.js

@@ -0,0 +1,203 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useLocation, useHistory } from 'react-router-dom';
+
+import queryString from 'query-string';
+import {
+  DEFAULT_PAGINATION_SIZE,
+  DEFAULT_PAGE_KEY,
+  MCL_NEED_MORE_DATA_PREV_NEXT_ARG_INDEX,
+  NEXT,
+  PREV
+} from '../constants/pagination';
+
+import useLocalPageStore from './useLocalPageStore';
+
+// Currently there are several places in which this hook is used twice within the same component
+// Once in order to get the current page, and again in order to handle changes to paginations
+// This hook should be refactored in order to resolve these issue - @EthanFreestone
+const usePrevNextPagination = ({
+  count = 0, // Only needed for reading back MCL props
+  defaultToPageOne = true, // A prop to allow the implementor to turn off the defaulting to page=1
+  pageSize = DEFAULT_PAGINATION_SIZE, // Only needed for reading back MCL props
+  id = DEFAULT_PAGE_KEY, // This id is ONLY used for syncToLocation: false cases, as a key to the zustand store
+  syncToLocation = true, // Used to turn on/off location syncing, so can be used as standalone state if required,
+  hasNextPage = null // Override for canGoNext, used in the case in which resources are fetched with no stats
+} = {}) => {
+  /* ------ ZUSTAND STORE ------ */
+  // For NON-SYNC-TO-LOCATION use cases, store the currentPage in a keyed store
+  const pageStore = useLocalPageStore(state => state.pageStore);
+  const setPage = useLocalPageStore(state => state.setPage);
+
+  /* ------ CURRENTPAGE STATE ------ */
+  // Set up initialValue
+  const getInitialCurrentPage = useCallback(() => {
+    let initialCurrentPage;
+    if (!syncToLocation) {
+      if (pageStore[id]) {
+        initialCurrentPage = pageStore[id];
+      } else {
+        // Initialise store state
+        setPage(id, 1);
+        initialCurrentPage = 1;
+      }
+    }
+
+    return initialCurrentPage;
+  }, [id, pageStore, setPage, syncToLocation]);
+  // State itself
+  const [currentPage, setCurrentPage] = useState(getInitialCurrentPage());
+
+  const location = useLocation();
+  const history = useHistory();
+
+  /* ------ HANDLEPAGECHANGE ------ */
+  // Takes in a direction "prev" or "next" and performs the requisite logic to move
+  // currentPage state and/or zustand store state
+  const handlePageChange = useCallback((direction) => {
+    const urlQuery = queryString.parse(location.search);
+
+    let newPage;
+    if (direction === NEXT) {
+      newPage = currentPage + 1;
+    } else if (direction === PREV) {
+      newPage = currentPage - 1;
+    }
+
+    if (!syncToLocation) {
+      // We're manipulating the state directly in this case
+      // We're dealing with the zustand store in this case,
+      // change the store and the currentPage will update below
+      setPage(id, newPage);
+      setCurrentPage(newPage);
+    } else if (newPage !== urlQuery?.page) {
+      const newQuery = {
+        ...urlQuery,
+        page: newPage
+      };
+      history.push({
+        pathname: location.pathname,
+        search: `?${queryString.stringify(newQuery)}`
+      });
+    }
+  }, [
+    currentPage,
+    history,
+    id,
+    location.pathname,
+    location.search,
+    setPage,
+    syncToLocation
+  ]);
+
+
+
+  const [resetPageState, setResetPageState] = useState(false);
+  const resetPage = useCallback(() => {
+    if (syncToLocation) {
+      setResetPageState(true);
+    } else {
+      setPage(id, 1);
+      setCurrentPage(1);
+    }
+  }, [id, setPage, syncToLocation]);
+
+  useEffect(() => {
+    if (syncToLocation) {
+      const urlQuery = queryString.parse(location.search);
+
+      if (urlQuery?.page && currentPage !== urlQuery?.page) {
+        setCurrentPage(Number(urlQuery?.page));
+      } else if (!urlQuery?.page && defaultToPageOne) {
+        // If url query "page" is not yet set, set it to 1
+        setCurrentPage(1);
+        const newQuery = {
+          ...urlQuery,
+          page: 1
+        };
+
+        history.push({
+          pathname: location.pathname,
+          search: `?${queryString.stringify(newQuery)}`
+        });
+      }
+
+      if (resetPageState) {
+        const newQuery = {
+          ...urlQuery,
+          page: 1
+        };
+
+        history.push({
+          pathname: location.pathname,
+          search: `?${queryString.stringify(newQuery)}`
+        });
+        setResetPageState(false);
+      }
+    } else if (currentPage !== pageStore[id]) {
+      // Only do this when not syncing to location...
+      // If current page state is not what we have in the store, set current page state
+      setCurrentPage(pageStore[id]);
+    }
+  }, [
+    currentPage,
+    defaultToPageOne,
+    history,
+    id,
+    location,
+    pageStore,
+    resetPageState,
+    syncToLocation
+  ]);
+
+  // Set up MCL specific props based on page
+  const pagingCanGoNext = hasNextPage ?? (currentPage && (currentPage < Number(count) / pageSize));
+  const pagingCanGoPrevious = currentPage && Number(currentPage) > 1;
+  const pagingOffset = currentPage ? (currentPage - 1) * pageSize : 0;
+  const onNeedMoreData = (...args) => {
+    if (args[MCL_NEED_MORE_DATA_PREV_NEXT_ARG_INDEX]) {
+      handlePageChange(args[MCL_NEED_MORE_DATA_PREV_NEXT_ARG_INDEX]);
+    }
+  };
+
+  // Set up SASQ callback handling
+  // If extras are needed, these can be set up
+  // manually using resetPage per SASQ
+  const queryStateReducer = useCallback((_currState, nextState) => {
+    const resetPageEvents = [
+      'clear.all',
+      'reset.all',
+      'filter.state',
+      'filter.clearGroup',
+      'sort.change',
+      'search.reset',
+      'search.submit'
+    ];
+
+    if (resetPageEvents.includes(nextState.changeType)) {
+      resetPage();
+    }
+
+    return nextState;
+  }, [resetPage]);
+
+  const paginationSASQProps = useMemo(() => ({
+    queryStateReducer
+  }), [queryStateReducer]);
+
+  return ({
+    currentPage,
+    handlePageChange,
+    paginationMCLProps: {
+      onNeedMoreData,
+      pagingCanGoNext,
+      pagingCanGoPrevious,
+      pagingOffset,
+      pagingType: 'prev-next'
+    },
+    paginationSASQProps,
+    queryStateReducer,
+    resetPage,
+  });
+};
+
+export default usePrevNextPagination;

package/test/helpers/test-implementor-translations.json

@@ -76,5 +76,8 @@
   "edit": "Edit",
   "save": "Save",
   "cancel": "Cancel",
-  "apply": "Apply"
+  "apply": "Apply",
+  "tags": "Tags",
+  "numberOfTags": "{count, number} {count, plural, one {Tag} other {Tags}}",
+  "newTagCreated": "New tag created"
 }