@usereactify/search 3.3.0 → 3.4.0

package/dist/hooks/index.d.ts

@@ -11,3 +11,4 @@ export * from "./useFilterStack";
 export * from "./useProductPrice";
 export * from "./useFilterListProps";
 export * from "./useFilterCollapsedState";
+export * from "./useLiveConfig";

package/dist/hooks/index.js

@@ -23,3 +23,4 @@ __exportStar(require("./useFilterStack"), exports);
 __exportStar(require("./useProductPrice"), exports);
 __exportStar(require("./useFilterListProps"), exports);
 __exportStar(require("./useFilterCollapsedState"), exports);
+__exportStar(require("./useLiveConfig"), exports);

package/dist/hooks/useLiveConfig.d.ts

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

package/dist/hooks/useLiveConfig.js

@@ -0,0 +1,70 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLiveConfig = void 0;
+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;
+        // 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 [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,
+                }));
+            }))();
+        }
+    }, [shopifyPermanentDomain]);
+    return {
+        config,
+        configLoading,
+    };
+};
+exports.useLiveConfig = useLiveConfig;

package/dist/provider.d.ts

@@ -3,6 +3,7 @@ import type { Config, ConfigSort, ConfigFilter, ConfigCuration } from "./types/c
 declare type Context = {
     index: string;
     config: Config;
+    configLoading: boolean;
     shopifyPermanentDomain: string;
     sortOption: ConfigSort;
     sortOptions: ConfigSort[];
@@ -24,7 +25,6 @@ declare type Context = {
 declare const Context: React.Context<Context | undefined>;
 declare type Props = {
     index: string;
-    config: Config;
     shopifyPermanentDomain: string;
     filterStackId?: string;
     collection?: Collection;

package/dist/provider.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useContext = exports.Provider = void 0;
 const react_1 = __importDefault(require("react"));
 const UtilityAuthenticatedReactiveBase_1 = require("./utility/UtilityAuthenticatedReactiveBase");
+const hooks_1 = require("./hooks");
 const debug = require("debug")("reactify-search:Provider");
 const Context = react_1.default.createContext(undefined);
 const defaultCredentials = {
@@ -15,7 +16,7 @@ const defaultCredentials = {
 };
 const Provider = (props) => {
     var _a, _b;
-    const { index, config, shopifyPermanentDomain, children, collection, instantSearch, filterStackId, noReactiveBase, additionalComponentIds, } = props;
+    const { index, shopifyPermanentDomain, children, collection, instantSearch, filterStackId, noReactiveBase, additionalComponentIds, } = props;
     const credentials = (_a = props.credentials) !== null && _a !== void 0 ? _a : defaultCredentials;
     const theme = (_b = props.theme) !== null && _b !== void 0 ? _b : {
         typography: {
@@ -33,6 +34,7 @@ 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(() => {
@@ -64,6 +66,7 @@ const Provider = (props) => {
     const contextValue = react_1.default.useMemo(() => ({
         index,
         config,
+        configLoading,
         shopifyPermanentDomain,
         collection,
         credentials,
@@ -110,13 +113,14 @@ exports.Provider = Provider;
 const useContext = () => react_1.default.useContext(Context);
 exports.useContext = useContext;
 const useSortState = (config, collection) => {
+    var _a;
     const sortOptions = react_1.default.useMemo(() => {
         const type = !!collection ? "collection" : "search";
         return config.sort
             .sort((a, b) => `${a.position}`.localeCompare(`${b.position}`))
             .filter(({ visibility }) => ["all", type].includes(visibility));
     }, [config, collection]);
-    const [sortOptionState, setSortOptionState] = react_1.default.useState(sortOptions[0].id);
+    const [sortOptionState, setSortOptionState] = react_1.default.useState((_a = sortOptions[0]) === null || _a === void 0 ? void 0 : _a.id);
     const sortOption = react_1.default.useMemo(() => sortOptions.find(({ id }) => id === sortOptionState) || sortOptions[0], [sortOptions, sortOptionState]);
     const setSortOption = react_1.default.useCallback((sortOptionId) => setSortOptionState(sortOptionId), []);
     return react_1.default.useMemo(() => ({ sortOptions, sortOption, setSortOption }), [sortOption, sortOptions, setSortOption]);

package/dist/result/ResultList.d.ts

@@ -14,6 +14,7 @@ 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,6 +11,7 @@ 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) => {
@@ -22,9 +23,10 @@ const ResultList = (props) => {
 };
 exports.ResultList = ResultList;
 const ResultListInner = (props) => {
-    const { gridColumns, renderError, renderAfter, renderBefore, renderLoading, listClassName, renderResults, renderNoResults, renderResultCard, renderLoadMoreButton, renderResultCardCallout, reactivesearchResultProps, } = props;
+    const { gridColumns, renderError, renderAfter, renderBefore, renderBooting, 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(() => ({
@@ -32,6 +34,11 @@ 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.3.0",
+  "version": "3.4.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",