diff --git a/src/assets/images/cookie.png b/src/assets/images/cookie.png new file mode 100644 index 0000000..7a42e58 Binary files /dev/null and b/src/assets/images/cookie.png differ diff --git a/src/assets/images/cookie.svg b/src/assets/images/cookie.svg new file mode 100644 index 0000000..cb562b1 --- /dev/null +++ b/src/assets/images/cookie.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/gold-medal.png b/src/assets/images/gold-medal.png new file mode 100644 index 0000000..c4a43b6 Binary files /dev/null and b/src/assets/images/gold-medal.png differ diff --git a/src/components/FeedbackModal/FeedbackModal.jsx b/src/components/FeedbackModal/FeedbackModal.jsx index cc53a1f..0e64dc7 100644 --- a/src/components/FeedbackModal/FeedbackModal.jsx +++ b/src/components/FeedbackModal/FeedbackModal.jsx @@ -19,10 +19,11 @@ export default function FeedbackModal({ isOpen, onClose, props, + setLeaderboard, + email, }) { const [feedbackHelped, setFeedbackHelped] = useState(null); const { setLoading } = useContext(DataContext); - async function handleFeedback() { setLoading(false); axios @@ -46,6 +47,21 @@ export default function FeedbackModal({ } return prevItems; }); + + // Update the leaderboard + const pointsToAdd = props.islost ? 2 : 5; + + axios.put(`${process.env.REACT_APP_AWS_BACKEND_URL}/leaderboard`, { + email: email, + pointsToAdd: pointsToAdd, + }); + + setLeaderboard((prev) => + prev.map((u) => + u.email === email ? { ...u, points: (u.points || 0) + pointsToAdd } : u + ) + ); + setLoading(true); } diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx index 45d1db0..e00e8f5 100644 --- a/src/components/Home/Home.jsx +++ b/src/components/Home/Home.jsx @@ -1,10 +1,11 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useRef } from "react"; import Map from "../Map/Map"; import "./Home.css"; import Filter from "../Filter/Filter"; import ResultsBar from "../ResultsBar/ResultsBar"; import CreateModal from "../CreateModal/CreateModal"; import LoginModal from "../LoginModal/LoginModal"; +import Leaderboard from "./Leaderboard"; import instagram from "../../assets/logos/instagram.svg"; import { UserAuth } from "../../context/AuthContext"; @@ -43,12 +44,16 @@ import upload from "../../assets/images/download.png"; import logout from "../../assets/logos/logout.svg"; import userlogo from "../../assets/logos/userlogo.svg"; import yourposts from "../../assets/logos/yourposts.svg"; +import cookie from "../../assets/images/cookie.svg"; + import axios from "axios"; export default function Home() { const [search, setSearch] = useState(""); const [data, setData] = useState([]); + const [leaderboard, setLeaderboard] = useState([]); const { user, logOut } = UserAuth(); + const btnRef = useRef(); const { isOpen, onOpen, onClose } = useDisclosure(); const { @@ -57,6 +62,12 @@ export default function Home() { onClose: onResultsBarClose, } = useDisclosure(); + const { + isOpen: isLeaderboardOpen, + onOpen: onLeaderboardOpen, + onClose: onLeaderboardClose, + } = useDisclosure(); + const [findFilter, setFindFilter] = useState({ type: "everything", isFound: true, @@ -97,8 +108,6 @@ export default function Home() { const [screenWidth, setScreenWidth] = useState(window.screen.width); const [uploadImg, setUploadImg] = useState(""); - console.log(data); - // LOGIN MODAL const { isOpen: isLoginModalOpen, @@ -138,10 +147,53 @@ export default function Home() { getData(); }, []); + //LEADERBOARD GET INFO + useEffect(() => { + const getLeaderboard = async () => { + try { + const { data: leaderboardData } = await axios.get( + `${process.env.REACT_APP_AWS_BACKEND_URL}/leaderboard/` + ); + setLeaderboard( + leaderboardData.map((item) => ({ ...item, id: item.id })) + ); + + // Check if the current user's email exists in the leaderboard + const userEmailExists = leaderboardData.some( + (entry) => entry.email === user?.email + ); + + // If it does not exist, add the user to the leaderboard + if (!userEmailExists) { + await axios.post( + `${process.env.REACT_APP_AWS_BACKEND_URL}/leaderboard/`, + { + email: user.email, + points: 5, // You can modify this as per your requirements + } + ); + + // Fetch the leaderboard again after insertion + const { data: updatedLeaderboardData } = await axios.get( + `${process.env.REACT_APP_AWS_BACKEND_URL}/leaderboard/` + ); + setLeaderboard( + updatedLeaderboardData.map((item) => ({ ...item, id: item.id })) + ); + } + } catch (err) { + console.log(err); + } finally { + setLoading(true); + } + }; + + getLeaderboard(); + }, [user]); + window.onresize = () => { setScreenWidth(window.screen.width); }; - console.log(data); return ( - + {user ? ( <> - Leaderboard + + + + {user + ? leaderboard.find((u) => u.email === user.email)?.points + : 0} + +