Finish TS migration

client/src/CreateCashTransactionModal.tsx

@@ -14,10 +14,10 @@ export default function CreateCashTransactionModal({ show, onHide }: { show: boo
     }
   )
 
-  const date = useField("date")
-  const person = useField("text")
-  const description = useField("text")
-  const amount = useField("number")
+  const date = useField<string>("date", "" as string)
+  const person = useField<string>("text", "" as string)
+  const description = useField<string>("text", "" as string)
+  const amount = useField<number>("number", 0 as number)
 
   const createCashTransaction = () => {
     var REACT_APP_API_ENDPOINT = String(process.env.REACT_APP_API_ENDPOINT);

client/src/CreateEventModal.jsx → client/src/CreateEventModal.tsx

@@ -6,11 +6,11 @@ import Modal from 'react-bootstrap/Modal';
 import { useLineItems, useLineItemsDispatch } from "./contexts/LineItemsContext";
 import Notification from './Notification';
 import defaultNameCleanup from './utils/stringHelpers'
-import { useField } from './hooks/useField';
+import { FormField, useField } from './hooks/useField';
 import Stack from 'react-bootstrap/Stack';
 import Badge from 'react-bootstrap/Badge';
 
-export default function CreateEventModal({ show, onHide }) {
+export default function CreateEventModal({ show, onHide }: { show: boolean, onHide: () => void }) {
 
   const lineItems = useLineItems();
   const lineItemsDispatch = useLineItemsDispatch();
@@ -26,10 +26,10 @@ export default function CreateEventModal({ show, onHide }) {
     }
   }, [selectedLineItems, show])
 
-  const name = useField("text")
-  const category = useField("text", "All")
-  const date = useField("date")
-  const isDuplicateTransaction = useField("checkbox")
+  const name = useField<string>("text", "" as string)
+  const category = useField("select", "All" as string)
+  const date = useField<string>("date", "" as string)
+  const isDuplicateTransaction = useField<boolean>("checkbox", false)
 
   const disableSubmit = name.value === "" || category.value === "" || category.value === "All"
 
@@ -58,7 +58,7 @@ export default function CreateEventModal({ show, onHide }) {
     onHide()
   }
 
-  const createEvent = (name, category) => {
+  const createEvent = (name: FormField<string>, category: FormField<string>) => {
     var REACT_APP_API_ENDPOINT = String(process.env.REACT_APP_API_ENDPOINT);
     var newEvent = {
       "name": name.value,

client/src/Login.jsx → client/src/Login.tsx

@@ -3,14 +3,14 @@ import { useNavigate } from 'react-router-dom';
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
 import axiosInstance from "./axiosInstance";
-import { useField } from './hooks/useField';
+import { useField, FormField } from './hooks/useField';
 
 export default function Login() {
-    const email = useField("text")
-    const password = useField("password")
+    const email = useField("text", "" as string)
+    const password = useField("password", "" as string)
     const navigate = useNavigate()
 
-    const handleLogin = (email, password) => {
+    const handleLogin = (email: FormField<string>, password: FormField<string>) => {
         var REACT_APP_API_ENDPOINT = String(process.env.REACT_APP_API_ENDPOINT);
         var newUser = {
             "email": email.value,

client/src/hooks/useField.tsx

@@ -0,0 +1,36 @@
+import { useState, ChangeEvent } from 'react'
+
+export type FormField<T> = {
+    type: string;
+    value: T;
+    onChange: (event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    setCustomValue: (value: T) => void;
+    setEmpty: () => void;
+}
+
+export const useField = <T extends string | number | boolean | readonly string[]>(
+    type: string,
+    defaultState: T
+): FormField<T> => {
+    const [value, setValue] = useState<T>(defaultState)
+
+    const setEmpty = () => {
+        setValue('' as T)
+    }
+
+    const setCustomValue = (newValue: T) => {
+        setValue(newValue)
+    }
+
+    const onChange = (event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+        setValue(event.target.value as T)
+    }
+
+    return {
+        type,
+        value,
+        onChange,
+        setCustomValue,
+        setEmpty
+    }
+}

client/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

client/tsconfig.json

@@ -12,7 +12,7 @@
       "dom.iterable",
       "esnext"
     ],
-    "allowJs": true,
+    "allowJs": false,
     "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
@@ -22,4 +22,4 @@
   "include": [
     "src"
   ]
-}
+}