Implementing editing results as new tool

src/components/useLocalStorage.ts

@@ -0,0 +1,32 @@
+import { useState } from "react";
+/**
+ * Works like useState but stores the value in local storage
+ * @param key Create a key to store the value in local storage
+ * @param initialValue Assign an initial value to the key
+ * @returns [storedValue, setValue] Returns the stored value and a function to set the value
+ */
+const useLocalStorage = <T>(key: string, initialValue: T): [T, (value: T) => void] => {
+	const [storedValue, setStoredValue] = useState<T>(() => {
+		try {
+			const item = window.localStorage.getItem(key);
+			return item ? JSON.parse(item) : initialValue;
+		} catch (error) {
+			console.log(error);
+			return initialValue;
+		}
+	});
+
+	const setValue = (value: T) => {
+		try {
+			const valueToStore = value instanceof Function ? value(storedValue) : value;
+			setStoredValue(valueToStore);
+			window.localStorage.setItem(key, JSON.stringify(valueToStore));
+		} catch (error) {
+			console.log(error);
+		}
+	};
+
+	return [storedValue, setValue];
+};
+
+export default useLocalStorage;

src/configure.tsx

@@ -85,7 +85,7 @@ export interface CustomRouteObject extends Omit<RouteObject, "children"> {
 //Main configuration, static data, mostly used here
 export const main = {
 	program_name: viteEnv.VITE_APP_NAME,
-	program_version: "1.7.0",
+	program_version: "1.9.0",
 };
 //About page configuration
 export const about = {

src/features/Home/HomePage.tsx

@@ -1,7 +1,9 @@
 import { useCallback, useEffect, useState } from "react";
 import Select from "../../components/Select";
 import Slider from "../../components/Slider";
+import useLocalStorage from "../../components/useLocalStorage";
 import { Tool, toolsDatabase } from "../../toolsDatabase";
+import { v4 as uuid4 } from "uuid";
 
 const frezowaniaOpcje = {
 	name: "rodzajFrezowania",
@@ -13,7 +15,7 @@ const dropdowns = [
 	{
 		name: "rodzajObrobki",
 		label: "Rodzaj Obróbki",
-		options: ["Zgrubna", "Wykończeniowa"],
+		options: ["Zgrubna", "Wykończeniowa", "Wstępna i wykańczająca"],
 	},
 	{
 		name: "material",
@@ -28,7 +30,7 @@ const dropdowns = [
 	{
 		name: "chropowatosc",
 		label: "Chropowatość",
-		options: ["Ra 1,6", "Ra 3,2", "Ra 6,3", "Ra 12,5", "Ra 25", "Ra 50"],
+		options: ["Ra 0,1", "Ra 0,2", "Ra 0,4", "Ra 0,8", "Ra 1,6", "Ra 3,2", "Ra 6,3", "Ra 12,5", "Ra 25", "Ra 50"],
 	},
 ];
 interface IInput {
@@ -62,7 +64,8 @@ const HomePage = () => {
 		tolerancja: 0,
 		chropowatosc: 0,
 	});
-	const [result, setResult] = useState<Tool | null>(null); // Znalazione narzędzie
+	const [result, setResult] = useLocalStorage<Tool[] | null>("results", []); // Znalazione narzędzie
+	// const [result, setResult] = useState<Tool | null>(null); // Znalazione narzędzie
 	const [calculating, setCalculating] = useState(false);
 	const [notFound, setNotFound] = useState(false);
 	// ----------------------------- FUNCTION --------------------------
@@ -81,20 +84,23 @@ const HomePage = () => {
 			input.tolerancja === tool.tolerancja
 		);
 	};
-	const checkInputInDatabse = useCallback((input: IInput): void => {
+	const checkInputInDatabse = useCallback(
-		console.debug("checking...", input);
+		(input: IInput): void => {
+			console.debug("checking...", input);
 
-		const foundTool = toolsDatabase.tools.find((tool) => matchesInput(tool, input));
+			const foundTool: Tool[] | undefined = toolsDatabase.tools.filter((tool) => matchesInput(tool, input));
 
-		if (foundTool) {
+			if (foundTool && typeof foundTool !== "undefined" && foundTool.length > 0) {
-			console.debug("found", foundTool);
+				console.debug("found", foundTool);
-			setResult(foundTool);
+				setResult(foundTool);
-		} else {
+			} else {
-			console.debug("not found");
+				console.debug("not found");
-			setResult(null);
+				setResult(null);
-			setNotFound(true);
+				setNotFound(true);
-		}
+			}
-	}, []);
+		},
+		[setResult],
+	);
 
 	// ----------------------------- EFFECT ----------------------------
 	useEffect(() => {
@@ -103,14 +109,29 @@ const HomePage = () => {
 		}
 		setCalculating(false);
 	}, [calculating, checkInputInDatabse, input]);
+	// debug
 	useEffect(() => {
+		setInput({
+			// lists
+			rodzajFrezowania: 1,
+			rodzajObrobki: 0,
+			material: 1,
+			// variables
+			glebokoscSkrawania: 5,
+			szerokoscSkrawania: 20,
+			tolerancja: 3,
+			chropowatosc: 2,
+		});
 		console.dir(input);
-	}, [input]);
+		return () => {
+			setResult(null);
+		};
+	}, []);
 	// ----------------------------- RENDER ----------------------------
 	return (
 		<>
 			<div className="p-6 bg-white rounded shadow-lg lg:w-[800px] space-y-4 mb-4 mt-4 lg:ml-[50%] lg:translate-x-[-50%] ">
-				<h1 className="text-3xl mb-6 text-center text-gray-700">Wybór parametrów</h1>
+				<h1 className="text-3xl mb-6 text-center text-gray-700">Wybór atrybutów</h1>
 
 				<div className="mb-4">
 					<label className="block text-gray-700 text-sm font-bold mb-2">{frezowaniaOpcje.label}</label>
@@ -179,15 +200,36 @@ const HomePage = () => {
 				</button>
 			</div>
 
-			<div className="p-6 bg-white rounded shadow-lg lg:w-[500px] mb-4 lg:ml-[50%] lg:translate-x-[-50%]">
+			<div className="p-6 bg-white rounded shadow-lg lg:w-[800px] mb-4 lg:ml-[50%] lg:translate-x-[-50%]">
 				{result ? (
 					<>
-						<h2 className="text-2xl mb-4">{result.name}</h2>
+						{result.map((tool) => {
-						{Object.entries(result!).map((arrayKeyValue) => {
 							return (
-								<p>
+								<div key={uuid4()}>
-									{`${arrayKeyValue[0]}:`} <b>{`${arrayKeyValue[1]}`}</b>
+									<h2 className="text-2xl mb-1">{tool.name}</h2>
-								</p>
+									<table className="table">
+										<thead>
+											<tr>
+												<th className="px-4 py-2">Parametr</th>
+												<th className="px-4 py-2">Wartość</th>
+											</tr>
+										</thead>
+										<tbody>
+											{Object.entries(tool).map(([key, value]) => {
+												return (
+													<tr>
+														<td className="border px-4 py-2">{key}</td>
+														<td className="border px-4 py-2">
+															<input type="text" className="input w-full" value={value} />
+														</td>
+													</tr>
+												);
+											})}
+										</tbody>
+									</table>
+									<button className="btn btn-neutral mt-4 mb-4">Zapisz zmiany jako nowe narzędzie</button>
+									<div className="h-px bg-neutral-content mb-2"></div>
+								</div>
 							);
 						})}
 					</>

src/main.tsx

@@ -12,10 +12,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
 	<React.StrictMode>
 		{/* fallbackElement - use when routing table is quite big to load, it will display desired element in convention of loading screen */}
 		<ConfirmationDialogProvider>
-			<RouterProvider
+			<RouterProvider router={router} fallbackElement={<p>Loading route table...</p>} />
-				router={router}
-				fallbackElement={<p>Loading route table...</p>}
-			/>
 		</ConfirmationDialogProvider>
 	</React.StrictMode>,
 );

src/toolsDatabase.ts

@@ -24,7 +24,7 @@ interface Database {
 
 export const toolsDatabase: Database = {
 	name: "Baza narzędzi obróbki skrawaniem",
-	version: "1.0",
+	version: "1.1",
 	tools: [
 		{
 			rodzajFrezowania: 1,
@@ -44,9 +44,27 @@ export const toolsDatabase: Database = {
 			posuwNaObrot: 0.407,
 			wydajnoscObjetosciowa: 64.8,
 		},
+		{
+			rodzajFrezowania: 1,
+			rodzajObrobki: 0,
+			material: 1,
+			chropowatosc: 2,
+			tolerancja: 3,
+			glebokoscSkrawania: 5,
+			szerokoscSkrawania: 20,
+			name: "Coromill DUPA",
+			plate: "DUPA",
+			ilosc_zebow: 4,
+			predkoscObrotowaWrzeciona: 9999,
+			predkoscSkrawania: 999,
+			predkoscPosuwu: 9999,
+			posuwNaOstrze: 0.999,
+			posuwNaObrot: 0.999,
+			wydajnoscObjetosciowa: 99.9,
+		},
 		{
 			rodzajFrezowania: 0,
-			rodzajObrobki: 1,
+			rodzajObrobki: 2,
 			material: 2,
 			chropowatosc: 3,
 			tolerancja: 2,
@@ -64,7 +82,7 @@ export const toolsDatabase: Database = {
 		},
 		{
 			rodzajFrezowania: 0,
-			rodzajObrobki: 0,
+			rodzajObrobki: 2,
 			material: 2,
 			chropowatosc: 5,
 			tolerancja: 5,