è una vita difficile

src/index.js

@@ -160,51 +160,50 @@ const Proiezione = () => {
 
     messagesRef.on("child_added", function (snapshot) {
       var messaggio = snapshot.val();
-      cambiaMessaggi((oldArray) =>
-        [...oldArray, messaggio].sort((a, b) => b.timestamp - a.timestamp)
-      );
+      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();
-
-      cambiaMessaggi((oldArray) => {
-        var nuoviMessaggi = [...oldArray];
-        var nuovoIndice = oldArray.findIndex((d) => d.id === messaggio.id);
-        if (nuovoIndice != -1) {
-          nuoviMessaggi[nuovoIndice] = messaggio;
-        }
-        return nuoviMessaggi;
-      });
+      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) => {
-    if(i === indiceCorrente) return
     let nuovoIndice = (i + 1) % messaggi.length;
-
-    if (!messaggi[nuovoIndice].approvato) {
-      nextMessage(nuovoIndice);
-    } else {
-      cambiaindiceCorrente(nuovoIndice)
-    }
+    cambiaindiceCorrente(nuovoIndice);
+  };
+  const whereAmI = () => {
+    console.log(indiceCorrente);
   };
-
-  const messaggioCorrente = messaggi[indiceCorrente];
-
   return (
     <div>
       <MyForm />
-      {!messaggi.filter((m) => m.approvato).length && (
-        <div>nessun messaggio</div>
-      )}
-      {messaggi.filter((m) => m.approvato).length && (
+      {!messaggi.length && <div>nessun messaggio</div>}
+      {messaggi.length && (
         <div>
-          <h1>{messaggioCorrente.testo}</h1>
-          <p>da {messaggioCorrente.autore}</p>
+          <i>{indiceCorrente}</i>
+          <h1>{messaggi[indiceCorrente].testo}</h1>
+          <p>da {messaggi[indiceCorrente].autore}</p>
         </div>
       )}
-      <Button onClick={()=>nextMessage(indiceCorrente)}>next</Button>
+      <Button onClick={() => nextMessage(indiceCorrente)}>next</Button>
 
       <Admin />
     </div>