From bd6d825f4ef08f9175d0ff4bcf83ea43b6f7c9a4 Mon Sep 17 00:00:00 2001
From: Kyle Mckay <kymckay.dev@gmail.com>
Date: Mon, 20 Nov 2023 18:29:19 +0000
Subject: [PATCH] [Maintenance] Refactor amount input to typescript (#1936)

---
 .../components/common/InputWithContent.tsx    |  4 ++--
 .../util/{AmountInput.js => AmountInput.tsx}  | 22 ++++++++++++++-----
 upcoming-release-notes/1936.md                |  6 +++++
 3 files changed, 25 insertions(+), 7 deletions(-)
 rename packages/desktop-client/src/components/util/{AmountInput.js => AmountInput.tsx} (85%)
 create mode 100644 upcoming-release-notes/1936.md

diff --git a/packages/desktop-client/src/components/common/InputWithContent.tsx b/packages/desktop-client/src/components/common/InputWithContent.tsx
index 058c311613d..6321a7d857c 100644
--- a/packages/desktop-client/src/components/common/InputWithContent.tsx
+++ b/packages/desktop-client/src/components/common/InputWithContent.tsx
@@ -6,8 +6,8 @@ import Input, { defaultInputStyle } from './Input';
 import View from './View';
 
 type InputWithContentProps = ComponentProps<typeof Input> & {
-  leftContent: ReactNode;
-  rightContent: ReactNode;
+  leftContent?: ReactNode;
+  rightContent?: ReactNode;
   inputStyle?: CSSProperties;
   focusStyle?: CSSProperties;
   style?: CSSProperties;
diff --git a/packages/desktop-client/src/components/util/AmountInput.js b/packages/desktop-client/src/components/util/AmountInput.tsx
similarity index 85%
rename from packages/desktop-client/src/components/util/AmountInput.js
rename to packages/desktop-client/src/components/util/AmountInput.tsx
index bc59bf268e4..a002cb5bf7a 100644
--- a/packages/desktop-client/src/components/util/AmountInput.js
+++ b/packages/desktop-client/src/components/util/AmountInput.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { type MutableRefObject, useRef, useState } from 'react';
 
 import evalArithmetic from 'loot-core/src/shared/arithmetic';
 import { amountToInteger } from 'loot-core/src/shared/util';
@@ -6,12 +6,24 @@ import { amountToInteger } from 'loot-core/src/shared/util';
 import { useMergedRefs } from '../../hooks/useMergedRefs';
 import Add from '../../icons/v1/Add';
 import Subtract from '../../icons/v1/Subtract';
-import { theme } from '../../style';
+import { type CSSProperties, theme } from '../../style';
 import Button from '../common/Button';
 import InputWithContent from '../common/InputWithContent';
 import View from '../common/View';
 import useFormat from '../spreadsheet/useFormat';
 
+type AmountInputProps = {
+  id?: string;
+  inputRef?: MutableRefObject<HTMLInputElement>;
+  initialValue: number;
+  zeroSign?: '-' | '+';
+  onChange?: (value: number) => void;
+  onBlur?: () => void;
+  style?: CSSProperties;
+  textStyle?: CSSProperties;
+  focused?: boolean;
+};
+
 export function AmountInput({
   id,
   inputRef,
@@ -22,7 +34,7 @@ export function AmountInput({
   style,
   textStyle,
   focused,
-}) {
+}: AmountInputProps) {
   let format = useFormat();
   let [negative, setNegative] = useState(
     (initialValue === 0 && zeroSign === '-') || initialValue < 0,
@@ -49,8 +61,8 @@ export function AmountInput({
     setValue(value ? value : '');
   }
 
-  let ref = useRef();
-  let mergedRef = useMergedRefs(inputRef, ref);
+  let ref = useRef<HTMLInputElement>();
+  let mergedRef = useMergedRefs<HTMLInputElement>(inputRef, ref);
 
   function onInputAmountBlur(e) {
     fireChange(value, negative);
diff --git a/upcoming-release-notes/1936.md b/upcoming-release-notes/1936.md
new file mode 100644
index 00000000000..6f1da6f2841
--- /dev/null
+++ b/upcoming-release-notes/1936.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [kymckay]
+---
+
+Refactor AmountInput component to TypeScript.