From 431e654154b4342b2ec08ba35b7d0cd7abdb17e8 Mon Sep 17 00:00:00 2001
From: Felix Schulze <admin@schulze.network>
Date: Sat, 15 Nov 2025 18:18:15 +0100
Subject: [PATCH] linter issues

---
 src/app/components/BackgroundPattern.tsx  | 36 +++++++++++++----------
 src/app/components/FireCalculatorForm.tsx | 34 ++++++++++++++-------
 src/components/ui/chart.tsx               | 10 +++----
 src/components/ui/form.tsx                |  2 +-
 4 files changed, 50 insertions(+), 32 deletions(-)

diff --git a/src/app/components/BackgroundPattern.tsx b/src/app/components/BackgroundPattern.tsx
index fbcf9b3..1c8d4cf 100644
--- a/src/app/components/BackgroundPattern.tsx
+++ b/src/app/components/BackgroundPattern.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { useState, useEffect } from "react";
+import type React from "react";
 import {
   type LucideIcon,
   HandCoins,
@@ -112,14 +113,15 @@ export default function MultiIconPattern({ opacity = 0.2, spacing = 160 }) {
     Target,
   ];
 
-  const renderIcons = ({
-    rows,
-    columns,
-  }: {
-    rows: number;
-    columns: number;
-  }) => {
-    const icons = [];
+  const [icons, setIcons] = useState<React.ReactElement[]>([]);
+
+  useEffect(() => {
+    if (rows === 0 || columns === 0) {
+      setIcons([]);
+      return;
+    }
+
+    const iconElements: React.ReactElement[] = [];
     for (let y = 0; y < rows; y++) {
       for (let x = 0; x < columns; x++) {
         // Pick a random icon component from the array
@@ -130,28 +132,30 @@ export default function MultiIconPattern({ opacity = 0.2, spacing = 160 }) {
         const size = 28 + Math.floor(Math.random() * 8);
         const xOffset = Math.floor(Math.random() * (spacing / 1.618));
         const yOffset = Math.floor(Math.random() * (spacing / 1.618));
+        const rotation = Math.round((Math.random() - 0.5) * 30);
 
-        icons.push(
+        iconElements.push(
           <IconComponent
-            key={`icon-${x}-${y}`}
+            key={`icon-${String(x)}-${String(y)}`}
             size={size}
             className="text-primary fixed"
             style={{
-              left: `${x * spacing + xOffset}px`,
-              top: `${y * spacing + yOffset}px`,
+              left: `${String(x * spacing + xOffset)}px`,
+              top: `${String(y * spacing + yOffset)}px`,
               opacity: opacity,
-              transform: `rotate(${Math.round((Math.random() - 0.5) * 30)}deg)`,
+              transform: `rotate(${String(rotation)}deg)`,
             }}
           />,
         );
       }
     }
-    return icons;
-  };
+    setIcons(iconElements);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rows, columns, spacing, opacity]);
 
   return (
     <div className="absolute h-full w-full">
-      {width > 0 && renderIcons({ rows, columns })}
+      {width > 0 && icons}
     </div>
   );
 }
diff --git a/src/app/components/FireCalculatorForm.tsx b/src/app/components/FireCalculatorForm.tsx
index ca01a8e..282c236 100644
--- a/src/app/components/FireCalculatorForm.tsx
+++ b/src/app/components/FireCalculatorForm.tsx
@@ -216,7 +216,7 @@ export default function FireCalculatorForm() {
       return [0, 0];
     })();
 
-    if (retirementIndex === -1 || !retirementData) {
+    if (retirementIndex === -1) {
       setResult({
         fireNumber: null,
         fireNumber4percent: null,
@@ -246,7 +246,13 @@ export default function FireCalculatorForm() {
         </CardHeader>
         <CardContent>
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                void form.handleSubmit(onSubmit)(e);
+              }}
+              className="space-y-8"
+            >
               <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                 <FormField
                   control={form.control}
@@ -265,7 +271,8 @@ export default function FireCalculatorForm() {
                                 ? undefined
                                 : Number(e.target.value),
                             );
-                            void form.handleSubmit(onSubmit)();
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            form.handleSubmit(onSubmit)();
                           }}
                           onBlur={field.onBlur}
                           name={field.name}
@@ -293,7 +300,8 @@ export default function FireCalculatorForm() {
                                 ? undefined
                                 : Number(e.target.value),
                             );
-                            void form.handleSubmit(onSubmit)();
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            form.handleSubmit(onSubmit)();
                           }}
                           onBlur={field.onBlur}
                           name={field.name}
