chore: keyboard shortcuts broken

leather-io · Feb 23, 2021 · 0a103fe · 0a103fe
1 parent 8a68396
commit 0a103fe
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 82 deletions.
diff --git a/app/hooks/use-transaction-list.ts b/app/hooks/use-transaction-list.ts
@@ -0,0 +1,63 @@
+import { useCallback, useMemo, useRef } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import * as R from 'ramda';
+import { MempoolTransaction } from '@blockstack/stacks-blockchain-api-types';
+import { useSelector } from 'react-redux';
+import { RootState } from '@store/index';
+import { selectTransactionList } from '@store/transaction';
+import { selectPendingTransactions } from '@store/pending-transaction';
+import { useMempool } from '@hooks/use-mempool';
+import { increment, decrement } from '@utils/mutate-numbers';
+
+export function useTransactionList() {
+  const { txs, pendingTxs } = useSelector((state: RootState) => ({
+    txs: selectTransactionList(state),
+    pendingTxs: selectPendingTransactions(state),
+  }));
+
+  const focusedTxIdRef = useRef<string | null>(null);
+  const txDomNodeRefMap = useRef<Record<string, HTMLButtonElement>>({});
+
+  const { mempoolTxs } = useMempool();
+  const txIdEquals = useMemo(() => R.eqBy<MempoolTransaction>(tx => tx.tx_id), []);
+
+  const dedupedPendingTxs = useMemo(
+    () =>
+      R.uniqWith(txIdEquals, [...pendingTxs, ...mempoolTxs]).filter(
+        mempoolTx => !txs.map(tx => tx.tx_id).includes(mempoolTx.tx_id)
+      ),
+    [txIdEquals, pendingTxs, mempoolTxs, txs]
+  );
+
+  const focusTxDomNode = useCallback(
+    (shift: (i: number) => number) => {
+      const allTxs = [...dedupedPendingTxs, ...txs];
+      if (allTxs.length === 0) return;
+      if (focusedTxIdRef.current === null) {
+        const txId = allTxs[0].tx_id;
+        focusedTxIdRef.current = txId;
+        txDomNodeRefMap.current[txId].focus();
+        return;
+      }
+      const nextIndex = shift(allTxs.findIndex(tx => tx.tx_id === focusedTxIdRef.current));
+      const nextTx = allTxs[nextIndex];
+      if (!nextTx) return;
+      const domNode = txDomNodeRefMap.current[nextTx.tx_id];
+      if (!domNode) return;
+      domNode.focus();
+    },
+    [dedupedPendingTxs, txs]
+  );
+
+  useHotkeys('j', () => focusTxDomNode(increment), [txs, pendingTxs]);
+  useHotkeys('k', () => focusTxDomNode(decrement), [txs, pendingTxs]);
+
+  return {
+    txs,
+    pendingTxs: dedupedPendingTxs,
+    txCount: txs.length + dedupedPendingTxs.length,
+    focusTxDomNode,
+    focusedTxIdRef,
+    txDomNodeRefMap,
+  };
+}
diff --git a/app/pages/home/home.tsx b/app/pages/home/home.tsx
@@ -1,21 +1,16 @@
-import React, { FC, useRef, useCallback } from 'react';
+import React, { FC } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Spinner } from '@blockstack/ui';
-import { useHotkeys } from 'react-hotkeys-hook';
 
 import { Api } from '@api/api';
-import { increment, decrement } from '@utils/mutate-numbers';
-import { RootState } from '@store/index';
 import { openTxInExplorer } from '@utils/external-links';
+
+import { RootState } from '@store/index';
 import { selectAddress } from '@store/keys';
 import { selectActiveNodeApi } from '@store/stacks-node';
 import { selectAddressBalance, selectAvailableBalance } from '@store/address';
