import React, { useEffect, useState, useCallback } from 'react'; import { Tag, message } from 'antd'; import { groupBy } from 'lodash'; import moment from 'moment'; import { useModel } from 'umi'; import { queryNotices } from '@/services/user'; import NoticeIcon from './NoticeIcon'; import styles from './index.less'; const getNoticeData = ( notices: API.NoticeIconData[], ): { [key: string]: API.NoticeIconData[]; } => { if (!notices || notices.length === 0 || !Array.isArray(notices)) { return {}; } const newNotices = notices.map((notice) => { const newNotice = { ...notice }; if (newNotice.datetime) { newNotice.datetime = moment(notice.datetime as string).fromNow(); } if (newNotice.id) { newNotice.key = newNotice.id; } if (newNotice.extra && newNotice.status) { const color = { todo: '', processing: 'blue', urgent: 'red', doing: 'gold', }[newNotice.status]; newNotice.extra = ( {newNotice.extra} ); } return newNotice; }); return groupBy(newNotices, 'type'); }; const getUnreadData = (noticeData: { [key: string]: API.NoticeIconData[] }) => { const unreadMsg: { [key: string]: number; } = {}; Object.keys(noticeData).forEach((key) => { const value = noticeData[key]; if (!unreadMsg[key]) { unreadMsg[key] = 0; } if (Array.isArray(value)) { unreadMsg[key] = value.filter((item) => !item.read).length; } }); return unreadMsg; }; export interface GlobalHeaderRightProps { fetchingNotices?: boolean; onNoticeVisibleChange?: (visible: boolean) => void; onNoticeClear?: (tabName?: string) => void; } const NoticeIconView = () => { const { initialState } = useModel('@@initialState'); const { currentUser } = initialState || {}; const [notices, setNotices] = useState([]); useEffect(() => { queryNotices().then(({ data }) => setNotices(data)); }, []); const noticeData = getNoticeData(notices); const unreadMsg = getUnreadData(noticeData || {}); const changeReadState = useCallback((id: string) => { setNotices( notices.map((item) => { const notice = { ...item }; if (notice.id === id) { notice.read = true; } return notice; }), ); }, []); const clearReadState = (title: string, key: string) => { setNotices( notices.map((item) => { const notice = { ...item }; if (notice.type === key) { notice.read = true; } return notice; }), ); message.success(`${'清空了'} ${title}`); }; return ( { changeReadState(item.id); }} onClear={(title: string, key: string) => clearReadState(title, key)} loading={false} clearText="清空" viewMoreText="查看更多" onViewMore={() => message.info('Click on view more')} clearClose > ); }; export default NoticeIconView;