From 19dd8a42765393ad0a5d69ca791810cf7a39ac5d Mon Sep 17 00:00:00 2001 From: Igor Barcik Date: Tue, 31 Oct 2023 23:25:20 +0100 Subject: [PATCH] Implementing editing results as new tool --- src/components/useLocalStorage.ts | 32 +++++++++++ src/configure.tsx | 2 +- src/features/Home/HomePage.tsx | 88 +++++++++++++++++++++++-------- src/main.tsx | 5 +- src/toolsDatabase.ts | 24 +++++++-- 5 files changed, 120 insertions(+), 31 deletions(-) create mode 100644 src/components/useLocalStorage.ts diff --git a/src/components/useLocalStorage.ts b/src/components/useLocalStorage.ts new file mode 100644 index 0000000..ab1805c --- /dev/null +++ b/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 = (key: string, initialValue: T): [T, (value: T) => void] => { + const [storedValue, setStoredValue] = useState(() => { + 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; diff --git a/src/configure.tsx b/src/configure.tsx index fbde2a6..6972847 100644 --- a/src/configure.tsx +++ b/src/configure.tsx @@ -85,7 +85,7 @@ export interface CustomRouteObject extends Omit { //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 = { diff --git a/src/features/Home/HomePage.tsx b/src/features/Home/HomePage.tsx index 1754fc8..dd6eb7a 100644 --- a/src/features/Home/HomePage.tsx +++ b/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(null); // Znalazione narzędzie + const [result, setResult] = useLocalStorage("results", []); // Znalazione narzędzie + // const [result, setResult] = useState(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 => { - console.debug("checking...", input); + const checkInputInDatabse = useCallback( + (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) { - console.debug("found", foundTool); - setResult(foundTool); - } else { - console.debug("not found"); - setResult(null); - setNotFound(true); - } - }, []); + if (foundTool && typeof foundTool !== "undefined" && foundTool.length > 0) { + console.debug("found", foundTool); + setResult(foundTool); + } else { + console.debug("not found"); + setResult(null); + 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 ( <>
-

Wybór parametrów

+

Wybór atrybutów

@@ -179,15 +200,36 @@ const HomePage = () => {
-
+
{result ? ( <> -

{result.name}

- {Object.entries(result!).map((arrayKeyValue) => { + {result.map((tool) => { return ( -

- {`${arrayKeyValue[0]}:`} {`${arrayKeyValue[1]}`} -

+
+

{tool.name}

+ + + + + + + + + {Object.entries(tool).map(([key, value]) => { + return ( + + + + + ); + })} + +
ParametrWartość
{key} + +
+ +
+
); })} diff --git a/src/main.tsx b/src/main.tsx index 702fa7b..44e2104 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -12,10 +12,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( {/* fallbackElement - use when routing table is quite big to load, it will display desired element in convention of loading screen */} - Loading route table...

} - /> + Loading route table...

} /> , ); diff --git a/src/toolsDatabase.ts b/src/toolsDatabase.ts index 198e738..a6a4f70 100644 --- a/src/toolsDatabase.ts +++ b/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,