added lab sorting

src/components/lab/LabHead/index.tsx

@@ -1,6 +1,8 @@
 import React, { FC } from 'react';
 
 import { LabHeadItem } from '~/components/lab/LabHeadItem';
+import { LabNodesSort } from '~/types/lab';
+import { useLabContext } from '~/utils/context/LabContextProvider';
 
 import styles from './styles.module.scss';
 
@@ -9,20 +11,28 @@ interface IProps {
 }
 
 const LabHead: FC<IProps> = ({ isLoading }) => {
+  const { sort, setSort } = useLabContext();
+
   return (
     <div className={styles.wrap}>
       <div className={styles.group}>
-        <LabHeadItem icon="recent" active isLoading={isLoading}>
+        <LabHeadItem
+          icon="recent"
+          active={sort === LabNodesSort.New}
+          isLoading={isLoading}
+          onClick={() => setSort(LabNodesSort.New)}
+        >
           Свежие
         </LabHeadItem>
 
-        <LabHeadItem icon="hot" isLoading={isLoading}>
+        <LabHeadItem
+          icon="hot"
+          active={sort === LabNodesSort.Hot}
+          isLoading={isLoading}
+          onClick={() => setSort(LabNodesSort.Hot)}
+        >
           Популярные
         </LabHeadItem>
-
-        <LabHeadItem icon="star_full" isLoading={isLoading}>
-          Важные
-        </LabHeadItem>
       </div>
     </div>
   );

src/components/lab/LabHeadItem/index.tsx

@@ -12,12 +12,13 @@ interface IProps {
   icon: string;
   isLoading?: boolean;
   active?: boolean;
+  onClick?: () => void;
 }
 
-const LabHeadItem: FC<IProps> = ({ icon, children, isLoading, active }) => {
+const LabHeadItem: FC<IProps> = ({ icon, children, isLoading, active, onClick }) => {
   if (isLoading) {
     return (
-      <Group horizontal className={styles.item}>
+      <Group horizontal className={styles.item} key="loading">
         <Placeholder width="32px" height={32} />
         <Placeholder width="96px" height={18} />
       </Group>
@@ -25,7 +26,11 @@ const LabHeadItem: FC<IProps> = ({ icon, children, isLoading, active }) => {
   }
 
   return (
-    <Group horizontal className={classNames(styles.item, { [styles.active]: active })}>
+    <Group
+      horizontal
+      className={classNames(styles.item, { [styles.active]: active })}
+      onClick={onClick}
+    >
       <Icon icon={icon} size={24} />
       <span className={styles.text}>{children}</span>
     </Group>

src/hooks/lab/useLab.ts

@@ -1,9 +1,25 @@
+import { useState } from 'react';
+
 import { useGetLabNodes } from '~/hooks/lab/useGetLabNodes';
 import { useGetLabStats } from '~/hooks/lab/useGetLabStats';
+import { LabNodesSort } from '~/types/lab';
 
 export const useLab = () => {
-  const { nodes, isLoading, loadMore, hasMore } = useGetLabNodes();
+  const [sort, setSort] = useState<LabNodesSort>(LabNodesSort.New);
+
+  const { nodes, isLoading, loadMore, hasMore } = useGetLabNodes(sort);
   const { tags, heroes, updates, isLoading: isLoadingStats } = useGetLabStats();
 
-  return { isLoading, nodes, hasMore, loadMore, tags, heroes, isLoadingStats, updates };
+  return {
+    isLoading,
+    nodes,
+    hasMore,
+    loadMore,
+    tags,
+    heroes,
+    isLoadingStats,
+    updates,
+    sort,
+    setSort,
+  };
 };

src/layouts/LabLayout/index.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 
+import { Superpower } from '~/components/boris/Superpower';
 import { Group } from '~/components/containers/Group';
 import { Sticky } from '~/components/containers/Sticky';
 import { LabHead } from '~/components/lab/LabHead';

src/layouts/LabLayout/styles.module.scss

@@ -49,6 +49,5 @@
 }
 
 .head {
-  padding: 0 $gap * 0.5;
+  padding: 0 $gap * 0.5 $gap * 0.5;
-  display: none;
 }

src/utils/context/LabContextProvider.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, FC, useContext } from 'react';
 
 import { IFlowNode, ITag } from '~/types';
-import { ILabNode } from '~/types/lab';
+import { ILabNode, LabNodesSort } from '~/types/lab';
 
 export interface LabContextProps {
   isLoading: boolean;
@@ -13,6 +13,8 @@ export interface LabContextProps {
   heroes: IFlowNode[];
   isLoadingStats: boolean;
   updates: IFlowNode[];
+  sort: LabNodesSort;
+  setSort: (sort: LabNodesSort) => void;
 }
 
 const defaultValues: LabContextProps = {
@@ -24,6 +26,8 @@ const defaultValues: LabContextProps = {
   heroes: [],
   isLoadingStats: false,
   updates: [],
+  sort: LabNodesSort.New,
+  setSort: () => {},
 };
 
 const LabContext = createContext<LabContextProps>(defaultValues);

src/utils/providers/LabProvider.tsx

@@ -6,7 +6,18 @@ import { LabContextProvider } from '~/utils/context/LabContextProvider';
 interface LabProviderProps {}
 
 const LabProvider: FC<LabProviderProps> = ({ children }) => {
-  const { isLoading, nodes, loadMore, hasMore, tags, heroes, isLoadingStats, updates } = useLab();
+  const {
+    isLoading,
+    nodes,
+    loadMore,
+    hasMore,
+    tags,
+    heroes,
+    isLoadingStats,
+    updates,
+    sort,
+    setSort,
+  } = useLab();
 
   return (
     <LabContextProvider
@@ -18,6 +29,8 @@ const LabProvider: FC<LabProviderProps> = ({ children }) => {
       heroes={heroes}
       isLoadingStats={isLoadingStats}
       updates={updates}
+      sort={sort}
+      setSort={setSort}
     >
       {children}
     </LabContextProvider>