some stuff done but YET this BS not working >:^( !

hw19-react-jsx-homework/src/App.js

@@ -4,7 +4,7 @@ import ClockSec from './assets/ClockFace_S.png'
 import ClockMin from './assets/ClockFace_M.png'
 import ClockHour from './assets/ClockFace_H.png'
 import './App.css';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 const Spoiler = ({header="+", open=true, children}) => {
   let [isOpen=open, setOpen] = useState()
@@ -97,6 +97,18 @@ const LCD = ({seconds=10}) =>
     {Math.floor(seconds % 60)}
   </strong>
 
+const Watch = ({seconds=1000}) =>
+  <div style={{width:'fit-content'}}>
+    <img src={ClockFace} style={{width: 'inherit', position:'absolute'}}  alt='img'/>
+    <img src={ClockSec}  style={{width: 'inherit', position:'absolute',
+                                transform: `rotate(${seconds % 60 * 6}deg)`}} alt='img'/>
+    <img src={ClockMin}  style={{width: 'inherit', position:'absolute',
+                                transform: `rotate(${(seconds / 60) % 60 * 6}deg)`}} alt='img'/>
+    <img src={ClockHour} style={{width: 'inherit', position:'absolute',
+                                transform: `rotate(${((seconds) / (60*60)) % 24 * 30}deg)`}}  alt='img'/>
+  </div>
+
+
 const SecondsTimer = ({seconds}) => <h2>{seconds.toFixed(2)}</h2>
 
 const TimerControl = ({hour=0, minute=0, second=0}) => {
@@ -141,11 +153,47 @@ const TimerControl = ({hour=0, minute=0, second=0}) => {
 }
 
 const TimerContainer = ({seconds=3800, refresh=10, render:Component}) => {
-  let [time, setTime] = useState(seconds*1000)
+  let [time, setTime] = useState()
+  let set = useRef(false)
+  let ended = useRef(false)
+  let idle = useRef(0)
+  let interval = useRef(setInterval)
+  let start = performance.now()
+
+  useEffect(() => {
+    console.log('isSet', set.current)
+    console.log('idle', idle)
+
+    if(seconds > 0 && !set.current && !ended.current) {
+      setTime(seconds*1000)
+      console.log('TIMESET', time)
+      set.current = true
+      idle.current = 0
+    } else {
+      if (time > 0) {
+        setTime(time)
+      } else {
+        //ended.current = true
+        setTime(0)
+        set.current = false
+        idle.current = seconds*1000  - performance.now()
+      }
+    }
+  })
+
   useEffect(() => {
+    let now = performance.now()
     const interval = setInterval(()=> {
-      time > 0? setTime(seconds*1000  - performance.now()) : (()=> {clearInterval(interval); setTime(0)})()
+      if(set.current) {
+        setTime(seconds*1000 -performance.now())
+      } else {
+        set.current = false
+        setTime(0);
+        //clearInterval(interval); 
+      }
     },refresh)
+    
+
     return() => clearInterval(interval)
   }, [refresh, time, seconds])
   
@@ -154,17 +202,6 @@ const TimerContainer = ({seconds=3800, refresh=10, render:Component}) => {
   )
 }
 
-const Watch = ({seconds=1000}) =>
-  <div style={{width:'fit-content'}}>
-    <img src={ClockFace} style={{width: 'inherit', position:'absolute'}}  alt='img'/>
-    <img src={ClockSec}  style={{width: 'inherit', position:'absolute',
-                                transform: `rotate(${seconds % 60 * 6}deg)`}} alt='img'/>
-    <img src={ClockMin}  style={{width: 'inherit', position:'absolute',
-                                transform: `rotate(${(seconds / 60) % 60 * 6}deg)`}} alt='img'/>
-    <img src={ClockHour} style={{width: 'inherit', position:'absolute',
-                                transform: `rotate(${((seconds) / (60*60)) % 24 * 30}deg)`}}  alt='img'/>
-  </div>
-
 const TimerControlContainer = ({hour=0, minute=0, second=0, render:Component, refresh=10}) => {
   let [hr, setHr] = useState(hour)
   let [min, setMin] = useState(minute)
@@ -208,7 +245,8 @@ const TimerControlContainer = ({hour=0, minute=0, second=0, render:Component, re
                   <button onClick={() => setActive(true)}>Start</button>}
         <br />
       </span>
-      {returned > 0? <TimerContainer seconds={returned} render={Component} refresh={refresh}/> : ''}
+      <TimerContainer seconds={returned} render={Component} refresh={refresh}/>
+      {/* {returned > 0? <TimerContainer seconds={returned} render={Component} refresh={refresh}/> : ''} */}
     </div>
   )
 }
@@ -236,17 +274,17 @@ function App() {
       <h3>Timer Control</h3>
       <TimerControl second={10}/>
       
-      <h3>Timer Container</h3>
+      {/* <h3>Timer Container</h3>
       <TimerContainer render={SecondsTimer}/>
       <TimerContainer render={SecondsTimer} seconds={10} refresh={10}/>
-      <TimerContainer render={LCD}/>
+      <TimerContainer render={LCD}/> */}
 
       {/* <h3>Watch</h3>
       <TimerContainer render={Watch} seconds={7200}/>
       <TimerContainer render={LCD} seconds={7200}/> */}
 
       <h3>Timer Control Container</h3>
-      <TimerControlContainer render={Watch} />
+      <TimerControlContainer render={SecondsTimer} />
     </div>
   );
 }