Homework/js/23_react_hw/react_hw/src/App.js

import React, {useState, useEffect, useRef} from 'react'
import logoDefault from './logo.svg';
import './App.scss';
import {Provider, connect}   from 'react-redux';
import {createStore, combineReducers, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';


const Spoiler = ({header="+", open=true, children}) => {
  const [isOpen, setOpen] = useState(open)
  return (
    <div>
        <div  onClick = {e => setOpen(!isOpen)}>{header}</div>
        {isOpen && children}
    </div>
  )
}


const RangeInput = ({min, max}) => {
  const [text, setText] = useState('')
  return (
    <input style={ {backgroundColor: (text.length >= min && text.length <= max) ? '#fff' : '#f00'} }
    value={text} onChange={(e) => setText(e.target.value)}/>
  )
}


const PasswordConfirm = ({min, char=false, bigChar=false, number=false}) => {
  const [pass, setPass] = useState('')
  const [pass2, setPass2] = useState('')

    const checkPass = (password) => {
      if ( password.length >= min && 
          (char ? password.match(/[a-zA-ZА-ЯЁа-яё]/) : true) && 
          (bigChar ? password.match(/[A-ZА-ЯЁ]/) : true) && 
          (number ? password.match(/[\d]/) : true) ) {
        return true
      } else {
        return false
      }
    }

    const printPassReq = (password) => {
      let str = ''
      if (!checkPass(password)) {
        str += 'Пароль должен содержать: '
      } else {
        str += 'Пароль подходит '
      }
      if (password.length < min) {        
        str += ` минимум ${min} символ${((min === 1) ? '' : (min > 1 && min < 5) ? 'а' : 'ов')},`
      }
      if (!(char ? password.match(/[a-zA-ZА-ЯЁа-яё]/) : true)) {
        str += ' буквы,'
      }
      if (!(bigChar ? password.match(/[A-ZА-ЯЁ]/) : true)) {
        str += ' прописные буквы,'
      }
      if  (!(number ? password.match(/[\d]/) : true)) {
        str += ' цифры,'
      }
      return str.slice(0, -1)
    }

  return (
    <div>
      <p>        
        <input type='password' className="p1" value={pass} onChange={(e) => setPass(e.target.value)}
        style={ {backgroundColor: ( checkPass(pass) && pass === pass2) ? '#fff' : '#f00'} }/>

        <label> 
          {printPassReq(pass)}
        </label>
      </p>
      <p>
        <input type='password' className="p2" value={pass2} onChange={(e) => setPass2(e.target.value)}
        style={ {backgroundColor: ( checkPass(pass2) && pass === pass2) ? '#fff' : '#f00'} }/>

        <label> 
          {printPassReq(pass2)}
        </label>
      </p>
      <div>{(pass === pass2 ? '' : 'пароли не совпадают')}</div>
    </div>
  )
}



const Timer = ({seconds=100}) => {
  const [counter, setCounter] = useState(seconds)
  const [paused, setPause] = useState(false)

    useEffect(() => {
      setCounter(seconds)
    }, [seconds])
  
     useEffect(() => {
      let interval = null
      if (counter > 0 && !paused) {
          interval = setInterval(() => {
              setCounter(counter => counter - 1)
          }, 1000);
      } 
      return () => {
          clearInterval(interval)
      }
    }, [paused, counter])


    let h = Math.floor(counter / 3600)
    let m = Math.floor(counter % 3600 / 60)
    let s = counter % 60
  return (    
    <div>
      <h2>{h >= 10 ? h : '0'+h}:{m >= 10 ? m : '0'+m}:{s >= 10 ? s : '0'+s}</h2>
      <button onClick={() => setPause(!paused)}>{paused ? 'Го' : 'Пауза'}</button>
    </div>
  )
}


const TimerControl = ({setSeconds}) => {
  const [s, setS] = useState(0)
  const [m, setM] = useState(0)
  const [h, setH] = useState(0)

  return (
    <div>
        <input value={h} min="0" max="none" type="number" onChange={(e) => setH(e.target.value)}/>
        <input value={m} min="0" max="60" type="number" onChange={(e) => setM(e.target.value)}/>
        <input value={s} min="0" max="60" type="number" onChange={(e) => setS(e.target.value)}/>
        <button onClick={() => setSeconds(+h*3600 + +m*60 + +s) }>Start</button>
    </div>
  )
}


const SecondsTimer = ({seconds}) => (
  <h2>{seconds}</h2>
)

const TimerContainer = ({seconds=100, refresh=100, render}) => {


  
  const DisplayEl = render
  return (
    <>
      <DisplayEl seconds={200} />
    </>
  )
}



function App() {
  const [seconds, setSeconds] = useState(200)

  return (
    <>
      <Spoiler header={<h1>Заголовок</h1>} open={false}>
          Контент 1
          <p>
              лорем ипсум траливали и тп.
          </p>
      </Spoiler>
      
      <RangeInput min={2} max={10} />

      <PasswordConfirm min={3} char={true} bigChar={true} number={true}/>


      <Timer seconds={seconds} />
      <TimerControl setSeconds={setSeconds}/>


      <TimerContainer seconds={1800} refresh={100} render={SecondsTimer}/>

    </>
  );
}

export default App;