@blocklet/ui-react 2.11.29 → 2.11.31

package/lib/common/notification-addon.js

@@ -1,17 +1,46 @@
 import { jsx } from "react/jsx-runtime";
 import Badge from "@mui/material/Badge";
 import PropTypes from "prop-types";
+import { useCallback, useEffect } from "react";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
 import { IconButton } from "@mui/material";
 import NotificationsOutlinedIcon from "@arcblock/icons/lib/Notification";
 import { useCreation } from "ahooks";
+import { EVENTS } from "@abtnode/constant";
+import { useListenWsClient } from "./ws.js";
 export default function NotificationAddon({ session = {} }) {
-  const { unReadCount } = session;
+  const { unReadCount, user, setUnReadCount } = session;
+  const userDid = useCreation(() => user?.did, [user]);
   const viewAllUrl = useCreation(() => {
     const { navigation } = window.blocklet ?? {};
     const notification = navigation?.find((x) => x.id === "/userCenter/notification");
     return notification?.link;
   });
+  const wsClient = useListenWsClient("user");
+  const listenEvent = useCreation(
+    () => `${window.blocklet.did}/${userDid}/${EVENTS.NOTIFICATION_BLOCKLET_CREATE}`,
+    [userDid]
+  );
+  const listenCallback = useCallback(
+    (notification) => {
+      const { receivers } = notification ?? {};
+      const { receiver: notificationReceiver } = receivers[0] ?? {};
+      if (notificationReceiver === userDid) {
+        setUnReadCount((x) => x + 1);
+      }
+    },
+    [userDid, setUnReadCount]
+  );
+  useEffect(() => {
+    if (wsClient) {
+      wsClient.on(listenEvent, listenCallback);
+    }
+    return () => {
+      if (wsClient) {
+        wsClient.off(listenEvent, listenCallback);
+      }
+    };
+  }, [wsClient, setUnReadCount, listenCallback, listenEvent]);
   if (!session.user || !viewAllUrl) {
     return null;
   }
@@ -28,7 +57,7 @@ export default function NotificationAddon({ session = {} }) {
           borderRadius: "50%"
         }
       },
-      children: /* @__PURE__ */ jsx(Badge, { variant: "dot", color: "error", invisible: unReadCount === 0, children: /* @__PURE__ */ jsx(NotificationsOutlinedIcon, { style: { width: "auto", height: 24 } }) })
+      children: /* @__PURE__ */ jsx(Badge, { badgeContent: unReadCount, color: "error", invisible: unReadCount === 0, children: /* @__PURE__ */ jsx(NotificationsOutlinedIcon, { style: { width: "auto", height: 24 } }) })
     }
   );
 }

package/lib/common/ws.d.ts

@@ -0,0 +1,3 @@
+export function create(endpoint?: string): any;
+export default function getWsClient(endpoint?: string): any;
+export function useListenWsClient(endpoint?: string): any;

package/lib/common/ws.js

@@ -0,0 +1,37 @@
+import { useContext } from 'react';
+import Cookie from 'js-cookie';
+import { WsClient } from '@arcblock/ws';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
+
+const client = {};
+
+export function create(endpoint = 'admin') {
+  const pathPrefix = (window.env && window.env.apiPrefix ? window.env.apiPrefix : '/').replace(/\/$/, '');
+  const url = `//${window.location.host}${pathPrefix}/.well-known/service/${endpoint}`;
+  return new WsClient(url, {
+    heartbeatIntervalMs: 100 * 1000,
+    params: () => ({
+      token: Cookie.get('login_token'),
+    }),
+  });
+}
+
+export default function getWsClient(endpoint = 'admin') {
+  if (!client[endpoint]) {
+    client[endpoint] = create(endpoint);
+  }
+
+  return client[endpoint];
+}
+
+export const useListenWsClient = (endpoint = 'admin') => {
+  const sessionCtx = useContext(SessionContext);
+  const { session } = sessionCtx ?? {};
+
+  if (!client[endpoint] && session.user) {
+    client[endpoint] = getWsClient(endpoint);
+    client[endpoint].connect();
+  }
+
+  return client[endpoint];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.11.29",
+  "version": "2.11.31",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -32,9 +32,11 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.11.29",
-    "@arcblock/react-hooks": "^2.11.29",
-    "@blocklet/did-space-react": "^1.0.2",
+    "@abtnode/constant": "^1.16.38",
+    "@arcblock/bridge": "^2.11.31",
+    "@arcblock/react-hooks": "^2.11.31",
+    "@arcblock/ws": "^1.19.9",
+    "@blocklet/did-space-react": "^1.0.9",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify/react": "^4.1.1",
@@ -45,6 +47,7 @@
     "iconify-icon": "^1.0.8",
     "iconify-icons-material-symbols-400": "^0.0.1",
     "is-url": "^1.2.4",
+    "js-cookie": "^2.2.1",
     "lodash": "^4.17.21",
     "p-all": "^5.0.0",
     "p-queue": "^6.6.2",
@@ -57,9 +60,9 @@
     "ufo": "^1.5.3"
   },
   "peerDependencies": {
-    "@arcblock/did-connect": "^2.11.22",
-    "@arcblock/ux": "^2.11.22",
-    "@blocklet/js-sdk": "^1.16.37",
+    "@arcblock/did-connect": "^2.11.30",
+    "@arcblock/ux": "^2.11.30",
+    "@blocklet/js-sdk": "^1.16.38",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@mui/icons-material": "^5.15.0",
@@ -81,5 +84,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "adc33bd4f0d0dab0dbae75fbcddd585b0433c00f"
+  "gitHead": "31368d3bf32245481ff96e7946ade7062df01e6e"
 }

