awing-library 2.1.21-beta → 2.1.21

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

@@ -1,74 +1,66 @@
 "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 __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 moment_1 = __importDefault(require("moment"));
-var react_1 = require("@testing-library/react");
-require("@testing-library/jest-dom");
-var NotificationContent_1 = __importDefault(require("./NotificationContent"));
-describe("NotificationContent component", function () {
-    it("Hiển thị đầy đủ với dữ liệu props đầu vào của component NotificationContent 'content = string, time = number | string'.", function () {
-        var props = {
-            content: '<p>Chiến dịch đã được cập nhật.</p>',
-            time: "2023-12-04 12:30",
-            status: true,
-        };
-        var getByText = (0, react_1.render)((0, jsx_runtime_1.jsx)(NotificationContent_1.default, __assign({}, props))).getByText;
-        // Kiểm tra đoạn văn bản có tồn tại trong component hay không.
-        var contentElement = getByText('Chiến dịch đã được cập nhật.');
-        expect(contentElement).toBeInTheDocument();
-        // Kiểm tra thời gian có được hiển thị đúng không.
-        var formattedTime = (0, moment_1.default)(props.time).format("DD/MM/YYYY HH:mm");
-        var timeElement = getByText(formattedTime);
-        expect(timeElement).toBeInTheDocument();
-    });
-    it("Hiển thị nội dung và thời gian, khi thời gian không hợp lệ.", function () {
-        var props = {
-            content: '<p>Chiến dịch đã được cập nhật.</p>',
-            time: "Thời gian không hợp lệ",
-            status: false,
-        };
-        var getByText = (0, react_1.render)((0, jsx_runtime_1.jsx)(NotificationContent_1.default, __assign({}, props))).getByText;
-        // Kiểm tra đoạn văn bản có tồn tại trong component hay không.
-        var contentElement = getByText('Chiến dịch đã được cập nhật.');
-        expect(contentElement).toBeInTheDocument();
-        // Kiểm tra thời gian chưa đúng định dạng có được hiển thị thời gian không hợp lệ.
-        var timeElement = getByText('Thời gian không hợp lệ');
-        expect(timeElement).toBeInTheDocument();
-    });
-    it("Hiện thị thời gian đối với trường hợp nội dung bị trống.", function () {
-        var props = {
-            content: "",
-            time: "2023-12-04 12:30",
-            status: true,
-        };
-        var getByText = (0, react_1.render)((0, jsx_runtime_1.jsx)(NotificationContent_1.default, __assign({}, props))).getByText;
-        // Kiểm tra thời gian có được hiển thị đúng không.
-        var formattedTime = (0, moment_1.default)(props.time).format("DD/MM/YYYY HH:mm");
-        var timeElement = getByText(formattedTime);
-        expect(timeElement).toBeInTheDocument();
-    });
-    it("Hiện thị nội dung và thời gian đối với nội dung và thời gian bị trống.", function () {
-        var props = {
-            content: "",
-            time: "",
-            status: false,
-        };
-        // Kiểm tra xem không có phần tử nào chứa nội dung hoặc thời gian
-        var queryByText = (0, react_1.render)((0, jsx_runtime_1.jsx)(NotificationContent_1.default, __assign({}, props))).queryByText;
-        expect(queryByText(/./)).toBeNull();
-    });
-});
+// /**
+//  *
+//  * @author dauquan1108@gmail.com on 12/4/2023.
+//  *
+//  **/
+// import React from "react";
+// import moment from "moment";
+// import { render } from "@testing-library/react";
+// import "@testing-library/jest-dom";
+// import NotificationContent from "./NotificationContent";
+// describe("NotificationContent component", () => {
+//     it("Hiển thị đầy đủ với dữ liệu props đầu vào của component NotificationContent 'content = string, time = number | string'.", () => {
+//         const props = {
+//             content:
+//                 '<p>Chiến dịch đã được cập nhật.</p>',
+//             time: "2023-12-04 12:30",
+//             status: true,
+//         };
+//         const { getByText } = render(<NotificationContent {...props} />);
+//         // Kiểm tra đoạn văn bản có tồn tại trong component hay không.
+//         const contentElement = getByText('Chiến dịch đã được cập nhật.');
+//         expect(contentElement).toBeInTheDocument();
+//         // Kiểm tra thời gian có được hiển thị đúng không.
+//         const formattedTime = moment(props.time).format("DD/MM/YYYY HH:mm");
+//         const timeElement = getByText(formattedTime);
+//         expect(timeElement).toBeInTheDocument();
+//     });
+//     it("Hiển thị nội dung và thời gian, khi thời gian không hợp lệ.", () => {
+//         const props = {
+//             content:
+//                 '<p>Chiến dịch đã được cập nhật.</p>',
+//             time: "Thời gian không hợp lệ",
+//             status: false,
+//         };
+//         const { getByText } = render(<NotificationContent {...props} />);
+//         // Kiểm tra đoạn văn bản có tồn tại trong component hay không.
+//         const contentElement = getByText('Chiến dịch đã được cập nhật.');
+//         expect(contentElement).toBeInTheDocument();
+//         // Kiểm tra thời gian chưa đúng định dạng có được hiển thị thời gian không hợp lệ.
+//         const timeElement = getByText('Thời gian không hợp lệ');
+//         expect(timeElement).toBeInTheDocument();
+//     });
+//     it("Hiện thị thời gian đối với trường hợp nội dung bị trống.", () => {
+//         const props = {
+//             content: "",
+//             time: "2023-12-04 12:30",
+//             status: true,
+//         };
+//         const { getByText } = render(<NotificationContent {...props} />);
+//         // Kiểm tra thời gian có được hiển thị đúng không.
+//         const formattedTime = moment(props.time).format("DD/MM/YYYY HH:mm");
+//         const timeElement = getByText(formattedTime);
+//         expect(timeElement).toBeInTheDocument();
+//     });
+//     it("Hiện thị nội dung và thời gian đối với nội dung và thời gian bị trống.", () => {
+//         const props = {
+//             content: "",
+//             time: "",
+//             status: false,
+//         };
+//         // Kiểm tra xem không có phần tử nào chứa nội dung hoặc thời gian
+//         const { queryByText } = render(<NotificationContent {...props} />);
+//         expect(queryByText(/./)).toBeNull();
+//     });
+// });

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

