added countdown to messaggio

package.json

@@ -26,12 +26,6 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",

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

@@ -0,0 +1,90 @@
+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([]);
+  const [messaggiApprovati, cambiaMessaggiApprovati] = useState([]);
+  const [indiceCorrente, cambiaindiceCorrente] = useState(0);
+
+  useEffect(() => {
+    var messagesRef = firebase.database().ref("/messaggi");
+
+    messagesRef.on("child_added", function (snapshot) {
+      var messaggio = snapshot.val();
+      cambiaMessaggi((oldArray) => {
+        const newArray = [...oldArray, messaggio].sort(
+          (a, b) => b.timestamp - a.timestamp
+        );
+        cambiaMessaggiApprovati(newArray.filter((d) => d.approvato));
+        return newArray;
+      });
+    });
+
+    messagesRef.on("child_changed", function (snapshot) {
+      const messaggio = snapshot.val();
+      cambiaMessaggi((oldArray) => {
+        const newArray = [...oldArray];
+        newArray.forEach((d, i, a) => {
+          if (d.id === messaggio.id) a[i] = messaggio;
+        });
+        cambiaMessaggiApprovati(newArray.filter((d) => d.approvato));
+        return newArray;
+      });
+    });
+  }, []);
+
+  const nextMessage = () => {
+    if (!messaggiApprovati.length) return;
+    const newIndice = (indiceCorrente + 1) % messaggiApprovati.length;
+    cambiaindiceCorrente(newIndice);
+  };
+
+  const ContainerMessaggio = () => {
+    if (!messaggiApprovati.length) {
+      <div>nessun messaggio</div>;
+    } else {
+      const messaggioCorrente = messaggiApprovati[indiceCorrente];
+
+      return (
+        <Messaggio
+          messaggioCorrente={messaggioCorrente}
+          nextMessage={nextMessage}
+        />
+      );
+    }
+  };
+
+  return (
+    <div>
+      <MyForm />
+      <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>
+  );
+};

src/index.js

@@ -14,8 +14,9 @@ import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
 import Checkbox from "@mui/material/Checkbox";
+import { Proiezione } from "./Proiezione";
 
-const MyForm = () => {
+export const MyForm = () => {
   const [mandato, cambiaMandato] = useState(false);
   const { register, handleSubmit } = useForm();
   const onSubmit = ({ testo, autore }) => {
@@ -110,7 +111,7 @@ function CheckboxListSecondary({ messaggi, onChecked }) {
   );
 }
 
-const Admin = () => {
+export const Admin = () => {
   const [messaggi, cambiaMessaggi] = useState([]);
   const [indiceCorrente, cambiaindiceCorrente] = useState(0);
 
@@ -150,66 +151,6 @@ const Admin = () => {
   );
 };
 
-const Proiezione = () => {
-  const [messaggi, cambiaMessaggi] = useState([]);
-  const [indiceCorrente, cambiaindiceCorrente] = useState(0);
-
-  useEffect(() => {
-    // Get a reference to the messages node in the Realtime Database
-    var messagesRef = firebase.database().ref("/messaggi");
-
-    messagesRef.on("child_added", function (snapshot) {
-      var messaggio = snapshot.val();
-      if (messaggio.approvato) {
-        cambiaMessaggi((oldArray) =>
-          [...oldArray, messaggio].sort((a, b) => b.timestamp - a.timestamp)
-        );
-      }
-    });
-
-    messagesRef.on("child_changed", function (snapshot) {
-      // console.log(indiceCorrente); Rimane alla versione iniziale!
-      var messaggio = snapshot.val();
-      if (messaggio.approvato) {
-        cambiaMessaggi((oldArray) =>
-          [...oldArray, messaggio].sort((a, b) => b.timestamp - a.timestamp)
-        );
-      } else {
-        var nuovoIndice
-        cambiaMessaggi((oldArray) => {
-          nuovoIndice = oldArray.findIndex((d) => d.id === messaggio.id);
-          oldArray.splice(nuovoIndice, 1);
-          return oldArray;
-        });
-      }
-    });
-  }, []);
-
-  const nextMessage = (i) => {
-    let nuovoIndice = (i + 1) % messaggi.length;
-    cambiaindiceCorrente(nuovoIndice);
-  };
-  const whereAmI = () => {
-    console.log(indiceCorrente);
-  };
-  return (
-    <div>
-      <MyForm />
-      {!messaggi.length && <div>nessun messaggio</div>}
-      {messaggi.length && (
-        <div>
-          <i>{indiceCorrente}</i>
-          <h1>{messaggi[indiceCorrente].testo}</h1>
-          <p>da {messaggi[indiceCorrente].autore}</p>
-        </div>
-      )}
-      <Button onClick={() => nextMessage(indiceCorrente)}>next</Button>
-
-      <Admin />
-    </div>
-  );
-};
-
 const Input = () => {
   return <div> Input </div>;
 };