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

#23 added is_loading to lab's head

Browse source
This commit is contained in:
Fedor Katurov 2021-03-22 17:53:28 +07:00
parent 58d5a8ee35
commit e44ad8e5c2
3 changed files with 18 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/lab/LabHead/index.tsx
View file

@ -2,16 +2,24 @@ import React, { FC } from 'react';
import styles from './styles.module.scss'; import styles from './styles.module.scss';
import { LabHeadItem } from '~/components/lab/LabHeadItem'; import { LabHeadItem } from '~/components/lab/LabHeadItem';
interface IProps {} interface IProps {
isLoading?: boolean;
}
const LabHead: FC<IProps> = () => ( const LabHead: FC<IProps> = ({ isLoading }) => (
<div className={styles.wrap}> <div className={styles.wrap}>
<div className={styles.group}> <div className={styles.group}>
<LabHeadItem icon="recent" active> <LabHeadItem icon="recent" active isLoading={isLoading}>
Свежие Свежие
</LabHeadItem> </LabHeadItem>
<LabHeadItem icon="hot">Популярные</LabHeadItem>
<LabHeadItem icon="star_full">Важные</LabHeadItem> <LabHeadItem icon="hot" isLoading={isLoading}>
Популярные
</LabHeadItem>
<LabHeadItem icon="star_full" isLoading={isLoading}>
Важные
</LabHeadItem>
</div> </div>
</div> </div>
); );

5
src/containers/lab/LabLayout/index.tsx
View file

@ -14,10 +14,13 @@ import { LabBanner } from '~/components/lab/LabBanner';
import { LabHead } from '~/components/lab/LabHead'; import { LabHead } from '~/components/lab/LabHead';
import { Filler } from '~/components/containers/Filler'; import { Filler } from '~/components/containers/Filler';
import { LabStats } from '~/containers/lab/LabStats'; import { LabStats } from '~/containers/lab/LabStats';
import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
import { selectLabList, selectLabListNodes, selectLabStatsLoading } from '~/redux/lab/selectors';
interface IProps {} interface IProps {}
const LabLayout: FC<IProps> = () => { const LabLayout: FC<IProps> = () => {
const { is_loading } = useShallowSelect(selectLabList);
const dispatch = useDispatch(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
@ -30,7 +33,7 @@ const LabLayout: FC<IProps> = () => {
<Container> <Container>
<div className={styles.wrap}> <div className={styles.wrap}>
<Group className={styles.content}> <Group className={styles.content}>
<LabHead /> <LabHead isLoading={is_loading} />
<LabGrid /> <LabGrid />
</Group> </Group>

1
src/redux/lab/selectors.ts
View file

@ -2,6 +2,7 @@ import { IState } from '~/redux/store';
export const selectLab = (state: IState) => state.lab; export const selectLab = (state: IState) => state.lab;
export const selectLabListNodes = (state: IState) => state.lab.list.nodes; export const selectLabListNodes = (state: IState) => state.lab.list.nodes;
export const selectLabList = (state: IState) => state.lab.list;
export const selectLabStatsHeroes = (state: IState) => state.lab.stats.heroes; export const selectLabStatsHeroes = (state: IState) => state.lab.stats.heroes;
export const selectLabStatsTags = (state: IState) => state.lab.stats.tags; export const selectLabStatsTags = (state: IState) => state.lab.stats.tags;
export const selectLabStatsLoading = (state: IState) => state.lab.stats.is_loading; export const selectLabStatsLoading = (state: IState) => state.lab.stats.is_loading;