refactor: add types to table component ref

actualbudget · Sep 13, 2023 · 6407807 · 6407807
1 parent d2b6b3f
commit 6407807
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 19 deletions.
diff --git a/packages/desktop-client/src/components/schedules/SchedulesTable.tsx b/packages/desktop-client/src/components/schedules/SchedulesTable.tsx
@@ -225,12 +225,12 @@ export function SchedulesTable({
     return [...unCompletedSchedules, { id: 'show-completed' }];
   }, [filteredSchedules, showCompleted, allowCompleted]);
 
-  function renderSchedule({ item }: { item: ScheduleEntity }) {
+  function renderSchedule({ schedule }: { schedule: ScheduleEntity }) {
     return (
       <Row
         height={ROW_HEIGHT}
         inset={15}
-        onClick={() => onSelect(item.id)}
+        onClick={() => onSelect(schedule.id)}
         style={{
           cursor: 'pointer',
           backgroundColor: theme.tableBackground,
@@ -241,40 +241,42 @@ export function SchedulesTable({
         <Field width="flex" name="name">
           <Text
             style={
-              item.name == null
+              schedule.name == null
                 ? { color: theme.buttonNormalDisabledText }
                 : null
             }
-            title={item.name ? item.name : ''}
+            title={schedule.name ? schedule.name : ''}
           >
-            {item.name ? item.name : 'None'}
+            {schedule.name ? schedule.name : 'None'}
           </Text>
         </Field>
         <Field width="flex" name="payee">
-          <DisplayId type="payees" id={item._payee} />
+          <DisplayId type="payees" id={schedule._payee} />
         </Field>
         <Field width="flex" name="account">
-          <DisplayId type="accounts" id={item._account} />
+          <DisplayId type="accounts" id={schedule._account} />
         </Field>
         <Field width={110} name="date">
-          {item.next_date ? monthUtilFormat(item.next_date, dateFormat) : null}
+          {schedule.next_date
+            ? monthUtilFormat(schedule.next_date, dateFormat)
+            : null}
         </Field>
         <Field width={120} name="status" style={{ alignItems: 'flex-start' }}>
-          <StatusBadge status={statuses.get(item.id)} />
+          <StatusBadge status={statuses.get(schedule.id)} />
         </Field>
-        <ScheduleAmountCell amount={item._amount} op={item._amountOp} />
+        <ScheduleAmountCell amount={schedule._amount} op={schedule._amountOp} />
         {!minimal && (
           <Field width={80} style={{ textAlign: 'center' }}>
-            {item._date && (item._date as any).frequency && (
+            {schedule._date && (schedule._date as any).frequency && (
               <Check style={{ width: 13, height: 13 }} />
             )}
           </Field>
         )}
         {!minimal && (
           <Field width={40} name="actions">
             <OverflowMenu
-              schedule={item}
-              status={statuses.get(item.id)}
+              schedule={schedule}
+              status={statuses.get(schedule.id)}
               onAction={onAction}
             />
           </Field>
@@ -309,7 +311,7 @@ export function SchedulesTable({
         </Row>
       );
     }
-    return renderSchedule({ item: item as ScheduleEntity });
+    return renderSchedule({ schedule: item as ScheduleEntity });
   }
 
   return (

diff --git a/packages/desktop-client/src/components/table.tsx b/packages/desktop-client/src/components/table.tsx
@@ -12,6 +12,7 @@ import React, {
   type KeyboardEvent,
   type UIEvent,
   type ReactElement,
+  type Ref,
 } from 'react';
 import { useStore } from 'react-redux';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -885,7 +886,7 @@ type TableProps<T = TableItem> = {
 };
 
 export const Table: <T extends TableItem>(
-  props: TableProps<T>,
+  props: TableProps<T> & { ref?: Ref<TableHandleRef> },
 ) => ReactElement = forwardRef<TableHandleRef, TableProps>(
   (
     {

diff --git a/packages/loot-core/src/client/data-hooks/schedules.tsx b/packages/loot-core/src/client/data-hooks/schedules.tsx
@@ -6,7 +6,8 @@ import { type ScheduleEntity } from '../../types/models';
 import q, { liveQuery } from '../query-helpers';
 
 export type ScheduleStatusType = ReturnType<typeof getStatus>;
-export type ScheduleStatuses = Map<string, ScheduleStatusType>;
+export type ScheduleStatuses = Map<ScheduleEntity['id'], ScheduleStatusType>;
+
 function loadStatuses(schedules: ScheduleEntity[], onData) {
   return liveQuery(getHasTransactionsQuery(schedules), onData, {
     mapper: data => {
@@ -27,7 +28,9 @@ type UseSchedulesReturnType = {
   schedules: ScheduleEntity[];
   statuses: ScheduleStatuses;
 } | null;
-export function useSchedules({ transform }: UseSchedulesArgs = {}) {
+export function useSchedules({
+  transform,
+}: UseSchedulesArgs = {}): UseSchedulesReturnType {
   const [data, setData] = useState<UseSchedulesReturnType>(null);
 
   useEffect(() => {
@@ -65,7 +68,7 @@ export function useSchedules({ transform }: UseSchedulesArgs = {}) {
 let SchedulesContext = createContext(null);
 
 export function SchedulesProvider({ transform, children }) {
-  let data = useSchedules({ transform });
+  const data = useSchedules({ transform });
   return <SchedulesContext.Provider value={data} children={children} />;
 }
 

diff --git a/packages/loot-core/src/types/models/schedule.d.ts b/packages/loot-core/src/types/models/schedule.d.ts
@@ -5,7 +5,7 @@ import type { RuleEntity } from './rule';
 export interface ScheduleEntity {
   id: string;
   name?: string;
-  rule: RuleEntity;
+  rule: RuleEntity['id'];
   next_date: string;
   completed: boolean;
   posts_transaction: boolean;