@@ -4,20 +4,13 @@
  *
  **/
 /// <reference types="react" />
+import { NotificationMessage, NotificationMessageStatus } from '../../../Types';
 interface ValueItem {
-    id: string | number;
-    status: boolean;
+    id: number;
+    status: NotificationMessageStatus;
 }
 interface PropsNotificationItem {
-    data: {
-        id: string | number;
-        content: string;
-        url: string;
-        status: boolean;
-        userName: string;
-        avatarUrl: string;
-        time: number | string;
-    };
+    notificationMessage: NotificationMessage;
     onUpdateStatus: (dataSent: ValueItem | string) => void;
 }
 declare const NotificationItem: (props: PropsNotificationItem) => JSX.Element;

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

@@ -8,57 +8,69 @@ var react_i18next_1 = require("react-i18next");
 var material_1 = require("@mui/material");
 var NotificationAvatar_1 = __importDefault(require("./NotificationAvatar"));
 var NotificationContent_1 = __importDefault(require("./NotificationContent"));
-var notSeen_svg_1 = __importDefault(require("Assets/Images/notSeen.svg"));
-var watched_svg_1 = __importDefault(require("Assets/Images/watched.svg"));
+var notSeen_svg_1 = __importDefault(require("../../../../../Assets/Images/notSeen.svg"));
+var watched_svg_1 = __importDefault(require("../../../../../Assets/Images/watched.svg"));
+var Types_1 = require("../../../Types");
+var Message_1 = require("./Message");
+var Router_1 = require("../../../../../AWING/Router");
+var Context_1 = require("../../../../../Context");
 var NotificationItem = function (props) {
     var t = (0, react_i18next_1.useTranslation)().t;
-    var data = props.data, _a = props.onUpdateStatus, onUpdateStatus = _a === void 0 ? function () { return null; } : _a;
-    var id = data.id, content = data.content, url = data.url, _b = data.status, status = _b === void 0 ? false : _b, userName = data.userName, avatarUrl = data.avatarUrl, time = data.time;
+    var transactionType = (0, Context_1.useAwing)().transactionType;
+    var navigate = (0, Router_1.useNavigate)();
+    var notificationMessage = props.notificationMessage, onUpdateStatus = props.onUpdateStatus;
+    var sagaTransactionType = notificationMessage.sagaTransactionType, fields = notificationMessage.fields, status = notificationMessage.status, id = notificationMessage.id;
     var handleUpdateStatus = function (event) {
         event.preventDefault();
         event.stopPropagation();
         onUpdateStatus({ id: id, status: status });
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Link, { href: url, color: "inherit", sx: [
+    var handleClickNotification = function () {
+        navigate((0, Message_1.getFullDescription)(sagaTransactionType, t, fields, transactionType).url);
+        status === Types_1.NotificationMessageStatus.Unread &&
+            onUpdateStatus({ id: id, status: status });
+    };
+    var itemStatus = status === Types_1.NotificationMessageStatus.Unread;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { color: "inherit", onClick: handleClickNotification, sx: [
             {
-                display: "flex",
-                flexDirection: "row",
-                alignItems: "center",
-                justifyContent: "space-between",
-                padding: "8px",
-                borderRadius: "8px",
-                position: "relative",
-                textDecoration: "none",
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                padding: '8px',
+                borderRadius: '8px',
+                position: 'relative',
+                cursor: 'pointer',
             },
             {
-                "&:hover": {
-                    backgroundColor: "#03030312",
-                    "& .wrapBtnStatus": {
-                        display: "flex",
-                        alignItems: "center",
-                        position: "absolute",
-                        right: "32px",
-                        padding: "4px",
-                        cursor: "pointer",
-                        borderRadius: "50%",
-                        backgroundColor: "#EBEDF0",
-                        boxShadow: "rgba(14, 30, 37, 0.12) 0 2px 4px 0, rgba(14, 30, 37, 0.32) 0 2px 16px 0",
+                '&:hover': {
+                    backgroundColor: '#03030312',
+                    '& .wrapBtnStatus': {
+                        display: 'flex',
+                        alignItems: 'center',
+                        position: 'absolute',
+                        right: '32px',
+                        padding: '4px',
+                        cursor: 'pointer',
+                        borderRadius: '50%',
+                        backgroundColor: '#EBEDF0',
+                        boxShadow: 'rgba(14, 30, 37, 0.12) 0 2px 4px 0, rgba(14, 30, 37, 0.32) 0 2px 16px 0',
                     },
                 },
             },
         ], children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { content: "div", sx: {
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center",
-                }, children: [(0, jsx_runtime_1.jsx)(NotificationAvatar_1.default, { url: avatarUrl, name: userName }), (0, jsx_runtime_1.jsx)(NotificationContent_1.default, { time: time, status: status, content: content })] }), (0, jsx_runtime_1.jsx)(material_1.Paper, { variant: "outlined", sx: { display: "none" }, className: "wrapBtnStatus", onClick: handleUpdateStatus, title: status
-                    ? t("Notifications.TitleMarkRead")
-                    : t("Notifications.TitleMarkUnread"), children: (0, jsx_runtime_1.jsx)("img", { src: (status
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                }, children: [(0, jsx_runtime_1.jsx)(NotificationAvatar_1.default, { url: '', name: '' }), (0, jsx_runtime_1.jsx)(NotificationContent_1.default, { status: itemStatus, notificationMessage: notificationMessage })] }), (0, jsx_runtime_1.jsx)(material_1.Paper, { variant: "outlined", sx: { display: 'none' }, className: "wrapBtnStatus", onClick: handleUpdateStatus, title: itemStatus
+                    ? t('Notifications.TitleMarkRead')
+                    : t('Notifications.TitleMarkUnread'), children: (0, jsx_runtime_1.jsx)("img", { src: (itemStatus
                         ? notSeen_svg_1.default
-                        : watched_svg_1.default), alt: status ? "iconNotSeen" : "iconWatched", style: { width: "25px", height: "25px" } }) }), status && ((0, jsx_runtime_1.jsx)(material_1.Paper, { "data-testid": "iconStatus", variant: "outlined", sx: {
-                    padding: "5px",
-                    marginLeft: "8px",
-                    borderRadius: "50%",
-                    backgroundColor: "#ed1d25",
+                        : watched_svg_1.default), alt: itemStatus ? 'iconNotSeen' : 'iconWatched', style: { width: '25px', height: '25px' } }) }), itemStatus && ((0, jsx_runtime_1.jsx)(material_1.Paper, { "data-testid": "iconStatus", variant: "outlined", sx: {
+                    padding: '5px',
+                    marginLeft: '8px',
+                    borderRadius: '50%',
+                    backgroundColor: '#ed1d25',
                 } }))] }));
 };
 exports.default = NotificationItem;

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

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

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

@@ -1,51 +1,57 @@
 "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 moment_1 = __importDefault(require("moment"));
-require("@testing-library/jest-dom");
-var react_1 = require("@testing-library/react");
-// Component
-var _1 = __importDefault(require("."));
-var 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", function () {
-    it("Hiện thị đúng thông tin từ props truyền vào.", function () {
-        var _a = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.default, { data: mockData, onUpdateStatus: function () { return null; } })), getByText = _a.getByText, getByAltText = _a.getByAltText, queryByTestId = _a.queryByTestId;
-        // content
-        var contentElement = getByText("Chiến dịch đã được cập nhật.");
-        expect(contentElement).toBeInTheDocument();
-        // avatarUrl
-        var avatar = getByAltText(mockData.userName);
-        expect(avatar.src).toBe("https://i.pinimg.com/564x/9e/a4/73/9ea4735b805ef4a3b390ca4c6c5e320e.jpg");
-        // time
-        var formattedTime = (0, moment_1.default)(mockData.time).format("DD/MM/YYYY HH:mm");
-        var timeElement = getByText(formattedTime);
-        expect(timeElement).toBeInTheDocument();
-        // status
-        var iconStatus = queryByTestId('iconStatus');
-        expect(iconStatus).not.toBeInTheDocument();
-    });
-    it("Gọi hàm onUpdateStatus khi click vào icon con mắt", function () {
-        var mockUpdateStatus = jest.fn();
-        var getByTitle = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.default, { data: mockData, onUpdateStatus: mockUpdateStatus })).getByTitle;
-        var statusButton = getByTitle("Notifications.TitleMarkUnread");
-        react_1.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'.", function () {
-        var getByAltText = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.default, { data: mockData, onUpdateStatus: function () {
-            } })).getByAltText;
-        var iconElement = getByAltText(mockData.status ? 'iconNotSeen' : "iconWatched");
-        expect(iconElement).toBeInTheDocument();
-    });
-});
+// /**
+//  *
+//  * @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.js

