feat: mark one or all message (#24)

Author: thonatos

src/component/MessageList/index.less

@@ -1,3 +1,5 @@
+@import '~antd/dist/antd.less';
+
 .list {
   :global {
     .ant-card {
@@ -8,3 +10,11 @@
     }
   }
 }
+
+.link {
+  color: @text-color;
+
+  &:hover {
+    color: @primary-color;
+  }
+}

src/component/MessageList/index.tsx

@@ -9,7 +9,12 @@ import { MESSAGE_TYPE_MAP, MessageType } from '@/constants';
 
 import * as styles from './index.less';
 
-const MessageList: React.FC<Props> = ({ dataSource, loading, toolbar }) => {
+const MessageList: React.FC<Props> = ({
+  dataSource,
+  loading,
+  toolbar,
+  onClick,
+}) => {
   const metas: ProListMetas = {
     avatar: {
       dataIndex: 'author.avatar_url',
@@ -25,7 +30,7 @@ const MessageList: React.FC<Props> = ({ dataSource, loading, toolbar }) => {
                 width: '200px',
               }}
             >
-              <Link to={`/user/${loginname}`}>
+              <Link to={`/user/${loginname}`} className={styles.link}>
                 <Space size={8}>
                   <Avatar size="small" src={avatar_url} />
                   <span>{loginname}</span>
@@ -43,9 +48,20 @@ const MessageList: React.FC<Props> = ({ dataSource, loading, toolbar }) => {
       valueType: 'text',
       render: (_, entity: MessageModel) => {
         const {
+          id: messageId,
           topic: { id, title },
         } = entity;
-        return <Link to={`/topic/${id}`}>{title}</Link>;
+        return (
+          <Link
+            to={`/topic/${id}`}
+            className={styles.link}
+            onClick={() => {
+              onClick && onClick(messageId);
+            }}
+          >
+            {title}
+          </Link>
+        );
       },
     },
     actions: {
@@ -74,4 +90,5 @@ interface Props {
   dataSource?: MessageModel[];
   loading?: boolean;
   toolbar?: ListToolBarProps;
+  onClick?: (id: string) => void;
 }

src/component/TopicList/index.less

@@ -1,3 +1,5 @@
+@import '~antd/dist/antd.less';
+
 .list {
   :global {
     .ant-card {
@@ -8,3 +10,11 @@
     }
   }
 }
+
+.link {
+  color: @text-color;
+
+  &:hover {
+    color: @primary-color;
+  }
+}

src/component/TopicList/index.tsx

@@ -58,7 +58,11 @@ const TopicList: React.FC<Props> = ({ dataSource, loading, toolbar }) => {
       valueType: 'text',
       render: (_, entity: TopicModel) => {
         const { id, title } = entity;
-        return <Link to={`/topic/${id}`}>{title}</Link>;
+        return (
+          <Link to={`/topic/${id}`} className={styles.link}>
+            {title}
+          </Link>
+        );
       },
     },
     actions: {

src/model/message.ts

@@ -45,5 +45,34 @@ export default () => {
     setUnreadMessage(data.hasnot_read_messages);
   }, [token]);
 
-  return { count, message, unreadMessage, load, fetch };
+  const mark = useCallback(
+    async (id: string) => {
+      if (!token) {
+        return;
+      }
+
+      await API.markMessage(id, {
+        accesstoken: token,
+      });
+
+      load();
+      fetch();
+    },
+    [token],
+  );
+
+  const markAll = useCallback(async () => {
+    if (!token) {
+      return;
+    }
+
+    await API.markAllMessage({
+      accesstoken: token,
+    });
+
+    load();
+    fetch();
+  }, [token]);
+
+  return { count, message, unreadMessage, load, fetch, mark, markAll };
 };

src/page/message/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { useModel } from 'umi';
-import { Divider } from 'antd';
+import { Divider, Button } from 'antd';
 import ProCard from '@ant-design/pro-card';
 import MessageList from '@/component/MessageList';
 
 const MessagePage: React.FC<Props> = (props) => {
-  const { message, unreadMessage } = useModel('message');
+  const { message, unreadMessage, mark, markAll } = useModel('message');
 
   console.debug('===message', message);
   console.debug('===unreadMessage', unreadMessage);
@@ -15,12 +15,30 @@ const MessagePage: React.FC<Props> = (props) => {
       return <span>暂无新消息</span>;
     }
 
-    return <MessageList dataSource={unreadMessage} />;
+    return (
+      <MessageList dataSource={unreadMessage} onClick={(id) => mark(id)} />
+    );
   };
 
   return (
     <div>
-      <ProCard title="未读消息">{renderUnreadMessage()}</ProCard>
+      <ProCard
+        title="未读消息"
+        extra={
+          <Button
+            size="small"
+            type="primary"
+            disabled={unreadMessage?.length === 0}
+            onClick={() => {
+              markAll();
+            }}
+          >
+            标记全部
+          </Button>
+        }
+      >
+        {renderUnreadMessage()}
+      </ProCard>
       <Divider />
       <ProCard title="已读消息">
         <MessageList dataSource={message} />

src/service/message.ts

@@ -29,6 +29,37 @@ export const getMessages = async (params: {
   return res;
 };
 
+export const markMessage = async (
+  id: string,
+  data: {
+    accesstoken: string;
+  },
+) => {
+  const options: any = {
+    method: 'POST',
+    data,
+  };
+  const res: any = await request(
+    `${BASE_URL}/api/v1/message/mark_one/${id}`,
+    options,
+  );
+
+  return res;
+};
+
+export const markAllMessage = async (data: { accesstoken: string }) => {
+  const options: any = {
+    method: 'POST',
+    data,
+  };
+  const res: any = await request(
+    `${BASE_URL}/api/v1/message/mark_all`,
+    options,
+  );
+
+  return res;
+};
+
 interface MessageCollection {
   has_read_messages: MessageModel[];
   hasnot_read_messages: MessageModel[];