@magicbell/magicbell-react - npm Package Compare versions

Comparing version 3.0.1 to 4.0.0

dist/collections/NotificationStore.d.ts

@@ -45,2 +45,10 @@ import Notification from '../models/Notification';
     /**
+     * Create a new notification.
+     *
+     * It is equivalent to instantiating a notification with a hash of attributes,
+     * saving the notification to the server, and adding it to the array of `items`
+     * after being successfully created.
+     */
+    create: (data: any) => Promise<Notification>;
+    /**
      * Mark all notifications as read.
@@ -47,0 +55,0 @@ */

dist/collections/NotificationStore.js

@@ -107,2 +107,25 @@ "use strict";
         /**
+         * Create a new notification.
+         *
+         * It is equivalent to instantiating a notification with a hash of attributes,
+         * saving the notification to the server, and adding it to the array of `items`
+         * after being successfully created.
+         */
+        this.create = function (data) { return __awaiter(_this, void 0, void 0, function () {
+            var response, notification;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, ajax_1.postAPI('/notifications', data)];
+                    case 1:
+                        response = _a.sent();
+                        notification = new Notification_1.default(response.notification);
+                        mobx_1.runInAction(function () {
+                            _this.items.unshift(notification);
+                        });
+                        return [2 /*return*/, notification];
+                }
+            });
+        }); };
+        /**
          * Mark all notifications as read.
@@ -214,4 +237,5 @@ */
     fetchNextPage: mobx_1.action,
+    create: mobx_1.action,
     markAllAsRead: mobx_1.action,
     markAllAsSeen: mobx_1.action,
 });

dist/components/MagicBell/MagicBell.d.ts

 import React from 'react';
-import NotificationStore from '../../collections/NotificationStore';
 import { IMagicBellTheme } from '../../context/Theme';
@@ -9,3 +8,2 @@ export interface MagicBellProps {
     children: (params: {
-        notifications: NotificationStore;
         toggleNotificationCenter: () => void;
@@ -15,2 +13,3 @@ }) => React.ReactElement;
     BellIcon?: React.ReactElement;
+    defaultIsOpen?: boolean;
 }
@@ -25,12 +24,19 @@ /**
  * @param BellIcon Icon for the bell
+ * @param defaultIsOpen Show the children when the component is rendered. It is false by default.
  *
  * @example
- * ```javascript
  * <MagicBell
  *   apiKey={MAGICBELL_API_KEY}
- *   userEmail={signInUser.email}
- *   userKey={EMAIL_HMAC}
- *   BellIcon={<MyIcon />} />
- * ```
+ *   userEmail={email}
+ *   BellIcon={<MyIcon />}
+ * >
+ *   {() => <NotificationCenter />}
+ * </MagicBell>
  */
-export default function MagicBell({ apiKey, userEmail, userKey, children, theme, BellIcon }: MagicBellProps): JSX.Element;
+declare function MagicBell({ children, BellIcon, defaultIsOpen, ...settings }: MagicBellProps): JSX.Element;
+declare namespace MagicBell {
+    var defaultProps: {
+        defaultIsOpen: boolean;
+    };
+}
+export default MagicBell;

