@navinc/base-react-components/dist/use-launchdarkly.js

Nav's Pattern Library

import { jsx as _jsx } from "react/jsx-runtime";
import { useState, useEffect, useRef, createContext, useContext, useCallback } from 'react';
import { initialize } from 'launchdarkly-js-client-sdk';
import isEqual from 'lodash.isequal';
const LaunchDarklyContext = createContext({
    flags: {},
    isLoading: true,
    isInitialized: false,
    trackMetric: undefined,
    whichVariation: undefined,
    trackOfferReferral: undefined,
    ldclient: undefined,
});
export const LaunchDarklyProvider = ({ clientSideID, context, options, children, LoadingContent, onTimeout = () => { }, }) => {
    var _a, _b;
    const ldclient = useRef();
    const [flags, setFlags] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [hasTimedOut, setHasTimedOut] = useState(false);
    const [isInitialized, setIsInitialized] = useState(false);
    const [lastContext, setLastContext] = useState(context);
    const trackMetric = (_a = ldclient.current) === null || _a === void 0 ? void 0 : _a.track;
    const whichVariation = (_b = ldclient.current) === null || _b === void 0 ? void 0 : _b.variation;
    const trackOfferReferral = useCallback((offer = {}, additionalInfo = {}) => {
        const { matchFactorScore, mfSource, offerCategory, offerId, rtid, order } = offer;
        const payload = Object.assign({ matchFactorScore,
            mfSource,
            offerCategory,
            offerId,
            rtid,
            order }, additionalInfo);
        if (ldclient.current)
            ldclient.current.waitForInitialization().then(() => { var _a; return (_a = ldclient.current) === null || _a === void 0 ? void 0 : _a.track('offer_referral', payload); });
    }, []);
    useEffect(() => {
        setTimeout(() => {
            if (isLoading) {
                setIsLoading(false);
                setHasTimedOut(true);
                // should be a bugsnag call
                onTimeout();
            }
        }, 500);
    });
    useEffect(() => {
        if (context && clientSideID && !isInitialized && !hasTimedOut)
            ldclient.current = initialize(clientSideID, context, options);
        else if (!isInitialized)
            console.warn('Please provide a user object and clientSideID');
    }, [clientSideID, context, isInitialized, hasTimedOut, options]);
    useEffect(() => {
        if (ldclient.current && context && !isInitialized)
            ldclient.current.waitForInitialization().then(() => {
                setIsInitialized(true);
                setIsLoading(false);
                if (ldclient.current) {
                    setFlags(ldclient.current.allFlags());
                }
            });
    }, [isInitialized, context]);
    // TODO Not sure this is being used
    useEffect(() => {
        if (!isEqual(context, lastContext) && isInitialized) {
            setLastContext(context);
            if (ldclient.current) {
                ldclient.current.identify(context);
            }
        }
    }, [context, lastContext, ldclient, isInitialized]);
    // TODO add listener for on change to update flags state
    return (_jsx(LaunchDarklyContext.Provider, { value: {
            flags,
            isLoading,
            isInitialized,
            trackMetric,
            trackOfferReferral,
            whichVariation,
            ldclient: ldclient.current,
        }, children: isLoading && !!LoadingContent ? _jsx(LoadingContent, {}) : children }));
};
export const useLaunchDarkly = () => {
    const { flags, isLoading, isInitialized, trackMetric, trackOfferReferral, whichVariation, ldclient } = useContext(LaunchDarklyContext);
    const hasProvider = !!ldclient;
    return { flags, isLoading, isInitialized, trackMetric, trackOfferReferral, whichVariation, ldclient, hasProvider };
};
export const withLaunchDarkly = (Component) => (props) => {
    const { whichVariation } = useLaunchDarkly();
    return _jsx(Component, Object.assign({ whichVariation: whichVariation }, props));
};
//# sourceMappingURL=use-launchdarkly.js.map