@orderly.network/ui-notification 2.8.10 → 2.8.11-alpha.1

package/dist/index.js

@@ -7,7 +7,6 @@ var types = require('@orderly.network/types');
 var jsxRuntime = require('react/jsx-runtime');
 var utc = require('@date-fns/utc');
 var dateFns = require('date-fns');
-var immer = require('immer');
 var hooks = require('@orderly.network/hooks');
 var reactApp = require('@orderly.network/react-app');
 
@@ -141,12 +140,14 @@ var AnnouncementItem = (props) => {
         return t("notification.listing");
       case types.AnnouncementType.Maintenance:
         return t("notification.maintenance");
+      case types.AnnouncementType.Vote:
+        return t("notification.vote");
       default:
         return t("notification.general");
     }
   }, [props.type, t]);
   const action = react.useMemo(() => {
-    if (props.type === types.AnnouncementType.Campaign && typeof props.url === "string" && props.url !== "" && typeof props.onItemClick === "function") {
+    if ((props.type === types.AnnouncementType.Campaign || props.type === types.AnnouncementType.Vote) && typeof props.url === "string" && props.url !== "" && typeof props.onItemClick === "function") {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         ui.Flex,
         {
@@ -329,29 +330,8 @@ var CampaignContentCard = ({ message, coverImage, url, onItemClick }) => {
 };
 var MaintenanceContentCard = ({ message, startTime, endTime }) => {
   const { t } = i18n.useTranslation();
-  const formattedMessage = react.useMemo(() => {
-    const hours = dateFns.differenceInHours(endTime, startTime);
-    const minutes = dateFns.differenceInMinutes(endTime, startTime) - hours * 60;
-    const startUtc = new utc.UTCDate(startTime);
-    const endUtc = new utc.UTCDate(endTime);
-    const startTimeFormatted = dateFns.format(startUtc, "HH:mm");
-    const endTimeFormatted = dateFns.format(endUtc, "hh:mm a");
-    if (hours > 0) {
-      return t("notification.maintenanceDuration.hours", {
-        hours: minutes > 0 ? (hours + minutes / 60).toFixed(1) : hours,
-        startTimeFormatted,
-        endTimeFormatted
-      });
-    }
-    return t("notification.maintenanceDuration.minutes", {
-      minutes,
-      startTimeFormatted,
-      endTimeFormatted
-    });
-  }, [startTime, endTime, t]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-flex-col oui-gap-1", children: [
     /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 54, children: t("notification.recentlyUpdated") }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { itemAlign: "center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", weight: "bold", children: formattedMessage }) }),
     message && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 80, as: "div", className: "oui-mt-2", children: message })
   ] });
 };
@@ -385,6 +365,31 @@ var ListingContentCard = ({ message, updateTime }) => {
     /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", weight: "bold", children: message })
   ] });
 };
+var CommunityVoteContentCard = ({ message, url, onItemClick }) => {
+  const { t } = i18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-flex-col oui-gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", weight: "bold", children: message }),
+    typeof url === "string" && url !== "" && typeof onItemClick === "function" && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        className: "oui-flex oui-items-center oui-gap-1",
+        onClick: () => onItemClick(url),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Text,
+            {
+              size: "xs",
+              color: "buy",
+              className: "oui-bg-clip-text oui-text-transparent oui-gradient-brand",
+              children: t("notification.joinNow")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ArrowRightShortIcon, { size: 18, color: "success" })
+        ]
+      }
+    )
+  ] });
+};
 var NotificationHeader = (props) => {
   const { t } = i18n.useTranslation();
   const { expanded } = props;
@@ -406,6 +411,8 @@ var NotificationHeader = (props) => {
         return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", color: "buy", children: t("notification.listing") });
       case types.AnnouncementType.Maintenance:
         return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", color: "warning", children: t("notification.maintenanceTitle") });
+      case types.AnnouncementType.Vote:
+        return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", color: "inherit", children: t("notification.vote") });
       default:
         return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", color: "inherit", children: t("notification.generalTitle") });
     }
@@ -514,6 +521,15 @@ var NotificationContent = (props) => {
               updateTime: message.updated_time ?? 0
             }
           );
