muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

using SWR in tag list

Browse source
This commit is contained in:
Fedor Katurov 2022-01-03 12:52:40 +07:00
parent 11a9aff8b6
commit 11b39b8766
4 changed files with 57 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/containers/sidebars/TagSidebar/index.tsx
View file

@ -1,29 +1,16 @@
import React, { FC, useCallback, useEffect, useMemo } from 'react';
import React, { useCallback, useMemo, VFC } from 'react';
import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper';
import styles from './styles.module.scss';
import { useHistory, useRouteMatch } from 'react-router';
import { Icon } from '~/components/input/Icon';
import { Link } from 'react-router-dom';
import { TagSidebarList } from '~/components/sidebar/TagSidebarList';
import { connect } from 'react-redux';
import { selectTagNodes } from '~/redux/tag/selectors';
import * as ACTIONS from '~/redux/tag/actions';
import { LoaderCircle } from '~/components/input/LoaderCircle';
import { InfiniteScroll } from '~/components/containers/InfiniteScroll';
import { Tag } from '~/components/tags/Tag';
import { useTagNodes } from '~/hooks/tag/useTagNodes';
const mapStateToProps = state => ({
nodes: selectTagNodes(state),
});
const mapDispatchToProps = {
tagLoadNodes: ACTIONS.tagLoadNodes,
tagSetNodes: ACTIONS.tagSetNodes,
};
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
const TagSidebarUnconnected: FC<Props> = ({ nodes, tagLoadNodes, tagSetNodes }) => {
const TagSidebar: VFC = () => {
const {
params: { tag },
url,
@ -32,41 +19,19 @@ const TagSidebarUnconnected: FC<Props> = ({ nodes, tagLoadNodes, tagSetNodes })
const basePath = url.replace(new RegExp(`\/tag\/${tag}$`), '');
const onClose = useCallback(() => history.push(basePath), [basePath, history]);
useEffect(() => {
tagLoadNodes(tag);
return () => {
tagSetNodes({ list: [], count: 0 });
};
}, [tag, tagLoadNodes, tagSetNodes]);
const loadMore = useCallback(() => {
if (nodes.isLoading) return;
tagLoadNodes(tag);
}, [tagLoadNodes, tag, nodes.isLoading]);
const { nodes, hasMore, isLoading, loadMore } = useTagNodes(tag);
const title = useMemo(() => decodeURIComponent(tag), [tag]);
const progress = nodes.count > 0 ? `${(nodes.list.length / nodes.count) * 100}%` : '0';
const hasMore = nodes.count > nodes.list.length;
return (
<SidebarWrapper onClose={onClose}>
<div className={styles.wrap}>
<div className={styles.content}>
<div className={styles.head}>
{nodes.count > 0 && (
<div className={styles.progress}>
<div className={styles.bar} style={{ width: progress }} />
</div>
)}
<div className={styles.tag}>
<Tag tag={{ title }} size="big" />
</div>
{nodes.isLoading && (
{isLoading && (
<div className={styles.sync}>
<LoaderCircle size={20} />
</div>
@ -79,7 +44,7 @@ const TagSidebarUnconnected: FC<Props> = ({ nodes, tagLoadNodes, tagSetNodes })
</div>
</div>
{!nodes.count && !nodes.isLoading ? (
{!nodes.length && !isLoading ? (
<div className={styles.none}>
<Icon icon="sad" size={120} />
<div>
@ -91,7 +56,7 @@ const TagSidebarUnconnected: FC<Props> = ({ nodes, tagLoadNodes, tagSetNodes })
</div>
) : (
<InfiniteScroll hasMore={hasMore} loadMore={loadMore} className={styles.list}>
<TagSidebarList nodes={nodes.list} />
<TagSidebarList nodes={nodes} />
</InfiniteScroll>
)}
</div>
@ -100,6 +65,4 @@ const TagSidebarUnconnected: FC<Props> = ({ nodes, tagLoadNodes, tagSetNodes })
);
};
const TagSidebar = connect(mapStateToProps, mapDispatchToProps)(TagSidebarUnconnected);
export { TagSidebar };