dist/components/MagicBell/MagicBell.js

 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+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) {
@@ -25,13 +28,6 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var merge_1 = __importDefault(require("lodash/merge"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var react_1 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var useToggle_1 = __importDefault(require("react-use/lib/useToggle"));
-var NotificationStore_1 = __importDefault(require("../../collections/NotificationStore"));
-var MagicBellContext_1 = __importDefault(require("../../context/MagicBellContext"));
-var Theme_1 = require("../../context/Theme");
-var ajax_1 = require("../../lib/ajax");
-var Config_1 = __importDefault(require("../../models/Config"));
 var Bell_1 = __importDefault(require("../Bell"));
-var RealtimeListener_1 = __importDefault(require("./RealtimeListener"));
+var MagicBellProvider_1 = __importDefault(require("../MagicBellProvider"));
 /**
@@ -45,28 +41,24 @@ * Magicbell root component. Use this one in your application.
  * @param BellIcon Icon for the bell
+ * @param defaultIsOpen Show the children when the component is rendered. It is false by default.
  *
  * @example
- * ```javascript
  * <MagicBell
  *   apiKey={MAGICBELL_API_KEY}
- *   userEmail={signInUser.email}
- *   userKey={EMAIL_HMAC}
- *   BellIcon={<MyIcon />} />
- * ```
+ *   userEmail={email}
+ *   BellIcon={<MyIcon />}
+ * >
+ *   {() => <NotificationCenter />}
+ * </MagicBell>
  */
 function MagicBell(_a) {
-    var apiKey = _a.apiKey, userEmail = _a.userEmail, userKey = _a.userKey, children = _a.children, theme = _a.theme, BellIcon = _a.BellIcon;
-    var _b = useToggle_1.default(false), isNotificationCenterOpen = _b[0], toggleNotificationCenter = _b[1];
-    var notifications = mobx_react_lite_1.useLocalStore(function () { return new NotificationStore_1.default(); });
-    var config = mobx_react_lite_1.useLocalStore(function () { return new Config_1.default({ apiKey: apiKey, userEmail: userEmail, userKey: userKey }); });
-    react_1.useEffect(function () {
-        ajax_1.setupFetch({ apiKey: apiKey, userEmail: userEmail, userKey: userKey });
-        notifications.fetch({ page: 1 });
-        config.fetch();
-    }, [apiKey, userEmail, userKey]);
-    return (react_1.default.createElement(MagicBellContext_1.default.Provider, { value: { notifications: notifications, theme: merge_1.default(Theme_1.defaultTheme, theme) } },
+    var children = _a.children, BellIcon = _a.BellIcon, defaultIsOpen = _a.defaultIsOpen, settings = __rest(_a, ["children", "BellIcon", "defaultIsOpen"]);
+    var _b = useToggle_1.default(defaultIsOpen || false), showNotificationCenter = _b[0], toggleNotificationCenter = _b[1];
+    return (react_1.default.createElement(MagicBellProvider_1.default, __assign({}, settings),
         react_1.default.createElement("div", null,
-            react_1.default.createElement(RealtimeListener_1.default, { config: config }),
             react_1.default.createElement(Bell_1.default, { onClick: toggleNotificationCenter, Icon: BellIcon }),
-            isNotificationCenterOpen && children({ notifications: notifications, toggleNotificationCenter: toggleNotificationCenter }))));
+            showNotificationCenter && children({ toggleNotificationCenter: toggleNotificationCenter }))));
 }
 exports.default = MagicBell;
+MagicBell.defaultProps = {
+    defaultIsOpen: false,
+};

dist/index.d.ts

@@ -6,2 +6,3 @@ export { default as NotificationStore } from './collections/NotificationStore';
 export { default as Header } from './components/Header';
+export { default as MagicBellProvider } from './components/MagicBellProvider';
 export { default as NotificationCenter } from './components/NotificationCenter';
@@ -8,0 +9,0 @@ export { default as NotificationList } from './components/NotificationList';

dist/index.js

@@ -6,3 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Notification = exports.MagicBellContext = exports.UnseenBadge = exports.Timestamp = exports.NotificationList = exports.NotificationCenter = exports.Header = exports.Footer = exports.ClickableNotification = exports.Bell = exports.NotificationStore = void 0;
+exports.Notification = exports.MagicBellContext = exports.UnseenBadge = exports.Timestamp = exports.NotificationList = exports.NotificationCenter = exports.MagicBellProvider = exports.Header = exports.Footer = exports.ClickableNotification = exports.Bell = exports.NotificationStore = void 0;
 var NotificationStore_1 = require("./collections/NotificationStore");
@@ -18,2 +18,4 @@ Object.defineProperty(exports, "NotificationStore", { enumerable: true, get: function () { return __importDefault(NotificationStore_1).default; } });
 Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return __importDefault(Header_1).default; } });
+var MagicBellProvider_1 = require("./components/MagicBellProvider");
+Object.defineProperty(exports, "MagicBellProvider", { enumerable: true, get: function () { return __importDefault(MagicBellProvider_1).default; } });
 var NotificationCenter_1 = require("./components/NotificationCenter");
