link colors

package-lock.json

@@ -23,6 +23,7 @@
         "react-hook-form": "^7.41.0",
         "react-router-dom": "^6.6.1",
         "react-scripts": "5.0.1",
+        "sass": "^1.60.0",
         "sort-by": "^1.2.0",
         "web-vitals": "^2.1.4"
       }
@@ -10000,6 +10001,11 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -16044,6 +16050,22 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "node_modules/sass": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.60.0.tgz",
+      "integrity": "sha512-updbwW6fNb5gGm8qMXzVO7V4sWf7LMXnMly/JEyfbfERbVH46Fn6q02BX7/eHTdKpE7d+oTkMMQpFWNUMfFbgQ==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -25566,6 +25588,11 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
       "integrity": "sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ=="
     },
+    "immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -29737,6 +29764,16 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "sass": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.60.0.tgz",
+      "integrity": "sha512-updbwW6fNb5gGm8qMXzVO7V4sWf7LMXnMly/JEyfbfERbVH46Fn6q02BX7/eHTdKpE7d+oTkMMQpFWNUMfFbgQ==",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",

package.json

@@ -19,6 +19,7 @@
     "react-hook-form": "^7.41.0",
     "react-router-dom": "^6.6.1",
     "react-scripts": "5.0.1",
+    "sass": "^1.60.0",
     "sort-by": "^1.2.0",
     "web-vitals": "^2.1.4"
   },

src/Buttons.js

@@ -0,0 +1,43 @@
+import React from "react";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import IconButton from "@mui/material/IconButton";
+import { Stack } from "@mui/system";
+
+export function Buttons(indiceCorrente, cambiaindiceCorrente, messaggi) {
+  return (
+    <Stack
+      style={{
+        display: "flex",
+        width: "100vw",
+        position: "absolute",
+        bottom: 20,
+        left: 0,
+        padding: 10,
+        boxSizing: "border-box",
+      }}
+      direction="row"
+    >
+      <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", color: "#ddd" }} />
+          </IconButton>
+        )}
+        {indiceCorrente < messaggi.length - 1 && (
+          <IconButton onClick={() => cambiaindiceCorrente(indiceCorrente + 1)}>
+            <ArrowForwardIcon style={{ fontSize: "3rem", color: "#ddd" }} />
+          </IconButton>
+        )}
+      </Stack>
+    </Stack>
+  );
+}

src/Galleria.js

@@ -3,13 +3,11 @@ import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import firebase from "firebase/compat/app";
 
-import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import IconButton from "@mui/material/IconButton";
 import { Stack } from "@mui/system";
 import logoSrc from "./logo_chat.svg";
-import { Fade, LinearProgress } from "@mui/material";
+import { Box, CircularProgress, Fade, LinearProgress } from "@mui/material";
 import { VideoComponent } from "./Proiezione";
+import { Buttons } from "./Buttons";
 
 export const Galleria = () => {
   const { evento } = useParams();
@@ -31,13 +29,13 @@ export const Galleria = () => {
 
       setMessages(messaggi);
 
-      setImages(
+      // setImages(
-        messaggi
+      //   messaggi
-          .filter((d) => d.immagineURL != null)
+      //     .filter((d) => d.immagineURL != null)
-          .map((d) => {
+      //     .map((d) => {
-            return d.immagineURL;
+      //       return d.immagineURL;
-          })
+      //     })
-      );
+      // );
     });
   }, [evento]);
 
@@ -84,7 +82,7 @@ export const Galleria = () => {
         }}
       >
         <VideoComponent />
-        <ContenitoreMessaggio messaggi={messages} />
+        {messages.length && <ContenitoreMessaggio messaggi={messages} />}
 
         <img
           src={logoSrc}
@@ -108,54 +106,21 @@ const ContenitoreMessaggio = ({ messaggi }) => {
   return (
     <Stack sx={{ zIndex: 1 }}>
       <div>
-        {messaggioDaMostrare && (
+        <Stack>
-          <ImagePlaceholder
+          {messaggioDaMostrare.immagineURL && (
-            messaggioDaMostrare={messaggioDaMostrare}
+            <ImagePlaceholder
-            style={{
+              messaggioDaMostrare={messaggioDaMostrare}
-              maxWidth: "100%",
+              style={{
-              maxHeight: "80vh",
+                maxWidth: "100%",
-            }}
+                maxHeight: "80vh",
-          />
+              }}
-        )}
+            />
+          )}
+          <Messaggio messaggioDaMostrare={messaggioDaMostrare} />
+        </Stack>
       </div>
 
-      <Stack
+      {Buttons(indiceCorrente, cambiaindiceCorrente, messaggi)}
-        style={{
-          display: "flex",
-          width: "100vw",
-          position: "absolute",
-          bottom: 20,
-          left: 0,
-          padding: 10,
-          boxSizing: "border-box",
-        }}
-        direction="row"
-      >
-        <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", color: "#ddd" }} />
-            </IconButton>
-          )}
-          {indiceCorrente < messaggi.length - 1 && (
-            <IconButton
-              onClick={() => cambiaindiceCorrente(indiceCorrente + 1)}
-            >
-              <ArrowForwardIcon style={{ fontSize: "3rem", color: "#ddd" }} />
-            </IconButton>
-          )}
-        </Stack>
-      </Stack>
     </Stack>
   );
 };
