@blocklet/ui-react 2.11.28 → 2.11.30

package/lib/UserCenter/components/storage/disconnect.js

@@ -20,7 +20,7 @@ function Disconnect() {
         }
       }
     ),
-    /* @__PURE__ */ jsx(DIDSpaceConnect, { session, onSuccess })
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(DIDSpaceConnect, { session, onSuccess }) })
   ] });
 }
 export default Disconnect;

package/lib/UserCenter/components/storage/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import Center from "@arcblock/ux/lib/Center";
-import { LocaleProvider } from "@arcblock/ux/lib/Locale/context";
+import { LocaleProvider, useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import styled from "@emotion/styled";
 import { Box, CircularProgress } from "@mui/material";
 import { useConfigUserSpaceContext } from "../../../contexts/config-user-space.js";
@@ -9,10 +9,11 @@ import Disconnect from "./disconnect.js";
 import { translations } from "../../libs/locales.js";
 function DidSpace() {
   const { spaceGateway, hasStorageEndpoint, loading } = useConfigUserSpaceContext();
+  const { locale } = useLocaleContext();
   if (loading) {
     return /* @__PURE__ */ jsx(Center, { relative: "parent", children: /* @__PURE__ */ jsx(CircularProgress, {}) });
   }
-  return /* @__PURE__ */ jsx(LocaleProvider, { translations, children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Box, { maxWidth: "720px", children: hasStorageEndpoint ? /* @__PURE__ */ jsx(Connected, { spaceGateway }) : /* @__PURE__ */ jsx(Disconnect, {}) }) }) });
+  return /* @__PURE__ */ jsx(LocaleProvider, { translations, locale, children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Box, { maxWidth: "720px", children: hasStorageEndpoint ? /* @__PURE__ */ jsx(Connected, { spaceGateway }) : /* @__PURE__ */ jsx(Disconnect, {}) }) }) });
 }
 const Container = styled(Box)`
   height: 100%;

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.28",
+  "version": "2.11.30",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -32,8 +32,10 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.11.28",
-    "@arcblock/react-hooks": "^2.11.28",
+    "@abtnode/constant": "1.16.37",
+    "@arcblock/bridge": "^2.11.30",
+    "@arcblock/react-hooks": "^2.11.30",
+    "@arcblock/ws": "^1.19.2",
     "@blocklet/did-space-react": "^1.0.2",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
@@ -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",
@@ -81,5 +84,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "d5c76bd7e9d1fb74e6253a3016f6b8ccf37b77f0"
+  "gitHead": "a4a88b339b04b907c7f76927806324c98d4b2904"
 }

package/src/UserCenter/components/storage/disconnect.tsx

@@ -22,7 +22,9 @@ function Disconnect() {
           margin: '16px 0',
         }}
       />
-      <DIDSpaceConnect session={session} onSuccess={onSuccess} />
+      <Box>
+        <DIDSpaceConnect session={session} onSuccess={onSuccess} />
+      </Box>
     </Box>
   );
 }

package/src/UserCenter/components/storage/index.tsx

@@ -1,5 +1,5 @@
 import Center from '@arcblock/ux/lib/Center';
-import { LocaleProvider } from '@arcblock/ux/lib/Locale/context';
+import { LocaleProvider, useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import styled from '@emotion/styled';
 import { Box, CircularProgress } from '@mui/material';
 import { useConfigUserSpaceContext } from '../../../contexts/config-user-space';
@@ -9,6 +9,7 @@ import { translations } from '../../libs/locales';
 
 function DidSpace() {
   const { spaceGateway, hasStorageEndpoint, loading } = useConfigUserSpaceContext();
+  const { locale } = useLocaleContext();
 
   if (loading) {
     return (
@@ -19,7 +20,7 @@ function DidSpace() {
   }
 
   return (
-    <LocaleProvider translations={translations}>
+    <LocaleProvider translations={translations} locale={locale}>
       <Container>
         <Box maxWidth="720px">{hasStorageEndpoint ? <Connected spaceGateway={spaceGateway} /> : <Disconnect />}</Box>
       </Container>

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];
+};