@@ -20,0 +22,0 @@ Object.defineProperty(exports, "NotificationCenter", { enumerable: true, get: function () { return __importDefault(NotificationCenter_1).default; } });

dist/models/Notification.d.ts

@@ -17,2 +17,5 @@ /**
     constructor(attrs?: {});
+    /**
+     * The `content` attribute truncated to 150 characters.
+     */
     get summary(): string | undefined;
@@ -27,4 +30,11 @@ get seenAtDate(): import("dayjs").Dayjs | null;
     fetch(): Promise<void>;
+    /**
+     * Mark a notification as read. Sets the `readAt` attribute to the current date.
+     */
     markAsRead(): any;
+    /**
+     * Mark a notification as unread. Sets the `readAt` attribute to null.
+     */
+    markAsUnread(): any;
     delete(): any;
 }

dist/models/Notification.js

@@ -54,2 +54,5 @@ "use strict";
     Object.defineProperty(Notification.prototype, "summary", {
+        /**
+         * The `content` attribute truncated to 150 characters.
+         */
         get: function () {
@@ -120,2 +123,5 @@ var _a;
     };
+    /**
+     * Mark a notification as read. Sets the `readAt` attribute to the current date.
+     */
     Notification.prototype.markAsRead = function () {
@@ -125,2 +131,9 @@ this.readAt = Date.now() / 1000;
     };
+    /**
+     * Mark a notification as unread. Sets the `readAt` attribute to null.
+     */
+    Notification.prototype.markAsUnread = function () {
+        this.readAt = null;
+        return ajax_1.postAPI("/notifications/" + this.id + "/unread");
+    };
     Notification.prototype.delete = function () {
@@ -147,3 +160,4 @@ return ajax_1.deleteAPI("/notifications/" + this.id);
     markAsRead: mobx_1.action,
+    markAsUnread: mobx_1.action,
     delete: mobx_1.action,
 });

package.json

 {
   "name": "@magicbell/magicbell-react",
-  "version": "3.0.1",
-  "description": "React components for MagicBell",
+  "version": "4.0.0",
+  "description": "A set of React components to build a notification center",
   "main": "dist/index.js",
@@ -99,4 +99,7 @@ "types": "dist/index.d.ts",
   "keywords": [
+    "bell",
     "magicbell",
     "notifications",
+    "notification center",
+    "mobx",
     "typescript",
@@ -103,0 +106,0 @@ "react"

README.md

@@ -10,3 +10,3 @@ [![codecov](https://codecov.io/gh/magicbell-io/magicbell-react/branch/master/graph/badge.svg?token=3LTT2AL3DV)](https://codecov.io/gh/magicbell-io/magicbell-react)
 
-MagicBell-React is a set of React components to build a notification widget for your site powered by [magicbell.io](https://magicbell.io).
+MagicBell-React is a set of React components to build a notification center for your site powered by [magicbell.io](https://magicbell.io).
 
@@ -28,5 +28,6 @@ - Full [TypeScript](https://www.typescriptlang.org/) support
 import React from 'react';
+import ReactDOM from 'react-dom';
 import MagicBell, { NotificationCenter } from '@magicbell/magicbell-react';
 
-render(
+ReactDOM.render(
   <MagicBell apiKey={MAGICBELL_API_KEY} userEmail="[e-mail]">
@@ -47,2 +48,3 @@ {() => <NotificationCenter height={300} />}
   - [MagicBell](#magicbell)
+  - [MagicBellProvider](#magicbellprovider)
   - [NotificationCenter](#notificationcenter)
@@ -80,12 +82,15 @@ - [NotificationList](#notificationlist)
 
+[Demo](https://codesandbox.io/s/elastic-northcutt-9pcgv)
+
 These are all the properties accepted by this component.
 
-| Property    | Type                                                           | Description                                                                                           |
-| ----------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| `apiKey`    | `string`                                                       | The API key of your magicbell.io project                                                              |
-| `userEmail` | `string`                                                       | The email of the user you want to show notifications for                                              |
-| `userKey`   | `string`                                                       | The HMAC for the user. It is recommended to enable HMAC authentication but not required               |
-| `children`  | `({ notifications, toggleNotificationCenter }) => JSX.Element` | The children function to render all notifications for the user                                        |
-| `theme`     | `IMagicBellTheme`                                              | An optional object containing custom color values for the widget, see [Custom Themes](#custom-themes) |  |
-| `BellIcon`  | `JSX.Element`                                                  | An optional react element to be displayed instead of the default bell icon                            |
+| Property        | Type                                            | Description                                                                                                                      |
+| --------------- | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `apiKey`        | `string`                                        | The API key of your magicbell.io project                                                                                         |
+| `userEmail`     | `string`                                        | The email of the user you want to show notifications for                                                                         |
+| `userKey`       | `string`                                        | The HMAC for the user. It is recommended to enable HMAC authentication but not required                                          |
+| `children`      | `({ toggleNotificationCenter }) => JSX.Element` | The children function to render a list of notifications for the user                                                             |
+| `theme`         | `IMagicBellTheme`                               | An optional object containing custom color values for the widget, see [Custom Themes](#custom-themes)                            |
+| `BellIcon`      | `JSX.Element`                                   | An optional react element to be displayed instead of the default bell icon                                                       |
+| `defaultIsOpen` | `boolean`                                       | An optional flag to set the default visibility state of the element returned by the children function. It is `false` by default. |
 
@@ -100,5 +105,6 @@ ### Children function
 import React from 'react';
+import ReactDOM from 'react-dom';
 import MagicBell, { NotificationCenter } from '@magicbell/magicbell-react';
 
-render(
+ReactDOM.render(
   <MagicBell apiKey={MAGICBELL_API_KEY} userEmail="[e-mail]">
@@ -111,3 +117,3 @@ {() => <NotificationCenter height={300} />}
 
-or use one of your own:
+or use your own:
 
@@ -117,8 +123,9 @@ <!-- prettier-ignore -->
 import React from 'react';
+import ReactDOM from 'react-dom';
 import MagicBell from '@magicbell/magicbell-react';
 
-render(
+ReactDOM.render(
   <MagicBell apiKey={MAGICBELL_API_KEY} userEmail="[e-mail]">
-    {({ notifications, toggleNotificationCenter }) => (
-      <MyOwnNotificationCenter notifications={notifications} />
+    {({ toggleNotificationCenter }) => (
+      <MyOwnNotificationCenter toggleNotificationCenter={toggleNotificationCenter} />
     )}
@@ -130,4 +137,42 @@ </MagicBell>,
 
-The `MagicBell` component does not render the component returned by the children function by default, only the bell is rendered. When the bell is clicked, the child component is toggled. As shown above, the children function gets the `notifications` store and a function to manually toggle the notification center. You can access the `notifications` store through `MagicBellContext`, too.
+The `MagicBell` component does not render the component returned by the children function by default, only the bell is rendered. When the bell is clicked, the child component is toggled. This behaviour can be changed using the `defaultIsOpen` flag.
 
+As shown above, the children function gets a function to manually toggle the notification center. You can access the `notifications` store through [`MagicBellContext`](#magicbellcontext).
+
+```javascript
+import { useContext } from 'react';
+const { notifications } = useContext(MagicBellContext);
+```
+
+## MagicBellProvider
+
+The `MagicBellProvider` component is the main component for building a custom notification center. It initializes a connection to [magicbell.io](https://magicbell.io), creates a `MagicBellContext` and keeps the list of notifications updated in real time.
+
+This component wraps the children you provide in a `MagicBellContext.Provider`, so you can safely wrap your entire app in this component. Nothing else will be rendered.
+
+```javascript
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { MagicBellProvider } from '@magicbell/magicbell-react';
+
+ReactDOM.render(
+  <MagicBellProvider apiKey={MAGICBELL_API_KEY} userEmail="[e-mail]">
+    <App />
+  </MagicBellProvider>,
+  document.body,
+);
+```
+
+`MagicBellProvider` creates a React context object, so now you can access the `MagicBellContext` anywhere in your application.
+
+These are all the properties accepted by this component.
+
+| Property    | Type              | Description                                                                                           |
+| ----------- | ----------------- | ----------------------------------------------------------------------------------------------------- |
+| `apiKey`    | `string`          | The API key of your magicbell.io project                                                              |
+| `userEmail` | `string`          | The email of the user you want to show notifications for                                              |
+| `userKey`   | `string`          | The HMAC for the user. It is recommended to enable HMAC authentication but not required               |
+| `children`  | `JSX.Element`     | The children to be wrapped in a `MagicBellContext.Provider`                                           |
+| `theme`     | `IMagicBellTheme` | An optional object containing custom color values for the widget, see [Custom Themes](#custom-themes) |
+
 ## NotificationCenter
@@ -147,3 +192,3 @@
 
-The `NotificationList` component renders an infinite scroll list of notifications. When the user scrolls to the bottom the next page of notifications are fetched and appended to the current array of notifications. By default it renders a `ClickableNotification` component for each item in the notifications store.
+The `NotificationList` component renders an infinite scroll list of notifications. When the user scrolls to the bottom the next page of notifications are fetched and appended to the current array of notifications. By default it renders a [`ClickableNotification`](#clickablenotification) component for each item in the notifications store.
 
@@ -191,3 +236,3 @@ These are all the properties accepted by this component.
 
-## `MagicBellContext`
+## MagicBellContext
 
@@ -208,3 +253,3 @@ This is a React context object which contains the store of notifications and the theme, so you can access these values wherever you need them.
 
-Is is possible to change the default colors of some elements by providing to the `MagicBell` component a `theme` property.
+Is is possible to change the default colors of some elements by providing to the [`MagicBell`](#magicbell) component a `theme` property.
 
@@ -253,2 +298,3 @@ This is the definition of the default theme:
 import React from 'react';
+import ReactDOM from 'react-dom';
 import MagicBell, { NotificationCenter } from '@magicbell/magicbell-react';
@@ -265,3 +311,3 @@
 
-render(
+ReactDOM.render(
   <MagicBell apiKey={MAGICBELL_API_KEY} userEmail="[e-mail]" theme={customTheme}>
@@ -303,2 +349,3 @@ {() => <NotificationCenter height="300" />}
   markAsRead: () => Promise;
+  markAsUnread: () => Promise;
   delete: () => Promise;
@@ -341,2 +388,6 @@ }
 
+#### `markAsUnread`
+
+This method makes a POST request to the unread notification API endpoint of magicbell.io. It sets the `readAt` attribute to `null` as well.
+
 #### `delete`
@@ -370,2 +421,3 @@
   fetchNextPage: () => Promise;
+  create: (data) => Promise<Notification>;
   markAllAsRead: () => Promise;
@@ -400,2 +452,8 @@ markAllAsSeen: () => Promise;
 
+#### `create`
+
+Create a new notification.
+
+It is equivalent to creating a `Notification` instance with some attributes, saving the notification to the server, and adding it to the array of `items` after being successfully created.
+
 #### `markAllAsRead`
@@ -402,0 +460,0 @@

src/collections/NotificationStore.ts

@@ -82,2 +82,20 @@ import map from 'lodash/map';
   /**
+   * Create a new notification.
+   *
+   * It is equivalent to instantiating a notification with a hash of attributes,
+   * saving the notification to the server, and adding it to the array of `items`
+   * after being successfully created.
+   */
+  create = async (data) => {
+    const response = await postAPI('/notifications', data);
+    const notification = new Notification(response.notification);
+
+    runInAction(() => {
+      this.items.unshift(notification);
+    });
+
+    return notification;
+  };
+
+  /**
    * Mark all notifications as read.
@@ -118,4 +136,5 @@ */
   fetchNextPage: action,
+  create: action,
   markAllAsRead: action,
   markAllAsSeen: action,
 });

src/models/Notification.ts

@@ -25,2 +25,5 @@ import { action, computed, decorate, observable, runInAction } from 'mobx';
 
+  /**
+   * The `content` attribute truncated to 150 characters.
+   */
   get summary() {
@@ -66,2 +69,5 @@ return this.content?.substring(0, 150);
 
+  /**
+   * Mark a notification as read. Sets the `readAt` attribute to the current date.
+   */
   markAsRead() {
@@ -72,2 +78,10 @@ this.readAt = Date.now() / 1000;
 
+  /**
+   * Mark a notification as unread. Sets the `readAt` attribute to null.
+   */
+  markAsUnread() {
+    this.readAt = null;
+    return postAPI(`/notifications/${this.id}/unread`);
+  }
+
   delete() {
@@ -93,3 +107,4 @@ return deleteAPI(`/notifications/${this.id}`);
   markAsRead: action,
+  markAsUnread: action,
   delete: action,
 });

tests/src/collections/NotificationStore.spec.ts

@@ -33,2 +33,18 @@ import faker from 'faker';
 
+    describe('.isEmpty', () => {
+      describe('the store has no notifications', () => {
+        it('returns true', () => {
+          collection.items = [];
+          expect(collection.isEmpty).toBe(true);
+        });
+      });
+
+      describe('the store has at least one notification', () => {
+        it('returns false', () => {
+          collection.items = [new Notification(NotificationFactory.build())];
+          expect(collection.isEmpty).toBe(false);
+        });
+      });
+    });
+
     describe('.hasNextPage', () => {
@@ -175,2 +191,38 @@ describe('the current page is less than the number of total pages', () => {
 
+    describe('.create', () => {
+      let server: any;
+
+      beforeEach(() => {
+        server = new Server({ environment: 'test', urlPrefix: 'https://api.magicbell.io' });
+        server.timing = 50;
+        server.post('/notifications', (req, res) => ({ notification: JSON.parse(res.requestBody) }));
+      });
+
+      afterEach(() => {
+        server.shutdown();
+      });
+
+      it('creates a new notification', async () => {
+        const notification = await collection.create({
+          title: 'New Notification',
+          actionUrl: 'https://api.magicbell.io',
+        });
+
+        expect(notification).toBeInstanceOf(Notification);
+        expect(notification.title).toBe('New Notification');
+        expect(notification.actionUrl).toBe('https://api.magicbell.io');
+      });
+
+      it('adds the new notification to the items array', async () => {
+        const length = collection.length;
+        const notification = await collection.create({
+          title: 'New Notification',
+          actionUrl: 'https://api.magicbell.io',
+        });
+
+        expect(collection.at(0)).toBe(notification);
+        expect(collection.length).toBe(length + 1);
+      });
+    });
+
     describe('.markAsRead', () => {
@@ -246,19 +298,3 @@ let server: any;
     });
-
-    describe('.isEmpty', () => {
-      describe('the store has no notifications', () => {
-        it('returns true', () => {
-          collection.items = [];
-          expect(collection.isEmpty).toBe(true);
-        });
-      });
-
-      describe('the store has at least one notification', () => {
-        it('returns false', () => {
-          collection.items = [new Notification(NotificationFactory.build())];
-          expect(collection.isEmpty).toBe(false);
-        });
-      });
-    });
   });
 });

tests/src/models/Notification.spec.ts

@@ -207,2 +207,32 @@ import dayjs from 'dayjs';
 
+    describe('.markAsUnread', () => {
+      let server: any;
+
+      beforeEach(() => {
+        server = new Server({ environment: 'test', urlPrefix: 'https://api.magicbell.io' });
+        server.timing = 0;
+        server.post(`/notifications/${notification.id}/unread`, {});
+      });
+
+      afterEach(() => {
+        server.shutdown();
+      });
+
+      it('unsets the readAt attribue', async () => {
+        notification.readAt = Date.now();
+        notification.markAsUnread();
+
+        expect(notification.readAtDate).toBeNull();
+      });
+
+      it('makes a post request to the read endpoint', () => {
+        const spy = jest.spyOn(ajax, 'postAPI');
+        notification.markAsUnread();
+
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith(`/notifications/${notification.id}/unread`);
+        spy.mockRestore();
+      });
+    });
+
     describe('.delete', () => {
@@ -209,0 +239,0 @@ let server: any;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

313668

increased by5.59%

Number of package files

172

increased by4.88%

Lines of code

5301

increased by6.9%

Number of lines in readme file

449

increased by14.83%

No dependency changes