up animals

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",

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",

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 (
     <nav>
       <h1>{nadpis}</h1>
@@ -43,10 +32,19 @@ export const Animal = (props) => {
         </ul>
       )}
 
-      <Button className="primary" isDisabled={emptyZoo} onClick={handleDeleteAnimal}>
+      <Input onChange={props.handleOnChange} value={props.inputValue}></Input>
+
+      <Button
+        className="primary"
+        isDisabled={emptyZoo}
+        onClick={props.handleDeleteAnimal}
+      >
         Delete
       </Button>
-      <Button className="secondary" onClick={handleAddAnimal}>Add</Button>
+
+      <Button className="secondary" onClick={props.handleAddAnimal}>
+        Add
+      </Button>
     </nav>
   );
 };

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 (
     <>
-      <Animal animal={animal} nadpis="Super ZOO" />
+      {/* <Menu
+        menu={menu}
+        handleDeleteMenu={handleDeleteMenu}
+        handleAddMenu={handleAddMenu}
+        nadpis="Menu"
+      /> */}
+      <Animal
+        animal={animal}
+        inputValue={newAnimal}
+        handleAddAnimal={handleAddAnimal}
+        handleDeleteAnimal={handleDeleteAnimal}
+        handleOnChange={handleOnChange}
+        nadpis="Super ZOO"
+      />
       {/* <ChakraProvider>
         <Button colorScheme="teal">Chakra button</Button>
       </ChakraProvider> */}

src/Input.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const Input = ({ onChange, value }) => {
+  return <input name="test" value={value} onChange={onChange} />;
+};

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 <p>Menu je prazdne</p>;
   //   }
 
-  const handleAddMenu = () => {
+  /* const handleAddMenu = () => {
     console.log("pridal jsi menu");
+    setMenu(["Uvod", "O nas", "Kontakt"]);
   };
 
   const handleDeleteMenu = () => {
     console.log("smazal jsi menu");
-  };
+    setMenu([]);
+  }; */
 
   return (
     <nav>
@@ -35,8 +38,9 @@ export const Menu = (props) => {
         </ul>
       )}
 
-      <Button onClick={handleDeleteMenu}>Delete</Button>
+      <Button onClick={props.handleDeleteMenu}>Delete</Button>
-      <Button onClick={handleAddMenu}>Add</Button>
+
+      <Button onClick={props.handleAddMenu}>Add</Button>
     </nav>
   );
 };