awing-library 2.1.2-dev.99 → 2.1.2-stable.10

package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/index.test.js

@@ -0,0 +1,57 @@
+"use strict";
+// /**
+//  *
+//  * @author dauquan1108@gmail.com on 12/06/2023.
+//  *
+//  **/
+// import React from "react";
+// import moment from "moment";
+// import "@testing-library/jest-dom";
+// import { render, fireEvent } from "@testing-library/react";
+// // Component
+// import NotificationItem from ".";
+// const mockData = {
+//     id: 1,
+//     content: "<p>Chiến dịch đã được cập nhật.</p>",
+//     url: "https://www.pinterest.com/pin/1122170432140679998/",
+//     status: false,
+//     userName: "Đậu Xuân Quân",
+//     avatarUrl:
+//         "https://i.pinimg.com/564x/9e/a4/73/9ea4735b805ef4a3b390ca4c6c5e320e.jpg",
+//     time: "2023-12-04 12:30",
+// };
+// describe("NotificationItem Component", () => {
+//     it("Hiện thị đúng thông tin từ props truyền vào.", () => {
+//         const { getByText, getByAltText, queryByTestId } = render(
+//             <NotificationItem data={mockData} onUpdateStatus={() => null} />
+//         );
+//         // content
+//         const contentElement = getByText("Chiến dịch đã được cập nhật.");
+//         expect(contentElement).toBeInTheDocument();
+//         // avatarUrl
+//         const avatar = getByAltText(mockData.userName);
+//         expect((avatar as HTMLImageElement).src).toBe(
+//             "https://i.pinimg.com/564x/9e/a4/73/9ea4735b805ef4a3b390ca4c6c5e320e.jpg"
+//         );
+//         // time
+//         const formattedTime = moment(mockData.time).format("DD/MM/YYYY HH:mm");
+//         const timeElement = getByText(formattedTime);
+//         expect(timeElement).toBeInTheDocument();
+//         // status
+//         const iconStatus = queryByTestId('iconStatus');
+//         expect(iconStatus).not.toBeInTheDocument();
+//     });
+//     it("Gọi hàm onUpdateStatus khi click vào icon con mắt", () => {
+//         const mockUpdateStatus = jest.fn();
+//         const { getByTitle } = render(<NotificationItem data={mockData} onUpdateStatus={mockUpdateStatus} />);
+//         const statusButton = getByTitle("Notifications.TitleMarkUnread");
+//         fireEvent.click(statusButton);
+//         expect(mockUpdateStatus).toHaveBeenCalledWith({ id: mockData.id, status: mockData.status });
+//     });
+//     it("Hiển thị icon 'Đã đọc' và 'Chưa đọc' thông báo theo 'status itemNotifications'.", () => {
+//         const { getByAltText } = render(<NotificationItem data={mockData} onUpdateStatus={() => {
+//         }} />);
+//         const iconElement = getByAltText(mockData.status ? 'iconNotSeen' : "iconWatched");
+//         expect(iconElement).toBeInTheDocument();
+//     });
+// });

package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationLoading.d.ts

@@ -0,0 +1,7 @@
+/**
+ *
+ * @author dauquan1108@gmail.com on 12/15/2023.
+ *
+ **/
+declare const NotificationLoading: () => import("react/jsx-runtime").JSX.Element;
+export default NotificationLoading;

package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationLoading.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ * @author dauquan1108@gmail.com on 12/15/2023.
+ *
+ **/
+var react_1 = __importDefault(require("react"));
+var material_1 = require("@mui/material");
+var NotificationLoading = function () {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { component: "div", sx: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    padding: '8px',
+                    borderRadius: '8px',
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { sx: {
+                                width: '56px',
+                                height: '56px',
+                            } }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "div", ml: 1, sx: {
+                            flex: 1,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            justifyContent: 'space-around',
+                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: "20px", sx: { borderRadius: '8px' }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "." }) }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "40%", height: "10px", sx: { borderRadius: '8px' }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "." }) })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "div", sx: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    padding: '8px',
+                    borderRadius: '8px',
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { sx: {
+                                width: '56px',
+                                height: '56px',
+                            } }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "div", ml: 1, sx: {
+                            flex: 1,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            justifyContent: 'space-around',
+                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "60%", height: "20px", sx: { borderRadius: '8px' }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "." }) }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "30%", height: "10px", sx: { borderRadius: '8px' }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "." }) })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "div", sx: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    padding: '8px',
+                    borderRadius: '8px',
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { sx: {
+                                width: '56px',
+                                height: '56px',
+                            } }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "div", ml: 1, sx: {
+                            flex: 1,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            justifyContent: 'space-around',
+                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "80%", height: "20px", sx: { borderRadius: '8px' }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "." }) }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "30%", height: "10px", sx: { borderRadius: '8px' }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "." }) })] })] })] }));
+};
+exports.default = NotificationLoading;