@@ -13,44 +13,44 @@ 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",
+                    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",
+                                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",
+                            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",
+                                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",
+                            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",
+                                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: "." }) })] })] })] }));
+                            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

@@ -4,27 +4,15 @@
  *
  **/
 /// <reference types="react" />
-interface NotificationItemData {
-    id: string | number;
-    content: string;
-    url: string;
-    status: boolean;
-    userName: string;
-    avatarUrl: string;
-    time: number | string;
-}
-interface ValueItem {
-    id: string | number;
-    status: boolean;
-}
+import { IValueItem, NotificationMessage } from '../../Types';
 interface PropsNotificationList {
     valueFilter: {
         textSearch: string;
         tabs: string;
     };
     isLoading: boolean;
-    notifications: NotificationItemData[];
-    onUpdateStatus: (dataSent: ValueItem | string) => void;
+    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

@@ -1,4 +1,27 @@
 "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 };
 };
@@ -9,16 +32,24 @@ var jsx_runtime_1 = require("react/jsx-runtime");
  * @author dauquan1108@gmail.com on 11/27/2023.
  *
  **/
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
+var Constant_1 = require("../../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, notifications = props.notifications, onUpdateStatus = props.onUpdateStatus, _b = props.isLoading, isLoading = _b === void 0 ? false : _b;
+    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.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, { data: item, onUpdateStatus: onUpdateStatus }, item.id)); }), isLoading && (0, jsx_runtime_1.jsx)(NotificationLoading_1.default, {})] }));
+    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.d.ts

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