Sort tips based on open/close & duration (#3117)

* Sort tips based on open/close & duration

* Single unwrap

* Small opt

packages/page-treasury/src/Overview/Tip.tsx

@@ -23,6 +23,7 @@ interface Props {
   hash: string;
   isMember: boolean;
   members: string[];
+  setClosed: (hash: string, blockNumber: BlockNumber) => void;
 }
 
 interface TipState {
@@ -37,7 +38,7 @@ function isCurrentTip (tip: OpenTip | OpenTipTo225): tip is OpenTip {
   return isBoolean((tip as OpenTip).findersFee);
 }
 
-function Tip ({ bestNumber, className = '', hash, isMember, members }: Props): React.ReactElement<Props> | null {
+function Tip ({ bestNumber, className = '', hash, isMember, members, setClosed }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const { allAccounts } = useAccounts();
@@ -48,6 +49,7 @@ function Tip ({ bestNumber, className = '', hash, isMember, members }: Props): R
 
   useEffect((): void => {
     if (tip) {
+      const closesAt = tip.closes.unwrapOr(null);
       let finder: AccountId | null = null;
       let deposit: Balance | null = null;
 
@@ -61,15 +63,16 @@ function Tip ({ bestNumber, className = '', hash, isMember, members }: Props): R
         deposit = finderInfo[1];
       }
 
+      closesAt && setClosed(hash, closesAt);
       setTipState({
-        closesAt: tip.closes.unwrapOr(null),
+        closesAt,
         deposit,
         finder,
         isFinder: !!finder && allAccounts.includes(finder.toString()),
         isTipper: tip.tips.some(([address]) => allAccounts.includes(address.toString()))
       });
     }
-  }, [allAccounts, tip]);
+  }, [allAccounts, hash, setClosed, tip]);
 
   if (!tip) {
     return null;

packages/page-treasury/src/Overview/Tips.tsx

@@ -4,9 +4,10 @@
 
 import { BlockNumber } from '@polkadot/types/interfaces';
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Table } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
+import { BN_ZERO } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import Tip from './Tip';
@@ -22,6 +23,23 @@ function Tips ({ className = '', hashes, isMember, members }: Props): React.Reac
   const { t } = useTranslation();
   const { api } = useApi();
   const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []);
+  const [closed, setClosed] = useState<Record<string, BlockNumber>>({});
+  const [sorted, setSorted] = useState<string[]>([]);
+
+  useEffect((): void => {
+    hashes && setSorted(
+      hashes.sort((a, b) => (closed[a] || BN_ZERO).cmp(closed[b] || BN_ZERO))
+    );
+  }, [closed, hashes]);
+
+  const _setClosed = useCallback(
+    (hash: string, blockNumber: BlockNumber) =>
+      setClosed((closed) => ({
+        ...closed,
+        [hash]: blockNumber
+      })),
+    []
+  );
 
   const header = useMemo(() => [
     [t('tips'), 'start'],
@@ -36,16 +54,17 @@ function Tips ({ className = '', hashes, isMember, members }: Props): React.Reac
   return (
     <Table
       className={className}
-      empty={hashes && t<string>('No open tips')}
+      empty={!sorted.length && t<string>('No open tips')}
       header={header}
     >
-      {hashes?.map((hash): React.ReactNode => (
+      {sorted.length !== 0 && sorted.map((hash): React.ReactNode => (
         <Tip
           bestNumber={bestNumber}
           hash={hash}
           isMember={isMember}
           key={hash}
           members={members}
+          setClosed={_setClosed}
         />
       ))}
     </Table>