#23 lab stats

src/containers/lab/LabLayout/index.tsx

@@ -5,7 +5,7 @@ import { Sticky } from '~/components/containers/Sticky';
 import { Container } from '~/containers/main/Container';
 import { LabGrid } from '~/containers/lab/LabGrid';
 import { useDispatch } from 'react-redux';
-import { labGetList } from '~/redux/lab/actions';
+import { labGetList, labGetStats } from '~/redux/lab/actions';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { Grid } from '~/components/containers/Grid';
 import { Group } from '~/components/containers/Group';
@@ -13,6 +13,7 @@ import { LabHero } from '~/components/lab/LabHero';
 import { LabBanner } from '~/components/lab/LabBanner';
 import { LabHead } from '~/components/lab/LabHead';
 import { Filler } from '~/components/containers/Filler';
+import { LabStats } from '~/containers/lab/LabStats';
 
 interface IProps {}
 
@@ -21,6 +22,7 @@ const LabLayout: FC<IProps> = () => {
 
   useEffect(() => {
     dispatch(labGetList());
+    dispatch(labGetStats());
   }, [dispatch]);
 
   return (
@@ -34,73 +36,7 @@ const LabLayout: FC<IProps> = () => {
 
           <div className={styles.panel}>
             <Sticky>
-              <Group>
-                <LabBanner />
-
-                <Card>
-                  <Group>
-                    <Placeholder height={36} width="100%" />
-                    <Group horizontal>
-                      <Filler />
-                      <Placeholder height={32} width="120px" />
-                    </Group>
-
-                    <div />
-                    <div />
-
-                    <Placeholder height={14} width="100px" />
-
-                    <div />
-
-                    <div className={styles.tags}>
-                      <Placeholder height={20} width="100px" />
-                      <Placeholder height={20} width="64px" />
-                      <Placeholder height={20} width="100%" />
-                      <Placeholder height={20} width="100px" />
-                      <Placeholder height={20} width="100px" />
-                      <Placeholder height={20} width="64px" />
-                    </div>
-
-                    <div />
-                    <div />
-
-                    <Placeholder height={14} width="180px" />
-
-                    <div />
-
-                    <Group className={styles.heroes}>
-                      <LabHero />
-                      <div />
-                      <LabHero />
-                      <div />
-                      <LabHero />
-                      <div />
-                      <LabHero />
-                      <div />
-                      <LabHero />
-                      <div />
-                      <LabHero />
-                      <div />
-                      <LabHero />
-                    </Group>
-
-                    <div />
-                    <div />
-
-                    <Group>
-                      <Placeholder width="100%" height={100} />
-                      <Placeholder width="120px" height={16} />
-                    </Group>
-
-                    <div />
-
-                    <Group>
-                      <Placeholder width="100%" height={100} />
-                      <Placeholder width="120px" height={16} />
-                    </Group>
-                  </Group>
-                </Card>
-              </Group>
+              <LabStats />
             </Sticky>
           </div>
         </div>

src/containers/lab/LabStats/index.tsx

@@ -0,0 +1,60 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { LabBanner } from '~/components/lab/LabBanner';
+import { Card } from '~/components/containers/Card';
+import { Group } from '~/components/containers/Group';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { Filler } from '~/components/containers/Filler';
+import { LabHero } from '~/components/lab/LabHero';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import {
+  selectLabStatsHeroes,
+  selectLabStatsLoading,
+  selectLabStatsTags,
+} from '~/redux/lab/selectors';
+import { LabTags } from '~/components/lab/LabTags';
+import { LabHeroes } from '~/components/lab/LabHeroes';
+
+interface IProps {}
+
+const LabStats: FC<IProps> = () => {
+  const tags = useShallowSelect(selectLabStatsTags);
+  const heroes = useShallowSelect(selectLabStatsHeroes);
+  const isLoading = useShallowSelect(selectLabStatsLoading);
+
+  return (
+    <Group>
+      <LabBanner />
+
+      <Card>
+        <Group>
+          {isLoading ? (
+            <Placeholder height={14} width="100px" />
+          ) : (
+            <div className={styles.title}>Тэги</div>
+          )}
+
+          <div className={styles.tags}>
+            <LabTags tags={tags} isLoading={isLoading} />
+          </div>
+
+          <div />
+          <div />
+          <div />
+
+          {isLoading ? (
+            <Placeholder height={14} width="100px" />
+          ) : (
+            <div className={styles.title}>Важные</div>
+          )}
+
+          <div className={styles.heroes}>
+            <LabHeroes nodes={heroes} isLoading={isLoading} />
+          </div>
+        </Group>
+      </Card>
+    </Group>
+  );
+};
+
+export { LabStats };

src/containers/lab/LabStats/styles.module.scss

@@ -0,0 +1,17 @@
+@import "~/styles/variables.scss";
+
+.title {
+  font: $font_14_semibold;
+  color: darken(white, 50%);
+  text-transform: uppercase;
+  padding: 0 $gap / 2;
+  padding-bottom: $gap / 2;
+}
+
+.tags.tags {
+  margin: 0 -$gap / 2;
+}
+
+.heroes {
+  margin-top: -$gap;
+}