style: use type checked eslint

Signed-off-by: rare-magma <[email protected]>
rare-magma · Sep 2, 2023 · e90d531 · e90d531
1 parent 48f6f55
commit e90d531
Show file tree

Hide file tree

Showing 12 changed files with 40 additions and 46 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -5,8 +5,9 @@
     "plugin:react/jsx-runtime",
     "plugin:react-hooks/recommended",
     "plugin:prettier/recommended",
-    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-type-checked",
     "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:@typescript-eslint/stylistic-type-checked",
     "plugin:jsx-a11y/recommended"
   ],
   "plugins": [
@@ -41,6 +42,7 @@
   "parserOptions": {
     "ecmaVersion": 6,
     "project": ["./tsconfig.json"],
+    "tsconfigRootDir": ".",
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true

diff --git a/src/components/Budget/BudgetPage.tsx b/src/components/Budget/BudgetPage.tsx
@@ -59,8 +59,8 @@ function BudgetPage() {
   const params = useParams();
   const name = String(params.name);
   const revenuePercentage = calcPercentage(
-    budget?.expenses.total || 0,
-    budget?.incomes.total || 0,
+    budget?.expenses.total ?? 0,
+    budget?.incomes.total ?? 0,
   );
 
   useHotkeys("s", () => handleExportJSON(), {
@@ -345,8 +345,7 @@ function BudgetPage() {
       return;
     }
 
-    for (let i = 0; i < importedFiles.length; i++) {
-      const file = importedFiles[i];
+    for (const file of importedFiles) {
       const reader = new FileReader();
       reader.readAsText(file, "UTF-8");
       reader.onloadend = () => {
@@ -504,8 +503,8 @@ function BudgetPage() {
     <Container fluid>
       {!showGraphs && (
         <NavBar
-          selected={budget?.name || undefined}
-          id={budget?.id || undefined}
+          selected={budget?.name ?? undefined}
+          id={budget?.id ?? undefined}
           budgetNameList={budgetNameList}
           currency={currency || initialCurrencyCode}
           onRename={(e) => {
@@ -546,7 +545,7 @@ function BudgetPage() {
 
       <LandingPage
         loading={loading}
-        budget={budget || null}
+        budget={budget ?? null}
         budgetList={budgetList}
         inputRef={inputRef}
         onNew={handleNew}

diff --git a/src/components/Chart/Chart.tsx b/src/components/Chart/Chart.tsx
@@ -55,7 +55,7 @@ function Chart({
     yAxisWidthModifier: (x) => x + 10,
   });
   function tickFormatter(value: number) {
-    return intlFormat(value, intlConfig?.currency as string);
+    return intlConfig?.currency && intlFormat(value, intlConfig.currency);
   }
 
   return (

diff --git a/src/components/Chart/ChartTooltip.tsx b/src/components/Chart/ChartTooltip.tsx
@@ -20,41 +20,41 @@ function ChartTooltip({
   key1,
   key2,
 }: ChartTooltipProps) {
-  if (active && payload && payload.length) {
+  if (active && payload?.length && intlConfig?.currency) {
     return (
       <Container className="m-2">
         <Row>{label}</Row>
         {payload.length > 1 ? (
           <>
             <Row className="me-1">
-              <Col>{`${key1 || ""}:`}</Col>
+              <Col>{`${key1 ?? ""}:`}</Col>
               <Col className="text-end fixed-width-font">
                 {`${intlFormat(
                   roundBig(Big(payload[0].value), 2),
-                  intlConfig?.currency as string,
+                  intlConfig.currency,
                 )}`}
               </Col>
             </Row>
             <Row className="me-1 flex-md-nowrap">
-              <Col>{`${key2 || ""}:`}</Col>
+              <Col>{`${key2 ?? ""}:`}</Col>
               <Col className="text-end fixed-width-font col-md-auto">
                 {intlFormat(
                   roundBig(Big(payload[1].value), 2),
-                  intlConfig?.currency as string,
+                  intlConfig.currency,
                 )}
               </Col>
             </Row>
           </>
         ) : (
           <Row className="me-1">
-            <Col>{`${key1 || ""}:`}</Col>
+            <Col>{`${key1 ?? ""}:`}</Col>
             {key1 === "goal" ? (
               <Col className="text-end fixed-width-font">{`${payload[0].value}%`}</Col>
             ) : (
               <Col className="text-end fixed-width-font">
                 {`${intlFormat(
                   roundBig(Big(payload[0].value), 2),
-                  intlConfig?.currency as string,
+                  intlConfig.currency,
                 )}`}
               </Col>
             )}

diff --git a/src/components/Chart/DynamicYAxis.ts b/src/components/Chart/DynamicYAxis.ts
@@ -10,29 +10,29 @@ import { useState, useCallback, useMemo } from "react";
 const RECHART_CERTESIAN_AXIS_TICK_VALUE_SELECTOR = `.recharts-cartesian-axis-tick-value[orientation="left"],
 .recharts-cartesian-axis-tick-value[orientation="right"]`;
 
-type Props = {
+interface Props {
   yAxisWidthModifier?: (width: number) => number;
-};
+}
 
-type ReturnValues = {
+interface ReturnValues {
   yAxisWidth: undefined | number;
   setChartRef: (chartRef: any) => void;
-};
+}
 
 function useDynamicYAxisWidth(props: void | Props): ReturnValues {
   const { yAxisWidthModifier } = props || {};
   const [yAxisWidthState, setYAxisWidthState] = useState(undefined);
 
   const setChartRef = useCallback(
     (chartRef: any) => {
-      if (chartRef != null && chartRef.container != null) {
+      if (chartRef?.container != null) {
         const tickValueElements = chartRef.container.querySelectorAll(
           RECHART_CERTESIAN_AXIS_TICK_VALUE_SELECTOR,
         );
         const highestWidth = [...tickValueElements]
           .map((el) => {
             const boundingRect = el.getBoundingClientRect();
-            if (boundingRect != null && boundingRect.width != null) {
+            if (boundingRect?.width != null) {
               return boundingRect.width;
             }
             return 0;

diff --git a/src/components/ErrorModal/ErrorModal.tsx b/src/components/ErrorModal/ErrorModal.tsx
@@ -2,15 +2,15 @@ import { ParseError } from "papaparse";
 import { Accordion, Button, Modal } from "react-bootstrap";
 import { BsXLg } from "react-icons/bs";
 
-export type CsvError = {
+export interface CsvError {
   errors: ParseError[];
   file: string;
-};
+}
 
-export type JsonError = {
+export interface JsonError {
   errors: string;
   file: string;
-};
+}
 
 interface ErrorModalProps {
   error: string | null;

diff --git a/src/components/TableCard/Expense.ts b/src/components/TableCard/Expense.ts
@@ -1,7 +1,7 @@
 import { ItemForm } from "../ItemForm/ItemForm";
 
 export class Expense {
-  items: Array<ItemForm> = [];
+  items: ItemForm[] = [];
   total = 0;
 
   constructor(initializer?: Expense) {

diff --git a/src/components/TableCard/Income.ts b/src/components/TableCard/Income.ts
@@ -1,7 +1,7 @@
 import { ItemForm } from "../ItemForm/ItemForm";
 
 export class Income {
-  items: Array<ItemForm> = [];
+  items: ItemForm[] = [];
   total = 0;
 
   constructor(initializer?: Income) {

diff --git a/src/components/TableCard/TableCard.tsx b/src/components/TableCard/TableCard.tsx
@@ -139,10 +139,8 @@ function TableCard({
             <Col>{label}</Col>
             <Col className="text-end fixed-width-font">
               <div>
-                {intlFormat(
-                  roundBig(Big(total), 2),
-                  intlConfig?.currency as string,
-                )}
+                {intlConfig?.currency &&
+                  intlFormat(roundBig(Big(total), 2), intlConfig?.currency)}
               </div>
             </Col>
           </Row>

diff --git a/src/index.tsx b/src/index.tsx
@@ -14,9 +14,7 @@ const updateSW = registerSW({
   },
 });
 
-const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement,
-);
+const root = ReactDOM.createRoot(document.getElementById("root")!);
 root.render(
   <React.StrictMode>
     <App />

diff --git a/src/utils.test.ts b/src/utils.test.ts
@@ -64,17 +64,14 @@ test("calcAvailable", () => {
 
 test("calcWithGoal", () => {
   expect(calcWithGoal(testBudget)).eq(80);
-  expect(calcWithGoal(null)).eq(0);
 });
 
 test("calcSaved", () => {
   expect(calcSaved(testBudget)).eq(10);
-  expect(calcSaved(null)).eq(0);
 });
 
 test("calcAutoGoal", () => {
   expect(calcAutoGoal(testBigBudget)).eq(93.36298);
-  expect(calcAutoGoal(null)).eq(0);
 });
 
 test("convertCsvToBudget", () => {

diff --git a/src/utils.ts b/src/utils.ts
@@ -29,7 +29,7 @@ export function roundBig(number: Big, precision: number): number {
   return Big(number).round(precision, 1).toNumber();
 }
 
-export function calcTotal(values: Array<ItemForm>): Big {
+export function calcTotal(values: ItemForm[]): Big {
   let total = Big(0);
   values &&
     values
@@ -94,8 +94,8 @@ export function calcAvailable(value: Budget | null): Big {
   return Big(0);
 }
 
-export function calcWithGoal(value: Budget | null): number {
-  if (value !== null && value.stats.goal !== null && !isNaN(value.stats.goal)) {
+export function calcWithGoal(value: Budget): number {
+  if (value.stats.goal !== null && !isNaN(value.stats.goal)) {
     const available = calcAvailable(value);
     const availableWithGoal = Big(value.stats.goal)
       .mul(calcTotal(value.incomes.items))
@@ -105,17 +105,17 @@ export function calcWithGoal(value: Budget | null): number {
   return 0;
 }
 
-export function calcSaved(value: Budget | null): number {
-  if (value !== null && value.stats.goal !== null && !isNaN(value.stats.goal)) {
+export function calcSaved(value: Budget): number {
+  if (value.stats.goal !== null && !isNaN(value.stats.goal)) {
     const available = calcTotal(value.incomes.items);
     const saved = Big(value.stats.goal).mul(available).div(100);
     return roundBig(saved, 2);
   }
   return 0;
 }
 
-export function calcAutoGoal(value: Budget | null): number {
-  if (value !== null && value.stats.goal !== null && !isNaN(value.stats.goal)) {
+export function calcAutoGoal(value: Budget): number {
+  if (value.stats.goal !== null && !isNaN(value.stats.goal)) {
     const incomeTotal = calcTotal(value.incomes.items);
     const available = calcAvailable(value);
 
@@ -233,7 +233,7 @@ export function createBudgetNameList(
   list: Budget[],
 ): { id: string; name: string }[] {
   return list
-    .filter((b: Budget) => b && b.id !== undefined && b.name !== undefined)
+    .filter((b: Budget) => b?.id !== undefined && b.name !== undefined)
     .map((b: Budget) => {
       return { id: b.id, name: b.name };
     });