package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ *
+ * @author dauquan1108@gmail.com on 11/27/2023.
+ *
+ **/
+/// <reference types="react" />
+import { IValueItem, NotificationMessage } from '../../Types';
+interface PropsNotificationList {
+    valueFilter: {
+        textSearch: string;
+        tabs: string;
+    };
+    isLoading: boolean;
+    notificationMessage: NotificationMessage[];
+    onUpdateStatus: (dataSent: IValueItem | string) => void;
+}
+declare const NotificationList: (props: PropsNotificationList) => JSX.Element;
+export default NotificationList;

package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/index.js

@@ -0,0 +1,55 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ * @author dauquan1108@gmail.com on 11/27/2023.
+ *
+ **/
+var react_1 = __importStar(require("react"));
+var Constant_1 = require("../../../../ACM-AXN/Common/Constant");
+var NotificationItem_1 = __importDefault(require("./NotificationItem"));
+var NotificationEmpty_1 = __importDefault(require("./NotificationEmpty"));
+var NotificationLoading_1 = __importDefault(require("./NotificationLoading"));
+var Types_1 = require("../../Types");
+var NotificationList = function (props) {
+    var _a;
+    var valueFilter = props.valueFilter, onUpdateStatus = props.onUpdateStatus, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, notificationMessage = props.notificationMessage;
+    var _c = (0, react_1.useState)(notificationMessage), notifications = _c[0], setNotifications = _c[1];
+    (0, react_1.useLayoutEffect)(function () {
+        setNotifications(valueFilter.tabs === Constant_1.Constants.UNREAD
+            ? notificationMessage.filter(function (item) { return item.status === Types_1.NotificationMessageStatus.Unread; })
+            : notificationMessage);
+    }, [notificationMessage, valueFilter.tabs]);
+    if (!notifications.length && !isLoading) {
+        return ((0, jsx_runtime_1.jsx)(NotificationEmpty_1.default, { isSearch: ((_a = valueFilter === null || valueFilter === void 0 ? void 0 : valueFilter.textSearch) === null || _a === void 0 ? void 0 : _a.length) > 0 }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [notifications.map(function (item) { return ((0, jsx_runtime_1.jsx)(NotificationItem_1.default, { notificationMessage: item, onUpdateStatus: onUpdateStatus }, item.id)); }), isLoading && (0, jsx_runtime_1.jsx)(NotificationLoading_1.default, {})] }));
+};
+exports.default = NotificationList;

package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/index.test.js

