aggiunto indice

src/Galleria.js

@@ -35,70 +35,69 @@ export const Galleria = () => {
         messaggi
           .filter((d) => d.immagineURL != null)
           .map((d) => {
-            console.log(d.immagineURL);
             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]);
+  // 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 && (
+      {/* {imgIndex !== images.length && (
         <LinearProgress
           variant="determinate"
           value={(imgIndex / images.length) * 100}
           style={{ position: "absolute", width: "100vw", top: "50%" }}
         />
       )}
-      {imgIndex === images.length && (
-        <div
+      {imgIndex === images.length && ( */}
+      <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",
+        }}
+      >
+        <VideoComponent />
+        <ContenitoreMessaggio messaggi={messages} />
+
+        <img
+          src={logoSrc}
+          alt=""
           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",
+            width: 120,
+            position: "absolute",
+            top: 20,
+            right: 20,
           }}
-        >
-          <VideoComponent />
-          <ContenitoreMessaggio messaggi={messages} />
-
-          <img
-            src={logoSrc}
-            alt=""
-            style={{
-              width: 120,
-              position: "absolute",
-              top: 20,
-              right: 20,
-            }}
-          />
-        </div>
-      )}
+        />
+      </div>
+      {/* )} */}
     </div>
   );
 };

src/ImageUpload.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import firebase from "firebase/compat/app";
-import "firebase/storage";
+import "firebase/compat/storage";
 import { Stack } from "@mui/system";
 import { Button } from "@mui/material";
 

src/MyForm.js

@@ -14,8 +14,11 @@ export const MyForm = () => {
   const [mandato, setMandato] = useState(false);
   const [imageUploading, setImageUploading] = useState(false);
   const [immagineURL, cambiaimmagineURL] = useState(null);
-  const { register, handleSubmit } = useForm();
-  const onSubmit = ({ testo, autore }) => {
+  const { register, handleSubmit, reset } = useForm();
+  const onSubmit = ({ testo, autore }, e) => {
+    reset("", {
+      keepValues: false,
+    });
     setMandato(true);
     var postListRef = firebase.database().ref(`messaggi/${evento}`);
     var newPostRef = postListRef.push();
@@ -54,7 +57,7 @@ export const MyForm = () => {
         </Typography>
         <h1 style={{ fontFamily: "LineaturaLight" }}>
           puoi rimandere un altro messaggio in...
-          <Countdown onComplete={() => setMandato(false)} duration={10} />
+          <Countdown onComplete={() => setMandato(false)} duration={5} />
         </h1>
       </div>
     );

src/index.js

@@ -1,7 +1,7 @@
 import "./App.css";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom/client";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
 import firebase from "firebase/compat/app";
 import "firebase/compat/database";
 import "firebase/compat/analytics";
@@ -9,6 +9,14 @@ import { Proiezione } from "./Proiezione";
 import { MyForm } from "./MyForm";
 import { Admin } from "./Admin";
 import { Galleria } from "./Galleria";
+import { Stack } from "@mui/system";
+import { Container, Typography } from "@mui/material";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import ListItemAvatar from "@mui/material/ListItemAvatar";
+import Avatar from "@mui/material/Avatar";
+import BeachAccessIcon from "@mui/icons-material/BeachAccess";
 
 const firebaseConfig = {
   apiKey: "AIzaSyBWE1l8WV_7eyKT-PMu0Kq2w_WiV0SUhJw",
@@ -25,10 +33,60 @@ const firebaseConfig = {
 firebase.initializeApp(firebaseConfig);
 firebase.analytics();
 
+const ListaEventi = () => {
+  const [eventi, cambiaEventi] = useState([]);
+
+  useEffect(() => {
+    var messagesRef = firebase.database().ref(`/eventi`);
+
+    messagesRef.once("value", function (snapshot) {
+      const eventiObject = snapshot.val();
+      const e = Object.keys(eventiObject).map((d) => {
+        console.log(eventiObject[d]);
+        return (
+          <ListItem>
+            {/* <ListItemAvatar>
+              <Avatar>
+                <BeachAccessIcon />
+              </Avatar>
+            </ListItemAvatar> */}
+            <Link key={d} to={`/eventi/${d}`}>
+              <ListItemText
+                primary={eventiObject[d]}
+                // secondary="July 20, 2014"
+              />
+            </Link>
+          </ListItem>
+        );
+      });
+      cambiaEventi(e);
+    });
+  }, []);
+
+  if (!eventi) return <div></div>;
+  return (
+    <Container>
+      <List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
+        <ListItem>
+          <Typography
+            style={{
+              fontFamily: "Lineatura",
+            }}
+          >
+            I nostri eventi
+          </Typography>
+        </ListItem>
+
+        {eventi}
+      </List>
+    </Container>
+  );
+};
+
 ReactDOM.createRoot(document.getElementById("root")).render(
   <Router>
     <Routes>
-      <Route path="/" element={<div />} />
+      <Route path="/" element={<ListaEventi />} />
       <Route path="/:evento" element={<MyForm />} />
       <Route path="/eventi/:evento" element={<Galleria />} />
       <Route path="proiezione/:evento" element={<Proiezione />} />