Updated database, fixed initial values at input bug, they wasn't displaying in fields, add wiercenie

src/features/Home/HomePage.tsx

@@ -5,11 +5,20 @@ import Slider from "../../components/Slider";
 import useLocalStorage from "../../components/useLocalStorage";
 import { Database, Tool, ToolParams, toolsDatabase } from "../../toolsDatabase";
 
+const initialInputs = {
+	rodzajFrezowania: 1,
+	rodzajObrobki: 0,
+	material: 1,
+	glebokoscSkrawania: 5,
+	szerokoscSkrawania: 20,
+	tolerancja: 3,
+	chropowatosc: 5,
+};
 const frezowaniaOpcje = {
 	name: "rodzajFrezowania",
 	label: "Rodzaj Frezowania",
-	options: ["Czołowe", "Walcowo Czołowe", "Rowków"],
+	options: ["Czołowe", "Walcowo Czołowe", "Rowków", "Wiercenie"],
-	images: ["/czolowe_sandvik.webp", "/walcowo-czolowe_sandvik.webp", "/rowkowe_sandvik.webp"],
+	images: ["/czolowe_sandvik.webp", "/walcowo-czolowe_sandvik.webp", "/rowkowe_sandvik.webp", "/wiercenie_sandvik.webp"],
 };
 const dropdowns = [
 	{
@@ -47,17 +56,7 @@ const HomePage = () => {
 	// ----------------------------- STATE -----------------------------
 	// Załadowanie narzędzi z pliku do localStorage (tylko raz) w celu modyfikowania narzędzi
 	const [toolsDB, setToolsDB] = useLocalStorage<Database>("tools", toolsDatabase);
-	const [input, setInput] = useState<IInput>({
+	const [input, setInput] = useState<IInput>(initialInputs); // Parametry szukania
-		// lists
-		rodzajFrezowania: 0,
-		rodzajObrobki: 0,
-		material: 0,
-		// variables
-		glebokoscSkrawania: Math.floor(Math.random() * 50 + 1),
-		szerokoscSkrawania: Math.floor(Math.random() * 50 + 1),
-		tolerancja: 0,
-		chropowatosc: 0,
-	}); // Parametry szukania
 	const [result, setResult] = useLocalStorage<ToolParams[] | null>("results", []); // Znalazione narzędzie
 	const [searching, setSearching] = useState(false); // Status wyszukiwania
 	const [notFound, setNotFound] = useState(false); // Status znalezienia
@@ -105,24 +104,6 @@ const HomePage = () => {
 		}
 		setSearching(false);
 	}, [searching, checkInputInDatabse, input]);
-	// Set default input
-	useEffect(() => {
-		setInput({
-			// lists
-			rodzajFrezowania: 1,
-			rodzajObrobki: 0,
-			material: 1,
-			// variables
-			glebokoscSkrawania: 5,
-			szerokoscSkrawania: 20,
-			tolerancja: 3,
-			chropowatosc: 2,
-		});
-		return () => {
-			setResult(null);
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
 	// ----------------------------- RENDER ----------------------------
 	return (
 		<>
@@ -131,7 +112,7 @@ const HomePage = () => {
 
 				<div className="mb-4">
 					<label className="block text-gray-700 text-sm font-bold mb-2">{frezowaniaOpcje.label}</label>
-					<div className="grid sm:grid-cols-3 grid-cols-2 gap-4 place-items-center">
+					<div className="grid sm:grid-cols-4 grid-cols-2 gap-4 place-items-center">
 						{frezowaniaOpcje.options.map((option, index) => (
 							<div key={index}>
 								<input
@@ -156,7 +137,7 @@ const HomePage = () => {
 						<div className="mb-4" key={dropdown.label}>
 							<label className="block text-gray-700 text-sm font-bold mb-2">{dropdown.label}</label>
 							<Select
-								value={input[dropdown.label as keyof typeof input]}
+								value={input[dropdown.name as keyof typeof input]}
 								onChange={handleChangeOfField(dropdown.name as keyof typeof input)}
 								options={dropdown.options}
 								label={dropdown.label}
@@ -252,7 +233,7 @@ const HomePage = () => {
 										}}
 										disabled={!edited}
 									>
-										Zapisz zmiany jako nowe narzędzie
+										Zapisz zmiany jako nowy przypadek
 									</button>
 									<div className="h-px bg-neutral-content mb-2"></div>
 								</div>

src/toolsDatabase.ts

@@ -32,7 +32,7 @@ export const toolsDatabase: Database = {
 			rodzajFrezowania: 1,
 			rodzajObrobki: 0,
 			material: 1,
-			chropowatosc: 2,
+			chropowatosc: 5,
 			tolerancja: 3,
 			glebokoscSkrawania: 5,
 			szerokoscSkrawania: 20,
@@ -108,7 +108,7 @@ export const toolsDatabase: Database = {
 			rodzajFrezowania: 1,
 			rodzajObrobki: 1,
 			material: 0,
-			chropowatosc: 2,
+			chropowatosc: 8,
 			tolerancja: 1,
 			glebokoscSkrawania: 10,
 			szerokoscSkrawania: 25,
@@ -146,7 +146,7 @@ export const toolsDatabase: Database = {
 			rodzajFrezowania: 0,
 			rodzajObrobki: 0,
 			material: 2,
-			chropowatosc: 0,
+			chropowatosc: 9,
 			tolerancja: 2,
 			glebokoscSkrawania: 1,
 			szerokoscSkrawania: 25,