@@ -0,0 +1,89 @@
+"use strict";
+// /**
+//  *
+//  * @author dauquan1108@gmail.com on 12/7/2023.
+//  *
+//  **/
+// import React from "react";
+// import { render } from "@testing-library/react";
+// import "@testing-library/jest-dom";
+// // Component
+// import NotificationList from ".";
+// jest.mock('./NotificationItem', () => (props:any) => {
+//     const { data, onUpdateStatus } = props;
+//     return (
+//         <div data-testid="notification-item" onClick={() => onUpdateStatus(data.id)}>
+//             <span>{data.content}</span>
+//         </div>
+//     );
+// });
+// jest.mock("./NotificationLoading", () => () => {
+//     return <div>icon Loading</div>;
+// });
+// describe("NotificationList component", () => {
+//     it("Hiển thị thông báo đối với trường hợp 'notifications' chưa có dữ liệu", () => {
+//         const props = {
+//             isLoading: false,
+//             notifications: [],
+//             onUpdateStatus: () => null,
+//             valueFilter: { textSearch: "", tabs: "" },
+//         };
+//         const { getByText } = render(<NotificationList {...props} />);
+//         const noNotificationsText = getByText("Notifications.TitleNoNotifications");
+//         expect(noNotificationsText).toBeInTheDocument();
+//     });
+//     it("Hiện thị danh sách thông báo khi notifications có dữ liệu", () => {
+//         const props = {
+//             isLoading: false,
+//             notifications: [
+//                 {
+//                     id: "1",
+//                     content:
+//                         '<p>Chiến dịch <a href="https://github.com/dauquan1108" target="_blank" style="text-decoration: none; color: blue;" title="Đậu Xuân Quân">Đậu Xuân Quân</a> đã được cập nhật.</p>',
+//                     url: "https://awing.vn/",
+//                     status: true,
+//                     userName: "Đậu Xuân Quân",
+//                     avatarUrl:
+//                         "https://i.pinimg.com/564x/7d/be/68/7dbe686677277a06de561b16c1e2740b.jpg",
+//                     time: "2023-12-06 10:30",
+//                 },
+//             ],
+//             onUpdateStatus: () => null,
+//             valueFilter: { textSearch: "", tabs: "" },
+//         };
+//         const notifications = [
+//             {
+//                 id: "1",
+//                 content:
+//                     '<p>Chiến dịch <a href="https://github.com/dauquan1108" target="_blank" style="text-decoration: none; color: blue;" title="Đậu Xuân Quân">Đậu Xuân Quân</a> đã được cập nhật.</p>',
+//                 url: "https://awing.vn/",
+//                 status: true,
+//                 userName: "Đậu Xuân Quân",
+//                 avatarUrl:
+//                     "https://i.pinimg.com/564x/7d/be/68/7dbe686677277a06de561b16c1e2740b.jpg",
+//                 time: "2023-12-06 10:30",
+//             },
+//         ];
+//         const { getAllByTestId } = render(
+//             <NotificationList
+//                 valueFilter={{ textSearch: "", tabs: "" }}
+//                 onUpdateStatus={() => null}
+//                 isLoading={false}
+//                 notifications={notifications}
+//             />
+//         );
+//         const notificationItems = getAllByTestId('notification-item');
+//         expect(notificationItems).toHaveLength(notifications.length);
+//     });
+//     it("Hiển thị trạng thái Loading khi 'isLoading=true'.", () => {
+//         const props = {
+//             isLoading: true,
+//             notifications: [],
+//             onUpdateStatus: () => null,
+//             valueFilter: { textSearch: "", tabs: "" },
+//         };
+//         const { getByText } = render(<NotificationList {...props} />);
+//         const iconLoading = getByText("icon Loading");
+//         expect(iconLoading).toBeInTheDocument();
+//     });
+// });

package/lib/ACM-AXN/Notifications/NotificationDetail/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ *
+ * @author dauquan1108@gmail.com on 11/27/2023.
+ *
+ **/
+/// <reference types="react" />
+interface NotificationDetailProps {
+    onClosePopover?: () => void;
+}
+declare const NotificationDetail: (props: NotificationDetailProps) => JSX.Element;
+export default NotificationDetail;

package/lib/ACM-AXN/Notifications/NotificationDetail/index.js

