@blocklet/ui-react 3.1.26 → 3.1.27

package/src/UserCenter/components/user-info/social-actions/chat.tsx

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+import { Button } from '@mui/material';
+import { useMemoizedFn } from 'ahooks';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+import { joinURL } from 'ufo';
+import { User } from '../../../../@types';
+
+import { translations } from '../../../libs/locales';
+
+const getDiscussKitMountPoint = () => {
+  const { componentMountPoints = [] } = window.blocklet || {};
+  const component = componentMountPoints.find((c: any) => c.name === 'did-comments');
+  return component?.mountPoint;
+};
+
+function Chat({ user }: { user: User }) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  // 获取 discuss kit 的挂载点
+  const discussKitMountPoint = useMemo(() => getDiscussKitMountPoint(), []);
+
+  const onNavigateToChat = useMemoizedFn(() => {
+    window.open(joinURL(discussKitMountPoint, `/chat/dm/${user?.did}`), '_blank');
+  });
+
+  if (!discussKitMountPoint) {
+    return null;
+  }
+
+  return (
+    <Button fullWidth variant="outlined" color="inherit" onClick={onNavigateToChat}>
+      <i className="iconify" data-icon="mi:message-alt" style={{ fontSize: '15px', marginRight: '4px' }} />
+      {t('profile.chat')}
+    </Button>
+  );
+}
+
+export default Chat;

package/src/UserCenter/components/user-info/social-actions/follow.tsx

@@ -0,0 +1,30 @@
+import { Button } from '@mui/material';
+import { useMemoizedFn } from 'ahooks';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import NotificationsOffIcon from '@mui/icons-material/NotificationsOff';
+
+import { translations } from '../../../libs/locales';
+import { useUserFollowersContext } from '../../../../contexts/user-followers';
+
+function Follow() {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const { followed, followUser, unfollowUser } = useUserFollowersContext();
+
+  return (
+    <Button variant="contained" onClick={() => (followed ? unfollowUser() : followUser())} fullWidth>
+      {followed ? (
+        <NotificationsOffIcon sx={{ fontSize: '14px', marginRight: '4px' }} />
+      ) : (
+        <NotificationsIcon sx={{ fontSize: '14px', marginRight: '4px' }} />
+      )}
+      {followed ? t('profile.unfollow') : t('profile.follow')}
+    </Button>
+  );
+}
+
+export default Follow;

package/src/UserCenter/components/user-info/social-actions/index.tsx

@@ -0,0 +1,17 @@
+import { Box } from '@mui/material';
+import Chat from './chat';
+import Follow from './follow';
+
+import { User } from '../../../../@types';
+
+// 进入这里肯定是他人的个人中心
+function SocialActions({ user }: { user: User }) {
+  return (
+    <Box sx={{ display: 'flex', gap: 1 }}>
+      <Chat user={user} />
+      <Follow />
+    </Box>
+  );
+}
+
+export default SocialActions;

package/src/UserCenter/components/user-info/user-basic-info.tsx

@@ -24,6 +24,7 @@ import UserMetadataComponent from './metadata';
 import UserStatus from './user-status';
 import UserInfo from './user-info';
 import { client } from '../../../libs/client';
