@promoboxx/use-filter 1.9.1 → 1.11.0

package/dist/store/index.d.ts

@@ -7,4 +7,4 @@ export interface FilterStore {
     clear(): void;
 }
 export declare function setFilterStore(newStore: FilterStore): void;
-export declare function getFilterStore(): FilterStore;
+export declare function getFilterStore(optionalStore?: FilterStore): FilterStore;

package/dist/store/index.js

@@ -1,15 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFilterStore = exports.setFilterStore = void 0;
-var store;
+var globalStore;
 function setFilterStore(newStore) {
-    store = newStore;
+    globalStore = newStore;
 }
 exports.setFilterStore = setFilterStore;
-function getFilterStore() {
-    if (!store) {
+function getFilterStore(optionalStore) {
+    var resolvedStore = optionalStore || globalStore;
+    if (!resolvedStore) {
         throw new Error('A store must be set with setFilterStore');
     }
-    return store;
+    return resolvedStore;
 }
 exports.getFilterStore = getFilterStore;

package/dist/store/urlParamStore.d.ts

@@ -0,0 +1,2 @@
+import { FilterStore } from './index';
+export declare const createUrlParamStore: () => FilterStore;

package/dist/store/urlParamStore.js

@@ -0,0 +1,86 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createUrlParamStore = void 0;
+var qs_1 = __importDefault(require("qs"));
+var createUrlParamStore = function () {
+    var urlParamStore = {
+        getFilter: function (namespace) {
+            var parsed = naivelyParseExistingParams();
+            var parsedInfo = parsed["info." + namespace];
+            var parsedFilter = parsed["filter." + namespace];
+            // useFilter doesn't really support returning a partial FilterInfo, so both
+            // need to be present,
+            if (parsedInfo && parsedFilter) {
+                if (parsedInfo.page != null) {
+                    parsedInfo.page = Number(parsedInfo.page);
+                }
+                if (parsedInfo.pageSize != null) {
+                    parsedInfo.pageSize = Number(parsedInfo.pageSize);
+                }
+                if (parsedInfo.offset != null) {
+                    parsedInfo.offset = Number(parsedInfo.offset);
+                }
+                return __assign(__assign({}, parsedInfo), { filter: parsedFilter });
+            }
+        },
+        saveFilter: function (namespace, filterInfo) {
+            var parsed = naivelyParseExistingParams();
+            // Setting the params to the equivalent of { [namespace]: filterInfo }
+            // takes up more room. The idea is that this ...
+            //     'filter.filterName%5BfilterValueKey%5D=filterValueValue'
+            // ... is smaller than ...
+            //     filterName%5Bfilter%5D%5BfilterValueKey%5D=filterValueValue
+            // ... by 5 characters per value in a filter. So excuse us for a second ...
+            var clonedInfo = __assign({}, filterInfo);
+            var clonedFilter = filterInfo.filter;
+            delete clonedInfo.filter;
+            delete clonedInfo.lastRefreshAt;
+            delete clonedInfo.shouldRunImmediately;
+            delete clonedInfo.totalResults;
+            delete clonedInfo.totalPages;
+            delete clonedInfo.nextCursor;
+            parsed["filter." + namespace] = clonedFilter;
+            parsed["info." + namespace] = clonedInfo;
+            replaceQueryParams(qs_1.default.stringify(parsed));
+        },
+        clear: function () {
+            var parsed = naivelyParseExistingParams();
+            for (var key in parsed) {
+                if (key.startsWith('filter.') || key.startsWith('info.')) {
+                    delete parsed[key];
+                }
+            }
+            replaceQueryParams(qs_1.default.stringify(parsed));
+        },
+        getData: function () {
+            return undefined;
+        },
+        saveData: function () { },
+    };
+    return urlParamStore;
+};
+exports.createUrlParamStore = createUrlParamStore;
+function replaceQueryParams(newParams) {
+    var nextUrl = new URL(window.location.toString());
+    nextUrl.search = newParams;
+    window.history.replaceState(undefined, '', nextUrl.toString());
+}
+function naivelyParseExistingParams() {
+    // Don't really want to do any casting, especially not to `any`, but the type
+    // of `qs.parse` is so wide we'd have to litter checks all over the place.
+    return qs_1.default.parse(window.location.search.substring(1));
+}

package/dist/useFilter.d.ts

@@ -1,3 +1,4 @@
+import { FilterStore } from './store';
 declare type MaybePromise<T> = T | Promise<T>;
 interface UseFilterOptions<TFilter, TResult> {
     /**
@@ -19,6 +20,7 @@ interface UseFilterOptions<TFilter, TResult> {
      */
     debounceDuration?: number;
     onBeforeSaveFilter?: (filterInfo: FilterInfo<TFilter>) => FilterInfo<TFilter>;
+    store?: FilterStore;
 }
 export interface FilterApi<TFilter, TResult> {
     /**

package/dist/useFilter.js

@@ -32,15 +32,6 @@ var getPageFromOffset_1 = __importDefault(require("./lib/getPageFromOffset"));
 var shallowEqual_1 = __importDefault(require("./lib/shallowEqual"));
 var store_1 = require("./store");
 function useFilter(namespace, options) {
-    var _a = react_1.useState(function () {
-        var existing = store_1.getFilterStore().getFilter(namespace);
-        var initialValue = existing
-            ? __assign(__assign({}, existing), { shouldRunImmediately: true }) : undefined;
-        return initialValue;
-    }), filterInfo = _a[0], setFilterInfoState = _a[1];
-    var _b = react_1.useState(function () {
-        return store_1.getFilterStore().getData(namespace);
-    }), data = _b[0], setData = _b[1];
     // Having these types of refs helps get around rules of hooks, and they need
     // to be updated each render.
     var ctxRefValue = {
@@ -49,11 +40,21 @@ function useFilter(namespace, options) {
         debounceDuration: options.debounceDuration,
         defaultFilterInfo: options.defaultFilterInfo,
         onBeforeSaveFilter: options.onBeforeSaveFilter,
+        store: options.store,
     };
     var ctxRef = react_1.useRef(ctxRefValue);
     react_1.useEffect(function () {
         ctxRef.current = ctxRefValue;
     });
+    var _a = react_1.useState(function () {
+        var existing = store_1.getFilterStore(ctxRef.current.store).getFilter(namespace);
+        var initialValue = existing
+            ? __assign(__assign({}, existing), { shouldRunImmediately: true }) : undefined;
+        return initialValue;
+    }), filterInfo = _a[0], setFilterInfoState = _a[1];
+    var _b = react_1.useState(function () {
+        return store_1.getFilterStore(ctxRef.current.store).getData(namespace);
+    }), data = _b[0], setData = _b[1];
     var _c = react_1.useState(!filterInfo), isLoading = _c[0], setIsLoading = _c[1];
     var doesFilterExist = react_1.useRef(!!filterInfo);
     var lastRefreshAtRef = react_1.useRef(
@@ -83,7 +84,7 @@ function useFilter(namespace, options) {
         var makeRequest = function () {
             lastRefreshAtRef.current = filterInfo.lastRefreshAt;
             var response = ctxRef.current.onChange(filterInfo, updateReasonRef.current);
-            store_1.getFilterStore().saveFilter(namespace, ctxRef.current.onBeforeSaveFilter
+            store_1.getFilterStore(ctxRef.current.store).saveFilter(namespace, ctxRef.current.onBeforeSaveFilter
                 ? ctxRef.current.onBeforeSaveFilter(filterInfo)
                 : filterInfo);
             if (!response) {
@@ -132,7 +133,7 @@ function useFilter(namespace, options) {
                 }
                 if (response.data) {
                     setData(response.data);
-                    store_1.getFilterStore().saveData(namespace, response.data);
+                    store_1.getFilterStore(ctxRef.current.store).saveData(namespace, response.data);
                 }
             }
             if (isPromise(response)) {

package/dist/useSimpleFilter.d.ts

@@ -1,3 +1,4 @@
+import { FilterStore } from './store';
 import { UseFilterUpdateReason } from './useFilter';
 interface UseSimpleFilterOptions<TFilter> {
     /**
@@ -11,6 +12,7 @@ interface UseSimpleFilterOptions<TFilter> {
      */
     debounceDuration?: number;
     onBeforeSaveFilter?: (filterInfo: SimpleFilterInfo<TFilter>) => SimpleFilterInfo<TFilter>;
+    store?: FilterStore;
 }
 export interface SimpleFilterApi<TFilter> {
     /**

package/dist/useSimpleFilter.js

@@ -27,13 +27,14 @@ function useSimpleFilter(namespace, options) {
         debounceDuration: options.debounceDuration,
         defaultFilterInfo: options.defaultFilterInfo,
         onBeforeSaveFilter: options.onBeforeSaveFilter,
+        store: options.store,
     };
     var ctxRef = react_1.useRef(ctxRefValue);
     react_1.useEffect(function () {
         ctxRef.current = ctxRefValue;
     });
     var _a = react_1.useState(false), isLoading = _a[0], setIsLoading = _a[1];
-    var _b = react_1.useState(function () { return (__assign(__assign({}, (store_1.getFilterStore().getFilter(namespace) ||
+    var _b = react_1.useState(function () { return (__assign(__assign({}, (store_1.getFilterStore(ctxRef.current.store).getFilter(namespace) ||
         buildDefaultFilterInfo(options.defaultFilterInfo))), { shouldRunImmediately: true })); }), filterInfo = _b[0], setFilterInfoState = _b[1];
     var _c = react_1.useState(filterInfo), debouncedFilterInfo = _c[0], setDebouncedFilterInfo = _c[1];
     // Not sure this is needed in simple mode?
@@ -50,7 +51,7 @@ function useSimpleFilter(namespace, options) {
         var timeout = undefined;
         function makeRequest() {
             lastRefreshAtRef.current = filterInfo.lastRefreshAt;
-            store_1.getFilterStore().saveFilter(ctxRef.current.namespace, (ctxRef.current.onBeforeSaveFilter
+            store_1.getFilterStore(ctxRef.current.store).saveFilter(ctxRef.current.namespace, (ctxRef.current.onBeforeSaveFilter
                 ? ctxRef.current.onBeforeSaveFilter(filterInfo)
                 : filterInfo));
             setDebouncedFilterInfo(filterInfo);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promoboxx/use-filter",
-  "version": "1.9.1",
+  "version": "1.11.0",
   "description": "",
   "main": "dist/useFilter.js",
   "keywords": [],
@@ -10,6 +10,7 @@
     "@promoboxx/eslint-config": "^2.3.0",
     "@testing-library/react": "^12.0.0",
     "@types/jest": "^26.0.24",
+    "@types/qs": "^6.9.7",
     "@types/react": "^17.0.14",
     "@types/redux": "^3.6.0",
     "eslint": "^7.30.0",
@@ -43,7 +44,12 @@
     "dist/store/index.d.ts",
     "dist/store/index.js",
     "dist/store/localStorageStore.js",
+    "dist/store/urlParamStore.d.ts",
+    "dist/store/urlParamStore.js",
     "dist/store/memoryStore.js",
     "dist/store/reduxStore.js"
-  ]
+  ],
+  "dependencies": {
+    "qs": "^6.11.2"
+  }
 }