@usereactify/search 3.4.3 → 3.4.4

package/dist/hooks/useLiveConfig.d.ts

@@ -1,5 +1,4 @@
 import { Config } from "../types/config";
 export declare const useLiveConfig: (shopifyPermanentDomain: string) => {
-    config: Config;
-    configLoading: boolean;
+    config: Config | undefined;
 };

package/dist/hooks/useLiveConfig.js

@@ -17,58 +17,48 @@ const react_1 = __importDefault(require("react"));
 const debug = require("debug")("reactify-search:useLiveConfig");
 // 5 minute cache expiry
 const CACHE_EXPIRY = 5 * 60 * 1000;
-const useLiveConfig = (shopifyPermanentDomain) => {
-    // synchronously returns cached and non-expired config from session storage
-    const cachedConfig = react_1.default.useMemo(() => {
-        var _a;
-        if (typeof window === "undefined") {
-            return;
-        }
-        // skip checking cache if url search param "nocache" is set
-        const skipCache = new URLSearchParams(window.location.href.split("?")[1]).get("nocache") !==
-            null;
-        if (skipCache) {
-            debug("skipping cache");
-            return;
-        }
-        const sessionConfig = JSON.parse((_a = window.sessionStorage.getItem("reactify-search:config")) !== null && _a !== void 0 ? _a : "null");
-        if (sessionConfig) {
-            const sessionConfigTtl = sessionConfig.expiresAt - Date.now();
-            debug(`found ${sessionConfigTtl > 0 ? "cached" : "expired"} config`);
-            if (sessionConfigTtl > 0) {
-                debug(`config expires in ${(sessionConfigTtl / 1000).toFixed()} seconds`);
-                return sessionConfig.config;
-            }
-        }
+// synchronously returns cached and non-expired config from session storage
+function getCachedConfig() {
+    var _a;
+    if (typeof window === "undefined") {
         return;
-    }, []);
-    const [config, setConfig] = react_1.default.useState(cachedConfig !== null && cachedConfig !== void 0 ? cachedConfig : {
-        fields: [],
-        filters: [],
-        sort: [],
-        curations: [],
-        redirects: [],
-    });
-    const [configLoading, setConfigLoading] = react_1.default.useState(cachedConfig ? false : true);
-    react_1.default.useEffect(() => {
-        // fetch remote config if no cached config is found
-        if (!cachedConfig) {
-            (() => __awaiter(void 0, void 0, void 0, function* () {
-                debug("fetching fresh config");
-                setConfigLoading(true);
-                const json = yield fetch(`https://config.search.reactify.app/?shop=${shopifyPermanentDomain}`).then((response) => response.json());
-                setConfig(json.body);
-                setConfigLoading(false);
-                window.sessionStorage.setItem("reactify-search:config", JSON.stringify({
-                    expiresAt: new Date().getTime() + CACHE_EXPIRY,
-                    config: json.body,
-                }));
-            }))();
+    }
+    // skip checking cache if url search param "nocache" is set
+    const skipCache = new URLSearchParams(window.location.href.split("?")[1]).get("nocache") !==
+        null;
+    if (skipCache) {
+        debug("skipping cache");
+        return;
+    }
+    const sessionConfig = JSON.parse((_a = window.sessionStorage.getItem("reactify-search:config")) !== null && _a !== void 0 ? _a : "null");
+    if (sessionConfig) {
+        const sessionConfigTtl = sessionConfig.expiresAt - Date.now();
+        debug(`found ${sessionConfigTtl > 0 ? "cached" : "expired"} config`);
+        if (sessionConfigTtl > 0) {
+            debug(`config expires in ${(sessionConfigTtl / 1000).toFixed()} seconds`);
+            return sessionConfig.config;
         }
+    }
+    return;
+}
+const useLiveConfig = (shopifyPermanentDomain) => {
+    const [config, setConfig] = react_1.default.useState(getCachedConfig());
+    react_1.default.useEffect(() => {
+        const cachedConfig = getCachedConfig();
+        if (cachedConfig)
+            return;
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            debug("fetching fresh config");
+            const json = yield fetch(`https://config.search.reactify.app/?shop=${shopifyPermanentDomain}`).then((response) => response.json());
+            setConfig(json.body);
+            window.sessionStorage.setItem("reactify-search:config", JSON.stringify({
+                expiresAt: new Date().getTime() + CACHE_EXPIRY,
+                config: json.body,
+            }));
+        }))();
     }, [shopifyPermanentDomain]);
     return {
         config,
-        configLoading,
     };
 };
 exports.useLiveConfig = useLiveConfig;

package/dist/provider.d.ts

@@ -3,7 +3,6 @@ import type { Config, ConfigSort, ConfigFilter, ConfigCuration } from "./types/c
 declare type Context = {
     index: string;
     config: Config;
-    configLoading: boolean;
     shopifyPermanentDomain: string;
     sortOption: ConfigSort | undefined;
     sortOptions: ConfigSort[];
@@ -34,8 +33,15 @@ declare type Props = {
     theme?: Theme;
     /** Array of additional component IDs managed outside of Reactify Search */
     additionalComponentIds?: string[];
+    /**
+     * Optional render function to display a component when the config is loading.
+     */
+    renderBooting?: () => JSX.Element | null;
 };
 export declare const Provider: React.FC<Props>;
+export declare const ConfiguredProvider: React.FC<Omit<Props, "renderBooting"> & {
+    config: Config;
+}>;
 export declare const useContext: () => Context;
 export interface Collection {
     id: number;

package/dist/provider.js

@@ -1,9 +1,20 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useContext = exports.Provider = void 0;
+exports.useContext = exports.ConfiguredProvider = exports.Provider = void 0;
 const react_1 = __importDefault(require("react"));
 const UtilityAuthenticatedReactiveBase_1 = require("./utility/UtilityAuthenticatedReactiveBase");
 const hooks_1 = require("./hooks");
@@ -14,9 +25,20 @@ const defaultCredentials = {
     password: "password",
     endpoint: "https://api.search.reactify.app",
 };
-const Provider = (props) => {
+const Provider = (_a) => {
+    var { renderBooting } = _a, props = __rest(_a, ["renderBooting"]);
+    const { config } = (0, hooks_1.useLiveConfig)(props.shopifyPermanentDomain);
+    if (!config) {
+        if (renderBooting)
+            return renderBooting();
+        return null;
+    }
+    return react_1.default.createElement(exports.ConfiguredProvider, Object.assign({}, props, { config: config }));
+};
+exports.Provider = Provider;
+const ConfiguredProvider = (props) => {
     var _a, _b;
-    const { index, shopifyPermanentDomain, children, collection, instantSearch, filterStackId, noReactiveBase, additionalComponentIds, } = props;
+    const { index, config, children, collection, instantSearch, filterStackId, noReactiveBase, shopifyPermanentDomain, additionalComponentIds, } = props;
     const credentials = (_a = props.credentials) !== null && _a !== void 0 ? _a : defaultCredentials;
     const theme = (_b = props.theme) !== null && _b !== void 0 ? _b : {
         typography: {
@@ -34,7 +56,6 @@ const Provider = (props) => {
     react_1.default.useEffect(() => {
         debug("props", props);
     }, [props]);
-    const { config, configLoading } = (0, hooks_1.useLiveConfig)(props.shopifyPermanentDomain);
     // @todo make this hackable with a prop
     // https://gitlab.com/reactifyapps/reactify-search-frontend/-/issues/1
     const searchQueryFromURL = react_1.default.useMemo(() => {
@@ -66,7 +87,6 @@ const Provider = (props) => {
     const contextValue = react_1.default.useMemo(() => ({
         index,
         config,
-        configLoading,
         shopifyPermanentDomain,
         collection,
         credentials,
@@ -109,7 +129,7 @@ const Provider = (props) => {
     return (react_1.default.createElement(Context.Provider, { value: contextValue },
         react_1.default.createElement(UtilityAuthenticatedReactiveBase_1.UtilityAuthenticatedReactiveBase, null, children)));
 };
-exports.Provider = Provider;
+exports.ConfiguredProvider = ConfiguredProvider;
 const useContext = () => react_1.default.useContext(Context);
 exports.useContext = useContext;
 const useSortState = (config, collection) => {

package/dist/result/ResultList.d.ts

@@ -14,7 +14,6 @@ declare type Props = {
     pageSize?: number;
     gridColumns?: number;
     listClassName?: string;
-    renderBooting?: () => JSX.Element | null;
     renderLoading?: () => JSX.Element | null;
     renderNoResults?: () => JSX.Element | null;
     renderResultCard?: Parameters<typeof ResultCard>[0]["render"];

package/dist/result/ResultList.js

@@ -11,7 +11,6 @@ const ResultPagination_1 = require("./ResultPagination");
 const ResultCardCallout_1 = require("./ResultCardCallout");
 const ResultLoadMoreButton_1 = require("./ResultLoadMoreButton");
 const ResultPaginationNextPrev_1 = require("./ResultPaginationNextPrev");
-const provider_1 = require("../provider");
 const hooks_1 = require("../hooks");
 const elastic_1 = require("../types/elastic");
 const ResultList = (props) => {
@@ -23,10 +22,9 @@ const ResultList = (props) => {
 };
 exports.ResultList = ResultList;
 const ResultListInner = (props) => {
-    const { gridColumns, renderError, renderAfter, renderBefore, renderBooting, renderLoading, listClassName, renderResults, renderNoResults, renderResultCard, renderLoadMoreButton, renderResultCardCallout, reactivesearchResultProps, } = props;
+    const { gridColumns, renderError, renderAfter, renderBefore, renderLoading, listClassName, renderResults, renderNoResults, renderResultCard, renderLoadMoreButton, renderResultCardCallout, reactivesearchResultProps, } = props;
     const filterStack = (0, hooks_1.useFilterStack)();
     const { instantSearch } = (0, hooks_1.useSearch)();
-    const { configLoading } = (0, provider_1.useContext)();
     const initialSearchHasRun = react_1.default.useMemo(() => "undefined" !==
         typeof reactivesearchResultProps.resultStats.numberOfResults, [reactivesearchResultProps]);
     const styleProp = react_1.default.useMemo(() => ({
@@ -34,11 +32,6 @@ const ResultListInner = (props) => {
         gridTemplateColumns: `repeat(${gridColumns !== null && gridColumns !== void 0 ? gridColumns : 4}, minmax(0, 1fr))`,
     }), [gridColumns]);
     const resultProps = react_1.default.useMemo(() => (Object.assign(Object.assign({}, reactivesearchResultProps), { products: reactivesearchResultProps.data.filter((document) => elastic_1.ElasticDocumentType.Product === document.type || !document.type), callouts: reactivesearchResultProps.data.filter((document) => elastic_1.ElasticDocumentType.Callout === document.type) })), [reactivesearchResultProps]);
-    if (configLoading) {
-        if (renderBooting)
-            return renderBooting();
-        return react_1.default.createElement("div", null, "Loading...");
-    }
     if (reactivesearchResultProps.error) {
         if (renderError)
             return renderError({ error: reactivesearchResultProps.error });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@usereactify/search",
   "description": "React UI library for Reactify Search",
-  "version": "3.4.3",
+  "version": "3.4.4",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",