From 4be8903816bbbfa03e7da3f136f0e5494c4a3a82 Mon Sep 17 00:00:00 2001 From: Michael Zhang Date: Tue, 25 Oct 2022 13:26:48 -0500 Subject: [PATCH] Fix typescript errors --- components/EditBox.tsx | 22 +++++++++------------- components/Layout.tsx | 8 +++++++- components/NumberEditBox.tsx | 8 ++++---- components/Person.tsx | 12 ++++++------ components/ReceiptItem.tsx | 25 ++++++++++++------------- components/SplitBetween.tsx | 16 ++++++++-------- lib/parseInput.tsx | 6 +++++- lib/state.ts | 33 +++++++++++++++++++++------------ next.config.js | 5 +---- pages/index.tsx | 8 ++++---- vite.config.ts | 6 ------ 11 files changed, 77 insertions(+), 72 deletions(-) delete mode 100644 vite.config.ts diff --git a/components/EditBox.tsx b/components/EditBox.tsx index 7de7073..0b485a4 100644 --- a/components/EditBox.tsx +++ b/components/EditBox.tsx @@ -1,13 +1,9 @@ -import { Atom, useAtom } from "jotai"; -import { useState } from "react"; +import { PrimitiveAtom, useAtom } from "jotai"; +import { SyntheticEvent, useState } from "react"; import styled from "styled-components"; -export interface CanBeConvertedToString { - toString(): string; -} - -export interface Props { - valueAtom: Atom; +export interface Props { + valueAtom: PrimitiveAtom; formatter?: (arg: T) => string; inputType?: string; validator: (arg: string) => T | null; @@ -33,7 +29,7 @@ const EditingBox = styled.input` border-radius: 5px; `; -export default function EditBox({ +export default function EditBox({ valueAtom, formatter, inputType, @@ -44,11 +40,11 @@ export default function EditBox({ const [editing, setEditing] = useState(false); const startEditing = (_: any) => { - setValueInput(value.toString()); + setValueInput(String(value)); setEditing(true); }; - const finalize = (e: Event) => { + const finalize = (e: SyntheticEvent) => { e.preventDefault(); const validateResult = validator(valueInput); if (validateResult !== null) { @@ -66,14 +62,14 @@ export default function EditBox({ step="0.01" value={valueInput} onBlur={finalize} - onInput={(e) => setValueInput(e.target.value)} + onInput={(e) => setValueInput(e.currentTarget.value)} /> ); } else { return ( - {formatter ? formatter(value) : value.toString()} + {formatter ? formatter(value) : String(value)} ); } diff --git a/components/Layout.tsx b/components/Layout.tsx index e3c3770..7586172 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -1,6 +1,10 @@ import { Container, Navbar } from "react-bootstrap"; -export default function Layout({ children }) { +export interface Props { + children: JSX.Element; +} + +export default function Layout({ children }: Props) { return ( <> @@ -31,6 +35,8 @@ export default function Layout({ children }) { [license] · + + {/* eslint-disable @next/next/no-img-element */} GitHub stars; + valueAtom: PrimitiveAtom; formatter?: (arg: number) => string; } export default function NumberEditBox({ valueAtom, formatter }: Props) { - const validator = (arg: string) => { + const validator = (arg: string): number | null => { try { const n = parseFloat(arg); - if (isNaN(n) || !isFinite(n)) return; + if (isNaN(n) || !isFinite(n)) return null; return n; } catch (e) { return null; diff --git a/components/Person.tsx b/components/Person.tsx index 675bcea..1495fb4 100644 --- a/components/Person.tsx +++ b/components/Person.tsx @@ -1,21 +1,21 @@ -import { Atom, useAtom, WritableAtom } from "jotai"; -import { Badge, ListGroup } from "react-bootstrap"; +import { PrimitiveAtom, useAtom } from "jotai"; +import { Badge } from "react-bootstrap"; import EditBox from "./EditBox"; export interface IPerson { - name: Atom; + name: PrimitiveAtom; } export interface Props { - personAtom: Atom; - splitBetweenAtom: Atom[]>; + personAtom: PrimitiveAtom; + splitBetweenAtom: PrimitiveAtom[]>; } export default function Person({ personAtom, splitBetweenAtom }: Props) { const [person] = useAtom(personAtom); const [splitBetween, setSplitBetween] = useAtom(splitBetweenAtom); - const removeSelf = (_) => { + const removeSelf = (_: any) => { setSplitBetween([...splitBetween.filter((x) => x != personAtom)]); }; diff --git a/components/ReceiptItem.tsx b/components/ReceiptItem.tsx index 52b5a53..83d082f 100644 --- a/components/ReceiptItem.tsx +++ b/components/ReceiptItem.tsx @@ -1,4 +1,4 @@ -import { Atom, useAtom } from "jotai"; +import { PrimitiveAtom, useAtom } from "jotai"; import { Badge, Card } from "react-bootstrap"; import { moneyFormatter } from "../lib/formatter"; import { receiptAtom } from "../lib/state"; @@ -7,27 +7,23 @@ import NumberEditBox from "./NumberEditBox"; import { IPerson } from "./Person"; import SplitBetween from "./SplitBetween"; -export interface IReceiptItem { - name: Atom; - price: Atom; - splitBetween: Atom[]>; -} +export type Receipt = PrimitiveAtom[]; -function Price({ priceAtom }) { - return ( - - ); +export interface IReceiptItem { + name: PrimitiveAtom; + price: PrimitiveAtom; + splitBetween: PrimitiveAtom[]>; } export interface Props { - itemAtom: Atom; + itemAtom: PrimitiveAtom; } export default function ReceiptItem({ itemAtom }: Props) { const [receipt, setReceipt] = useAtom(receiptAtom); const [item, _] = useAtom(itemAtom); - const removeSelf = (_) => { + const removeSelf = (_: any) => { setReceipt([...receipt.filter((x) => x != itemAtom)]); }; @@ -39,7 +35,10 @@ export default function ReceiptItem({ itemAtom }: Props) { s} /> - + []>; + splitBetweenAtom: PrimitiveAtom[]>; } export default function SplitBetween({ splitBetweenAtom }: Props) { @@ -12,14 +12,14 @@ export default function SplitBetween({ splitBetweenAtom }: Props) { const [input, setInput] = useState(""); const [editing, setEditing] = useState(false); - const startEditing = (_) => { + const startEditing = (_: any) => { setInput(""); setEditing(true); }; - const addPerson = (e) => { + const addPerson = (e: SyntheticEvent) => { e.preventDefault(); - const person = { name: atom(input) }; + const person: IPerson = { name: atom(input) }; setSplitBetween([...splitBetween, atom(person)]); setEditing(false); }; @@ -43,7 +43,7 @@ export default function SplitBetween({ splitBetweenAtom }: Props) { value={input} placeholder="Add person to split with..." onBlur={(_) => setEditing(false)} - onInput={(e) => setInput(e.target.value)} + onInput={(e) => setInput(e.currentTarget.value)} /> ) : ( diff --git a/lib/parseInput.tsx b/lib/parseInput.tsx index 5d841a7..447be87 100644 --- a/lib/parseInput.tsx +++ b/lib/parseInput.tsx @@ -4,7 +4,11 @@ export interface ParsedInput { splitBetween: Set; } -export function ParsedInputDisplay({ input }) { +export interface Props { + input: string; +} + +export function ParsedInputDisplay({ input }: Props) { const parsed = parseInput(input); const formatter = new Intl.NumberFormat("en-US", { diff --git a/lib/state.ts b/lib/state.ts index 9f5c9a4..6d3c59c 100644 --- a/lib/state.ts +++ b/lib/state.ts @@ -1,5 +1,7 @@ import { atom, PrimitiveAtom } from "jotai"; -import { IReceiptItem } from "../components/ReceiptItem"; +import { SetAtom } from "jotai/core/atom"; +import { IPerson } from "../components/Person"; +import { IReceiptItem, Receipt } from "../components/ReceiptItem"; import parseInput from "./parseInput"; export const totalAtom = atom(0); @@ -39,16 +41,23 @@ export const receiptTotalAtom = atom((get) => { return { subtotal: subtotalSum, totalMap: newTotals }; }); -export function addLine(line: string, setReceipt) { +export function addLine( + line: string, + receipt: Receipt, + setReceipt: SetAtom +) { let parsed = parseInput(line); - console.log(parsed); - const name = atom(parsed.itemName); - const price = atom(parsed.price || 0); - const splitBetween = atom( - [...parsed.splitBetween].map((a) => atom({ name: a })) - ); - setReceipt((prev) => [ - ...prev, - atom({ name, price, splitBetween }), - ]); + + const name: PrimitiveAtom = atom(parsed.itemName); + const price: PrimitiveAtom = atom(parsed.price || 0); + const splitBetween: PrimitiveAtom[]> = atom< + PrimitiveAtom[] + >([...parsed.splitBetween].map((a) => atom({ name: atom(a) }))); + + const newReceiptItem = atom({ + name, + price, + splitBetween, + }); + setReceipt([...receipt, newReceiptItem]); } diff --git a/next.config.js b/next.config.js index 8b7e996..7baab4b 100644 --- a/next.config.js +++ b/next.config.js @@ -7,10 +7,7 @@ const nextConfig = { styledComponents: true, }, - typescript: { - // TODO: Move fast and break things lmao - ignoreBuildErrors: true, - }, + typescript: {}, }; module.exports = nextConfig; diff --git a/pages/index.tsx b/pages/index.tsx index afa55a8..e2ff99a 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,6 +1,6 @@ import { useAtom } from "jotai"; import type { NextPage } from "next"; -import { useState } from "react"; +import { SyntheticEvent, useState } from "react"; import { Form } from "react-bootstrap"; import NumberEditBox from "../components/NumberEditBox"; import ReceiptItem from "../components/ReceiptItem"; @@ -24,9 +24,9 @@ const Home: NextPage = () => { currency: "USD", }); - const add = (e) => { + const add = (e: SyntheticEvent) => { e.preventDefault(); - addLine(input, setReceipt); + addLine(input, receipt, setReceipt); setInput(""); return false; }; @@ -42,7 +42,7 @@ const Home: NextPage = () => { autoFocus={true} type="text" placeholder="Add item..." - onInput={(e) => setInput(e.target.value)} + onInput={(e) => setInput(e.currentTarget.value)} value={input} style={{ padding: "8px 16px", fontSize: "1.5em" }} /> diff --git a/vite.config.ts b/vite.config.ts deleted file mode 100644 index 2921bd7..0000000 --- a/vite.config.ts +++ /dev/null @@ -1,6 +0,0 @@ -import solid from "solid-start/vite"; -import { defineConfig } from "vite"; - -export default defineConfig({ - plugins: [solid()], -});