@@ -321,7 +329,8 @@ export default function FireCalculatorForm() {
                                 ? undefined
                                 : Number(e.target.value),
                             );
-                            void form.handleSubmit(onSubmit)();
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            form.handleSubmit(onSubmit)();
                           }}
                           onBlur={field.onBlur}
                           name={field.name}
@@ -349,7 +358,8 @@ export default function FireCalculatorForm() {
                                 ? undefined
                                 : Number(e.target.value),
                             );
-                            void form.handleSubmit(onSubmit)();
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            form.handleSubmit(onSubmit)();
                           }}
                           onBlur={field.onBlur}
                           name={field.name}
@@ -378,7 +388,8 @@ export default function FireCalculatorForm() {
                                 ? undefined
                                 : Number(e.target.value),
                             );
-                            void form.handleSubmit(onSubmit)();
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            form.handleSubmit(onSubmit)();
                           }}
                           onBlur={field.onBlur}
                           name={field.name}
@@ -407,7 +418,8 @@ export default function FireCalculatorForm() {
                                 ? undefined
                                 : Number(e.target.value),
                             );
-                            void form.handleSubmit(onSubmit)();
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            form.handleSubmit(onSubmit)();
                           }}
                           onBlur={field.onBlur}
                           name={field.name}
@@ -437,7 +449,8 @@ export default function FireCalculatorForm() {
                                 ? undefined
                                 : Number(e.target.value),
                             );
-                            void form.handleSubmit(onSubmit)();
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            form.handleSubmit(onSubmit)();
                           }}
                           onBlur={field.onBlur}
                           name={field.name}
@@ -467,7 +480,8 @@ export default function FireCalculatorForm() {
                           step={1}
                           onValueChange={(value: number[]) => {
                             field.onChange(value[0]);
-                            void form.handleSubmit(onSubmit)();
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            form.handleSubmit(onSubmit)();
                           }}
                           className="py-4"
                         />
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
index 86d5378..31fef82 100644
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@@ -135,12 +135,12 @@ function ChartTooltipContent({
       return null;
     }
 
-    const [item] = payload;
-    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+    const item = payload[0];
+    const key = labelKey ?? String(item.dataKey ?? item.name ?? "value");
     const itemConfig = getPayloadConfigFromPayload(config, item, key);
     const value =
       !labelKey && typeof label === "string"
-        ? (config[label]?.label ?? label)
+        ? (label in config && config[label].label ? config[label].label : undefined) ?? label
         : itemConfig?.label;
 
     if (labelFormatter) {
@@ -182,7 +182,7 @@ function ChartTooltipContent({
       {!nestLabel ? tooltipLabel : null}
       <div className="grid gap-1.5">
         {payload.map((item, index) => {
-          const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+          const key = nameKey ?? String(item.name ?? item.dataKey ?? "value");
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
           const indicatorColor: string | undefined =
             // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
@@ -196,7 +196,7 @@ function ChartTooltipContent({
                 indicator === "dot" && "items-center",
               )}
             >
-              {formatter && item?.value !== undefined && item.name ? (
+              {formatter && item.value !== undefined && item.name ? (
                 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                 formatter(item.value, item.name, item, index, item.payload)
               ) : (
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index 55becb6..ef8fc3d 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -134,7 +134,7 @@ function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
 
 function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
   const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : props.children;
+  const body = error ? (error.message ?? "") : props.children;
 
   if (!body) {
     return null;