@@ -0,0 +1,167 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ * @author dauquan1108@gmail.com on 11/27/2023.
+ *
+ **/
+var react_1 = __importStar(require("react"));
+var Box_1 = __importDefault(require("@mui/material/Box"));
+var react_i18next_1 = require("react-i18next");
+var i18n_1 = __importDefault(require("../../../i18n"));
+var HeaderInfo_1 = __importDefault(require("./HeaderInfo"));
+var Constant_1 = require("../../../ACM-AXN/Common/Constant");
+var Hooks_1 = __importDefault(require("../Hooks"));
+var NotificationList_1 = __importDefault(require("./NotificationList"));
+var Types_1 = require("../Types");
+var NotificationDetail = function (props) {
+    var service = (0, Hooks_1.default)().service;
+    var onClosePopover = props.onClosePopover;
+    var _a = (0, react_1.useState)({
+        textSearch: '',
+        tabs: Constant_1.Constants.ALL,
+        status: Constant_1.Constants.ALL_STATUS,
+    }), valueFilter = _a[0], setValueFilter = _a[1];
+    var _b = react_1.default.useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = react_1.default.useState(0), count = _c[0], setCount = _c[1];
+    var _d = react_1.default.useState(true), isInViewPort = _d[0], setIsInViewPort = _d[1];
+    var _e = (0, react_1.useState)([]), notificationMessage = _e[0], setNotificationMessage = _e[1];
+    var totalItemCount = (0, react_1.useRef)(0);
+    (0, react_1.useEffect)(function () {
+        var observer = new IntersectionObserver(function (entries) {
+            entries.map(function (entry) { return entry.isIntersecting; }).forEach(setIsInViewPort);
+        });
+        var lastItem = document.getElementById('last-Item');
+        if (observer && lastItem) {
+            setIsLoading(true);
+            observer.observe(lastItem);
+        }
+        return function () {
+            if (observer) {
+                observer.disconnect();
+                observer = null;
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    (0, react_1.useEffect)(function () {
+        setIsLoading(true);
+        service
+            .notificationsPaging(count, Constant_1.Constants.PAGE_SIZE_DEFAULT, valueFilter.textSearch, valueFilter.status, [])
+            .then(function (res) {
+            setNotificationMessage(function (prevMessages) {
+                var newItems = res.items.filter(function (newItem) {
+                    return !prevMessages.some(function (prevItem) { return prevItem.id === newItem.id; });
+                });
+                return __spreadArray(__spreadArray([], prevMessages, true), newItems, true);
+            });
+            totalItemCount.current = res.totalItemCount;
+        })
+            .finally(function () {
+            setIsLoading(false);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [count, valueFilter.textSearch, valueFilter.status]);
+    (0, react_1.useEffect)(function () {
+        if (isInViewPort &&
+            notificationMessage.length < totalItemCount.current &&
+            !isLoading) {
+            setCount(function (old) { return old + 1; });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isInViewPort]);
+    var handleValueFilter = function (textSearch, tabs) {
+        setNotificationMessage([]);
+        setCount(0);
+        totalItemCount.current = 0;
+        setValueFilter({
+            textSearch: textSearch,
+            tabs: tabs,
+            status: tabs === Constant_1.Constants.ALL
+                ? Constant_1.Constants.ALL_STATUS
+                : Constant_1.Constants.UNREAD_STATUS,
+        });
+    };
+    var handleUpdateStatus = (0, react_1.useCallback)(function (dataSent) {
+        if (typeof dataSent === 'string') {
+            var isCheckStatus = notificationMessage.some(function (item) {
+                return item.status === Types_1.NotificationMessageStatus.Unread;
+            });
+            if (isCheckStatus) {
+                service.notificationsReadAll().then(function () {
+                    setNotificationMessage(function (prevNotifications) {
+                        return prevNotifications.map(function (item) { return (__assign(__assign({}, item), { status: Types_1.NotificationMessageStatus.Read })); });
+                    });
+                });
+            }
+        }
+        else {
+            var handleUpdateStatusItem_1 = function () {
+                setNotificationMessage(function (prevNotifications) {
+                    return prevNotifications.map(function (item) { return (__assign(__assign({}, item), { status: item.id === dataSent.id
+                            ? item.status ===
+                                Types_1.NotificationMessageStatus.Read
+                                ? Types_1.NotificationMessageStatus.Unread
+                                : Types_1.NotificationMessageStatus.Read
+                            : item.status })); });
+                });
+            };
+            dataSent.status === Types_1.NotificationMessageStatus.Unread
+                ? service.notificationsRead([dataSent.id]).then(function () {
+                    handleUpdateStatusItem_1();
+                })
+                : service.notificationsUnread([dataSent.id]).then(function () {
+                    handleUpdateStatusItem_1();
+                });
+        }
+    }, [notificationMessage, service]);
+    return ((0, jsx_runtime_1.jsxs)(react_i18next_1.I18nextProvider, { i18n: i18n_1.default, children: [(0, jsx_runtime_1.jsx)(Box_1.default, { pt: 2, pl: 2, pr: 2, pb: 1, component: "div", children: (0, jsx_runtime_1.jsx)(HeaderInfo_1.default, { valueFilter: valueFilter, onClosePopover: onClosePopover, onValueFilter: handleValueFilter, onUpdateStatus: handleUpdateStatus }) }), (0, jsx_runtime_1.jsx)(Box_1.default, { pl: 1, pr: 1, pb: 1, component: "div", children: (0, jsx_runtime_1.jsx)(NotificationList_1.default, { isLoading: isLoading, valueFilter: valueFilter, notificationMessage: notificationMessage, onUpdateStatus: handleUpdateStatus }) }), (0, jsx_runtime_1.jsx)(Box_1.default, { id: "last-Item", component: "div", sx: { height: '20px' } })] }));
+};
+exports.default = NotificationDetail;

package/lib/ACM-AXN/Notifications/NotificationDetail/index.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ *
+ * @author dauquan1108@gmail.com on 12/7/2023.
+ *
+ **/
+import "@testing-library/jest-dom";

package/lib/ACM-AXN/Notifications/NotificationDetail/index.test.js

@@ -0,0 +1,87 @@
+"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 __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _1 = __importDefault(require("."));
+// Mock fetch function
+global.fetch = jest.fn(function () {
+    return Promise.resolve({
+        ok: true,
+        json: function () { return Promise.resolve([]); },
+    });
+});
+test("renders NotificationDetail component", function () { return __awaiter(void 0, void 0, void 0, function () {
+    var getByTestId;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                getByTestId = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.default, {})).getByTestId;
+                // Wait for initial rendering
+                return [4 /*yield*/, (0, react_1.waitFor)(function () { return expect(getByTestId("header-info")).toBeInTheDocument(); })];
+            case 1:
+                // Wait for initial rendering
+                _a.sent();
+                expect(getByTestId("notification-list")).toBeInTheDocument();
+                return [2 /*return*/];
+        }
+    });
+}); });
+test("updates notifications on API call", function () { return __awaiter(void 0, void 0, void 0, function () {
+    var getByTestId;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                getByTestId = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.default, {})).getByTestId;
+                // Wait for initial rendering
+                return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                        return expect(global.fetch).toHaveBeenCalledWith(expect.stringContaining("https://run.mocky.io/v3/68ae1ad5-8e13-4d00-a8ef-134215e61978"));
+                    })];
+            case 1:
+                // Wait for initial rendering
+                _a.sent();
+                // Check if notifications are updated
+                expect(getByTestId("notification-list")).toBeInTheDocument();
+                return [2 /*return*/];
+        }
+    });
+}); });

