|
|
@@ -0,0 +1,156 @@
|
|
|
+import React, { useEffect, useState } from 'react';
|
|
|
+import defaultLogo from './logo.svg';
|
|
|
+import './App.scss';
|
|
|
+
|
|
|
+const Logo = ({logo=defaultLogo}) =>
|
|
|
+<img className="Logo" src={logo} alt='logo'/>
|
|
|
+
|
|
|
+const Header = ({children}) =>
|
|
|
+<header>
|
|
|
+ <Logo />
|
|
|
+ {children}
|
|
|
+</header>
|
|
|
+
|
|
|
+let defaultCategories = [{
|
|
|
+ "name": " Smartphones",
|
|
|
+ "_id": "5dc458985df9d670df48cc47"
|
|
|
+},
|
|
|
+{
|
|
|
+ "name": "Холодильники",
|
|
|
+ "_id": "5dc4b2553f23b553bf3540fc"
|
|
|
+},
|
|
|
+{
|
|
|
+ "name": "Стиральные машины",
|
|
|
+ "_id": "5dc4b2553f23b553bf3540fd"
|
|
|
+},
|
|
|
+{
|
|
|
+ "name": "Стирально-сушильные машины",
|
|
|
+ "_id": "5dc4b2553f23b553bf3540fe"
|
|
|
+},
|
|
|
+{
|
|
|
+ "name": "Стиральные машины",
|
|
|
+ "_id": "5dc4b2553f23b553bf3540ff"
|
|
|
+},
|
|
|
+{
|
|
|
+ "name": "Духовые шкафы",
|
|
|
+ "_id": "5dc4b2553f23b553bf354100"
|
|
|
+},
|
|
|
+{
|
|
|
+ "name": "Крупная бытовая техника",
|
|
|
+ "_id": "5dc4b2553f23b553bf354101"
|
|
|
+},
|
|
|
+{
|
|
|
+ "name": " Макароны",
|
|
|
+ "_id": "5dcac1b56d09c45440d14cf8"
|
|
|
+},
|
|
|
+{
|
|
|
+ "name": "Drinks",
|
|
|
+ "_id": "5dcac6cf6d09c45440d14cfd"
|
|
|
+}]
|
|
|
+const CategoryItem = ({category:{_id,name}= {}}) =>
|
|
|
+<li className='CategoryItem'>
|
|
|
+ {name}
|
|
|
+</li>
|
|
|
+
|
|
|
+const RootCategories = ({categories = defaultCategories}) =>
|
|
|
+<ul className='RootCategories'>
|
|
|
+ {categories.map(category => <CategoryItem category={category}/>)}
|
|
|
+</ul>
|
|
|
+
|
|
|
+
|
|
|
+const Aside = ({}) =>
|
|
|
+<aside>
|
|
|
+ <RootCategories/>
|
|
|
+</aside>
|
|
|
+const Content = ({children}) =>
|
|
|
+<section className='Content'>
|
|
|
+ {children}
|
|
|
+</section>
|
|
|
+
|
|
|
+const Main = ({children}) =>
|
|
|
+<section>
|
|
|
+ <Aside/>
|
|
|
+ <Content>
|
|
|
+ <Logo/>
|
|
|
+ {children}
|
|
|
+ </Content>
|
|
|
+ {children}
|
|
|
+</section>
|
|
|
+
|
|
|
+const Footer = ({children}) =>
|
|
|
+<footer>
|
|
|
+ <Logo/>
|
|
|
+ {children}
|
|
|
+</footer>
|
|
|
+
|
|
|
+const Input = () => {
|
|
|
+ const [text, setText] = useState('text');
|
|
|
+ return <div>
|
|
|
+ <h1>{text}</h1>
|
|
|
+ <input value={text} onChange={e => setText(e.target.value)} />
|
|
|
+ </div>
|
|
|
+
|
|
|
+}
|
|
|
+const LoginForm = ({onLogin}) => {
|
|
|
+ const [login, setLogin] = useState('');
|
|
|
+ const [pswd, setPswd] = useState('');
|
|
|
+
|
|
|
+ return <div>
|
|
|
+ <input value={login} onChange={e => setLogin(e.target.value)}/>
|
|
|
+ <input value={pswd} onChange={e => setPswd(e.target.value)}/>
|
|
|
+ <button disabled={login.length<3 || pswd.length<8 ? true:""} onClick={() => onLogin(login,pswd)}>Login</button>
|
|
|
+ </div>
|
|
|
+}
|
|
|
+
|
|
|
+const Counter = ({ms=1000}) => {
|
|
|
+ const [counter, setCounter] = useState(0)
|
|
|
+ useEffect(() => {
|
|
|
+ const interval = setInterval (() => setCounter(counter => counter+1), ms)
|
|
|
+ return () => {
|
|
|
+ console.log('DID UNMOUNT')
|
|
|
+ clearInterval(interval)
|
|
|
+ }
|
|
|
+ }, [ms])
|
|
|
+ /* setInterval (() => setCounter(counter+1), 1000) */
|
|
|
+ return (
|
|
|
+ <div>{counter}</div>
|
|
|
+ )
|
|
|
+}
|
|
|
+const Spoiler = ({children}) => {
|
|
|
+ const [open, setOpen] = useState(true)
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <button onClick={()=>setOpen(!open)}>Toggle</button>
|
|
|
+ {open && children}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const Counters = () => {
|
|
|
+ const [cntrs, setCntrs] = useState([1,2,3])
|
|
|
+ const [ms, setMs] = useState(1000)
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <button onClick={() => setCntrs(ms+100)}>+</button>
|
|
|
+ <button onClick={() => setCntrs(ms-100)}>-</button>
|
|
|
+ {cntrs.map(() => <Counter/>)}
|
|
|
+ <button onClick={() => setCntrs([...cntrs, cntrs.length])}>Add</button>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function App () {
|
|
|
+ return(
|
|
|
+ <div className='App'>
|
|
|
+ <Input/>
|
|
|
+ <LoginForm onLogin={(login, password) => console.log(login,password)}/>
|
|
|
+ <Spoiler>
|
|
|
+ <Counter/>
|
|
|
+ </Spoiler>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
|
|
+export default App;
|
