diff --git a/public/index.html b/public/index.html index aa069f2..6798c03 100644 --- a/public/index.html +++ b/public/index.html @@ -26,18 +26,8 @@ --> React App - +
- diff --git a/src/Admin.js b/src/Admin.js new file mode 100644 index 0000000..e28dc65 --- /dev/null +++ b/src/Admin.js @@ -0,0 +1,52 @@ +import React, { useEffect, useState } from "react"; +import firebase from "firebase/app"; +import { Stack } from "@mui/system"; +import { CheckboxListSecondary } from "./index"; + +export const Admin = () => { + const [messaggi, cambiaMessaggi] = useState([]); + + useEffect(() => { + // Get a reference to the messages node in the Realtime Database + var messagesRef = firebase.database().ref("/messaggi"); + console.log(messagesRef); + + messagesRef.on("value", function (snapshot) { + var messaggi = snapshot.val(); + console.log(messaggi); + messaggi = Object.keys(messaggi).map((d) => messaggi[d]); + cambiaMessaggi(messaggi); + }); + + messagesRef.on("child_changed", function (snapshot) { + var messaggio = snapshot.val(); + const i = messaggi.findIndex((m) => messaggio.timestamp === m.timestamp); + }); + }, []); + + let element; + if (!messaggi.length) { + element =
nessun messaggio
; + } else { + element = ( + { + firebase + .database() + .ref("messaggi/" + m.id) + .update({ + approvato: !m.approvato, + }); + }} + /> + ); + } + + return ( + +

Admin

+ {element} + + ); +}; diff --git a/src/App.css b/src/App.css index 74b5e05..e69de29 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/ImageUpload.js b/src/ImageUpload.js index 613d3fb..27aed9d 100644 --- a/src/ImageUpload.js +++ b/src/ImageUpload.js @@ -1,9 +1,15 @@ import React, { useState } from "react"; -import { storage, firestore } from "firebase/app"; +import firebase from "firebase/app"; import "firebase/storage"; -import "firebase/firestore"; +import { Stack } from "@mui/system"; -function ImageUpload() { +const IDLE = 0; +const IMAGE_SET = 1; +const UPLOADING = 2; +const DONE = 3; + +function ImageUpload({ onImageURLSet }) { + const [state, setState] = useState(); const [image, setImage] = useState(null); const [imageUrl, setImageUrl] = useState(""); const [progress, setProgress] = useState(0); @@ -11,11 +17,17 @@ function ImageUpload() { const handleChange = (e) => { if (e.target.files[0]) { setImage(e.target.files[0]); + setState(1); } }; const handleUpload = () => { - const uploadTask = storage.ref(`images/${image.name}`).put(image); + const uploadTask = firebase + .storage() + .ref(`images/${image.name}`) + .put(image); + + setState(2); uploadTask.on( "state_changed", @@ -29,34 +41,64 @@ function ImageUpload() { console.log(error); }, () => { - storage + firebase + .storage() .ref("images") .child(image.name) .getDownloadURL() .then((url) => { setImageUrl(url); - firestore() - .collection("images") - .add({ - imageUrl, - createdAt: new Date(), - }) - .then(() => { - setProgress(0); - setImage(null); - }); + setProgress(0); + setImage(null); + onImageURLSet(url); + setState(3); }); } ); }; - return ( -
- - - -
- ); + let componente; + switch (state) { + default: + case IDLE: + componente = ; + break; + case IMAGE_SET: + componente = ( + + + + + + + + ); + break; + + case UPLOADING: + componente = ( +
+ + +
+ ); + break; + + case DONE: + componente = ( +
+ +
+ ); + } + + return {componente}; } export default ImageUpload; diff --git a/src/MyForm.js b/src/MyForm.js new file mode 100644 index 0000000..c3fdbfa --- /dev/null +++ b/src/MyForm.js @@ -0,0 +1,65 @@ +import React, { useState } from "react"; +import firebase from "firebase/app"; +import TextField from "@mui/material/TextField"; +import { Container, Stack } from "@mui/system"; +import { Button } from "@mui/material"; +import { useForm } from "react-hook-form"; +import Countdown from "./Countdown"; +import ImageUpload from "./ImageUpload"; + +export const MyForm = () => { + const [mandato, cambiaMandato] = useState(false); + const [immagineURL, cambiaimmagineURL] = useState(null); + const { register, handleSubmit } = useForm(); + const onSubmit = ({ testo, autore }) => { + cambiaMandato(true); + var postListRef = firebase.database().ref("messaggi"); + var newPostRef = postListRef.push(); + const update = { + id: newPostRef.key, + autore, + testo, + timestamp: firebase.database.ServerValue.TIMESTAMP, + approvato: true, + }; + if (immagineURL) update.immagineURL = immagineURL; + newPostRef.set(update); + }; + + const onImageURLSet = (url) => { + cambiaimmagineURL(url); + }; + + if (mandato) { + return ( + +
mandato e mo aspetti
+ cambiaMandato(false)} duration={5} /> + + ); + } + return ( + +
+ + + + + + +
+ + ); +}; diff --git a/src/Proiezione.js b/src/Proiezione.js index 06e6564..cc7dc67 100644 --- a/src/Proiezione.js +++ b/src/Proiezione.js @@ -1,9 +1,12 @@ import React, { useEffect, useState } from "react"; import firebase from "firebase/app"; -import { Button } from "@mui/material"; -import { MyForm, Admin } from "./index"; +import { Button, Grid } from "@mui/material"; +import { Admin } from "./Admin"; +import { MyForm } from "./MyForm"; import { useInterval } from "./Countdown"; +window.debug = false; + export const Proiezione = () => { const [messaggi, cambiaMessaggi] = useState([]); const [messaggiApprovati, cambiaMessaggiApprovati] = useState([]); @@ -14,6 +17,7 @@ export const Proiezione = () => { messagesRef.on("child_added", function (snapshot) { var messaggio = snapshot.val(); + console.log(messaggio); cambiaMessaggi((oldArray) => { const newArray = [...oldArray, messaggio].sort( (a, b) => b.timestamp - a.timestamp @@ -44,7 +48,7 @@ export const Proiezione = () => { const ContainerMessaggio = () => { if (!messaggiApprovati.length) { -
nessun messaggio
; + return
nessun messaggio
; } else { const messaggioCorrente = messaggiApprovati[indiceCorrente]; @@ -59,17 +63,43 @@ export const Proiezione = () => { return (
- - - + + +
); }; - +const Immagine = ({ url }) => { + return ( +
+ ); +}; const Messaggio = ({ nextMessage, messaggioCorrente }) => { const [timeLeft, setTimeLeft] = useState(5); - // Decrement the timer by 1 second every 1000ms useInterval(() => { if (timeLeft === 1) { nextMessage(); @@ -78,13 +108,20 @@ const Messaggio = ({ nextMessage, messaggioCorrente }) => { } }, 1000); - console.log("asdf"); return (
+ {messaggioCorrente.immagineURL && ( + + )}

{messaggioCorrente.testo}

da {messaggioCorrente.autore}

- - {timeLeft} + + {debug && ( +
+ + {timeLeft} +
+ )}
); }; diff --git a/src/index.js b/src/index.js index bf95bd0..6b34db0 100644 --- a/src/index.js +++ b/src/index.js @@ -1,13 +1,8 @@ -import React, { useEffect, useState } from "react"; +import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; import firebase from "firebase/app"; import "firebase/database"; -import TextField from "@mui/material/TextField"; -import { Stack } from "@mui/system"; -import { Button } from "@mui/material"; -import { useForm } from "react-hook-form"; -import Countdown from "./Countdown"; import List from "@mui/material/List"; import ListItem from "@mui/material/ListItem"; @@ -15,69 +10,23 @@ import ListItemButton from "@mui/material/ListItemButton"; import ListItemText from "@mui/material/ListItemText"; import Checkbox from "@mui/material/Checkbox"; import { Proiezione } from "./Proiezione"; - -export const MyForm = () => { - const [mandato, cambiaMandato] = useState(false); - const { register, handleSubmit } = useForm(); - const onSubmit = ({ testo, autore }) => { - var postListRef = firebase.database().ref("messaggi"); - var newPostRef = postListRef.push(); - console.log(newPostRef.key); - newPostRef.set({ - id: newPostRef.key, - autore, - testo, - timestamp: firebase.database.ServerValue.TIMESTAMP, - approvato: true, - }); - cambiaMandato(true); - }; - - if (mandato) { - return ( - -
mandato e mo aspetti
- cambiaMandato(false)} duration={5} /> - - ); - } - return ( -
- - - - - -
- ); -}; +import { MyForm } from "./MyForm"; +import { Admin } from "./Admin"; const firebaseConfig = { - apiKey: "AIzaSyASAEVOTQ38EmRoelz9qGiF6QsqpBOuU_k", - authDomain: "messaggi-letsswing.firebaseapp.com", + apiKey: "AIzaSyBWE1l8WV_7eyKT-PMu0Kq2w_WiV0SUhJw", + authDomain: "messaggiswing.firebaseapp.com", + projectId: "messaggiswing", + storageBucket: "messaggiswing.appspot.com", + messagingSenderId: "983131964310", + appId: "1:983131964310:web:5ef430e42c42d2dfe253b7", databaseURL: - "https://messaggi-letsswing-default-rtdb.europe-west1.firebasedatabase.app", - projectId: "messaggi-letsswing", - storageBucket: "messaggi-letsswing.appspot.com", - messagingSenderId: "154307951524", - appId: "1:154307951524:web:f320027fb89982a3f05f31", + "https://messaggiswing-default-rtdb.europe-west1.firebasedatabase.app", }; firebase.initializeApp(firebaseConfig); -function CheckboxListSecondary({ messaggi, onChecked }) { +export function CheckboxListSecondary({ messaggi, onChecked }) { return ( { - const [messaggi, cambiaMessaggi] = useState([]); - const [indiceCorrente, cambiaindiceCorrente] = useState(0); - - useEffect(() => { - // Get a reference to the messages node in the Realtime Database - var messagesRef = firebase.database().ref("/messaggi"); - - messagesRef.on("value", function (snapshot) { - var messaggi = snapshot.val(); - messaggi = Object.keys(messaggi).map((d) => messaggi[d]); - cambiaMessaggi(messaggi); - }); - - messagesRef.on("child_changed", function (snapshot) { - var messaggio = snapshot.val(); - const i = messaggi.findIndex((m) => messaggio.timestamp === m.timestamp); - }); - }, []); - - if (!messaggi.length) return
nessun messaggio
; - - return ( - -
- { - firebase - .database() - .ref("messaggi/" + m.id) - .update({ - approvato: !m.approvato, - }); - }} - /> - - ); -}; - -const Input = () => { - return
Input
; -}; - ReactDOM.createRoot(document.getElementById("root")).render( - } /> + } /> } /> } />