diff --git a/src/Admin.js b/src/Admin.js index 03e3599..5f93b82 100644 --- a/src/Admin.js +++ b/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 ( + + {messaggi.map((m) => { + const labelId = `checkbox-list-secondary-label-${m.timestamp}`; + return ( + + onChecked(m)} + checked={m.approvato} + inputProps={{ "aria-labelledby": labelId }} + /> + +
+ +

+ {`"${m.testo}"`} + {m.autore && da {m.autore}} +

+ { + console.log(`messaggi/${evento}/${m.id}`); + firebase.database().ref(`messaggi/${evento}/${m.id}`).remove(); + }} + > + + + + ); + })} + + ); +} 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 = ( { firebase diff --git a/src/Galleria.js b/src/Galleria.js index 546db83..5cc6227 100644 --- a/src/Galleria.js +++ b/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 && ( - + )} { 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 && ( - cambiaindiceCorrente(indiceCorrente - 1)}> - - - )} - {indiceCorrente < messaggi.length - 1 && ( - cambiaindiceCorrente(indiceCorrente + 1)}> - - - )} + + {indiceCorrente > 0 && ( + cambiaindiceCorrente(indiceCorrente - 1)} + > + + + )} + {indiceCorrente < messaggi.length - 1 && ( + cambiaindiceCorrente(indiceCorrente + 1)} + > + + + )} + ); diff --git a/src/ImageUpload.js b/src/ImageUpload.js index 3f249fb..edfe2d9 100644 --- a/src/ImageUpload.js +++ b/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}`) diff --git a/src/MyForm.js b/src/MyForm.js index 20b7d3a..aa272d0 100644 --- a/src/MyForm.js +++ b/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 = () => {

puoi rimandere un altro messaggio in... - cambiaMandato(false)} duration={10} /> + setMandato(false)} duration={10} />

); @@ -90,19 +93,29 @@ export const MyForm = () => { label="da" variant="outlined" /> - - + onImageURLSet={(b) => { + onImageURLSet(b); + setImageUploading(false); + }} + /> + {!imageUploading && ( + + )}
diff --git a/src/index.js b/src/index.js index 4de4cb6..07beb01 100644 --- a/src/index.js +++ b/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 ( - - {messaggi.map((m) => { - const labelId = `checkbox-list-secondary-label-${m.timestamp}`; - return ( - - onChecked(m)} - checked={m.approvato} - inputProps={{ "aria-labelledby": labelId }} - /> - -
- -

- {`"${m.testo}"`} - {m.autore && da {m.autore}} -

- { - firebase - .database() - .ref("messaggi/" + m.id) - .remove(); - }} - > - - - - ); - })} - - ); -} - ReactDOM.createRoot(document.getElementById("root")).render( - } /> + } /> + } /> } /> } /> } />