import defaultLogo from './logo.svg'
import clock from './ClockFace.png'
import hoursImg from './ClockFace_H.png'
import minutesImg from './ClockFace_M.png'
import secondsImg from './ClockFace_S.png'
import './App.scss'
import thunk from 'redux-thunk'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { Provider, connect } from 'react-redux'
import { useState, useEffect } from 'react'
const Content = ({children}) =>
//hw
//Spoiler
const Spoiler = ({ header = '+', open, children }) => {
const [opened, setOpened] = useState(open)
return (
<>
{!opened && children}
{header}
>
)
}
//RangeInput
const RangeInput = ({ min = 3, max = 10 }) => {
const [state, setState] = useState('')
return (
<>
min && state.length < max ? 'green' : 'red',
}}
onChange={(e) => {
setState(e.target.value)
}}
/>
>
)
}
// PasswordConfirm
const PasswordConfirm = ({ min = 5 }) => {
const [checked, setChecked] = useState(true)
const [passwordFirst, setPassFirst] = useState('')
const [passwordSecond, setPassSecond] = useState('')
/* пример для проверки value="qoqoqo777AAAA"*/
const regexp = /(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]/g
const valid = () =>
passwordFirst.match(regexp) &&
(passwordFirst.length && passwordSecond.length) > min &&
passwordFirst == passwordSecond
return (
<>
{
setPassFirst(e.target.value)
}}
/>
{
setPassSecond(e.target.value)
}}
/>
{
setChecked(e.target.checked)
}}
/>
{/* 1) проверка через кнопку */}
{/*
*/}
{/* 2) проверка для отображения компонента на экране */}
{valid() && УСПЕШНАЯ ВАЛИДАЦИЯ}
{!valid() && НЕ УСПЕШНАЯ ВАЛИДАЦИЯ}
>
)
}
const Timer = ({ seconds}) => {
const [time, setTime] = useState(seconds)
var timeMinutes = Math.floor((time % 3600) / 60)
var timeHours = Math.floor(time / 60 / 60)
var timeSeconds = time % 60
var formatted = timeHours + ':' + timeMinutes + ':' + timeSeconds
const [paused, setPaused] = useState(false)
useEffect(() => {
console.log('seconds', time)
const interval = setInterval(
() => !paused && time >0 ? setTime((time) => time - 1) : setTime((time) => time),
1000)
console.log('ВНАЧАЛЕ ЖИЗНИ КОМПОНЕНТА componentDidMount', interval)
return () => {
clearInterval(interval)
console.log('ОЧИСТКА', interval)}
}, [paused, time])
console.log('ОБНОВЛЕНИЕ КОМПОНЕНТА', timeSeconds)
return (
<>
{formatted}
>
)
}
const TimerControl = () => {
const [timeHours, setHours] = useState(0)
const [timeMinutes, setMinutes] = useState(0)
const [timeSeconds, setSeconds] = useState(0)
const [started, setStarted] = useState([])
//console.log(' переданное время', hours, ' ', minutes, ' ', seconds)
const allSeconds = timeHours * 3600 + timeMinutes * 60 + timeSeconds
console.log('allSeconds = ', allSeconds)
return (
<>
{ setHours(+e.target.value) }}/>
{ setMinutes(+e.target.value)}}/>
{ setSeconds(+e.target.value) }}/>
{started.map((item) => (
))}
>
)
}
const SecondsTimer = ({ seconds }) => {seconds}
const TimerContainer = ({ seconds=1000, refresh, render:Render }) => {
const [time, setTime] = useState(seconds)
//const [started, setStarted] = useState([])
//console.log('до ', before)
const [paused, setPaused] = useState(false)
useEffect(() => {
let before = Math.floor(performance.now())
// console.log('seconds', time)
const interval = setInterval(() => {
let after = Math.floor(performance.now())
!paused && time > 0 ? setTime((time-(after-before)/1000))
: setTime(time)
// console.log('ПОСЛЕ', after)
// console.log('TIME', time)
}, refresh)
// console.log('ВНАЧАЛЕ ЖИЗНИ КОМПОНЕНТА componentDidMount',
// interval, ' ', refresh)
return () => {
clearInterval(interval)
// console.log('ОЧИСТКА', interval)
}
}, [paused, refresh, time])
// console.log('ОБНОВЛЕНИЕ КОМПОНЕНТА', time)
return (
<>
{/* ТУТ ВСЕ ВРЕМЯ Container {time}
*/}
{/* {started.map((item) => )}
*/}
>
)
}
const Timer2 = ({ seconds }) => {
var timeMinutes = Math.floor((seconds % 3600) / 60)
var timeHours = Math.floor(seconds / 60 / 60)
var timeSeconds = seconds % 60
var formatted = timeHours + ':' + timeMinutes + ':' + timeSeconds.toFixed(2)
return (
<>
{formatted}
>
)
}
const Watch = ({
seconds,
myClock = clock,
myHours = hoursImg,
myMinutes = minutesImg,
mySeconds = secondsImg,
}) => {
var clockHours = Math.floor(seconds / 3600)
console.log('hours', clockHours)
var clockMinutes = Math.floor((seconds % 3600) / 60)
var clockSeconds = seconds % 60
console.log('hours', clockSeconds)
var formatted = clockHours + ':' + clockMinutes + ':' + clockSeconds.toFixed(2)
return (
<>
{formatted}
>
)
}
const TimerControlContainer = ({render:Render, refresh=1000}) => {
const [timeHours, setHours] = useState(0)
const [timeMinutes, setMinutes] = useState(0)
const [timeSeconds, setSeconds] = useState(0)
const [started, setStarted] = useState([])
//console.log(' переданное время', hours, ' ', minutes, ' ', seconds)
const allSeconds = timeHours * 3600 + timeMinutes * 60 + timeSeconds
console.log('allSeconds = ', allSeconds)
return (
<>
{ setHours(+e.target.value) }}/>
{ setMinutes(+e.target.value)}}/>
{ setSeconds(+e.target.value) }}/>
{started.map((item) => (
))}
>
)
}
function App() {
return (
{/*
*/}
{/*
Заголовок} open>
Контент 1лорем ипсум траливали и тп.
Контент 2
лорем ипсум траливали и тп.
*/}
{/*
*/}
{/*
*/}
TimerControl
{/*
*/}
TimerContainer
{/*
*/}
{/*
*/}
)
}
export default App