added countdown to messaggio

src/Countdown.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 
-function useInterval(callback, delay) {
+export function useInterval(callback, delay) {
   const savedCallback = useRef();
 
   // Remember the latest callback.
@@ -20,29 +20,20 @@ function useInterval(callback, delay) {
   }, [delay]);
 }
 
-
-
 function Countdown({ duration, onComplete }) {
   // Initialize the countdown timer with the duration prop
   const [timeLeft, setTimeLeft] = useState(duration);
 
   // Decrement the timer by 1 second every 1000ms
   useInterval(() => {
-      if(timeLeft  === 1) {
-          onComplete()
-        } else{
-            
+    if (timeLeft === 1) {
+      onComplete();
+    } else {
       setTimeLeft(timeLeft - 1);
     }
   }, 1000);
-
-  // Return the time left formatted as minutes and seconds
-  let minutes = Math.floor(timeLeft / 60);
   let seconds = timeLeft % 60;
-  return (
-    <div>{seconds}
-    </div>
-  );
+  return <div>{seconds}</div>;
 }
 
-export default Countdown
+export default Countdown;

src/Proiezione.js

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import firebase from "firebase/app";
 import { Button } from "@mui/material";
 import { MyForm, Admin } from "./index";
+import { useInterval } from "./Countdown";
 
 export const Proiezione = () => {
   const [messaggi, cambiaMessaggi] = useState([]);
@@ -23,7 +24,6 @@ export const Proiezione = () => {
     });
 
     messagesRef.on("child_changed", function (snapshot) {
-      // console.log(indiceCorrente); Rimane alla versione iniziale!
       const messaggio = snapshot.val();
       cambiaMessaggi((oldArray) => {
         const newArray = [...oldArray];
@@ -42,23 +42,49 @@ export const Proiezione = () => {
     cambiaindiceCorrente(newIndice);
   };
 
-  const Messaggio = () => {
-    if (!messaggiApprovati.length) return <div>nessun messaggio</div>;
+  const ContainerMessaggio = () => {
+    if (!messaggiApprovati.length) {
+      <div>nessun messaggio</div>;
+    } else {
       const messaggioCorrente = messaggiApprovati[indiceCorrente];
+
       return (
-      <div>
-        <h1>{messaggioCorrente.testo}</h1>
-        <p>da {messaggioCorrente.autore}</p>
-        <Button onClick={() => nextMessage()}>next</Button>
-      </div>
+        <Messaggio
+          messaggioCorrente={messaggioCorrente}
+          nextMessage={nextMessage}
+        />
       );
+    }
   };
 
   return (
     <div>
       <MyForm />
-      <Messaggio></Messaggio>
+      <ContainerMessaggio />
       <Admin />
     </div>
   );
 };
+
+const Messaggio = ({ nextMessage, messaggioCorrente }) => {
+  const [timeLeft, setTimeLeft] = useState(5);
+
+  // Decrement the timer by 1 second every 1000ms
+  useInterval(() => {
+    if (timeLeft === 1) {
+      nextMessage();
+    } else {
+      setTimeLeft(timeLeft - 1);
+    }
+  }, 1000);
+
+  console.log("asdf");
+  return (
+    <div>
+      <h1>{messaggioCorrente.testo}</h1>
+      <p>da {messaggioCorrente.autore}</p>
+      <Button onClick={() => nextMessage()}>next</Button>
+      {timeLeft}
+    </div>
+  );
+};