diff --git a/package-lock.json b/package-lock.json index 120a094..f191ff1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "framer-motion": "^10.12.16", + "hash-router": "^0.4.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.11.2", @@ -8089,6 +8090,11 @@ "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" } }, + "node_modules/dom-walk": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz", + "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==" + }, "node_modules/domelementtype": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", @@ -9530,6 +9536,11 @@ "is-callable": "^1.1.3" } }, + "node_modules/foreach": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.6.tgz", + "integrity": "sha512-k6GAGDyqLe9JaebCsFCoudPPWfihKu8pylYXRlqP1J7ms39iPoTtk2fviNglIeQEwdh0bQeKJ01ZPyuyQvKzwg==" + }, "node_modules/fork-ts-checker-webpack-plugin": { "version": "6.5.3", "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz", @@ -9956,6 +9967,15 @@ "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz", "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==" }, + "node_modules/global": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz", + "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==", + "dependencies": { + "min-document": "^2.19.0", + "process": "^0.11.10" + } + }, "node_modules/global-modules": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz", @@ -10156,6 +10176,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/hash-router": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/hash-router/-/hash-router-0.4.0.tgz", + "integrity": "sha512-TWIwsxInId58YR3HeGhwIK/APKc5immhVCc2aPD8j7o368exRmKulcwaF1w6Yd6cnMIBDS7LCz4imfaIeYKTew==", + "dependencies": { + "global": "^4.2.1", + "routes": "~0.2.0", + "xtend": "~2.0.6" + } + }, "node_modules/he": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", @@ -10515,6 +10545,11 @@ "node": ">=8" } }, + "node_modules/indexof": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz", + "integrity": "sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==" + }, "node_modules/inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -10563,6 +10598,14 @@ "node": ">= 10" } }, + "node_modules/is": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/is/-/is-0.2.7.tgz", + "integrity": "sha512-ajQCouIvkcSnl2iRdK70Jug9mohIHVX9uKpoWnl115ov0R5mzBvRrXxrnHbsA+8AdwCwc/sfw7HXmd4I5EJBdQ==", + "engines": { + "node": "*" + } + }, "node_modules/is-arguments": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", @@ -10772,6 +10815,11 @@ "node": ">=0.10.0" } }, + "node_modules/is-object": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/is-object/-/is-object-0.1.2.tgz", + "integrity": "sha512-GkfZZlIZtpkFrqyAXPQSRBMsaHAw+CgoKe2HXAkjd/sfoI9+hS8PT4wg2rJxdQyUKr7N2vHJbg7/jQtE5l5vBQ==" + }, "node_modules/is-path-inside": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz", @@ -13479,6 +13527,14 @@ "node": ">=6" } }, + "node_modules/min-document": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz", + "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==", + "dependencies": { + "dom-walk": "^0.1.0" + } + }, "node_modules/min-indent": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", @@ -15497,6 +15553,14 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/process": { + "version": "0.11.10", + "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", + "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==", + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", @@ -16435,6 +16499,14 @@ "node": ">=8" } }, + "node_modules/routes": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/routes/-/routes-0.2.0.tgz", + "integrity": "sha512-Poi9njx/cuUbH75aWW6ImiQGfmZhAK7FFUUfraLIOjRgPw9N7H88L9IsYTxXWxFv9YuPJJr/rtLSzVRh72kCww==", + "engines": { + "node": "*" + } + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -18930,6 +19002,29 @@ "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==" }, + "node_modules/xtend": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-2.0.6.tgz", + "integrity": "sha512-fOZg4ECOlrMl+A6Msr7EIFcON1L26mb4NY5rurSkOex/TWhazOrg6eXD/B0XkuiYcYhQDWLXzQxLMVJ7LXwokg==", + "dependencies": { + "is-object": "~0.1.2", + "object-keys": "~0.2.0" + }, + "engines": { + "node": ">=0.4" + } + }, + "node_modules/xtend/node_modules/object-keys": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.2.0.tgz", + "integrity": "sha512-XODjdR2pBh/1qrjPcbSeSgEtKbYo7LqYNq64/TPuCf7j9SfDD3i21yatKoIy39yIWNvVM59iutfQQpCv1RfFzA==", + "deprecated": "Please update to the latest object-keys", + "dependencies": { + "foreach": "~2.0.1", + "indexof": "~0.0.1", + "is": "~0.2.6" + } + }, "node_modules/y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", diff --git a/package.json b/package.json index 4893aee..7c37256 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "framer-motion": "^10.12.16", + "hash-router": "^0.4.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.11.2", diff --git a/src/Animal.js b/src/Animal.js index e062147..48936c2 100644 --- a/src/Animal.js +++ b/src/Animal.js @@ -1,6 +1,7 @@ import React from "react"; import { useState } from "react"; import { Button } from "./Button"; +import { Input } from "./Input"; export const Animal = (props) => { // const [animal = props.animal, addAnimal] = useState(false); @@ -18,18 +19,6 @@ export const Animal = (props) => { //if (animal.length === 0) emptyZoo = true; //else emptyZoo = false; - const handleAddAnimal = () => { - //const arr = ['zirafa', 'mroz']; - //setAnimal(current => [...current, ...arr]); - //emptyZoo = false; - console.log("pridal jsi..."); - }; - - const handleDeleteAnimal = () => { - //emptyZoo = true; - console.log("smazal jsi..."); - }; - return ( ); }; diff --git a/src/App.js b/src/App.js index 43c6b3b..9858852 100644 --- a/src/App.js +++ b/src/App.js @@ -7,18 +7,67 @@ import Content from "./Content"; import Footer from "./Footer"; import { Menu } from "./Menu"; import { Animal } from "./Animal"; +import { useState } from "react"; //import { Button } from "./Button"; //import { Button, ButtonGroup } from "@chakra-ui/react"; - function App() { - //const animal = []; - const animal = ["Lev", "Lachtan", "Varan", "Slon"]; - + //const animal = ["Lev", "Lachtan", "Varan", "Slon"]; + + const [animal, setAnimal] = useState(["Lev", "Lachtan", "Varan", "Slon"]); + const [menu, setMenu] = useState(["Uvod", "O nas", "Kontakt"]); + const [newAnimal, setNewAnimal] = useState(""); + + const handleAddMenu = () => { + console.log("pridal jsi menu"); + setMenu(["Uvod", "O nas", "Kontakt"]); + }; + + const handleDeleteMenu = () => { + console.log("smazal jsi menu"); + setMenu([]); + }; + + const handleAddAnimal = () => { + //const arr = ['zirafa', 'mroz']; + //setAnimal(current => [...current, ...arr]); + //emptyZoo = false; + //setAnimal(["Lev", "Lachtan", "Varan", "Slon"]); + if (newAnimal != "") { + setAnimal([...animal, newAnimal]); + console.log("pridal jsi..."); + setNewAnimal(""); + } else console.log("prazdne pole..."); + }; + + const handleOnChange = (event) => { + console.log(event.target.value); + setNewAnimal([event.target.value]); + }; + + const handleDeleteAnimal = () => { + //emptyZoo = true; + setAnimal([]); + console.log("smazal jsi..."); + }; + return ( <> - + {/* */} + {/* */} diff --git a/src/Input.js b/src/Input.js new file mode 100644 index 0000000..984c57d --- /dev/null +++ b/src/Input.js @@ -0,0 +1,5 @@ +import React from "react"; + +export const Input = ({ onChange, value }) => { + return ; +}; diff --git a/src/Menu.js b/src/Menu.js index e319c7c..0d8d58a 100644 --- a/src/Menu.js +++ b/src/Menu.js @@ -1,6 +1,6 @@ import React from "react"; import { Button } from "./Button"; - +import { useState } from "react"; export const Menu = (props) => { const menu = props.menu; @@ -8,19 +8,22 @@ export const Menu = (props) => { // const {menu, nadpis} = props; + //const [menu, setMenu] = useState(["Uvod", "O nas", "Kontakt"]); //const menu = ["Uvod", "O nas", "Kontakt"]; //const menu = []; // if (menu.length === 0) { // return

Menu je prazdne

; // } - const handleAddMenu = () => { + /* const handleAddMenu = () => { console.log("pridal jsi menu"); + setMenu(["Uvod", "O nas", "Kontakt"]); }; const handleDeleteMenu = () => { console.log("smazal jsi menu"); - }; + setMenu([]); + }; */ return ( ); };