@magicbell/magicbell-react - npm Package Compare versions

Comparing version 5.0.6 to 5.0.7

dist/components/ClickableNotification/NotificationSummary.js

@@ -19,5 +19,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
         return null;
-    return (jsx("p", { title: content || '', css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        color: inherit !important;\n        cursor: inherit;\n        margin: 0;\n        line-height: 1.2;\n        font-size: 0.865em !important;\n        margin-top: 1em !important;\n        opacity: 0.9;\n      "], ["\n        color: inherit !important;\n        cursor: inherit;\n        margin: 0;\n        line-height: 1.2;\n        font-size: 0.865em !important;\n        margin-top: 1em !important;\n        opacity: 0.9;\n      "]))) }, summary));
+    return (jsx("p", { title: content || '', css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        color: inherit !important;\n        cursor: inherit;\n        margin: 0;\n        line-height: 1.2;\n        font-size: 0.865em !important;\n        margin-top: 1em !important;\n        opacity: 0.9;\n        word-break: break-word !important;\n      "], ["\n        color: inherit !important;\n        cursor: inherit;\n        margin: 0;\n        line-height: 1.2;\n        font-size: 0.865em !important;\n        margin-top: 1em !important;\n        opacity: 0.9;\n        word-break: break-word !important;\n      "]))) }, summary));
 }
 export default observer(NotificationSummary);
 var templateObject_1;

dist/components/ClickableNotification/NotificationTitle.js

@@ -17,5 +17,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     var title = notification.title;
-    return (jsx("p", { title: title, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        cursor: inherit;\n        line-height: 1.2 !important;\n      "], ["\n        cursor: inherit;\n        line-height: 1.2 !important;\n      "]))) }, title));
+    return (jsx("p", { title: title, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        cursor: inherit;\n        line-height: 1.2 !important;\n        word-break: break-word !important;\n      "], ["\n        cursor: inherit;\n        line-height: 1.2 !important;\n        word-break: break-word !important;\n      "]))) }, title));
 }
 export default observer(NotificationTitle);
 var templateObject_1;

dist/components/NotificationList/Loader.js

@@ -8,4 +8,4 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 export default function Loader() {
-    return (jsx("div", { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        font-size: 0.85em !important;\n        padding: 0.5em !important;\n        text-align: center !important;\n      "], ["\n        font-size: 0.85em !important;\n        padding: 0.5em !important;\n        text-align: center !important;\n      "]))) }, "Loading..."));
+    return (jsx("div", { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        color: inherit !important;\n        font-size: 0.85em !important;\n        padding: 0.5em !important;\n        text-align: center !important;\n      "], ["\n        color: inherit !important;\n        font-size: 0.85em !important;\n        padding: 0.5em !important;\n        text-align: center !important;\n      "]))) }, "Loading..."));
 }
 var templateObject_1;

dist/components/NotificationState/NotificationState.js

@@ -29,3 +29,3 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     return (jsx(Tippy, { render: function () { return jsx(NotificationContextMenu, { notification: notification }); }, placement: "bottom", trigger: "click", interactive: true },
-        jsx("div", { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          padding: 0.5em;\n          color: ", " !important;\n\n          svg {\n            height: 1.5em;\n            fill: currentColor;\n          }\n        "], ["\n          padding: 0.5em;\n          color: ",
+        jsx("div", { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          padding: 0.5em !important;\n          color: ", " !important;\n\n          svg {\n            height: 1.5em;\n            fill: currentColor;\n          }\n        "], ["\n          padding: 0.5em !important;\n          color: ",
                 " !important;\n\n          svg {\n            height: 1.5em;\n            fill: currentColor;\n          }\n        "])), notification.isRead
@@ -32,0 +32,0 @@ ? toRGBA(notificationTheme.default.textColor, 0.5)

dist/index.js

@@ -15,3 +15,5 @@ export { default as NotificationStore } from './collections/NotificationStore';
 export { default as Notification } from './models/Notification';
+import { configure } from 'mobx';
 import MagicBell from './components/MagicBell';
 export default MagicBell;
+configure({ isolateGlobalState: true, enforceActions: 'never' });

dist/lib/realtime.js

@@ -13,3 +13,8 @@ import * as Ably from 'ably';
     var authUrl = "https://api.magicbell.io/" + config.ws.authUrl;
-    var authHeaders = { 'X-MAGICBELL-API-KEY': config.apiKey, 'X-MAGICBELL-USER-EMAIL': config.userEmail };
+    var authHeaders = {
+        'X-MAGICBELL-API-KEY': config.apiKey,
+        'X-MAGICBELL-USER-EMAIL': config.userEmail,
+    };
+    if (config.userKey)
+        authHeaders['X-MAGICBELL-USER-HMAC'] = config.userKey;
     var options = { authUrl: authUrl, authHeaders: authHeaders, authMethod: 'POST' };
@@ -16,0 +21,0 @@ var client = new Ably.Realtime(options);

package.json

 {
   "name": "@magicbell/magicbell-react",
-  "version": "5.0.6",
+  "version": "5.0.7",
   "description": "A set of React components to build a notification inbox",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/lib/realtime.ts

@@ -16,3 +16,8 @@ import * as Ably from 'ably';
   const authUrl = `https://api.magicbell.io/${config.ws.authUrl}`;
-  const authHeaders = { 'X-MAGICBELL-API-KEY': config.apiKey, 'X-MAGICBELL-USER-EMAIL': config.userEmail };
+  const authHeaders = {
+    'X-MAGICBELL-API-KEY': config.apiKey,
+    'X-MAGICBELL-USER-EMAIL': config.userEmail,
+  };
+  if (config.userKey) authHeaders['X-MAGICBELL-USER-HMAC'] = config.userKey;
+
   const options: Ably.Types.ClientOptions = { authUrl, authHeaders, authMethod: 'POST' };
@@ -19,0 +24,0 @@ const client = new Ably.Realtime(options);

tests/factories/NotificationFactory.ts

@@ -13,3 +13,3 @@ import faker from 'faker';
   .attrs({
-    metaData: {},
+    metaData: '{"accountId": 4}',
     readAt: null,
@@ -16,0 +16,0 @@ });

tests/src/models/Notification.spec.ts

@@ -17,2 +17,21 @@ import dayjs from 'dayjs';
 
+    describe('constructor', () => {
+      describe('metadata', () => {
+        describe('it is a string', () => {
+          it('parses the value', () => {
+            expect(notification.metaData).toStrictEqual({ accountId: 4 });
+          });
+        });
+
+        describe('it is an object', () => {
+          it('does not transform the value', () => {
+            const metaData = { accountId: 4 };
+            notification = new Notification(NotificationFactory.build({ metaData }));
+
+            expect(notification.metaData).toStrictEqual(metaData);
+          });
+        });
+      });
+    });
+
     describe('.seenAtDate', () => {
@@ -19,0 +38,0 @@ describe('seenAt is not null', () => {

No alert changes

Improved metrics

Total package byte prevSize

479338

increased by0.46%

Lines of code

7198

increased by0.46%

No dependency changes