up animals
This commit is contained in:
parent
4dd407f068
commit
f42574f0a4
95
package-lock.json
generated
95
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
59
src/App.js
59
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> */}
|
||||
|
||||
5
src/Input.js
Normal file
5
src/Input.js
Normal file
@ -0,0 +1,5 @@
|
||||
import React from "react";
|
||||
|
||||
export const Input = ({ onChange, value }) => {
|
||||
return <input name="test" value={value} onChange={onChange} />;
|
||||
};
|
||||
14
src/Menu.js
14
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={handleAddMenu}>Add</Button>
|
||||
<Button onClick={props.handleDeleteMenu}>Delete</Button>
|
||||
|
||||
<Button onClick={props.handleAddMenu}>Add</Button>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user