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 [imgIndex, cambiaimgIndex] = useState(0);
-  const [indiceCorrente, cambiaindiceCorrente] = useState(0);
+  const [images, cambiaimmagini] = useState([]);
 
   useEffect(() => {
     var messagesRef = firebase.database().ref(`/messaggi/${evento}`);
 
     messagesRef.on("value", function (snapshot) {
-      var messaggi = snapshot.val();
+      const messaggiObject = snapshot.val();
-
+      const messaggi = Object.keys(messaggiObject)
-      cambiaMessaggi(
+        .map((d) => {
-        Object.keys(messaggi)
+          return messaggiObject[d];
+        })
+        .filter((d) => d.approvato)
+        .sort((a, b) => a.timestamp - b.timestamp);
+      cambiaMessaggi(messaggi);
+      cambiaimmagini(
+        messaggi
+          .filter((d) => d.immagineURL != null)
           .map((d) => {
-            return messaggi[d];
+            return d.immagineURL;
           })
-          .filter((d) => d.approvato)
-          .sort((a, b) => a.timestamp - b.timestamp)
       );
     });
   }, [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,51 +79,13 @@ export const Galleria = () => {
           textAlign: "center",
         }}
       >
-        <Stack>
+        {imgIndex === images.length && (
-          <div>
+          <ContenitoreMessaggio messaggi={messaggi} />
-            {messaggioDaMostrare && (
+        )}
-              <ImagePlaceholder
-                messaggioDaMostrare={messaggioDaMostrare}
-                style={{
-                  maxWidth: "100%",
-                  maxHeight: "80vh",
-                }}
-              />
-            )}
-          </div>
 
-          <Stack
-            style={{
-              display: "flex",
-              width: "100vw",
-              position: "absolute",
-              top: "90%",
-              left: 0,
-              alignItems: "center",
-              justifyContent: "space-between",
-              padding: 10,
-              boxSizing: "border-box",
-            }}
-            direction="row"
-          >
-            {indiceCorrente > 0 && (
-              <IconButton
-                onClick={() => cambiaindiceCorrente(indiceCorrente + 1)}
-              >
-                <ArrowBackIcon style={{ fontSize: "3rem" }} />
-              </IconButton>
-            )}
-            {indiceCorrente < messaggi.length - 1 && (
-              <IconButton
-                onClick={() => cambiaindiceCorrente(indiceCorrente + 1)}
-              >
-                <ArrowForwardIcon style={{ fontSize: "3rem" }} />
-              </IconButton>
-            )}
-          </Stack>
-        </Stack>
         <img
           src={logoSrc}
+          alt=""
           style={{
             width: 120,
             position: "absolute",
@@ -108,6 +98,53 @@ export const Galleria = () => {
   );
 };
 
+const ContenitoreMessaggio = ({ messaggi }) => {
+  const [indiceCorrente, cambiaindiceCorrente] = useState(0);
+  const messaggioDaMostrare = messaggi[indiceCorrente];
+  console.log(indiceCorrente);
+  return (
+    <Stack>
+      <div>
+        {messaggioDaMostrare && (
+          <ImagePlaceholder
+            messaggioDaMostrare={messaggioDaMostrare}
+            style={{
+              maxWidth: "100%",
+              maxHeight: "80vh",
+            }}
+          />
+        )}
+      </div>
+
+      <Stack
+        style={{
+          display: "flex",
+          width: "100vw",
+          position: "absolute",
+          top: "90%",
+          left: 0,
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: 10,
+          boxSizing: "border-box",
+        }}
+        direction="row"
+      >
+        {indiceCorrente > 0 && (
+          <IconButton onClick={() => cambiaindiceCorrente(indiceCorrente - 1)}>
+            <ArrowBackIcon style={{ fontSize: "3rem" }} />
+          </IconButton>
+        )}
+        {indiceCorrente < messaggi.length - 1 && (
+          <IconButton onClick={() => cambiaindiceCorrente(indiceCorrente + 1)}>
+            <ArrowForwardIcon style={{ fontSize: "3rem" }} />
+          </IconButton>
+        )}
+      </Stack>
+    </Stack>
+  );
+};
+
 function ImagePlaceholder({ messaggioDaMostrare }) {
   const [imageLoaded, setImageLoaded] = useState(false);