add logic to navigate ticker list with arrow keys

iamping · Jan 19, 2025 · 842b4a4 · 842b4a4
1 parent 126b052
commit 842b4a4
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/src/components/app/data-table.tsx b/src/components/app/data-table.tsx
@@ -39,6 +39,7 @@ import { useAtom, useSetAtom } from 'jotai';
 import { columnStateAtom, dropdownFnAtom, filterStateAtom, rowCountAtom, tickerAtom } from '../../state/atom';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import { HistoricalChart } from './historical-chart';
+import { useEventListener } from 'usehooks-ts';
 
 // table columns
 const columnHelper = createColumnHelper<Stock>();
@@ -301,7 +302,8 @@ export const DataTable: FC<DataTableProps> = ({ data }) => {
 
   const resetPageIndex = useCallback(() => {
     listRef.current?.scrollToIndex({
-      index: 0
+      index: 0,
+      offset: -100
     });
   }, []);
 
@@ -327,6 +329,30 @@ export const DataTable: FC<DataTableProps> = ({ data }) => {
   const gridTemplateColumnsStyle: CSSProperties = { gridTemplateColumns: `repeat(${numColumns}, auto)` };
   const gridColumnStyle: CSSProperties = { gridColumn: `1 / ${numColumns + 1}` };
 
+  useEventListener('keydown', (event) => {
+    const availableRowsLength = table.getRowModel().rows.length;
+    if (ticker.length > 0) {
+      switch (event.key) {
+        case 'ArrowUp': {
+          const activeRowIndex = table.getRowModel().rows.findIndex((item) => item.original.ticker === ticker);
+          if (activeRowIndex > 0) {
+            const previousTicker = table.getRowModel().rows[activeRowIndex - 1].original.ticker;
+            setTicker(previousTicker);
+          }
+          break;
+        }
+        case 'ArrowDown': {
+          const activeRowIndex = table.getRowModel().rows.findIndex((item) => item.original.ticker === ticker);
+          if (activeRowIndex < availableRowsLength - 1) {
+            const nextTicker = table.getRowModel().rows[activeRowIndex + 1].original.ticker;
+            setTicker(nextTicker);
+          }
+          break;
+        }
+      }
+    }
+  });
+
   return (
     <>
       <PanelGroup autoSaveId="panel-group" direction="horizontal">
@@ -359,6 +385,7 @@ export const DataTable: FC<DataTableProps> = ({ data }) => {
               <Show when={numRows > 0}>
                 <ViewportList
                   initialPrerender={50}
+                  itemSize={30}
                   ref={listRef}
                   viewportRef={parentRef}
                   items={table.getRowModel().rows}>

diff --git a/src/components/app/search-box.tsx b/src/components/app/search-box.tsx
@@ -99,6 +99,11 @@ export const SearchBox = () => {
           inputRef.current?.select();
         }, 50);
       }
+      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+        setTimeout(() => {
+          inputRef.current?.select();
+        }, 50);
+      }
       setTimeout(() => {
         inputRef.current?.focus();
       }, 0);