changes to layout and logic in db

src/Admin.js

@@ -1,8 +1,53 @@
+import IconButton from "@mui/material/IconButton";
+import DeleteIcon from "@mui/icons-material/Delete";
 import React, { useEffect, useState } from "react";
 import firebase from "firebase/app";
 import { Stack } from "@mui/system";
-import { CheckboxListSecondary } from "./index";
 import { useParams } from "react-router-dom";
+import { Checkbox } from "@mui/material";
+
+function CheckboxListSecondary({ messaggi, evento, onChecked }) {
+  return (
+    <Stack spacing={4}>
+      {messaggi.map((m) => {
+        const labelId = `checkbox-list-secondary-label-${m.timestamp}`;
+        return (
+          <Stack spacing={3} direction="row" key={m.timestamp}>
+            <Checkbox
+              edge="end"
+              onChange={() => onChecked(m)}
+              checked={m.approvato}
+              inputProps={{ "aria-labelledby": labelId }}
+            />
+
+            <div
+              style={{
+                background: `url("${m.immagineURL}")`,
+                backgroundSize: "cover",
+                width: 50,
+                height: 50,
+              }}
+            />
+
+            <p style={{ maxWidth: 200, width: 200 }}>
+              {`"${m.testo}"`}
+              {m.autore && <span>da {m.autore}</span>}
+            </p>
+            <IconButton
+              variant="outlined"
+              onClick={() => {
+                console.log(`messaggi/${evento}/${m.id}`);
+                firebase.database().ref(`messaggi/${evento}/${m.id}`).remove();
+              }}
+            >
+              <DeleteIcon />
+            </IconButton>
+          </Stack>
+        );
+      })}
+    </Stack>
+  );
+}
 
 export const Admin = () => {
   const [messaggi, cambiaMessaggi] = useState([]);
@@ -15,9 +60,10 @@ export const Admin = () => {
 
     messagesRef.on("value", function (snapshot) {
       var messaggi = snapshot.val();
-      console.log(messaggi);
-      messaggi = Object.keys(messaggi).map((d) => messaggi[d]);
-      cambiaMessaggi(messaggi);
+      if (messaggi) {
+        messaggi = Object.keys(messaggi).map((d) => messaggi[d]);
+        cambiaMessaggi(messaggi);
+      }
     });
 
     messagesRef.on("child_changed", function (snapshot) {
@@ -32,6 +78,7 @@ export const Admin = () => {
   } else {
     element = (
       <CheckboxListSecondary
+        evento={evento}
         messaggi={messaggi}
         onChecked={(m) => {
           firebase

src/Galleria.js

@@ -12,9 +12,9 @@ import { Fade, LinearProgress } from "@mui/material";
 
 export const Galleria = () => {
   const { evento } = useParams();
-  const [messaggi, cambiaMessaggi] = useState([]);
+  const [messages, setMessages] = useState([]);
   const [imgIndex, cambiaimgIndex] = useState(0);
-  const [images, cambiaimmagini] = useState([]);
+  const [images, setImages] = useState([]);
 
   useEffect(() => {
     var messagesRef = firebase.database().ref(`/messaggi/${evento}`);
@@ -27,8 +27,10 @@ export const Galleria = () => {
         })
         .filter((d) => d.approvato)
         .sort((a, b) => a.timestamp - b.timestamp);
-      cambiaMessaggi(messaggi);
-      cambiaimmagini(
+
+      setMessages(messaggi);
+
+      setImages(
         messaggi
           .filter((d) => d.immagineURL != null)
           .map((d) => {
@@ -80,7 +82,7 @@ export const Galleria = () => {
         }}
       >
         {imgIndex === images.length && (
-          <ContenitoreMessaggio messaggi={messaggi} />
+          <ContenitoreMessaggio messaggi={messages} />
         )}
 
         <img
@@ -121,25 +123,37 @@ const ContenitoreMessaggio = ({ messaggi }) => {
           display: "flex",
           width: "100vw",
           position: "absolute",
-          top: "90%",
+          bottom: 20,
           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
+          style={{
+            display: "flex",
+            width: "70vw",
+            margin: "0 auto",
+            justifyContent: "space-between",
+          }}
+          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>
     </Stack>
   );

src/ImageUpload.js

@@ -9,7 +9,7 @@ const IMAGE_SET = 1;
 const UPLOADING = 2;
 const DONE = 3;
 
-function ImageUpload({ onImageURLSet }) {
+function ImageUpload({ onImageURLSet, onImageUploading }) {
   const [state, setState] = useState();
   const [image, setImage] = useState(null);
   const [imageUrl, setImageUrl] = useState("");
@@ -19,7 +19,7 @@ function ImageUpload({ onImageURLSet }) {
     if (e.target.files[0]) {
       // setState(1);
       let image = e.target.files[0];
-
+      onImageUploading(true);
       const uploadTask = firebase
         .storage()
         .ref(`images/${image.name}`)

src/MyForm.js

@@ -7,14 +7,17 @@ import { Button, Typography } from "@mui/material";
 import { useForm } from "react-hook-form";
 import Countdown from "./Countdown";
 import ImageUpload from "./ImageUpload";
+import { useParams } from "react-router-dom";
 
 export const MyForm = () => {
-  const [mandato, cambiaMandato] = useState(false);
+  const { evento } = useParams();
+  const [mandato, setMandato] = useState(false);
+  const [imageUploading, setImageUploading] = useState(false);
   const [immagineURL, cambiaimmagineURL] = useState(null);
   const { register, handleSubmit } = useForm();
   const onSubmit = ({ testo, autore }) => {
-    cambiaMandato(true);
-    var postListRef = firebase.database().ref("messaggi");
+    setMandato(true);
+    var postListRef = firebase.database().ref(`messaggi/${evento}`);
     var newPostRef = postListRef.push();
     const update = {
       id: newPostRef.key,
@@ -51,7 +54,7 @@ export const MyForm = () => {
         </Typography>
         <h1 style={{ fontFamily: "LineaturaLight" }}>
           puoi rimandere un altro messaggio in...
-          <Countdown onComplete={() => cambiaMandato(false)} duration={10} />
+          <Countdown onComplete={() => setMandato(false)} duration={10} />
         </h1>
       </div>
     );
@@ -90,19 +93,29 @@ export const MyForm = () => {
             label="da"
             variant="outlined"
           />
-          <ImageUpload onImageURLSet={onImageURLSet} />
-          <Button
-            className="okbutton"
-            type="submit"
-            style={{
-              padding: "30px 0px",
-              fontSize: 20,
-              fontFamily: "Lineatura",
+          <ImageUpload
+            onImageUploading={() => {
+              setImageUploading(true);
             }}
-            variant="contained"
-          >
-            ok
-          </Button>
+            onImageURLSet={(b) => {
+              onImageURLSet(b);
+              setImageUploading(false);
+            }}
+          />
+          {!imageUploading && (
+            <Button
+              className="okbutton"
+              type="submit"
+              style={{
+                padding: "30px 0px",
+                fontSize: 20,
+                fontFamily: "Lineatura",
+              }}
+              variant="contained"
+            >
+              ok
+            </Button>
+          )}
         </Stack>
       </form>
     </Container>

src/index.js

@@ -1,5 +1,3 @@
-import IconButton from "@mui/material/IconButton";
-import DeleteIcon from "@mui/icons-material/Delete";
 import "./App.css";
 import React from "react";
 import ReactDOM from "react-dom/client";
@@ -26,55 +24,11 @@ const firebaseConfig = {
 
 firebase.initializeApp(firebaseConfig);
 
-export function CheckboxListSecondary({ messaggi, onChecked }) {
-  return (
-    <Stack spacing={4}>
-      {messaggi.map((m) => {
-        const labelId = `checkbox-list-secondary-label-${m.timestamp}`;
-        return (
-          <Stack spacing={3} direction="row" key={m.timestamp}>
-            <Checkbox
-              edge="end"
-              onChange={() => onChecked(m)}
-              checked={m.approvato}
-              inputProps={{ "aria-labelledby": labelId }}
-            />
-
-            <div
-              style={{
-                background: `url("${m.immagineURL}")`,
-                backgroundSize: "cover",
-                width: 50,
-                height: 50,
-              }}
-            />
-
-            <p style={{ maxWidth: 200, width: 200 }}>
-              {`"${m.testo}"`}
-              {m.autore && <span>da {m.autore}</span>}
-            </p>
-            <IconButton
-              variant="outlined"
-              onClick={() => {
-                firebase
-                  .database()
-                  .ref("messaggi/" + m.id)
-                  .remove();
-              }}
-            >
-              <DeleteIcon />
-            </IconButton>
-          </Stack>
-        );
-      })}
-    </Stack>
-  );
-}
-
 ReactDOM.createRoot(document.getElementById("root")).render(
   <Router>
     <Routes>
-      <Route path="/" element={<MyForm />} />
+      <Route path="/" element={<div />} />
+      <Route path="/:evento" element={<MyForm />} />
       <Route path="/eventi/:evento" element={<Galleria />} />
       <Route path="proiezione/:evento" element={<Proiezione />} />
       <Route path="admin/:evento" element={<Admin />} />