diff --git a/Frontend/src/pages/create.js b/Frontend/src/pages/create.js index 28b2a33..8bec443 100644 --- a/Frontend/src/pages/create.js +++ b/Frontend/src/pages/create.js @@ -10,44 +10,43 @@ export default function Create() { const [url, setUrl] = useState(""); const [isImageAccepted, setImageAccepted] = useState(null); // null = not decided, true = accepted, false = rejected const [generating, setGenerating] = useState(false); + const [accepting, setAccepting] = useState(false); const [failed, setFailed] = useState(false); const handleSubmit = async (e) => { e.preventDefault(); - try { - setGenerating(true); - setFailed(false); - setImageAccepted(null); - await axios.post( - "http://localhost:5000/generate_image", - { prompt: text }, - { - headers: { - "Authorization": `Bearer ${Cookie.get("token")}` - } - }, - ).then(response => { - if (response.data.output) { - setUrl(response.data.output); - setImageAccepted(null); // Reset the decision state when a new image is fetched - } else if (response.data.error) { - setFailed(true); - console.error(response.data.error); - } - }).then(() => setGenerating(false)); - - } catch (error) { - setFailed(true); - setGenerating(false); - console.error("Error:", error); - } + setGenerating(true); + setFailed(false); + setImageAccepted(null); + await axios.post( + "http://localhost:5000/generate_image", + { prompt: text }, + { + headers: { + "Authorization": `Bearer ${Cookie.get("token")}` + } + }, + ).then(response => { + if (response.data.output) { + setUrl(response.data.output); + setImageAccepted(null); // Reset the decision state when a new image is fetched + } else if (response.data.error) { + setFailed(true); + console.error(response.data.error); + } + }).catch((error) => { + setFailed(true); + console.error("Error:", error); + }).then(() => { + setGenerating(false); + }); }; const handleAccept = async (e) => { e.preventDefault(); - setImageAccepted(true); + setAccepting(true); await axios.post("http://localhost:5000/store_image", { "prompt": text, @@ -57,11 +56,17 @@ export default function Create() { headers: { "Authorization": `Bearer ${Cookie.get("token")}` } - }).catch((error) => console.error("Error: ", error))}; + }).catch((error) => console.error("Error: ", error)) + .then(() => { + setUrl(""); + setAccepting(false); + setImageAccepted(true); + }); + } const handleReject = () => { setImageAccepted(false); - setUrl(""); // Clear the image if rejected, or add any other logic if needed + setUrl(""); }; return ( @@ -98,9 +103,10 @@ export default function Create() {
{ width={800} height={800} /> -

"{selectedImage.prompt}" ~{selectedImage.creator}

)} diff --git a/Frontend/src/pages/nav.js b/Frontend/src/pages/nav.js index 1a055e0..7d5ad94 100644 --- a/Frontend/src/pages/nav.js +++ b/Frontend/src/pages/nav.js @@ -30,22 +30,22 @@ const NavBar = () => { {/* Primary Navbar items */}
- + Vote - + Portfolio - + Leaderboard - + Create diff --git a/Frontend/src/pages/portfolio.js b/Frontend/src/pages/portfolio.js index 7f471f2..0ae05c0 100644 --- a/Frontend/src/pages/portfolio.js +++ b/Frontend/src/pages/portfolio.js @@ -1,12 +1,14 @@ import Link from "next/link"; import { isAuthenticated } from "./auth"; import Cookie from "js-cookie"; -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, useRef } from "react"; import Image from "next/image"; import axios from "axios"; export default function Portfolio() { const [portfolio, setPortfolio] = useState(null); + const [selectedImage, setSelectedImage] = useState(null); + const modalRef = useRef(null); useEffect(() => { async function fetch_portfolio() { @@ -24,28 +26,66 @@ export default function Portfolio() { fetch_portfolio(); }, []); + const openImageModal = (image) => { + setSelectedImage(image); + }; + + const closeImageModal = () => { + setSelectedImage(null); + }; + + const handleModalClick = (e) => { + // Check if the click event occurred outside the image modal + if (modalRef.current && !modalRef.current.contains(e.target)) { + closeImageModal(); + } + }; + return ( -
-
+
+
+
{portfolio && portfolio.map((image) => ( -
{/* Add key here */} - image.url} - layout="fill" - objectFit="cover" - /> +
openImageModal(image)} + > +
+ Votable Image +
))} - - - - - - - - +
+ + {selectedImage && ( +
+
+ + Votable Image +

"{selectedImage.prompt}"

+
+
+ )}
); };