danilo/letsswingchat
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added image upload functionality

Browse Source
This commit is contained in:
Danilo Di Cuia
2022-12-27 15:11:17 +01:00
parent b4cfaaddf1
commit 2b562e3495
7 changed files with 242 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+1 -11
View File
@@ -26,18 +26,8 @@
--> -->
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body style="margin: 0">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body> </body>
</html> </html>
src/Admin.js
+52
View File
@@ -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 = <div>nessun messaggio</div>;
} else {
element = (
<CheckboxListSecondary
messaggi={messaggi}
onChecked={(m) => {
firebase
.database()
.ref("messaggi/" + m.id)
.update({
approvato: !m.approvato,
});
}}
/>
);
}
return (
<Stack>
<h2>Admin</h2>
{element}
</Stack>
);
};
src/App.css
-38
View File
@@ -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);
}
}
src/ImageUpload.js
+58 -16
View File
@@ -1,9 +1,15 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { storage, firestore } from "firebase/app"; import firebase from "firebase/app";
import "firebase/storage"; 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 [image, setImage] = useState(null);
const [imageUrl, setImageUrl] = useState(""); const [imageUrl, setImageUrl] = useState("");
const [progress, setProgress] = useState(0); const [progress, setProgress] = useState(0);
@@ -11,11 +17,17 @@ function ImageUpload() {
const handleChange = (e) => { const handleChange = (e) => {
if (e.target.files[0]) { if (e.target.files[0]) {
setImage(e.target.files[0]); setImage(e.target.files[0]);
setState(1);
} }
}; };
const handleUpload = () => { 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( uploadTask.on(
"state_changed", "state_changed",
@@ -29,34 +41,64 @@ function ImageUpload() {
console.log(error); console.log(error);
}, },
() => { () => {
storage firebase
.storage()
.ref("images") .ref("images")
.child(image.name) .child(image.name)
.getDownloadURL() .getDownloadURL()
.then((url) => { .then((url) => {
setImageUrl(url); setImageUrl(url);
firestore()
.collection("images")
.add({
imageUrl,
createdAt: new Date(),
})
.then(() => {
setProgress(0); setProgress(0);
setImage(null); setImage(null);
}); onImageURLSet(url);
setState(3);
}); });
} }
); );
}; };
return ( let componente;
switch (state) {
default:
case IDLE:
componente = <input type="file" onChange={handleChange} />;
break;
case IMAGE_SET:
componente = (
<Stack>
<img style={{ width: 200 }} src={URL.createObjectURL(image)} />
<Stack spacing={2} direction="row">
<button
onClick={() => {
setState(IDLE);
}}
>
annulla
</button>
<button onClick={handleUpload}>carica</button>
</Stack>
</Stack>
);
break;
case UPLOADING:
componente = (
<div> <div>
<input type="file" onChange={handleChange} /> <img style={{ width: 200 }} src={image.src} />
<button onClick={handleUpload}>Upload</button>
<progress value={progress} max="100" /> <progress value={progress} max="100" />
</div> </div>
); );
break;
case DONE:
componente = (
<div>
<img style={{ width: 200 }} src={imageUrl} />
</div>
);
}
return <Stack>{componente}</Stack>;
} }
export default ImageUpload; export default ImageUpload;
src/MyForm.js
+65
View File
@@ -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 (
<Stack>
<div>mandato e mo aspetti</div>
<Countdown onComplete={() => cambiaMandato(false)} duration={5} />
</Stack>
);
}
return (
<Container maxWidth="sm" style={{ marginTop: 100 }}>
<form onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={2}>
<ImageUpload onImageURLSet={onImageURLSet} />
<TextField
{...register("testo", { required: true, maxLength: 20 })}
id="outlined-basic"
label="messaggio"
variant="outlined"
/>
<TextField
{...register("autore", { pattern: /^[A-Za-z]+$/i })}
id="outlined-basic"
label="da"
variant="outlined"
/>
<Button type="submit" variant="contained">
manda
</Button>
</Stack>
</form>
</Container>
);
};
src/Proiezione.js
+45 -8
View File
@@ -1,9 +1,12 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import firebase from "firebase/app"; import firebase from "firebase/app";
import { Button } from "@mui/material"; import { Button, Grid } from "@mui/material";
import { MyForm, Admin } from "./index"; import { Admin } from "./Admin";
import { MyForm } from "./MyForm";
import { useInterval } from "./Countdown"; import { useInterval } from "./Countdown";
window.debug = false;
export const Proiezione = () => { export const Proiezione = () => {
const [messaggi, cambiaMessaggi] = useState([]); const [messaggi, cambiaMessaggi] = useState([]);
const [messaggiApprovati, cambiaMessaggiApprovati] = useState([]); const [messaggiApprovati, cambiaMessaggiApprovati] = useState([]);
@@ -14,6 +17,7 @@ export const Proiezione = () => {
messagesRef.on("child_added", function (snapshot) { messagesRef.on("child_added", function (snapshot) {
var messaggio = snapshot.val(); var messaggio = snapshot.val();
console.log(messaggio);
cambiaMessaggi((oldArray) => { cambiaMessaggi((oldArray) => {
const newArray = [...oldArray, messaggio].sort( const newArray = [...oldArray, messaggio].sort(
(a, b) => b.timestamp - a.timestamp (a, b) => b.timestamp - a.timestamp
@@ -44,7 +48,7 @@ export const Proiezione = () => {
const ContainerMessaggio = () => { const ContainerMessaggio = () => {
if (!messaggiApprovati.length) { if (!messaggiApprovati.length) {
<div>nessun messaggio</div>; return <div>nessun messaggio</div>;
} else { } else {
const messaggioCorrente = messaggiApprovati[indiceCorrente]; const messaggioCorrente = messaggiApprovati[indiceCorrente];
@@ -59,17 +63,43 @@ export const Proiezione = () => {
return ( return (
<div> <div>
<MyForm /> <Grid
style={{
width: "100%",
height: "100vh",
background: "black",
fontFamily: "sans-serif",
fontWeight: "bold",
color: "white",
display: "flex",
justifyContent: "space-around",
alignContent: "center",
alignItems: "center",
textAlign: "center",
}}
>
<ContainerMessaggio /> <ContainerMessaggio />
<Admin /> </Grid>
</div> </div>
); );
}; };
const Immagine = ({ url }) => {
return (
<div
style={{
height: 400,
width: 400,
borderRadius: "50%",
backgroundSize: "cover",
backgroundImage: `url("${url}")`,
backgroundPositionX: "center",
}}
></div>
);
};
const Messaggio = ({ nextMessage, messaggioCorrente }) => { const Messaggio = ({ nextMessage, messaggioCorrente }) => {
const [timeLeft, setTimeLeft] = useState(5); const [timeLeft, setTimeLeft] = useState(5);
// Decrement the timer by 1 second every 1000ms
useInterval(() => { useInterval(() => {
if (timeLeft === 1) { if (timeLeft === 1) {
nextMessage(); nextMessage();
@@ -78,13 +108,20 @@ const Messaggio = ({ nextMessage, messaggioCorrente }) => {
} }
}, 1000); }, 1000);
console.log("asdf");
return ( return (
<div> <div>
{messaggioCorrente.immagineURL && (
<Immagine url={messaggioCorrente.immagineURL} />
)}
<h1>{messaggioCorrente.testo}</h1> <h1>{messaggioCorrente.testo}</h1>
<p>da {messaggioCorrente.autore}</p> <p>da {messaggioCorrente.autore}</p>
{debug && (
<div>
<Button onClick={() => nextMessage()}>next</Button> <Button onClick={() => nextMessage()}>next</Button>
{timeLeft} {timeLeft}
</div> </div>
)}
</div>
); );
}; };
src/index.js
+12 -107
View File
@@ -1,13 +1,8 @@
import React, { useEffect, useState } from "react"; import React from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import firebase from "firebase/app"; import firebase from "firebase/app";
import "firebase/database"; 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 List from "@mui/material/List";
import ListItem from "@mui/material/ListItem"; import ListItem from "@mui/material/ListItem";
@@ -15,69 +10,23 @@ import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText"; import ListItemText from "@mui/material/ListItemText";
import Checkbox from "@mui/material/Checkbox"; import Checkbox from "@mui/material/Checkbox";
import { Proiezione } from "./Proiezione"; import { Proiezione } from "./Proiezione";
import { MyForm } from "./MyForm";
export const MyForm = () => { import { Admin } from "./Admin";
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 (
<Stack>
<div>mandato e mo aspetti</div>
<Countdown onComplete={() => cambiaMandato(false)} duration={5} />
</Stack>
);
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={2}>
<TextField
{...register("testo", { required: true, maxLength: 20 })}
id="outlined-basic"
label="messaggio"
variant="outlined"
/>
<TextField
{...register("autore", { pattern: /^[A-Za-z]+$/i })}
id="outlined-basic"
label="da"
variant="outlined"
/>
<Button type="submit" variant="contained">
manda
</Button>
</Stack>
</form>
);
};
const firebaseConfig = { const firebaseConfig = {
apiKey: "AIzaSyASAEVOTQ38EmRoelz9qGiF6QsqpBOuU_k", apiKey: "AIzaSyBWE1l8WV_7eyKT-PMu0Kq2w_WiV0SUhJw",
authDomain: "messaggi-letsswing.firebaseapp.com", authDomain: "messaggiswing.firebaseapp.com",
projectId: "messaggiswing",
storageBucket: "messaggiswing.appspot.com",
messagingSenderId: "983131964310",
appId: "1:983131964310:web:5ef430e42c42d2dfe253b7",
databaseURL: databaseURL:
"https://messaggi-letsswing-default-rtdb.europe-west1.firebasedatabase.app", "https://messaggiswing-default-rtdb.europe-west1.firebasedatabase.app",
projectId: "messaggi-letsswing",
storageBucket: "messaggi-letsswing.appspot.com",
messagingSenderId: "154307951524",
appId: "1:154307951524:web:f320027fb89982a3f05f31",
}; };
firebase.initializeApp(firebaseConfig); firebase.initializeApp(firebaseConfig);
function CheckboxListSecondary({ messaggi, onChecked }) { export function CheckboxListSecondary({ messaggi, onChecked }) {
return ( return (
<List <List
dense dense
@@ -111,54 +60,10 @@ function CheckboxListSecondary({ messaggi, onChecked }) {
); );
} }
export const Admin = () => {
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 <div>nessun messaggio</div>;
return (
<Stack>
<hr />
<CheckboxListSecondary
messaggi={messaggi}
onChecked={(m) => {
firebase
.database()
.ref("messaggi/" + m.id)
.update({
approvato: !m.approvato,
});
}}
/>
</Stack>
);
};
const Input = () => {
return <div> Input </div>;
};
ReactDOM.createRoot(document.getElementById("root")).render( ReactDOM.createRoot(document.getElementById("root")).render(
<Router> <Router>
<Routes> <Routes>
<Route path="/" element={<Input />} /> <Route path="/" element={<MyForm />} />
<Route path="proiezione" element={<Proiezione />} /> <Route path="proiezione" element={<Proiezione />} />
<Route path="admin" element={<Admin />} /> <Route path="admin" element={<Admin />} />
</Routes> </Routes>