package/src/common/notification-addon.jsx

@@ -1,14 +1,18 @@
 import Badge from '@mui/material/Badge';
 import PropTypes from 'prop-types';
+import { useCallback, useEffect } from 'react';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
 import { IconButton } from '@mui/material';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import NotificationsOutlinedIcon from '@arcblock/icons/lib/Notification';
 import { useCreation } from 'ahooks';
+import { EVENTS } from '@abtnode/constant';
+import { useListenWsClient } from './ws';
 
 export default function NotificationAddon({ session = {} }) {
-  const { unReadCount } = session;
+  const { unReadCount, user, setUnReadCount } = session;
+  const userDid = useCreation(() => user?.did, [user]);
 
   const viewAllUrl = useCreation(() => {
     const { navigation } = window.blocklet ?? {};
@@ -16,6 +20,37 @@ export default function NotificationAddon({ session = {} }) {
     return notification?.link;
   });
 
+  const wsClient = useListenWsClient('user');
+
+  const listenEvent = useCreation(
+    () => `${window.blocklet.did}/${userDid}/${EVENTS.NOTIFICATION_BLOCKLET_CREATE}`,
+    [userDid]
+  );
+
+  const listenCallback = useCallback(
+    (notification) => {
+      const { receivers } = notification ?? {};
+
+      const { receiver: notificationReceiver } = receivers[0] ?? {};
+      // 更新列表
+      if (notificationReceiver === userDid) {
+        setUnReadCount((x) => x + 1);
+      }
+    },
+    [userDid, setUnReadCount]
+  );
+
+  useEffect(() => {
+    if (wsClient) {
+      wsClient.on(listenEvent, listenCallback);
+    }
+    return () => {
+      if (wsClient) {
+        wsClient.off(listenEvent, listenCallback);
+      }
+    };
+  }, [wsClient, setUnReadCount, listenCallback, listenEvent]);
+
   if (!session.user || !viewAllUrl) {
     return null;
   }
@@ -32,7 +67,7 @@ export default function NotificationAddon({ session = {} }) {
           borderRadius: '50%',
         },
       }}>
-      <Badge variant="dot" color="error" invisible={unReadCount === 0}>
+      <Badge badgeContent={unReadCount} color="error" invisible={unReadCount === 0}>
         <NotificationsOutlinedIcon style={{ width: 'auto', height: 24 }} />
       </Badge>
     </IconButton>

package/src/common/ws.js

@@ -0,0 +1,37 @@
+import { useContext } from 'react';
+import Cookie from 'js-cookie';
+import { WsClient } from '@arcblock/ws';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
+
+const client = {};
+
+export function create(endpoint = 'admin') {
+  const pathPrefix = (window.env && window.env.apiPrefix ? window.env.apiPrefix : '/').replace(/\/$/, '');
+  const url = `//${window.location.host}${pathPrefix}/.well-known/service/${endpoint}`;
+  return new WsClient(url, {
+    heartbeatIntervalMs: 100 * 1000,
+    params: () => ({
+      token: Cookie.get('login_token'),
+    }),
+  });
+}
+
+export default function getWsClient(endpoint = 'admin') {
+  if (!client[endpoint]) {
+    client[endpoint] = create(endpoint);
+  }
+
+  return client[endpoint];
+}
+
+export const useListenWsClient = (endpoint = 'admin') => {
+  const sessionCtx = useContext(SessionContext);
+  const { session } = sessionCtx ?? {};
+
+  if (!client[endpoint] && session.user) {
+    client[endpoint] = getWsClient(endpoint);
+    client[endpoint].connect();
+  }
+
+  return client[endpoint];
+};