From 948f3a7e04ffed2ca8319aea1ac9083d4917a8c6 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 23 Mar 2022 17:54:51 +0700
Subject: [PATCH] added lab sorting

---
 src/components/lab/LabHead/index.tsx     | 22 ++++++++++++++++------
 src/components/lab/LabHeadItem/index.tsx | 11 ++++++++---
 src/hooks/lab/useLab.ts                  | 20 ++++++++++++++++++--
 src/layouts/LabLayout/index.tsx          |  1 +
 src/layouts/LabLayout/styles.module.scss |  3 +--
 src/utils/context/LabContextProvider.tsx |  6 +++++-
 src/utils/providers/LabProvider.tsx      | 15 ++++++++++++++-
 7 files changed, 63 insertions(+), 15 deletions(-)

diff --git a/src/components/lab/LabHead/index.tsx b/src/components/lab/LabHead/index.tsx
index fe856d95..d9736154 100644
--- a/src/components/lab/LabHead/index.tsx
+++ b/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>
   );
diff --git a/src/components/lab/LabHeadItem/index.tsx b/src/components/lab/LabHeadItem/index.tsx
index e41cde2a..0acf7a1f 100644
--- a/src/components/lab/LabHeadItem/index.tsx
+++ b/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>
diff --git a/src/hooks/lab/useLab.ts b/src/hooks/lab/useLab.ts
index 31680ccc..84d9ed93 100644
--- a/src/hooks/lab/useLab.ts
+++ b/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,
+  };
 };
diff --git a/src/layouts/LabLayout/index.tsx b/src/layouts/LabLayout/index.tsx
index b5c6fb23..939529fa 100644
--- a/src/layouts/LabLayout/index.tsx
+++ b/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';
diff --git a/src/layouts/LabLayout/styles.module.scss b/src/layouts/LabLayout/styles.module.scss
index ae3133d0..920278c8 100644
--- a/src/layouts/LabLayout/styles.module.scss
+++ b/src/layouts/LabLayout/styles.module.scss
@@ -49,6 +49,5 @@
 }
 
 .head {
-  padding: 0 $gap * 0.5;
-  display: none;
+  padding: 0 $gap * 0.5 $gap * 0.5;
 }
diff --git a/src/utils/context/LabContextProvider.tsx b/src/utils/context/LabContextProvider.tsx
index cab61576..8c9163cc 100644
--- a/src/utils/context/LabContextProvider.tsx
+++ b/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);
diff --git a/src/utils/providers/LabProvider.tsx b/src/utils/providers/LabProvider.tsx
index 52dba8dd..e722c9fd 100644
--- a/src/utils/providers/LabProvider.tsx
+++ b/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>