fixed messaggio approvati

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/Proiezione.js

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from "react";
+import firebase from "firebase/app";
+import { Button } from "@mui/material";
+import { MyForm, Admin } from "./index";
+
+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) {
+      // console.log(indiceCorrente); Rimane alla versione iniziale!
+      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 Messaggio = () => {
+    if (!messaggiApprovati.length) return <div>nessun messaggio</div>;
+    const messaggioCorrente = messaggiApprovati[indiceCorrente];
+    return (
+      <div>
+        <h1>{messaggioCorrente.testo}</h1>
+        <p>da {messaggioCorrente.autore}</p>
+        <Button onClick={() => nextMessage()}>next</Button>
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      <MyForm />
+      <Messaggio></Messaggio>
+      <Admin />
+    </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>;
 };