@magicbell/react-headless
Version:
Hooks to build a notification inbox
61 lines • 2.78 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = MagicBellProvider;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const clientSettings_js_1 = tslib_1.__importDefault(require("../../stores/clientSettings.js"));
const index_js_1 = tslib_1.__importDefault(require("../../stores/config/index.js"));
const buildStore_js_1 = tslib_1.__importDefault(require("../../stores/notifications/helpers/buildStore.js"));
const index_js_2 = require("../../stores/notifications/index.js");
const RealtimeListener_js_1 = tslib_1.__importDefault(require("../RealtimeListener.js"));
function setupXHR({ serverURL, ...userSettings }) {
const settings = userSettings;
if (serverURL)
settings.serverURL = serverURL;
clientSettings_js_1.default.setState(settings);
return settings;
}
function setupStores(storesConfig) {
const stores = {};
storesConfig.forEach((store) => {
const { defaultQueryParams: context, defaults = {} } = store;
stores[store.id] = (0, buildStore_js_1.default)({ context, ...defaults });
});
index_js_2.useNotificationStoresCollection.setState({ stores });
return stores;
}
/**
* Provider component for Magicbell.
*
* @param props
* @param props.apiKey API key of the MagicBell project
* @param props.userEmail Email of the user whose notifications will be displayed
* @param props.userExternalId External ID of the user whose notifications will be displayed
* @param props.userKey Computed HMAC of the user whose notifications will be displayed, compute this with the secret of the magicbell project
* @param props.token User token that can be used to authenticate instead of using the apiKey + userEmail/userExternalID combination
* @param props.stores List of stores to be created
* @param props.disableRealtime Disable realtime updates
*
* @example
* ```javascript
* <MagicBellProvider apiKey={MAGICBELL_API_KEY} userEmail={email}>
* <App />
* </MagicBellProvider>
* ```
*/
function MagicBellProvider({ children, stores = [{ id: 'default', defaultQueryParams: {} }], disableRealtime, ...clientSettings }) {
(0, react_1.useState)(() => setupXHR(clientSettings));
(0, react_1.useEffect)(() => {
setupStores(stores);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const config = (0, index_js_1.default)();
(0, react_1.useEffect)(() => {
if (!config.lastFetchedAt)
config.fetch();
}, [config]);
return (react_1.default.createElement(react_1.default.Fragment, null,
disableRealtime ? null : react_1.default.createElement(RealtimeListener_js_1.default, null),
children));
}
//# sourceMappingURL=MagicBellProvider.js.map