+        case types.AnnouncementType.Vote:
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            CommunityVoteContentCard,
+            {
+              message: message.message,
+              url: message.url ?? "",
+              onItemClick: props.onItemClick
+            }
+          );
         default:
           return /* @__PURE__ */ jsxRuntime.jsx(
             ListingContentCard,
@@ -594,28 +610,34 @@ var getTimeString = (timestamp) => {
   const time = dateFns.format(new utc.UTCDateMini(timestamp), "h:mm aa");
   return `${time} (UTC) on ${date}`;
 };
-var sortDataByUpdatedTime = (ori) => {
-  return immer.produce(ori, (draft) => {
-    if (Array.isArray(draft.rows)) {
-      draft.rows.sort((a, b) => {
-        if (a.updated_time && b.updated_time) {
-          return b.updated_time - a.updated_time;
-        }
-        return 0;
-      });
+var sortDataByUpdatedTime = (list) => {
+  return list.sort((a, b) => {
+    if (a.updated_time && b.updated_time) {
+      return b.updated_time - a.updated_time;
+    }
+    return 0;
+  });
+};
+var filterDuplicateArrayById = (list) => {
+  const seenIds = /* @__PURE__ */ new Set();
+  const newList = [];
+  list.forEach((item) => {
+    if (!seenIds.has(item.announcement_id)) {
+      seenIds.add(item.announcement_id);
+      newList.push(item);
     }
   });
+  return newList;
 };
 var useAnnouncementData = () => {
+  const { t } = i18n.useTranslation();
   const ws = hooks.useWS();
-  const [announcementStore, setStore] = hooks.useLocalStorage(
-    ORDERLY_ANNOUNCEMENT_KEY,
-    {}
-  );
-  const [tips, setTips] = react.useState({});
+  const { dataAdapter } = hooks.useOrderlyContext();
+  const [announcementStore, setAnnouncementStore] = hooks.useLocalStorage(ORDERLY_ANNOUNCEMENT_KEY, {});
+  const [tips, setTips] = react.useState([]);
+  const [maintenances, setMaintenances] = react.useState([]);
   const [maintenanceDialogInfo, setMaintenanceDialogInfo] = react.useState();
   const { startTime, endTime, status, brokerName } = hooks.useMaintenanceStatus();
-  const { t } = i18n.useTranslation();
   const { data: announcements } = hooks.useQuery(
     `/v2/public/announcement`,
     {
@@ -627,162 +649,100 @@ var useAnnouncementData = () => {
   );
   const getMaintentTipsContent = (brokerName2, startDate, endDate) => t("maintenance.tips.description", { brokerName: brokerName2, startDate, endDate });
   const getMaintentDialogContent = (brokerName2, endDate) => t("maintenance.dialog.description", { brokerName: brokerName2, endDate });
+  react.useEffect(() => {
+    const startDate = startTime ? getTimeString(startTime) : "-";
+    const endDate = endTime ? getTimeString(endTime) : "-";
+    const dialogContent = status === hooks.MaintenanceStatus.Maintenance ? getMaintentDialogContent(brokerName, endDate) : void 0;
+    setMaintenanceDialogInfo(dialogContent);
+    if (startTime && endTime) {
+      setMaintenances([
+        {
+          announcement_id: maintentanceId,
+          type: types.AnnouncementType.Maintenance,
+          startTime,
+          endTime,
+          updated_time: startTime,
+          message: getMaintentTipsContent(brokerName, startDate, endDate)
+        }
+      ]);
+    } else {
+      setMaintenances([]);
+    }
+  }, [startTime, endTime, status, brokerName, t]);
+  react.useEffect(() => {
+    let list = [...maintenances ?? [], ...announcements?.rows ?? []];
+    if (typeof dataAdapter?.announcementList === "function") {
+      list = dataAdapter.announcementList(list);
+    }
+    const removedDuplicateList = filterDuplicateArrayById(list);
+    const sortedList = sortDataByUpdatedTime(removedDuplicateList);
+    setTips(sortedList);
+  }, [maintenances, announcements, dataAdapter?.announcementList]);
+  react.useEffect(() => {
+    if (!announcements?.rows) {
+      return;
+    }
+    const lastUpdateTime = announcements.last_updated_time ?? 0;
+    const firstTipTime = tips[0]?.updated_time ?? 0;
+    const updatedTime = Math.max(lastUpdateTime, firstTipTime);
+    const closedTime = announcementStore.lastUpdateTime ?? 0;
+    if (closedTime < updatedTime) {
+      setAnnouncementStore({ show: true, lastUpdateTime: updatedTime });
+    }
+  }, [announcements, tips]);
   react.useEffect(() => {
     const unsubscribe = ws.subscribe("announcement", {
       onMessage(message) {
         if (message) {
           setTips((prev) => {
-            return immer.produce(prev, (draft) => {
-              if (!Array.isArray(draft.rows)) {
-                draft.rows = [];
-              }
-              const idx = draft.rows.findIndex(
-                (tip) => tip.announcement_id === message.announcement_id
-              );
-              if (idx !== -1) {
-                draft.rows.splice(idx, 1);
-              }
-              draft.rows.push({
-                announcement_id: message.announcement_id,
-                message: message.message,
-                url: message.url,
-                i18n: message.i18n,
-                type: message.type,
-                updated_time: message.updated_time
-              });
-            });
+            const list = prev.filter(
+              (item) => item.announcement_id !== message.announcement_id
+            );
+            const newTip = {
+              announcement_id: message.announcement_id,
+              message: message.message,
+              url: message.url,
+              i18n: message.i18n,
+              type: message.type,
+              updated_time: message.updated_time
+            };
+            return [...list, newTip];
           });
-          setStore((prev) => ({ ...prev, show: true }));
+          setAnnouncementStore((prev) => ({ ...prev, show: true }));
         }
-      },
-      onError(err) {
       }
     });
     return () => {
       unsubscribe?.();
     };
   }, [ws]);
-  react.useEffect(() => {
-    if (!announcements?.rows) {
-      return;
-    }
-    const apiTime = announcements.last_updated_time ?? 0;
-    const cachedTime = announcementStore.lastUpdateTime ?? 0;
-    if (cachedTime < apiTime) {
-      setTips((prev) => ({ ...prev, rows: announcements?.rows }));
-      setStore({ show: true, lastUpdateTime: apiTime });
-    } else {
-      setTips((prev) => {
-        return immer.produce(prev, (draft) => {
-          if (announcements?.rows?.length) {
-            const existingIds = new Set(
-              prev.rows?.map((tip) => tip.announcement_id)
-            );
-            const maintenanceTip = prev.rows?.find(
-              (tip) => tip.announcement_id === maintentanceId
-            );
-            draft.rows = [];
-            announcements.rows.forEach((item) => {
-              if (!existingIds.has(item.announcement_id)) {
-                draft.rows?.push(item);
-              }
-            });
-            if (maintenanceTip) {
-              draft.rows.unshift(maintenanceTip);
-            }
-          } else {
-            const idx = draft.rows?.findIndex(
-              (tip) => tip.announcement_id === maintentanceId
-            );
-            if (idx !== void 0 && idx !== -1) {
-              draft.rows?.splice(idx, 1);
-            }
-          }
-        });
-      });
-    }
-  }, [announcements]);
-  react.useEffect(() => {
-    const startDate = startTime ? getTimeString(startTime) : "-";
-    const endDate = endTime ? getTimeString(endTime) : "-";
-    if (status === hooks.MaintenanceStatus.Maintenance) {
-      setMaintenanceDialogInfo(getMaintentDialogContent(brokerName, endDate));
-      return;
-    }
-    setMaintenanceDialogInfo(void 0);
-    if (startTime && endTime) {
-      setTips(
-        (prev) => immer.produce(prev, (draft) => {
-          if (!Array.isArray(draft.rows)) {
-            draft.rows = [];
-          }
-          draft.rows = [
-            {
-              announcement_id: maintentanceId,
-              type: types.AnnouncementType.Maintenance,
-              /** @ts-ignore */
-              startTime,
-              /** @ts-ignore */
-              endTime,
-              message: getMaintentTipsContent(brokerName, startDate, endDate)
-            },
-            ...draft.rows.filter(
-              (tip) => tip.type !== types.AnnouncementType.Maintenance
-            )
-          ];
-        })
-      );
-    } else {
-      setTips((prev) => {
-        return immer.produce(prev, (draft) => {
-          const index = draft.rows?.findIndex(
-            (tip) => tip.announcement_id === maintentanceId
-          );
-          if (index !== void 0 && index !== -1) {
-            draft.rows?.splice(index, 1);
-          }
-        });
-      });
-    }
-  }, [startTime, endTime, status, brokerName, t]);
   return {
-    tips: sortDataByUpdatedTime(tips),
-    maintenanceDialogInfo
+    tips,
+    maintenanceDialogInfo,
+    announcementStore,
+    setAnnouncementStore
   };
 };
 var useAnnouncement = (options) => {
   const { showAnnouncement, setShowAnnouncement } = reactApp.useAppContext();
-  const { dataAdapter } = hooks.useOrderlyContext();
-  const { tips, maintenanceDialogInfo } = useAnnouncementData();
-  const memoizedTips = react.useMemo(() => {
-    if (typeof dataAdapter?.announcementList === "function") {
-      return dataAdapter.announcementList(
-        tips?.rows ?? types.EMPTY_LIST
-      );
-    }
-    return tips?.rows ?? types.EMPTY_LIST;
-  }, [dataAdapter?.announcementList, tips?.rows]);
-  const [announcementStore, setStore] = hooks.useLocalStorage(
-    ORDERLY_ANNOUNCEMENT_KEY,
-    {}
-  );
+  const {
+    tips,
+    maintenanceDialogInfo,
+    announcementStore,
+    setAnnouncementStore
+  } = useAnnouncementData();
   const closeTips = () => {
-    setStore((prev) => ({ ...prev, show: false }));
+    setAnnouncementStore((prev) => ({ ...prev, show: false }));
   };
   react.useEffect(() => {
-    const len = memoizedTips.length;
+    const len = tips.length;
     setShowAnnouncement(
       Boolean(len) && announcementStore.show && !options?.hideTips
     );
-  }, [
-    memoizedTips,
-    announcementStore.show,
-    options?.hideTips,
-    setShowAnnouncement
-  ]);
+  }, [tips, announcementStore.show, options?.hideTips, setShowAnnouncement]);
   return {
     maintenanceDialogInfo,
-    tips: memoizedTips,
+    tips,
     closeTips,
     showAnnouncement
   };
@@ -815,8 +775,7 @@ var AnnouncementCenterWidget = (props) => {
   const { dataSource, current, setCurrent } = useAnnouncementCenterScript();
   const onItemClick = react.useCallback(
     (url) => {
-      if (!url)
-        return;
+      if (!url) return;
       props.onRouteChange(url);
     },
     [props.onRouteChange]
@@ -836,8 +795,7 @@ var AnnouncementCenterPage = (props) => {
     AnnouncementCenterWidget,
     {
       onRouteChange: (url) => {
-        if (!url)
-          return;
+        if (!url) return;
         props.routerAdapter?.onRouteChange({
           href: url,
           name: url,
@@ -853,5 +811,5 @@ exports.AnnouncementCenterUI = AnnouncementCenterUI;
 exports.AnnouncementItem = AnnouncementItem;
 exports.NotificationUI = NotificationUI;
 exports.useAnnouncement = useAnnouncement;
-//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map