package/lib/ACM-AXN/Notifications/NotificationPopover/Container.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Container: React.FC;
+export default Container;

package/lib/ACM-AXN/Notifications/NotificationPopover/Container.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Notifications_1 = __importDefault(require("@mui/icons-material/Notifications"));
+var material_1 = require("@mui/material");
+var Constant_1 = require("../../../ACM-AXN/Common/Constant");
+var react_1 = require("react");
+var Hooks_1 = __importDefault(require("../Hooks"));
+var NotificationDetail_1 = __importDefault(require("../NotificationDetail"));
+var Container = function () {
+    var _a = (0, Hooks_1.default)(), service = _a.service, numberNotification = _a.numberNotification, onNotificationClick = _a.onNotificationClick;
+    var _b = (0, react_1.useState)(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    (0, react_1.useEffect)(function () {
+        service.notificationsCountUnreadMessages().then(onNotificationClick);
+    }, []);
+    var handleClick = function (event) {
+        var href = window.location.href;
+        // nếu đang ở notifications thì click vào quả chuông sẽ không mở popover nữa.
+        if (!href.includes(Constant_1.Constants.NOTIFICATIONS_PATH)) {
+            onNotificationClick(0);
+            setAnchorEl(event.currentTarget);
+        }
+    };
+    var handleClose = function () {
+        setAnchorEl(null);
+    };
+    var open = Boolean(anchorEl);
+    var id = open ? 'simple-popover' : undefined;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { component: "div", children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-describedby": id, onClick: handleClick, sx: { backgroundColor: open ? '#F98D9C' : 'inherit' }, children: (0, jsx_runtime_1.jsx)(material_1.Badge, { badgeContent: numberNotification, color: "error", children: (0, jsx_runtime_1.jsx)(Notifications_1.default, { "data-testid": "notification-icon", sx: { color: open ? '#DD040C' : 'inherit' } }) }) }), (0, jsx_runtime_1.jsx)(material_1.Popover, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, sx: { zIndex: 1100 }, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'center',
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'center',
+                }, PaperProps: {
+                    style: {
+                        borderRadius: '8px',
+                    },
+                }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { "data-testid": "popover", component: "div", sx: [
+                        {
+                            width: '400px',
+                            overflowY: 'auto',
+                            maxHeight: 'calc(90vh - 8px)',
+                        },
+                        {
+                            '&::-webkit-scrollbar': {
+                                width: '10px',
+                            },
+                        },
+                        {
+                            '&::-webkit-scrollbar-track': {
+                                backgroundColor: '#f1f1f1',
+                            },
+                        },
+                        {
+                            '&::-webkit-scrollbar-thumb': {
+                                borderRadius: '4px',
+                                backgroundColor: '#c1c1c1',
+                            },
+                        },
+                    ], children: (0, jsx_runtime_1.jsx)(NotificationDetail_1.default, { onClosePopover: handleClose }) }) })] }));
+};
+exports.default = Container;

package/lib/ACM-AXN/Notifications/NotificationPopover/Container.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ *
+ * @author dauquan1108@gmail.com on 12/7/2023.
+ *
+ **/
+import '@testing-library/jest-dom';