chore: stash

BuidlerDAO · Mar 26, 2024 · d2a59ca · d2a59ca
1 parent ecc10b6
commit d2a59ca
Show file tree

Hide file tree

Showing 11 changed files with 185 additions and 45 deletions.
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -27,7 +27,7 @@ const Close = () => (
 
 const Modal = (props: ExtraModalProps) => {
   return (
-    <MModal {...props}>
+    <MModal disableScrollLock={true} {...props}>
       <div
         style={{
           position: 'absolute',

diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts
@@ -6,26 +6,28 @@ import { getMessagesByRoom, NewMessage, SendMessage } from '../service/room';
 export default function useWebSocket(user: string, room?: string) {
   const [messages, setMessages] = useState<NewMessage[]>([]);
   const [socket, setSocket] = useState<Socket>();
+
+  // 建立 socket
   useEffect(() => {
     if (room == null) return;
     const socket = io(import.meta.env.VITE_SOCKET_bASE_URL, {
       autoConnect: false,
       query: { user, room },
     });
     socket.connect();
-    // socket.on('connect', () => {
-    //   socket.send()
-    // });
     setSocket(socket);
     return () => {
+      setMessages([]);
       socket.disconnect();
     };
   }, [room, user]);
 
+  // 处理新消息
   useEffect(() => {
     socket?.on('newMessage', (data: NewMessage) => {
+      // 标记已读
+      socket?.emit('readMessage', { id: data.id });
       const msgs = [...messages, data];
-      console.log('receive', data);
       msgs.sort((a, b) => +a.id - +b.id);
       setMessages(msgs);
     });

diff --git a/src/service/community/community.d.ts b/src/service/community/community.d.ts
@@ -1,8 +1,25 @@
 interface Community {
   subject: string;
-  ownerUser: UserInfo;
+  ownerUser: {
+    address: string;
+    avatar: string;
+    twitterId: string;
+    username: string;
+  };
   stakedShares: string;
   requiredStakedShares: string;
   // 0=locked, 1=unlocked
   status: 0 | 1;
 }
+
+interface CommunityUserInfo {
+  twitterId: string;
+  username: string;
+  avatar: string;
+  address: string;
+  shares: string;
+  stakedShares: string;
+  isBlocked: boolean;
+  allowChat: boolean;
+  communityUnlocked: boolean;
+}
diff --git a/src/service/community/index.ts b/src/service/community/index.ts
@@ -1,8 +1,48 @@
 import http, { ResultData } from '../request';
 
+// 获取社区列表
 export async function getList(status: 0 | 1) {
   const response = await http.get<ResultData<ItemsResponse<Community>>>('/api/community/mine', {
     status,
   });
   return response.data.items;
 }
+
+// 获取我在这个 subject 社区里的用户信息
+export async function getMyInfo(subject: string) {
+  const response = await http.get<ResultData<CommunityUserInfo>>('/api/community/user/me', {
+    subject,
+  });
+  return response.data;
+}
+
+export async function getUserList(subject: string) {
+  const response = await http.get<ResultData<ItemsResponse<CommunityUserInfo>>>(
+    '/api/community/users',
+    {
+      subject,
+    }
+  );
+  return response.data.items;
+}
+
+export async function getUserCount(subject: string) {
+  const response = await http.get<ResultData<ItemsResponse<CommunityUserInfo>>>(
+    '/api/community/users',
+    {
+      subject,
+      limit: 0,
+    }
+  );
+  return response.data.total;
+}
+
+// 封禁/解封指定社区的用户
+export async function blockUser(ownerAddress: string, userAddress: string, isBlocked: boolean) {
+  const response = await http.post<ResultData<null>>('/api/community/user/block', {
+    ownerAddress,
+    userAddress,
+    isBlocked,
+  });
+  return response.data;
+}
diff --git a/src/service/request.ts b/src/service/request.ts
@@ -47,7 +47,7 @@ const contractConfig = {
   withCredentials: true,
 };
 
-const roomConfig = {
+const chatConfig = {
   // 默认地址请求地址，可在 .env.** 文件中修改
   baseURL: import.meta.env.VITE_ROOM_bASE_URL,
   // 设置超时时间
@@ -173,4 +173,4 @@ class RequestHttp {
 
 export default new RequestHttp(config);
 export const contractRequestHttp = new RequestHttp(contractConfig);
-export const roomRequestHttp = new RequestHttp(roomConfig);
+export const roomRequestHttp = new RequestHttp(chatConfig);
diff --git a/src/service/room/index.tsx b/src/service/room/index.tsx
@@ -16,7 +16,7 @@ export type NewMessage = {
   image: string;
   room: string;
   sender: string;
-  createTime: number;
+  createTime: string;
   id: string;
 };
 

diff --git a/src/welcome/Profile/Community.tsx b/src/welcome/Profile/Community.tsx
@@ -24,7 +24,6 @@ const Community = () => {
       let len = 0;
       items.forEach((item) => {
         getMessagesByRoom(item.subject, { count: 1 }).then((msgs) => {
-          console.log(111);
           item.lastMsg = msgs[0];
           len++;
           if (len === items.length) {
@@ -139,7 +138,7 @@ const Community = () => {
     );
   }
   return (
-    <div className="xfans-scrollbar relative flex min-h-0 flex-1 flex-col overflow-y-auto px-4">
+    <div className="xfans-scrollbar relative flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden px-4">
       {renderUnlocked()}
       {renderLocked()}
       {selectedCommunity && selectedCommunity.status === 0 && (

diff --git a/src/welcome/Profile/Explore.tsx b/src/welcome/Profile/Explore.tsx
@@ -120,7 +120,7 @@ const Explore = () => {
                 sx={{
                   padding: 0,
                 }}
-                className="flex-1 overflow-y-auto"
+                className="xfans-scrollbar flex-1 overflow-y-auto"
               >
                 <ul>
                   {topList?.map((item, i) => (
@@ -163,7 +163,7 @@ const Explore = () => {
                 sx={{
                   padding: 0,
                 }}
-                className="flex-1 overflow-y-auto"
+                className="xfans-scrollbar flex-1 overflow-y-auto"
               >
                 <ul>
                   {newList?.map((item, i) => (
@@ -205,7 +205,7 @@ const Explore = () => {
                 sx={{
                   padding: 0,
                 }}
-                className="flex-1 overflow-y-auto"
+                className="xfans-scrollbar flex-1 overflow-y-auto"
               >
                 <ul>
                   {recentList?.map((item, i) => (
@@ -255,7 +255,7 @@ const Explore = () => {
                 sx={{
                   padding: 0,
                 }}
-                className="flex-1 overflow-y-auto"
+                className="xfans-scrollbar flex-1 overflow-y-auto"
               >
                 <ul>
                   {shareList?.map((item, i: any) => (

diff --git a/src/welcome/Profile/community/ChatRoomDrawer.tsx b/src/welcome/Profile/community/ChatRoomDrawer.tsx
@@ -1,9 +1,12 @@
-import React, { DragEvent, SVGProps, useRef, useState } from 'react';
+import React, { DragEvent, SVGProps, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Drawer } from '@mui/material';
+import { useRequest } from 'ahooks';
+import dayjs from 'dayjs';
 
 import ArrowBackIcon from '../../../components/icons/ArrowBackIcon';
 import useAccount from '../../../hooks/useAccount';
 import useWebSocket from '../../../hooks/useSocket';
+import { getMyInfo, getUserCount } from '../../../service/community';
 import { NewMessage, SendMessage } from '../../../service/room';
 
 import MembersDrawer from './MembersDrawer';
@@ -20,6 +23,29 @@ export default function ChatRoomDrawer({ open = false, community, onClose }: Pro
   const [isMembersDrawerOpen, setIsMembersDrawerOpen] = useState(false);
   const { wallet } = useAccount();
   const { messages, sendMessage } = useWebSocket(wallet, community?.subject);
+  const ref = useRef<HTMLDivElement>(null);
+  const { data: userCount = 0, run: runGetUserCount } = useRequest(
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    () => getUserCount(community!.subject),
+    {
+      manual: true,
+    }
+  );
+  const { data: myInfo, run: runGetMyInfo } = useRequest(() => getMyInfo(community!.subject), {
+    manual: true,
+  });
+
+  useLayoutEffect(() => {
+    if (ref.current == null) return;
+    ref.current.scrollTop = 999999999;
+  });
+
+  useEffect(() => {
+    if (open) {
+      runGetUserCount();
+      runGetMyInfo();
+    }
+  }, [open, runGetMyInfo, runGetUserCount]);
 
   function renderMessages() {
     return messages.map((msg) => {
@@ -47,29 +73,37 @@ export default function ChatRoomDrawer({ open = false, community, onClose }: Pro
         <header className="flex h-[64px] items-center justify-between  px-[16px] ">
           <div className="flex items-center font-bold text-[#0F1419]">
             <ArrowBackIcon className="cursor-pointer" onClick={onClose} />
-            <span className="ml-[8px]">Devon‘ Community</span>
+            <span className="ml-[8px]">{community?.ownerUser.username}‘ Community</span>
           </div>
           <div className="flex leading-none">
             <div
               className="flex cursor-pointer items-center rounded-full border border-[#9A6CF9] px-[8px] py-[4px] font-medium"
               onClick={() => setIsMembersDrawerOpen(true)}
             >
-              <MembersIcon /> <span className="ml-[2px] text-[#0F1419]">24</span>
+              <MembersIcon /> <span className="ml-[2px] text-[#0F1419]">{userCount}</span>
             </div>
             <div
               className="ml-[18px] flex cursor-pointer items-center rounded-full border border-[#9A6CF9] px-[8px] py-[4px] font-medium"
               onClick={() => setIsStackModalOpen(true)}
             >
-              <FireIcon /> <span className="ml-[2px] text-[#0F1419]">Stack</span>
+              <FireIcon /> <span className="ml-[2px] text-[#0F1419]">Stake</span>
             </div>
           </div>
         </header>
-        <div className="xfans-scrollbar flex-1 overflow-y-auto px-[16px]">{renderMessages()}</div>
+        <div ref={ref} className="xfans-scrollbar relative flex-1 overflow-y-auto px-[16px]">
+          <UnreadBanner />
+          {renderMessages()}
+        </div>
         <SendMessageBox sendMessage={sendMessage} />
         {isStackModalOpen && community && (
           <StackModal community={community} onClose={() => setIsStackModalOpen(false)} />
         )}
-        <MembersDrawer open={isMembersDrawerOpen} onClose={() => setIsMembersDrawerOpen(false)} />
+        <MembersDrawer
+          isOwner={myInfo?.address === community?.subject}
+          open={isMembersDrawerOpen}
+          subject={community?.subject}
+          onClose={() => setIsMembersDrawerOpen(false)}
+        />
       </div>
     </Drawer>
   );
@@ -86,6 +120,14 @@ function FireIcon() {
   );
 }
 
+function UnreadBanner() {
+  return (
+    <div className="absolute top-0 left-0 w-full bg-[#D9D9D9]">
+      自从 Jan 05 2024,14：34以来，有30条未读新消息
+    </div>
+  );
+}
+
 function MessageFromMeItem({ msg }: { msg: NewMessage }) {
   return (
     <div className="mt-[39px] flex items-start justify-end">
@@ -94,7 +136,9 @@ function MessageFromMeItem({ msg }: { msg: NewMessage }) {
           {msg.image && <img src={msg.image} alt="pic" className="mb-[16px]" />}
           {msg.message}
         </div>
-        <span className="mt-[6px] text-xs text-[#A6A6A9]">Jan 05 2024, 14:32</span>
+        <span className="mt-[6px] text-xs text-[#A6A6A9]">
+          {dayjs(msg.createTime).format('YYYY/MM/DD HH:mm')}
+        </span>
       </div>
       <img
         className="ml-[12px] w-[44px] rounded-full"
@@ -120,7 +164,9 @@ function MessageFromOtherItem({ msg }: { msg: NewMessage }) {
             {msg.message}
           </div>
         </div>
-        <span className="mt-[6px] text-xs text-[#A6A6A9]">Jan 05 2024, 14:32</span>
+        <span className="mt-[6px] text-xs text-[#A6A6A9]">
+          {dayjs(msg.createTime).format('YYYY/MM/DD HH:mm')}
+        </span>
       </div>
     </div>
   );
@@ -162,7 +208,7 @@ function SendMessageBox({ sendMessage }: SendMessageBoxProps) {
   }
   return (
     <div
-      className="w-[calc(100% - 32px)] mx-[16px] mb-[24px] flex overflow-hidden rounded-[30px] bg-white"
+      className="w-[calc(100% - 32px)] mx-[16px] mt-[16px] mb-[24px] flex overflow-hidden rounded-[30px] bg-white"
       style={{ boxShadow: '5px 4px 20px 0px rgba(0, 0, 0, 0.13)' }}
       onDrop={handleDrop}
     >