+import SocialActions from './social-actions';
 
 export default function UserBasicInfo({
   user,
@@ -225,6 +226,11 @@ export default function UserBasicInfo({
           <DID did={user.did} showQrcode copyable compact={!showFullDid} responsive={!showFullDid} locale={locale} />
         </Box>
       </Box>
+      {!isMyself ? (
+        <Box sx={{ mt: 2 }}>
+          <SocialActions user={user} />
+        </Box>
+      ) : null}
       <UserMetadataComponent isMobile={isMobile} isMyself={isMyself} user={user} onSave={onSave} />
       {isMyself ? (
         <>

package/src/UserCenter/libs/locales.ts

@@ -25,10 +25,12 @@ export const translations = {
     emptyField: '未填写',
     emptyContent: '暂无内容',
     underProtected: '用户已设置隐私保护',
+    followersOnly: '用户已设置仅粉丝可见，关注用户后可查看',
     noUserFound: '未找到指定的用户',
     notificationManagement: '通知管理',
     privacyManagement: '隐私管理',
     storageManagement: 'DID Spaces',
+    userFollowers: '关注 & 粉丝',
     webhook: {
       url: '自定义URL',
       slack: 'Slack',
@@ -161,6 +163,11 @@ export const translations = {
         invalidPostalCode: '邮政编码格式不正确',
       },
       maxLinkCount: '最多可添加 {count} 个社交链接',
+      chat: '聊天',
+      follow: '关注',
+      unfollow: '取消关注',
+      follow_success: '关注成功',
+      unfollow_success: '取消关注成功',
     },
     destroyMyself: {
       title: '删除账户',
@@ -203,8 +210,10 @@ export const translations = {
     notificationManagement: 'Notifications',
     privacyManagement: 'Privacy',
     storageManagement: 'DID Spaces',
+    userFollowers: 'Following & Followers',
     emptyContent: 'Empty',
     underProtected: 'This page has protected privacy',
+    followersOnly: 'This page is only visible to followers, follow the user to view',
     noUserFound: 'No user found',
     webhook: {
       url: 'Custom url',
@@ -340,6 +349,11 @@ export const translations = {
         invalidPostalCode: 'Postal code is invalid',
       },
       maxLinkCount: 'Up to {count} social links can be added',
+      chat: 'Chat',
+      follow: 'Follow',
+      unfollow: 'Unfollow',
+      follow_success: 'Follow successfully',
+      unfollow_success: 'Unfollow successfully',
     },
     destroyMyself: {
       title: 'Delete Account',

package/src/contexts/user-followers.tsx

@@ -0,0 +1,54 @@
+import { createContext, useContext } from 'react';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useMemoizedFn } from 'ahooks';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+import useFollow from '../hooks/use-follow';
+import { translations } from '../UserCenter/libs/locales';
+
+const UserFollowersContext = createContext<UserFollowersContextType>({
+  followed: false,
+  followUser: () => {},
+  unfollowUser: () => {},
+});
+const { Provider } = UserFollowersContext;
+
+type UserFollowersContextType = {
+  followed: boolean;
+  followUser: () => void;
+  unfollowUser: () => void;
+};
+
+function UserFollowersProvider({
+  isMySelf,
+  userDid,
+  children,
+}: {
+  children: React.ReactNode;
+  isMySelf: boolean;
+  userDid: string;
+}) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const { followed, followUser, unfollowUser } = useFollow({ userDid, t, isMySelf });
+
+  return (
+    <Provider
+      value={{
+        followed,
+        followUser,
+        unfollowUser,
+      }}>
+      {children}
+    </Provider>
+  );
+}
+
+function useUserFollowersContext() {
+  const res = useContext(UserFollowersContext);
+  return res;
+}
+
+export { UserFollowersContext, useUserFollowersContext, UserFollowersProvider };

package/src/hooks/use-follow.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import Toast from '@arcblock/ux/lib/Toast';
+
+import type { AxiosError } from 'axios';
+import { client } from '../libs/client';
+import { formatAxiosError } from '../UserCenter/libs/utils';
+
+/**
+ * 登录用户与当前用户（userDid）的关注关系
+ */
+export default function useFollow({
+  userDid,
+  t,
+  isMySelf,
+}: {
+  userDid: string;
+  t: (k: string) => string;
+  isMySelf: boolean;
+}) {
+  const [followed, setFollowed] = useState(false);
+
+  const isFollowingUser = useMemoizedFn(async () => {
+    try {
+      if (isMySelf) {
+        setFollowed(true);
+        return;
+      }
+      const res = await client.user.isFollowingUser({ userDid });
+      setFollowed(res);
+    } catch (error) {
+      console.error(error);
+    }
+  });
+
+  const followUser = useMemoizedFn(async (followUserDid: string = userDid) => {
+    if (isMySelf && followUserDid === userDid) {
+      return;
+    }
+    try {
+      await client.user.followUser({ userDid: followUserDid });
+      Toast.success(t('profile.follow_success'));
+      isFollowingUser();
+    } catch (error) {
+      console.error(error);
+      Toast.error(formatAxiosError(error as AxiosError));
+    }
+  });
+  const unfollowUser = useMemoizedFn(async (unfollowUserDid: string = userDid) => {
+    if (isMySelf && unfollowUserDid === userDid) {
+      return;
+    }
+    try {
+      await client.user.unfollowUser({ userDid: unfollowUserDid });
+      Toast.success(t('profile.unfollow_success'));
+      isFollowingUser();
+    } catch (error) {
+      console.error(error);
+      Toast.error(formatAxiosError(error as AxiosError));
+    }
+  });
+
+  useEffect(() => {
+    if (userDid && !isMySelf) {
+      isFollowingUser();
+    }
+  }, [isFollowingUser, userDid, isMySelf]);
+
+  return {
+    followed,
+    followUser,
+    unfollowUser,
+  };
+}