@@ -164,6 +129,9 @@ function ImagePlaceholder({ messaggioDaMostrare }) {
   const [imageLoaded, setImageLoaded] = useState(false);
 
   useEffect(() => {
+    console.log("go");
+    setImageLoaded(false);
+
     if (messaggioDaMostrare.immagineURL) {
       const image = new Image();
       image.onload = () => {
@@ -175,8 +143,8 @@ function ImagePlaceholder({ messaggioDaMostrare }) {
     }
   }, [messaggioDaMostrare.immagineURL]);
 
-  return (
+  if (imageLoaded) {
-    <Fade in={imageLoaded}>
+    return (
       <div>
         {messaggioDaMostrare.immagineURL && (
           <img
@@ -188,10 +156,22 @@ function ImagePlaceholder({ messaggioDaMostrare }) {
             }}
           />
         )}
-        <Messaggio messaggioDaMostrare={messaggioDaMostrare} />
       </div>
-    </Fade>
+    );
-  );
+  } else {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-around",
+          width: "100%",
+        }}
+      >
+        <CircularProgress />
+      </Box>
+    );
+  }
 }
 
 const Messaggio = ({ messaggioDaMostrare }) => {

src/index.js

@@ -9,14 +9,8 @@ import { Proiezione } from "./Proiezione";
 import { MyForm } from "./MyForm";
 import { Admin } from "./Admin";
 import { Galleria } from "./Galleria";
-import { Stack } from "@mui/system";
+import { Container, Stack, Typography } from "@mui/material";
-import { Container, Typography } from "@mui/material";
+import logoSrc from "./logo_chat.svg";
-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",
@@ -41,22 +35,23 @@ const ListaEventi = () => {
 
     messagesRef.once("value", function (snapshot) {
       const eventiObject = snapshot.val();
-      const e = Object.keys(eventiObject).map((d) => {
+      const e = Object.keys(eventiObject).map((d, i) => {
-        console.log(eventiObject[d]);
+        const color = `hsl(${i * 10}, 75%, 70%`;
         return (
-          <ListItem>
+          <div key={d}>
-            {/* <ListItemAvatar>
+            <a
-              <Avatar>
+              style={{
-                <BeachAccessIcon />
+                textDecoration: "none",
-              </Avatar>
+                display: "inline-block",
-            </ListItemAvatar> */}
+                color,
-            <Link key={d} to={`/eventi/${d}`}>
+                fontFamily: "Lineatura",
-              <ListItemText
+                borderBottom: `1px solid ${color}`,
-                primary={eventiObject[d]}
+              }}
-                // secondary="July 20, 2014"
+              href={`/eventi/${d}`}
-              />
+            >
-            </Link>
+              {eventiObject[d]}
-          </ListItem>
+            </a>
+          </div>
         );
       });
       cambiaEventi(e);
@@ -65,20 +60,34 @@ const ListaEventi = () => {
 
   if (!eventi) return <div></div>;
   return (
-    <Container>
+    <Container maxWidth="md">
-      <List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
+      <img
-        <ListItem>
+        alt="logo"
-          <Typography
+        src={logoSrc}
-            style={{
+        style={{
-              fontFamily: "Lineatura",
+          width: 120,
-            }}
+          position: "absolute",
-          >
+          top: 20,
-            I nostri eventi
+          right: 20,
-          </Typography>
+        }}
-        </ListItem>
+      />
+      <Stack
+        spacing={2}
+        sx={{
+          paddingTop: 20,
+        }}
+      >
+        <Typography
+          variant="h4"
+          style={{
+            fontFamily: "Lineatura",
+          }}
+        >
+          I nostri eventi
+        </Typography>
 
         {eventi}
-      </List>
+      </Stack>
     </Container>
   );
 };