image loading

src/Galleria.js

@@ -8,34 +8,62 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import IconButton from "@mui/material/IconButton";
 import { Stack } from "@mui/system";
 import logoSrc from "./logo_chat.svg";
-import { Fade } from "@mui/material";
+import { Fade, LinearProgress } from "@mui/material";
 
 export const Galleria = () => {
   const { evento } = useParams();
   const [messaggi, cambiaMessaggi] = useState([]);
-
-  const [indiceCorrente, cambiaindiceCorrente] = useState(0);
+  const [imgIndex, cambiaimgIndex] = useState(0);
+  const [images, cambiaimmagini] = useState([]);
 
   useEffect(() => {
     var messagesRef = firebase.database().ref(`/messaggi/${evento}`);
 
     messagesRef.on("value", function (snapshot) {
-      var messaggi = snapshot.val();
-
-      cambiaMessaggi(
-        Object.keys(messaggi)
+      const messaggiObject = snapshot.val();
+      const messaggi = Object.keys(messaggiObject)
         .map((d) => {
-            return messaggi[d];
+          return messaggiObject[d];
         })
         .filter((d) => d.approvato)
-          .sort((a, b) => a.timestamp - b.timestamp)
+        .sort((a, b) => a.timestamp - b.timestamp);
+      cambiaMessaggi(messaggi);
+      cambiaimmagini(
+        messaggi
+          .filter((d) => d.immagineURL != null)
+          .map((d) => {
+            return d.immagineURL;
+          })
       );
     });
   }, [evento]);
 
-  const messaggioDaMostrare = messaggi[indiceCorrente];
+  useEffect(() => {
+    if (images) {
+      function loadImage() {
+        const img = new Image();
+        img.src = images[imgIndex];
+        img.onload = () => {
+          if (imgIndex < images.length) {
+            cambiaimgIndex((i) => {
+              return i + 1;
+            });
+          }
+        };
+      }
+      loadImage();
+    }
+  }, [imgIndex, images]);
+
   return (
     <div>
+      {imgIndex !== images.length && (
+        <LinearProgress
+          variant="determinate"
+          value={(imgIndex / images.length) * 100}
+          style={{ position: "absolute", width: "100vw", top: "50%" }}
+        />
+      )}
       <div
         style={{
           margin: "0 auto",
@@ -51,6 +79,30 @@ export const Galleria = () => {
           textAlign: "center",
         }}
       >
+        {imgIndex === images.length && (
+          <ContenitoreMessaggio messaggi={messaggi} />
+        )}
+
+        <img
+          src={logoSrc}
+          alt=""
+          style={{
+            width: 120,
+            position: "absolute",
+            top: 20,
+            right: 20,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+const ContenitoreMessaggio = ({ messaggi }) => {
+  const [indiceCorrente, cambiaindiceCorrente] = useState(0);
+  const messaggioDaMostrare = messaggi[indiceCorrente];
+  console.log(indiceCorrente);
+  return (
     <Stack>
       <div>
         {messaggioDaMostrare && (
@@ -79,32 +131,17 @@ export const Galleria = () => {
         direction="row"
       >
         {indiceCorrente > 0 && (
-              <IconButton
-                onClick={() => cambiaindiceCorrente(indiceCorrente + 1)}
-              >
+          <IconButton onClick={() => cambiaindiceCorrente(indiceCorrente - 1)}>
             <ArrowBackIcon style={{ fontSize: "3rem" }} />
           </IconButton>
         )}
         {indiceCorrente < messaggi.length - 1 && (
-              <IconButton
-                onClick={() => cambiaindiceCorrente(indiceCorrente + 1)}
-              >
+          <IconButton onClick={() => cambiaindiceCorrente(indiceCorrente + 1)}>
             <ArrowForwardIcon style={{ fontSize: "3rem" }} />
           </IconButton>
         )}
       </Stack>
     </Stack>
-        <img
-          src={logoSrc}
-          style={{
-            width: 120,
-            position: "absolute",
-            top: 20,
-            right: 20,
-          }}
-        />
-      </div>
-    </div>
   );
 };