letsswingchat/src/Galleria.js

import React, { useEffect, useState } from "react";

import { useParams } from "react-router-dom";
import firebase from "firebase/app";

import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
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, LinearProgress } from "@mui/material";

export const Galleria = () => {
  const { evento } = useParams();
  const [messaggi, cambiaMessaggi] = useState([]);
  const [imgIndex, cambiaimgIndex] = useState(0);
  const [images, cambiaimmagini] = useState([]);

  useEffect(() => {
    var messagesRef = firebase.database().ref(`/messaggi/${evento}`);

    messagesRef.on("value", function (snapshot) {
      const messaggiObject = snapshot.val();
      const messaggi = Object.keys(messaggiObject)
        .map((d) => {
          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 d.immagineURL;
          })
      );
    });
  }, [evento]);

  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",
          fontFamily: "Lineatura",
          width: "90vw",
          height: "100vh",
          fontWeight: "bold",
          color: "white",
          display: "flex",
          justifyContent: "space-around",
          alignContent: "center",
          alignItems: "center",
          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 && (
          <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);

  useEffect(() => {
    if (messaggioDaMostrare.immagineURL) {
      const image = new Image();
      image.onload = () => {
        setImageLoaded(true);
      };
      image.src = messaggioDaMostrare.immagineURL;
    } else {
      setImageLoaded(true);
    }
  }, [messaggioDaMostrare.immagineURL]);

  return (
    <Fade in={imageLoaded}>
      <div>
        {messaggioDaMostrare.immagineURL && (
          <img
            alt=""
            src={messaggioDaMostrare.immagineURL}
            style={{
              maxWidth: "100%",
              maxHeight: "80vh",
            }}
          />
        )}
        <Messaggio messaggioDaMostrare={messaggioDaMostrare} />
      </div>
    </Fade>
  );
}

const Messaggio = ({ messaggioDaMostrare }) => {
  const date = new Date(messaggioDaMostrare.timestamp);

  return (
    <>
      <h1
        style={{
          fontSize: messaggioDaMostrare.immagineURL ? 20 : 50,
          textShadow:
            "0px 0px 10px rgba(0,0,0,100), 0px 0px 10px rgba(0,0,0,100),  0px 0px 10px rgba(0,0,0,100)",
        }}
      >
        {messaggioDaMostrare.testo}
      </h1>
      {messaggioDaMostrare.autore && (
        <p
          style={{
            fontSize: 20,
            display: "inline-block",
            background: "black",
            padding: "0px 6px",
            paddingBottom: "4px",
          }}
        >
          da {messaggioDaMostrare.autore}
        </p>
      )}
      <p style={{ fontFamily: "sans-serif", fontSize: ".8rem", color: "#333" }}>
        {date.toLocaleString("it-IT")}
      </p>
    </>
  );
};