-import {
-  selectTransactionList,
-  selectTransactionsLoading,
-  selectTransactionListFetchError,
-} from '@store/transaction';
-import { selectPendingTransactions } from '@store/pending-transaction';
+import { selectRevokeDelegationModalOpen } from '@store/home/home.reducer';
+import { selectTransactionsLoading, selectTransactionListFetchError } from '@store/transaction';
 import { selectLoadingStacking, selectNextCycleInfo, selectStackerInfo } from '@store/stacking';
 import {
   homeActions,
@@ -24,28 +19,28 @@ import {
   selectHomeCardState,
   HomeCardState,
 } from '@store/home';
-import {
-  TransactionList,
-  StackingPromoCard,
-  StackingRewardCard,
-  TransactionListItem,
-  BalanceCard,
-} from '@components/home';
+
 import { TransactionModal } from '@modals/transaction/transaction-modal';
 import { ReceiveStxModal } from '@modals/receive-stx/receive-stx-modal';
+import { RevokeDelegationModal } from '@modals/revoke-delegation/revoke-delegation-modal';
+
+import { useDelegationStatus } from '@hooks/use-delegation-status';
+import { useTransactionList } from '@hooks/use-transaction-list';
 
 import { StackingCard } from '@components/home/stacking-card';
 import { StackingLoading } from '@components/home/stacking-loading';
 import { StackingBeginsSoonCard } from '@components/home/stacking-begins-soon-card';
 import { StackingError } from '@components/home/stacking-error-card';
-
-import { HomeLayout } from './home-layout';
 import { TransactionListItemMempool } from '@components/home/transaction-list/transaction-list-item-mempool';
-import { useMempool } from '@hooks/use-mempool';
 import { DelegationCard } from '@components/home/delegation-card';
-import { useDelegationStatus } from '@hooks/use-delegation-status';
-import { RevokeDelegationModal } from '@modals/revoke-delegation/revoke-delegation-modal';
-import { selectRevokeDelegationModalOpen } from '../../store/home/home.reducer';
+import {
+  TransactionList,
+  StackingPromoCard,
+  StackingRewardCard,
+  TransactionListItem,
+  BalanceCard,
+} from '@components/home';
+import { HomeLayout } from './home-layout';
 
 export const Home: FC = () => {
   const dispatch = useDispatch();
@@ -56,8 +51,6 @@ export const Home: FC = () => {
     address,
     balance,
     spendableBalance,
-    txs,
-    pendingTxs,
     loadingTxs,
     txModalOpen,
     txListFetchError,
@@ -68,9 +61,7 @@ export const Home: FC = () => {
     stackingCardState,
   } = useSelector((state: RootState) => ({
     address: selectAddress(state),
-    txs: selectTransactionList(state),
     spendableBalance: selectAvailableBalance(state),
-    pendingTxs: selectPendingTransactions(state),
     balance: selectAddressBalance(state),
     txModalOpen: selectTxModalOpen(state),
     revokeDelegationModalOpen: selectRevokeDelegationModalOpen(state),
@@ -84,38 +75,10 @@ export const Home: FC = () => {
     stackingCardState: selectHomeCardState(state),
   }));
 
-  const { mempoolTxs } = useMempool();
-
-  const focusedTxIdRef = useRef<string | null>(null);
-  const txDomNodeRefMap = useRef<Record<string, HTMLButtonElement>>({});
-
-  const focusTxDomNode = useCallback(
-    (shift: (i: number) => number) => {
-      const allTxs = [...mempoolTxs, ...pendingTxs, ...txs];
-      if (allTxs.length === 0) return;
-      if (focusedTxIdRef.current === null) {
-        const txId = allTxs[0].tx_id;
-        focusedTxIdRef.current = txId;
-        txDomNodeRefMap.current[txId].focus();
-        return;
-      }
-      const nextIndex = shift(allTxs.findIndex(tx => tx.tx_id === focusedTxIdRef.current));
-      const nextTx = allTxs[nextIndex];
-      if (!nextTx) return;
-      const domNode = txDomNodeRefMap.current[nextTx.tx_id];
-      if (!domNode) return;
-      domNode.focus();
-    },
-    [txs, pendingTxs, mempoolTxs]
-  );
-
-  useHotkeys('j', () => focusTxDomNode(increment), [txs, pendingTxs, mempoolTxs]);
-  useHotkeys('k', () => focusTxDomNode(decrement), [txs, pendingTxs, mempoolTxs]);
+  const { txs, pendingTxs, txCount, focusedTxIdRef, txDomNodeRefMap } = useTransactionList();
 
   if (!address) return <Spinner />;
 
-  const txCount = txs.length + pendingTxs.length + mempoolTxs.length;
-
   const transactionList = (
     <>
       <TransactionList
@@ -124,31 +87,16 @@ export const Home: FC = () => {
         node={activeNode}
         error={txListFetchError}
       >
-        {mempoolTxs
-          .filter(mempoolTx => !txs.map(tx => tx.tx_id).includes(mempoolTx.tx_id))
-          .map(mempoolTx => (
-            <TransactionListItemMempool
-              address={address}
-              domNodeMapRef={txDomNodeRefMap}
-              activeTxIdRef={focusedTxIdRef}
-              key={mempoolTx.tx_id}
-              tx={mempoolTx}
-              onSelectTx={openTxInExplorer}
-            />
-          ))}
-        {pendingTxs
-          .filter(pendingTx => !txs.map(tx => tx.tx_id).includes(pendingTx.tx_id))
-          .filter(pendingTx => !mempoolTxs.map(tx => tx.tx_id).includes(pendingTx.tx_id))
-          .map(pendingTx => (
-            <TransactionListItemMempool
-              address={address}
-              domNodeMapRef={txDomNodeRefMap}
-              activeTxIdRef={focusedTxIdRef}
-              key={pendingTx.tx_id}
-              tx={pendingTx}
-              onSelectTx={openTxInExplorer}
-            />
-          ))}
+        {pendingTxs.map(pendingTxs => (
+          <TransactionListItemMempool
+            address={address}
+            domNodeMapRef={txDomNodeRefMap}
+            activeTxIdRef={focusedTxIdRef}
+            key={pendingTxs.tx_id}
+            tx={pendingTxs}
+            onSelectTx={openTxInExplorer}
+          />
+        ))}
         {txs.map(tx => (
           <TransactionListItem
             domNodeMapRef={txDomNodeRefMap}

diff --git a/package.json b/package.json
@@ -56,7 +56,12 @@
         }
       ],
       "@semantic-release/changelog",
-      "@semantic-release/git"
+      [
+        "@semantic-release/git",
+        {
+          "message": "chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"
+        }
+      ]
     ]
   },
   "commitlint": {