Implementing editing results as new tool + prettier entire solution

src/components/Breadcrumbs.tsx

@@ -21,11 +21,7 @@ const Breadcrumbs = () => {
 		return _route?.name || path;
 	};
 
-	const renderLinkBreadcrumb = (
-		value: string,
-		index: number,
-		pathnames: string[],
-	) => {
+	const renderLinkBreadcrumb = (value: string, index: number, pathnames: string[]) => {
 		if (value === pathParams.id) return null;
 		const to = `/${pathnames.slice(0, index + 1).join("/")}`;
 		const routeName = capitalizeFirstLetter(findRouteNameByPath(value));
@@ -47,9 +43,7 @@ const Breadcrumbs = () => {
 	};
 
 	if (hideBreadcrumbBar(location.pathname)) {
-		return (
-			<div className={BREADCRUMB_BAR_CLASSES}>{pathnames[0].toUpperCase()}</div>
-		);
+		return <div className={BREADCRUMB_BAR_CLASSES}>{pathnames[0].toUpperCase()}</div>;
 	}
 
 	return (
@@ -60,9 +54,7 @@ const Breadcrumbs = () => {
 				</li>
 				{pathnames.map((value, index) => {
 					const isLast = index === pathnames.length - 1;
-					return isLast
-						? renderTextBreadcrumb(value)
-						: renderLinkBreadcrumb(value, index, pathnames);
+					return isLast ? renderTextBreadcrumb(value) : renderLinkBreadcrumb(value, index, pathnames);
 				})}
 			</ul>
 		</div>

src/components/CardGrid.tsx

@@ -3,9 +3,7 @@ import { ReactNode } from "react";
 const CardGrid = ({ children }: { children: ReactNode }) => {
 	return (
 		<div className="flex justify-center items-center p-8">
-			<div className="grid gap-8 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1">
-				{children}
-			</div>
+			<div className="grid gap-8 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1">{children}</div>
 		</div>
 	);
 };

src/components/ConfirmationDialog/ConfirmationDialog.tsx

@@ -8,13 +8,8 @@ import useConfirmationDialog from "./useConfirmationDialog";
  * @returns ConfirmationDialog component
  */
 const ConfirmationDialog = () => {
-	const {
-		isConfirmationDialogVisible,
-		handleConfirm,
-		handleCancel,
-		customModalBoxStyles,
-		customModalStyles,
-	} = useConfirmationDialog();
+	const { isConfirmationDialogVisible, handleConfirm, handleCancel, customModalBoxStyles, customModalStyles } =
+		useConfirmationDialog();
 
 	return (
 		<>

src/components/ConfirmationDialog/ConfirmationDialogProvider.tsx

@@ -1,13 +1,8 @@
 import { useState } from "react";
 import { ConfirmationDialogContext } from "../../contexts/ConfirmationDialogContext";
 
-export const ConfirmationDialogProvider = ({
-	children,
-}: {
-	children: React.ReactNode;
-}) => {
-	const [isConfirmationDialogVisible, setIsConfirmationDialogVisible] =
-		useState(false);
+export const ConfirmationDialogProvider = ({ children }: { children: React.ReactNode }) => {
+	const [isConfirmationDialogVisible, setIsConfirmationDialogVisible] = useState(false);
 	const [customModalBoxStyles, setCustomModalBoxStyles] = useState("");
 	const [customModalStyles, setCustomModalStyles] = useState("");
 

src/components/ConfirmationDialog/useConfirmationDialog.ts

@@ -1,8 +1,5 @@
 import { useContext } from "react";
-import {
-	ConfirmationDialogContext,
-	ConfirmationDialogContextType,
-} from "../../contexts/ConfirmationDialogContext";
+import { ConfirmationDialogContext, ConfirmationDialogContextType } from "../../contexts/ConfirmationDialogContext";
 
 /**
  * @description Hook to manage the confirmation dialog, only passes the controls to specyfic dialog component
@@ -13,9 +10,7 @@ import {
 export const useConfirmationDialog = (): ConfirmationDialogContextType => {
 	const context = useContext(ConfirmationDialogContext);
 	if (!context) {
-		throw new Error(
-			"useConfirmationDialog must be used within a ConfirmationDialogProvider",
-		);
+		throw new Error("useConfirmationDialog must be used within a ConfirmationDialogProvider");
 	}
 	return context;
 };

src/components/NavigationTree.tsx

@@ -1,9 +1,6 @@
 import { CustomRouteObject } from "../configure";
 import { Link, useLocation } from "react-router-dom";
-import {
-	clearMultiplePathSlashes,
-	trimPathOfParameters,
-} from "../utils/StringTransformationUtils";
+import { clearMultiplePathSlashes, trimPathOfParameters } from "../utils/StringTransformationUtils";
 
 /**
  * @returns Navigation tree elements, require to be used like in example below
@@ -14,38 +11,26 @@ import {
  * </ul>
  * ```
  */
-function NavigationTree(props: {
-	routes: CustomRouteObject[];
-}): React.JSX.Element {
+function NavigationTree(props: { routes: CustomRouteObject[] }): React.JSX.Element {
 	const locationHook = useLocation(); // Used to highlight active link in navigation tree
 
-	const GenerateNavigationEntries = (
-		routes: CustomRouteObject[],
-		parentPath?: string,
-	): React.ReactNode => {
+	const GenerateNavigationEntries = (routes: CustomRouteObject[], parentPath?: string): React.ReactNode => {
 		return (
 			routes.map((route) => {
 				// Prepare path for links
 				let combinedPath = undefined;
 				if (parentPath !== undefined && route.path !== undefined)
-					combinedPath = trimPathOfParameters(
-						clearMultiplePathSlashes(`/${parentPath}/${route.path}`),
-					);
+					combinedPath = trimPathOfParameters(clearMultiplePathSlashes(`/${parentPath}/${route.path}`));
 				else combinedPath = route.path;
 				// Does it have children and enabled? Make entry with `/{parent.path}/{route.path}`
 				if (route.children && !route.additionalProps.disableInNavbar) {
 					return (
 						<ul key={route.path}>
 							<li key={route.path}>
-								<Link
-									to={combinedPath || "/"}
-									className={locationHook.pathname === combinedPath ? "active" : ""}
-								>
+								<Link to={combinedPath || "/"} className={locationHook.pathname === combinedPath ? "active" : ""}>
 									{route.additionalProps.name}
 								</Link>
-								{route.children ? (
-									<ul>{GenerateNavigationEntries(route.children, combinedPath)}</ul>
-								) : null}
+								{route.children ? <ul>{GenerateNavigationEntries(route.children, combinedPath)}</ul> : null}
 							</li>
 						</ul>
 					);
@@ -60,10 +45,7 @@ function NavigationTree(props: {
 				else {
 					return (
 						<li key={route.path}>
-							<Link
-								to={combinedPath || "/"}
-								className={locationHook.pathname === combinedPath ? "active" : ""}
-							>
+							<Link to={combinedPath || "/"} className={locationHook.pathname === combinedPath ? "active" : ""}>
 								{route.additionalProps.name}
 							</Link>
 						</li>

src/contexts/ConfirmationDialogContext.tsx

@@ -13,7 +13,5 @@ export type ConfirmationDialogContextType = {
 	setCustomModalStyles: React.Dispatch<React.SetStateAction<string>>;
 };
 // Create the context with default values
-export const ConfirmationDialogContext = createContext<
-	ConfirmationDialogContextType | undefined
->(undefined);
+export const ConfirmationDialogContext = createContext<ConfirmationDialogContextType | undefined>(undefined);
 ConfirmationDialogContext.displayName = "ConfirmationDialog";

src/features/App/App.tsx

@@ -47,10 +47,7 @@ function App() {
 					<div className="navbar bg-neutral text-neutral-content w-auto">
 						{/* Left side navbar */}
 						<div className="flex-1">
-							<label
-								htmlFor="my-drawer"
-								className="btn btn-circle btn-neutral drawer-button"
-							>
+							<label htmlFor="my-drawer" className="btn btn-circle btn-neutral drawer-button">
 								<HamburgerMenuIcon className="w-6 h-6" />
 							</label>
 							<p className="text-lg font-bold ml-8">{main.program_name}</p>

src/features/Debugger.tsx

@@ -7,9 +7,7 @@ function Debugger() {
 	return (
 		<div className="m-auto p-4">
 			<details className="collapse bg-base-200 mb-4">
-				<summary className="collapse-title text-xl font-medium">
-					Flat Routes
-				</summary>
+				<summary className="collapse-title text-xl font-medium">Flat Routes</summary>
 				<code className="collapse-content">{JSON.stringify(flatRoutes)}</code>
 			</details>
 			<details className="collapse bg-base-200 mb-4">

src/features/Home/HomePage.tsx

@@ -2,7 +2,7 @@ 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 { Tool, ToolParams, toolsDatabase } from "../../toolsDatabase";
 import { v4 as uuid4 } from "uuid";
 
 const frezowaniaOpcje = {
@@ -64,7 +64,7 @@ const HomePage = () => {
 		tolerancja: 0,
 		chropowatosc: 0,
 	});
-	const [result, setResult] = useLocalStorage<Tool[] | null>("results", []); // Znalazione narzędzie
+	const [result, setResult] = useLocalStorage<ToolParams[] | 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);
@@ -88,7 +88,10 @@ const HomePage = () => {
 		(input: IInput): void => {
 			console.debug("checking...", input);
 
-			const foundTool: Tool[] | undefined = toolsDatabase.tools.filter((tool) => matchesInput(tool, input));
+			const foundTool: ToolParams[] | undefined = toolsDatabase.tools
+				.filter((tool) => matchesInput(tool, input)) // filter tools that match input
+				.filter((tool) => tool.params) // filter tools that have params
+				.map((tool) => tool.params); // extract params from tools
 
 			if (foundTool && typeof foundTool !== "undefined" && foundTool.length > 0) {
 				console.debug("found", foundTool);
@@ -206,7 +209,7 @@ const HomePage = () => {
 						{result.map((tool) => {
 							return (
 								<div key={uuid4()}>
-									<h2 className="text-2xl mb-1">{tool.name}</h2>
+									<h2 className="text-2xl mb-1">{tool.params.name}</h2>
 									<table className="table">
 										<thead>
 											<tr>
@@ -215,7 +218,8 @@ const HomePage = () => {
 											</tr>
 										</thead>
 										<tbody>
-											{Object.entries(tool).map(([key, value]) => {
+											{Object.entries(tool.params).map(([key, value]) => {
+												console.log(tool.params);
 												return (
 													<tr>
 														<td className="border px-4 py-2">{key}</td>

src/routes.tsx

@@ -11,9 +11,7 @@ import Redirect from "./utils/Redirect.tsx";
 /**
  * This function is used to convert `CustomRouteObject` to `RouteObject` and process all additionalProps
  */
-const createRoutingFromCustomRouteObject = (
-	routes: CustomRouteObject[],
-): RouteObject[] => {
+const createRoutingFromCustomRouteObject = (routes: CustomRouteObject[]): RouteObject[] => {
 	const navigationRoutes: RouteObject[] = []; //Root routes that will be used for navigation
 	routes.forEach((route) => {
 		// Extract everything except additionalProps and children

src/toolsDatabase.ts

@@ -1,7 +1,14 @@
-export interface Tool {
+export interface ToolParams {
 	name: string;
 	plate: string;
-	ilosc_zebow: number;
+	predkoscObrotowaWrzeciona: number;
+	predkoscSkrawania: number;
+	predkoscPosuwu: number;
+	posuwNaOstrze: number;
+	posuwNaObrot: number;
+	wydajnoscObjetosciowa: number;
+}
+export interface Tool {
 	rodzajFrezowania: number;
 	rodzajObrobki: number;
 	material: number;
@@ -9,12 +16,7 @@ export interface Tool {
 	tolerancja: number;
 	szerokoscSkrawania: number;
 	glebokoscSkrawania: number;
-	predkoscObrotowaWrzeciona: number;
-	predkoscSkrawania: number;
-	predkoscPosuwu: number;
-	posuwNaOstrze: number;
-	posuwNaObrot: number;
-	wydajnoscObjetosciowa: number;
+	params: ToolParams;
 }
 interface Database {
 	name: string;
@@ -34,9 +36,9 @@ export const toolsDatabase: Database = {
 			tolerancja: 3,
 			glebokoscSkrawania: 5,
 			szerokoscSkrawania: 20,
+			params: {
 				name: "Coromill 390 R390-20T10-11M",
 				plate: "R390-11 T3 08M-MM 1040",
-			ilosc_zebow: 3,
 				predkoscObrotowaWrzeciona: 2680,
 				predkoscSkrawania: 168,
 				predkoscPosuwu: 1090,
@@ -44,6 +46,7 @@ export const toolsDatabase: Database = {
 				posuwNaObrot: 0.407,
 				wydajnoscObjetosciowa: 64.8,
 			},
+		},
 		{
 			rodzajFrezowania: 1,
 			rodzajObrobki: 0,
@@ -52,9 +55,9 @@ export const toolsDatabase: Database = {
 			tolerancja: 3,
 			glebokoscSkrawania: 5,
 			szerokoscSkrawania: 20,
+			params: {
 				name: "Coromill DUPA",
 				plate: "DUPA",
-			ilosc_zebow: 4,
 				predkoscObrotowaWrzeciona: 9999,
 				predkoscSkrawania: 999,
 				predkoscPosuwu: 9999,
@@ -62,6 +65,7 @@ export const toolsDatabase: Database = {
 				posuwNaObrot: 0.999,
 				wydajnoscObjetosciowa: 99.9,
 			},
+		},
 		{
 			rodzajFrezowania: 0,
 			rodzajObrobki: 2,
@@ -70,9 +74,9 @@ export const toolsDatabase: Database = {
 			tolerancja: 2,
 			glebokoscSkrawania: 5,
 			szerokoscSkrawania: 44.5,
+			params: {
 				name: "CoroMill 245 R245-032A32-12M",
 				plate: "R245-12 T3 E1 6190",
-			ilosc_zebow: 3,
 				predkoscObrotowaWrzeciona: 13800,
 				predkoscSkrawania: 1520,
 				predkoscPosuwu: 4420,
@@ -80,6 +84,7 @@ export const toolsDatabase: Database = {
 				posuwNaObrot: 0.32,
 				wydajnoscObjetosciowa: 55.3,
 			},
+		},
 		{
 			rodzajFrezowania: 0,
 			rodzajObrobki: 2,
@@ -88,9 +93,9 @@ export const toolsDatabase: Database = {
 			tolerancja: 5,
 			glebokoscSkrawania: 5,
 			szerokoscSkrawania: 44.5,
+			params: {
 				name: "CoroMill 245 R245-032A32-12M",
 				plate: "R245-12 T3 E1 6190",
-			ilosc_zebow: 3,
 				predkoscObrotowaWrzeciona: 11200,
 				predkoscSkrawania: 1510,
 				predkoscPosuwu: 9220,
@@ -98,6 +103,7 @@ export const toolsDatabase: Database = {
 				posuwNaObrot: 0.823,
 				wydajnoscObjetosciowa: 461,
 			},
+		},
 		{
 			rodzajFrezowania: 2,
 			rodzajObrobki: 1,
@@ -106,9 +112,9 @@ export const toolsDatabase: Database = {
 			tolerancja: 4,
 			glebokoscSkrawania: 5,
 			szerokoscSkrawania: 40,
+			params: {
 				name: "CoroMill 331 R331.35C-040A16CM060",
 				plate: "R331.1A-04 35 15H-WL1040",
-			ilosc_zebow: 3,
 				predkoscObrotowaWrzeciona: 1790,
 				predkoscSkrawania: 225,
 				predkoscPosuwu: 542,
@@ -116,6 +122,7 @@ export const toolsDatabase: Database = {
 				posuwNaObrot: 0.303,
 				wydajnoscObjetosciowa: 7.67,
 			},
+		},
 		{
 			rodzajFrezowania: 1,
 			rodzajObrobki: 1,
@@ -124,9 +131,9 @@ export const toolsDatabase: Database = {
 			tolerancja: 1,
 			glebokoscSkrawania: 10,
 			szerokoscSkrawania: 25,
+			params: {
 				name: "CoroMill 790 R790-025A25S2-16L",
 				plate: "R790-160408PH-PL 1130",
-			ilosc_zebow: 3,
 				predkoscObrotowaWrzeciona: 4090,
 				predkoscSkrawania: 321,
 				predkoscPosuwu: 3270,
@@ -134,6 +141,7 @@ export const toolsDatabase: Database = {
 				posuwNaObrot: 0.799,
 				wydajnoscObjetosciowa: 3.27,
 			},
+		},
 		{
 			rodzajFrezowania: 2,
 			rodzajObrobki: 0,
@@ -142,9 +150,9 @@ export const toolsDatabase: Database = {
 			tolerancja: 2,
 			glebokoscSkrawania: 10,
 			szerokoscSkrawania: 50,
+			params: {
 				name: "CoroMill 331 R331.35C-051M25EMA06",
 				plate: "L331.1A-05 45 15H-WL1130",
-			ilosc_zebow: 3,
 				predkoscObrotowaWrzeciona: 1950,
 				predkoscSkrawania: 311,
 				predkoscPosuwu: 736,
@@ -152,5 +160,6 @@ export const toolsDatabase: Database = {
 				posuwNaObrot: 0.377,
 				wydajnoscObjetosciowa: 47.6,
 			},
+		},
 	],
 };

src/utils/ObjectUtils.ts

@@ -1,6 +1,4 @@
-export const rollThroughObj = (
-	obj: Readonly<Partial<{ state: string; id: string }>>,
-) => {
+export const rollThroughObj = (obj: Readonly<Partial<{ state: string; id: string }>>) => {
 	let result = "";
 	for (const [key, value] of Object.entries(obj)) {
 		result += ` -${key}: ${value}`;

src/utils/RoutingTableUtils.ts

@@ -1,12 +1,5 @@
-import {
-	CustomRouteObject,
-	RouteObjectAdditionalProps,
-	flatRoutes,
-} from "../configure";
-import {
-	clearMultiplePathSlashes,
-	trimPathOfParameters,
-} from "./StringTransformationUtils";
+import { CustomRouteObject, RouteObjectAdditionalProps, flatRoutes } from "../configure";
+import { clearMultiplePathSlashes, trimPathOfParameters } from "./StringTransformationUtils";
 
 interface FlatternRoutingTableElement extends RouteObjectAdditionalProps {
 	path: string;
@@ -42,9 +35,7 @@ export const flatternRoutingTable = (
 			!route.additionalProps.disableInNavbar
 		) {
 			result.push({
-				path: trimPathOfParameters(
-					clearMultiplePathSlashes(`/${previousPath}/${route.path}`),
-				),
+				path: trimPathOfParameters(clearMultiplePathSlashes(`/${previousPath}/${route.path}`)),
 				name: route.additionalProps.name,
 				disableBreadcrumbBar: route.additionalProps.disableBreadcrumbBar,
 				disableInNavbar: route.additionalProps.disableInNavbar,
@@ -58,17 +49,14 @@ export const flatternRoutingTable = (
 			result.push(...flatternRoutingTable(route.children, route.path));
 		}
 		// Errors handling
-		if (typeof route.path === "undefined")
-			console.error(`Route ${route.additionalProps.name} is missing path`);
+		if (typeof route.path === "undefined") console.error(`Route ${route.additionalProps.name} is missing path`);
 	});
 	return result;
 };
 /**
  * @description Function to find element in flattern routes array by LAST path ex: /admin/MAINTENANCE
  */
-export const findElementInFlatRoutes = (
-	path: string,
-): FlatternRoutingTableElement | undefined => {
+export const findElementInFlatRoutes = (path: string): FlatternRoutingTableElement | undefined => {
 	// Split path string into array, split by '/', then get the last element
 	const _route = flatRoutes.find((route) => {
 		const pathArray = route.path.split("/");