File size: 3,355 Bytes
b6c8684 598945f 68ed806 b6c8684 68ed806 b6c8684 68ed806 598945f 68ed806 bb69456 b6c8684 68ed806 b6c8684 68ed806 bb69456 68ed806 b6c8684 68ed806 b6c8684 4d7a211 b6c8684 4d7a211 b6c8684 68ed806 bb69456 68ed806 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
import { useInfiniteFetchKnowledgeList } from '@/hooks/knowledge-hooks';
import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
import {
Button,
Divider,
Empty,
Flex,
Input,
Skeleton,
Space,
Spin,
} from 'antd';
import { useTranslation } from 'react-i18next';
import InfiniteScroll from 'react-infinite-scroll-component';
import { useSaveKnowledge } from './hooks';
import KnowledgeCard from './knowledge-card';
import KnowledgeCreatingModal from './knowledge-creating-modal';
import { useMemo } from 'react';
import styles from './index.less';
const KnowledgeList = () => {
const { data: userInfo } = useFetchUserInfo();
const { t } = useTranslation('translation', { keyPrefix: 'knowledgeList' });
const {
visible,
hideModal,
showModal,
onCreateOk,
loading: creatingLoading,
} = useSaveKnowledge();
const {
fetchNextPage,
data,
hasNextPage,
searchString,
handleInputChange,
loading,
} = useInfiniteFetchKnowledgeList();
console.log('🚀 ~ KnowledgeList ~ data:', data);
const nextList = data?.pages?.flatMap((x) => x.kbs) ?? [];
const total = useMemo(() => {
return data?.pages.at(-1).total ?? 0;
}, [data?.pages]);
return (
<Flex className={styles.knowledge} vertical flex={1} id="scrollableDiv">
<div className={styles.topWrapper}>
<div>
<span className={styles.title}>
{t('welcome')}, {userInfo.nickname}
</span>
<p className={styles.description}>{t('description')}</p>
</div>
<Space size={'large'}>
<Input
placeholder={t('searchKnowledgePlaceholder')}
value={searchString}
style={{ width: 220 }}
allowClear
onChange={handleInputChange}
prefix={<SearchOutlined />}
/>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={showModal}
className={styles.topButton}
>
{t('createKnowledgeBase')}
</Button>
</Space>
</div>
<Spin spinning={loading}>
<InfiniteScroll
dataLength={nextList?.length ?? 0}
next={fetchNextPage}
hasMore={hasNextPage}
loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
endMessage={total && <Divider plain>{t('noMoreData')} 🤐</Divider>}
scrollableTarget="scrollableDiv"
>
<Flex
gap={'large'}
wrap="wrap"
className={styles.knowledgeCardContainer}
>
{nextList?.length > 0 ? (
nextList.map((item: any, index: number) => {
return (
<KnowledgeCard
item={item}
key={`${item?.name}-${index}`}
></KnowledgeCard>
);
})
) : (
<Empty className={styles.knowledgeEmpty}></Empty>
)}
</Flex>
</InfiniteScroll>
</Spin>
<KnowledgeCreatingModal
loading={creatingLoading}
visible={visible}
hideModal={hideModal}
onOk={onCreateOk}
></KnowledgeCreatingModal>
</Flex>
);
};
export default KnowledgeList;
|