Updates sort

src/components/Pools.tsx

@@ -13,7 +13,7 @@ import {
   Tr,
 } from '@chakra-ui/react';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import {
   Pagination,
   PaginationContainer,
@@ -35,8 +35,14 @@ export default function Pools() {
   const allPools = useAtomValue(allPoolsAtomUnSorted);
   const _filteredPools = useAtomValue(filteredPools);
   const ITEMS_PER_PAGE = 15;
+  // set sort atom declared
   const setSort = useSetAtom(sortAtom);
+  // get current sort atom
   const sort = useAtomValue(sortAtom);
+  // declare react states for apr,risk,tvl to manage active? states
+  const [aprStatus, setAprStatus] = useState(false);
+  const [riskStatus, setRiskStatus] = useState(false);
+  const [tvlStatus, setTvlStatus] = useState(false);
   const { currentPage, setCurrentPage, pagesCount, pages } = usePagination({
     pagesCount: Math.floor(_filteredPools.length / ITEMS_PER_PAGE) + 1,
     initialState: { currentPage: 1 },
@@ -47,13 +53,53 @@ export default function Pools() {
     return _filteredPools.slice(startIndex, startIndex + ITEMS_PER_PAGE);
   }, [_filteredPools, currentPage, sort]);
 
+  // handle sort click function
   const handleSortChange = (field: string) => (order: 'asc' | 'desc') => {
-    setSort((prev) => {
-      const updatedSort = prev.filter((s) => s.field !== field);
-      return [...updatedSort, { field, order }];
-    });
+    // if RISK is click
+    if (field === 'RISK') {
+      setRiskStatus(true);
+      // check if risk exists in sort atom
+      const riskIndex = sort.findIndex((s) => s.field === 'RISK');
+      // if risk exist update the order else set risk with selected order
+      if (riskIndex >= 0) {
+        setSort((prev) => {
+          const updatedSort = prev.filter((s) => s.field !== 'RISK');
+          return [
+            ...updatedSort,
+            { field, order: sort[riskIndex].order == 'desc' ? 'asc' : 'desc' },
+          ];
+        });
+      } else {
+        setSort((prev) => {
+          const updatedSort = prev.filter((s) => s.field !== field);
+          return [...updatedSort, { field, order: 'asc' }];
+        });
+      }
+    } else if (field == 'APR' || field == 'TVL') {
+      // if APR or TVL is clicked clear sort atom, check if exist in sort atom if exist then set order else clear sort atom and set
+      setRiskStatus(false);
+      const new_sort: any = [];
+      if (field == 'APR') {
+        setTvlStatus(false);
+        setAprStatus(true);
+      }
+      if (field == 'TVL') {
+        setTvlStatus(true);
+        setAprStatus(false);
+      }
+      const currentFieldIndex = sort.findIndex((s) => s.field === field);
+      new_sort.push({
+        field,
+        order:
+          sort[currentFieldIndex]?.order &&
+          sort[currentFieldIndex]?.order == 'desc'
+            ? 'asc'
+            : 'desc',
+      });
+      setSort([]);
+      setSort(new_sort);
+    }
   };
-
   return (
     <Box float="left" width={'100%'}>
       <ProtocolFilters />
@@ -113,6 +159,7 @@ export default function Pools() {
                   mainColor="color2Text"
                   inActiveColor="#d9d9f726"
                   onClick={handleSortChange('APR')}
+                  active={aprStatus}
                 />
               </Th>
               <Th textAlign={'right'}>
@@ -121,6 +168,7 @@ export default function Pools() {
                   mainColor="color2Text"
                   inActiveColor="#d9d9f726"
                   onClick={handleSortChange('RISK')}
+                  active={riskStatus}
                 />
               </Th>
               <Th textAlign={'right'}>
@@ -129,6 +177,7 @@ export default function Pools() {
                   mainColor="color2Text"
                   inActiveColor="#d9d9f726"
                   onClick={handleSortChange('TVL')}
+                  active={tvlStatus}
                 />
               </Th>
             </Tr>

src/components/YieldCard.tsx

@@ -28,9 +28,8 @@ import { getDisplayCurrencyAmount } from '@/utils';
 import { addressAtom } from '@/store/claims.atoms';
 import { FaWallet } from 'react-icons/fa';
 import { UserStats, userStatsAtom } from '@/store/utils.atoms';
-import { getPoolInfoFromStrategy } from '@/store/protocols';
+import { getPoolInfoFromStrategy, sortAtom } from '@/store/protocols';
 import { TriangleDownIcon, TriangleUpIcon } from '@chakra-ui/icons';
-import { useState } from 'react';
 import mixpanel from 'mixpanel-browser';
 import { STRKFarmStrategyAPIResult } from '@/store/strkfarm.atoms';
 
@@ -310,7 +309,13 @@ function StrategyTVL(props: YieldCardProps) {
     </Box>
   );
 }
-
+// return sort heading text to match with sort options heading text
+function sortHeading(field: string) {
+  if (field == 'APY') {
+    return 'APR';
+  }
+  return field.toUpperCase();
+}
 function GetRiskLevel(riskFactor: number) {
   let color = '';
   let bgColor = '';
@@ -529,36 +534,41 @@ export function HeaderSorter(props: {
   mainColor: string;
   inActiveColor: string;
   onClick: (order: 'asc' | 'desc') => void;
+  // added active? boolean to handle sort status...
+  active?: boolean;
 }) {
-  const [isAscending, setIsAscending] = useState(false);
-  const [isDescending, setIsDescending] = useState(false);
-
+  // get the current sort atom
+  const sort = useAtomValue(sortAtom);
+  // get corrent index for a particular sort option from the current sort atom
+  const currentFieldIndex = sort.findIndex(
+    (s) => s.field === sortHeading(props.heading),
+  );
+  // get the order of the clicked sort option
+  const order: 'asc' | 'desc' =
+    currentFieldIndex >= 0 ? sort[currentFieldIndex].order : 'desc';
   return (
     <HStack
       as="button"
       onClick={() => {
-        let order: 'asc' | 'desc' = 'desc';
-        if (!isAscending && !isDescending) {
-          setIsDescending(true);
-        } else if (isDescending) {
-          setIsAscending(true);
-          setIsDescending(false);
-          order = 'asc';
-        } else {
-          setIsAscending(false);
-          setIsDescending(true);
-        }
         props.onClick(order);
       }}
       float={'right'}
     >
       <Text color={props.mainColor}>{props.heading.toUpperCase()}</Text>
       <VStack gap={0} spacing={0}>
         <TriangleUpIcon
-          color={isAscending ? props.mainColor : props.inActiveColor}
+          color={
+            order == 'asc' && props.active
+              ? props.mainColor
+              : props.inActiveColor
+          }
         />
         <TriangleDownIcon
-          color={isDescending ? props.mainColor : props.inActiveColor}
+          color={
+            order == 'desc' && props.active
+              ? props.mainColor
+              : props.inActiveColor
+          }
         />
       </VStack>
     </HStack>

src/store/protocols.ts

@@ -215,17 +215,34 @@ export const allPoolsAtomWithStrategiesUnSorted = atom((get) => {
 
 const SORT_OPTIONS = ['DEFAULT', 'APR', 'TVL', 'RISK'] as const;
 
-export const sortAtom = atom<Array<{ field: string; order: 'asc' | 'desc' }>>([
+// default sort atom with default options APR: high to low, RISK: low to high
+const defaultSortAtom = atom<Array<{ field: string; order: 'asc' | 'desc' }>>([
   {
-    field: SORT_OPTIONS[0],
+    field: SORT_OPTIONS[1],
+    order: 'desc',
+  },
+  {
+    field: SORT_OPTIONS[3],
     order: 'asc',
   },
 ]);
 
+// sort atom declared
+export const sortAtom = atom<Array<{ field: string; order: 'asc' | 'desc' }>>(
+  [],
+);
+// sort pool results function
 export const sortPoolsAtom = atom((get) => {
+  // get current sort atom
   const sort = get(sortAtom);
+  // get default sort atom
+  const default_sort = get(defaultSortAtom);
+  // get unsort pool data
   const pools = get(allPoolsAtomWithStrategiesUnSorted);
-  const sortCriteria = [...sort].reverse();
+  // if current sort atom exist then reverse the atom else reverse default sort
+  const sortCriteria =
+    sort.length > 0 ? [...sort].reverse() : [...default_sort].reverse();
+  // loop through unsort pools and apply sort
   const sortedPools = [...pools].sort((a, b) => {
     for (const sortItem of sortCriteria) {
       let result = 0;
@@ -245,8 +262,6 @@ export const sortPoolsAtom = atom((get) => {
     }
     return 0;
   });
-  // localStorage.setItem('sort', JSON.stringify(sortCriteria));
-
   return sortedPools;
 });