react cw-3

js/23_react-2/shop-2/src/App.js

@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import React, {useState, useEffect, useRef} from 'react'
 import logoDefault from './logo.svg';
 import './App.scss';
 import {Provider, connect}   from 'react-redux';
@@ -366,12 +366,30 @@ const Input = () => {
 }
 
 
+
+const Spoiler = ({children}) => {
+    const [open, setOpen] = useState(false)
+    return (
+        <div>
+            <h3  onClick = {e => setOpen(!open)}>{open ? 'hide' : 'show'}</h3>
+            {open && children}
+        </div>
+    )
+}
+
 const RGBInput = () => {
   const [red, setRed] = useState(0)
   const [green, setGreen] = useState(0)
   const [blue, setBlue] = useState(0)
   const color = `rgba(${red},${green},${blue},1)`
 
+  useEffect(() => {
+    console.log('component did mount')
+    return () => {
+        console.log('component will unmount')
+    }
+  }, [])
+
   const bounds = x => x < 0 ? 0 : (x > 255 ? 255 : x)
 
   return (
@@ -388,6 +406,50 @@ const RGBInput = () => {
 }
 
 
+const Timer = ({ms=1000, onDelete}) => {
+    const [counter, setCounter] = useState(0)
+    const ref = useRef(0)
+    
+    useEffect(() => {
+        console.log('+eff')
+        const interval = setInterval(() => {
+            setCounter((counter) => counter + 1)
+        }, ms)
+        return () => {
+            console.log('-eff')
+            clearInterval(interval)
+        }
+      }, [ms])
+      /* console.log(ref.current++) */
+    return (
+        <>
+            <div>{counter}</div>
+            <button onClick={onDelete}>-</button>
+        </>
+    )
+}
+
+const Timers = () => {
+    // const [timer, setTimer] = useState(0)
+    // const arr = []
+    // for (let i=0; i<timer; i++) {
+    //     arr.push(i)
+    // }
+    const [timers, setTimers] = useState([])
+    const [ms, setMS] = useState(1000)
+    return (
+        <>
+            <button onClick={() => setMS(ms + 100)}>+100</button>
+                {ms}
+            <button onClick={() => setMS(ms - 100)}>-100</button>
+            <button onClick={() => setTimers([...timers, Math.random()])}>+</button>
+            {timers.map((i) => <Timer key={i} ms={ms}
+                                onDelete={() => setTimers(timers.filter(t => t !== i))}/>)}
+        </>
+    )
+}
+
+
 const LoginForm = ({onLogin}) => {
   const [login, setLogin] = useState("")
   const [pass, setPass] = useState("")
@@ -409,6 +471,10 @@ const CLoginForm = connect(null, {onLogin: actionFullLogin})(LoginForm)
 
 
 
+
+
+
+
 function App() {
     const worstka = <h1>{Math.random()}</h1>
     const worstkaNative = React.createElement("h1", null, Math.random())
@@ -419,16 +485,29 @@ function App() {
   return (
     <Provider store={store}>
         <div className="App">
-            <LoginForm onLogin={(l,p) => console.log(l,p)}/>
+            {/* <LoginForm onLogin={(l,p) => console.log(l,p)}/>
             <CLoginForm/>
 
             <Input />
-            <RGBInput/>
+            
             {worstka}
             {worstkaNative}
             {worstkaNative2}
-            {listQQQ}
+            {listQQQ} */}
+
+            <Timers/>
+
+            {/* <Spoiler> 
+                <Timer/>
+            </Spoiler> */}
+
+            <Spoiler> 
+                <RGBInput/>
+            </Spoiler>
+
             <Header />
+
+            
             <Main />
             <Footer />
         </div>