Merge pull request #288 from blockscout/sorting-menu

Sorting menu

ui/shared/SortButton.tsx

@@ -4,12 +4,12 @@ import React from 'react';
 import upDownArrow from 'icons/arrows/up-down.svg';
 
 type Props = {
-  handleSort: () => void;
-  isSortActive: boolean;
+  onClick: () => void;
+  isActive: boolean;
   className?: string;
 }
 
-const SortButton = ({ handleSort, isSortActive, className }: Props) => {
+const SortButton = ({ onClick, isActive, className }: Props) => {
   return (
     <IconButton
       icon={ <Icon as={ upDownArrow } boxSize={ 5 }/> }
@@ -18,8 +18,8 @@ const SortButton = ({ handleSort, isSortActive, className }: Props) => {
       variant="outline"
       colorScheme="gray-dark"
       minWidth="36px"
-      onClick={ handleSort }
-      isActive={ isSortActive }
+      onClick={ onClick }
+      isActive={ isActive }
       className={ className }
     />
   );

ui/txs/TxsContent.tsx

@@ -10,11 +10,11 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 // import FilterInput from 'ui/shared/FilterInput';
 import Pagination from 'ui/shared/Pagination';
-import SortButton from 'ui/shared/SortButton';
 
 // import TxsFilters from './TxsFilters';
 import TxsSkeletonDesktop from './TxsSkeletonDesktop';
 import TxsSkeletonMobile from './TxsSkeletonMobile';
+import TxsSorting from './TxsSorting';
 import TxsWithSort from './TxsWithSort';
 import useQueryWithPages from './useQueryWithPages';
 
@@ -55,10 +55,10 @@ const TxsContent = ({
           newVal = 'fee-desc';
         }
       }
-      cookies.set(cookies.NAMES.TXS_SORT, newVal || '');
+      cookies.set(cookies.NAMES.TXS_SORT, newVal);
       return newVal;
     });
-  }, [ setSorting ]);
+  }, [ ]);
 
   const {
     data,
@@ -106,11 +106,11 @@ const TxsContent = ({
           appliedFiltersNum={ 0 }
         /> */ }
         { isMobile && (
-          <SortButton
+          <TxsSorting
             // eslint-disable-next-line react/jsx-no-bind
-            handleSort={ () => {} }
-            isSortActive={ Boolean(sorting) }
-            display={{ base: 'block', lg: 'none' }}
+            isActive={ Boolean(sorting) }
+            setSorting={ setSorting }
+            sorting={ sorting }
           />
         ) }
         { /* api is not implemented */ }

ui/txs/TxsSorting.tsx

+import {
+  chakra,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuOptionGroup,
+  MenuItemOption,
+  useDisclosure,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import type { Sort } from 'types/client/txs-sort';
+
+import * as cookies from 'lib/cookies';
+import SortButton from 'ui/shared/SortButton';
+
+interface Props {
+  isActive: boolean;
+  sorting: Sort;
+  setSorting: (val: Sort | ((val: Sort) => Sort)) => void;
+}
+
+const SORT_OPTIONS = [
+  { title: 'Default', id: '' },
+  { title: 'Value ascending', id: 'val-asc' },
+  { title: 'Value descending', id: 'val-desc' },
+  { title: 'Fee ascending', id: 'fee-asc' },
+  { title: 'Fee descending', id: 'fee-desc' },
+];
+
+const TxsSorting = ({ isActive, sorting, setSorting }: Props) => {
+  const { isOpen, onToggle } = useDisclosure();
+
+  const setSortingFromMenu = React.useCallback((val: string | Array<string>) => {
+    setSorting((prevVal: Sort) => {
+      let newVal: Sort = '';
+      if (val !== prevVal) {
+        newVal = val as Sort;
+      }
+      cookies.set(cookies.NAMES.TXS_SORT, newVal);
+      return newVal;
+    });
+  }, [ setSorting ]);
+
+  return (
+    <Menu>
+      <MenuButton>
+        <SortButton
+          isActive={ isOpen || isActive }
+          onClick={ onToggle }
+        />
+      </MenuButton>
+      <MenuList minWidth="240px">
+        <MenuOptionGroup value={ sorting } title="Sort by" type="radio" onChange={ setSortingFromMenu }>
+          { SORT_OPTIONS.map((option) => (
+            <MenuItemOption
+              key={ option.id }
+              value={ option.id }
+            >
+              { option.title }
+            </MenuItemOption>
+          )) }
+        </MenuOptionGroup>
+      </MenuList>
+    </Menu>
+  );
+};
+
+export default chakra(TxsSorting);