feat(extension): make sort optional

input-output-hk · May 8, 2024 · 9ec5e47 · 9ec5e47
1 parent a219665
commit 9ec5e47
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 38 deletions.
diff --git a/packages/staking/src/features/BrowsePools/BrowsePools.tsx b/packages/staking/src/features/BrowsePools/BrowsePools.tsx
@@ -49,7 +49,7 @@ export const BrowsePools = () => {
               showSkeleton={fetching}
               loadMoreData={paginatePools}
               scrollableTargetId={LACE_APP_ID}
-              sortField={sort.field}
+              sortField={sort?.field}
             />
           ) : (
             <StakePoolsList

diff --git a/...taking/src/features/BrowsePools/BrowsePoolsPreferencesCard/BrowsePoolsPreferencesCard.tsx b/...taking/src/features/BrowsePools/BrowsePoolsPreferencesCard/BrowsePoolsPreferencesCard.tsx
@@ -28,7 +28,7 @@ import { FilterOption, SelectOption, SortAndFilterTab } from './types';
 
 export interface SortAndFilterProps {
   activeTab: SortAndFilterTab;
-  sort: StakePoolSortOptions;
+  sort?: StakePoolSortOptions;
   filter: QueryStakePoolsFilters;
   onSortChange: (value: StakePoolSortOptions) => void;
   onFilterChange: (filters: QueryStakePoolsFilters) => void;
@@ -60,7 +60,7 @@ export const BrowsePoolsPreferencesCard = ({
   const { t } = useTranslation();
   const { analytics } = useOutsideHandles();
   const [localFilters, setLocalFilters] = useState<QueryStakePoolsFilters>(filter);
-  const { field: sortBy, order: direction } = sort;
+  const { field: sortBy, order: direction } = sort || {};
 
   const debouncedFilterChange = useMemo(() => debounce(onFilterChange, ON_CHANGE_DEBOUNCE), [onFilterChange]);
   const handleFilterChange = useCallback(
@@ -75,13 +75,16 @@ export const BrowsePoolsPreferencesCard = ({
     [debouncedFilterChange, localFilters]
   );
 
-  const handleIconClick = useCallback(() => {
-    const newSort: StakePoolSortOptions = {
-      field: sortBy,
-      order: direction === 'desc' ? 'asc' : 'desc',
-    };
-    onSortChange(newSort);
-  }, [direction, onSortChange, sortBy]);
+  const handleIconClick = useCallback(
+    (_sortBy) => {
+      const newSort: StakePoolSortOptions = {
+        field: _sortBy,
+        order: direction === 'desc' ? 'asc' : 'desc',
+      };
+      onSortChange(newSort);
+    },
+    [direction, onSortChange]
+  );
 
   const handleSortChange = useCallback(
     (field: string) => {
@@ -157,7 +160,7 @@ export const BrowsePoolsPreferencesCard = ({
             text={t('browsePools.preferencesCard.sort.ticker')}
           />
         ),
-        onIconClick: handleIconClick,
+        onIconClick: () => handleIconClick('ticker'),
         value: 'ticker',
       },
       {
@@ -168,7 +171,7 @@ export const BrowsePoolsPreferencesCard = ({
             text={t('browsePools.preferencesCard.sort.saturation')}
           />
         ),
-        onIconClick: handleIconClick,
+        onIconClick: () => handleIconClick('saturation'),
         value: 'saturation',
       },
       USE_ROS_STAKING_COLUMN && {
@@ -179,7 +182,7 @@ export const BrowsePoolsPreferencesCard = ({
             text={t('browsePools.preferencesCard.sort.ros')}
           />
         ),
-        onIconClick: handleIconClick,
+        onIconClick: () => handleIconClick('ros'),
         value: 'ros',
       },
       {
@@ -190,7 +193,7 @@ export const BrowsePoolsPreferencesCard = ({
             text={t('browsePools.preferencesCard.sort.cost')}
           />
         ),
-        onIconClick: handleIconClick,
+        onIconClick: () => handleIconClick('cost'),
         value: 'cost',
       },
       {
@@ -201,7 +204,7 @@ export const BrowsePoolsPreferencesCard = ({
             text={t('browsePools.preferencesCard.sort.margin')}
           />
         ),
-        onIconClick: handleIconClick,
+        onIconClick: () => handleIconClick('margin'),
         value: 'margin',
       },
       {
@@ -212,7 +215,7 @@ export const BrowsePoolsPreferencesCard = ({
             text={t('browsePools.preferencesCard.sort.blocks')}
           />
         ),
-        onIconClick: handleIconClick,
+        onIconClick: () => handleIconClick('blocks'),
         value: 'blocks',
       },
       {
@@ -223,7 +226,7 @@ export const BrowsePoolsPreferencesCard = ({
             text={t('browsePools.preferencesCard.sort.pledge')}
           />
         ),
-        onIconClick: handleIconClick,
+        onIconClick: () => handleIconClick('pledge'),
         value: 'pledge',
       },
       {
@@ -234,7 +237,7 @@ export const BrowsePoolsPreferencesCard = ({
             text={t('browsePools.preferencesCard.sort.liveStake')}
           />
         ),
-        onIconClick: handleIconClick,
+        onIconClick: () => handleIconClick('liveStake'),
         value: 'liveStake',
       },
     ].filter(Boolean) as RadioButtonGroupOption[];

diff --git a/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.tsx b/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.tsx
@@ -24,7 +24,7 @@ export type StakePoolsGridProps = {
   loadMoreData: (range: ListRange) => void;
   emptyPlaceholder: () => ReactElement;
   showSkeleton?: boolean;
-  sortField: SortField;
+  sortField?: SortField;
 };
 
 export const StakePoolsGrid = ({

diff --git a/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGridItem.tsx b/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGridItem.tsx
@@ -7,14 +7,14 @@ import { getFormattedStakePoolProp } from '../formatters';
 import { SortField } from '../types';
 
 type StakePoolsGridItemProps = StakePoolDetails & {
-  sortField: SortField;
+  sortField?: SortField;
 };
 
 export const StakePoolsGridItem = ({
   stakePool,
   hexId,
   id,
-  sortField,
+  sortField = 'ticker',
   ...data
 }: StakePoolsGridItemProps): React.ReactElement => {
   const { analytics } = useOutsideHandles();

diff --git a/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsList.tsx b/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsList.tsx
@@ -16,7 +16,7 @@ export type StakePoolsListProps = {
   selectedPools: StakePoolDetails[];
   loadMoreData: (range: ListRange) => void;
   setActiveSort: (props: StakePoolSortOptions) => void;
-  activeSort: StakePoolSortOptions;
+  activeSort?: StakePoolSortOptions;
   emptyPlaceholder: () => ReactElement;
   showSkeleton?: boolean;
 };

diff --git a/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListHeader.tsx b/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListHeader.tsx
@@ -15,7 +15,7 @@ export interface TableHeaders {
 
 export type StakePoolsListHeaderProps = {
   setActiveSort: (props: StakePoolSortOptions) => void;
-  activeSort: StakePoolSortOptions;
+  activeSort?: StakePoolSortOptions;
 };
 
 export const StakePoolsListHeader = ({ setActiveSort, activeSort }: StakePoolsListHeaderProps) => {

diff --git a/packages/staking/src/features/BrowsePools/hooks/useQueryStakePools.tsx b/packages/staking/src/features/BrowsePools/hooks/useQueryStakePools.tsx
@@ -1,11 +1,12 @@
+/* eslint-disable no-console */
 import { PostHogAction } from '@lace/common';
 import { StateStatus, useOutsideHandles } from 'features/outside-handles-provider';
 import { StakePoolDetails, mapStakePoolToDisplayData, useDelegationPortfolioStore } from 'features/store';
 import debounce from 'lodash/debounce';
 import isEqual from 'lodash/isEqual';
 import { useCallback, useMemo, useRef } from 'react';
 import { ListRange } from 'react-virtuoso';
-import { DEFAULT_SORT_OPTIONS, SEARCH_DEBOUNCE_IN_MS } from '../constants';
+import { SEARCH_DEBOUNCE_IN_MS } from '../constants';
 import { StakePoolSortOptions } from '../types';
 
 type QueryStatus = 'idle' | 'fetching' | 'paginating';
@@ -17,7 +18,7 @@ type UseQueryStakePoolsResult = {
   searchQuery: string;
   setSearchQuery: (searchString: string) => void;
   setSort: (sortOptions: StakePoolSortOptions) => void;
-  sort: StakePoolSortOptions;
+  sort?: StakePoolSortOptions;
   totalPoolsCount: number;
 };
 
@@ -32,10 +33,11 @@ export const useQueryStakePools = () => {
 
   const { searchQuery, sortField, sortOrder } = useDelegationPortfolioStore((store) => ({
     searchQuery: store.searchQuery || '',
-    sortField: store.sortField ?? DEFAULT_SORT_OPTIONS.field,
-    sortOrder: store.sortOrder ?? DEFAULT_SORT_OPTIONS.order,
+    sortField: store.sortField,
+    sortOrder: store.sortOrder,
   }));
-  const previousRequest = useRef<{ searchQuery: string; sortField: string; sortOrder: string } | null>(null);
+
+  const previousRequest = useRef<{ searchQuery: string; sortField?: string; sortOrder?: string } | null>(null);
   const status = useMemo(() => {
     const nextRequest = { searchQuery, sortField, sortOrder };
     const requestChanged = !isEqual(previousRequest.current, nextRequest);
@@ -48,12 +50,12 @@ export const useQueryStakePools = () => {
 
   const debouncedSearch = useMemo(
     () =>
-      debounce(async (params: Required<Parameters<typeof fetchStakePools>[0]>) => {
+      debounce(async (params: Parameters<typeof fetchStakePools>[0]) => {
         await fetchStakePools(params);
         previousRequest.current = {
           searchQuery: params.searchString,
-          sortField: params.sort.field,
-          sortOrder: params.sort.order,
+          sortField: params.sort?.field,
+          sortOrder: params.sort?.order,
         };
       }, SEARCH_DEBOUNCE_IN_MS),
     [fetchStakePools]
@@ -67,7 +69,7 @@ export const useQueryStakePools = () => {
         limit: endIndex,
         searchString: searchQuery ?? '',
         skip: startIndex,
-        sort: { field: sortField, order: sortOrder },
+        ...(sortField && sortOrder && { sort: { field: sortField, order: sortOrder } }),
       });
     },
     [debouncedSearch, searchQuery, sortField, sortOrder]
@@ -108,10 +110,13 @@ export const useQueryStakePools = () => {
       searchQuery,
       setSearchQuery,
       setSort,
-      sort: {
-        field: sortField,
-        order: sortOrder,
-      },
+      ...(sortField &&
+        sortOrder && {
+          sort: {
+            field: sortField,
+            order: sortOrder,
+          },
+        }),
       status,
       totalPoolsCount,
     }),

diff --git a/...king/src/features/store/delegationPortfolioStore/stateMachine/processExpandedViewCases.ts b/...king/src/features/store/delegationPortfolioStore/stateMachine/processExpandedViewCases.ts
@@ -197,6 +197,8 @@ export const processExpandedViewCases: Handler = (params) =>
             ({ state, command: { data } }) => ({
               ...state,
               searchQuery: data,
+              sortField: undefined,
+              sortOrder: undefined,
             })
           ),
           SetSort: handler<SetSort, StateBrowsePools, StateBrowsePools>(({ state, command: { data } }) => ({

diff --git a/packages/staking/src/features/store/delegationPortfolioStore/useDelegationPortfolioStore.ts b/packages/staking/src/features/store/delegationPortfolioStore/useDelegationPortfolioStore.ts
@@ -1,4 +1,5 @@
 import { Wallet } from '@lace/cardano';
+import { DEFAULT_SORT_OPTIONS } from 'features/BrowsePools/constants';
 import { create } from 'zustand';
 import { immer } from 'zustand/middleware/immer';
 import { CARDANO_COIN_SYMBOL_BY_NETWORK, LAST_STABLE_EPOCH, PERCENTAGE_SCALE_MAX } from './constants';
@@ -24,6 +25,8 @@ const defaultState: DelegationPortfolioState = {
   draftPortfolio: undefined,
   pendingSelectedPortfolio: undefined,
   selectedPortfolio: [],
+  sortField: DEFAULT_SORT_OPTIONS.field,
+  sortOrder: DEFAULT_SORT_OPTIONS.order,
   view: undefined,
   viewedStakePool: undefined,
 };

diff --git a/packages/ui/src/design-system/table/table-header.component.tsx b/packages/ui/src/design-system/table/table-header.component.tsx
@@ -17,7 +17,7 @@ export interface HeaderProps<T> {
   isActiveSortItem: (value: string) => boolean;
   isSortingAvailable?: (value: string) => boolean;
   onSortChange: (field: T) => void;
-  order: 'asc' | 'desc';
+  order?: 'asc' | 'desc';
   withSelection?: boolean;
   dataTestId?: string;
   headers: Headers<T>[];
@@ -58,7 +58,7 @@ export const Header = <T extends string>({
               {label}
             </Tooltip>
           </span>
-          {isSortingAvailable(value) && isActiveSortItem(value) && (
+          {order && isSortingAvailable(value) && isActiveSortItem(value) && (
             <IconButton.Caret
               direction={order}
               data-testid={`${dataTestId}-sort-order-${order}`}