From f1d9d4471c58c1a899da930b34ea9632043f3652 Mon Sep 17 00:00:00 2001 From: Dang Nguyen Nguyen Date: Sat, 23 Sep 2023 17:10:28 -0700 Subject: [PATCH] add points when add new items and return items --- .../FeedbackModal/FeedbackModal.jsx | 18 ++++++++- src/components/Home/Home.jsx | 11 ++---- src/components/Home/Leaderboard.jsx | 12 +++--- src/components/InfoModal/InfoModal.jsx | 10 ++++- src/components/Map/Map.jsx | 39 +++++++++---------- src/components/ResultCard/ResultCard.jsx | 8 +++- src/components/ResultsBar/ResultsBar.jsx | 2 + 7 files changed, 63 insertions(+), 37 deletions(-) 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 909cd21..e00e8f5 100644 --- a/src/components/Home/Home.jsx +++ b/src/components/Home/Home.jsx @@ -108,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, @@ -149,11 +147,6 @@ export default function Home() { getData(); }, []); - //stevenz9@uci.edu - //sd@uci.edu - //test2@uci.edu - //test@gmail.com - //dangnn1@uci.edu //LEADERBOARD GET INFO useEffect(() => { const getLeaderboard = async () => { @@ -198,7 +191,6 @@ export default function Home() { getLeaderboard(); }, [user]); - console.log(leaderboard); window.onresize = () => { setScreenWidth(window.screen.width); }; @@ -562,6 +554,7 @@ export default function Home() { setData={setData} setFocusLocation={setFocusLocation} onResultsBarClose={onResultsBarClose} + setLeaderboard={setLeaderboard} /> @@ -591,6 +584,7 @@ export default function Home() { setUploadImg={setUploadImg} uploadImg={uploadImg} upload={upload} + setLeaderboard={setLeaderboard} /> 1 - + {leaderboard[0]?.email} - {leaderboard[0].points} + {leaderboard[0]?.points} 2 - + {leaderboard[0]?.email} - {leaderboard[0].points} 🍪 + {leaderboard[0]?.points} 🍪 @@ -139,14 +139,14 @@ export default function Leaderboard({ 3 - + {leaderboard[0]?.email} - {leaderboard[0].points} 🍪 + {leaderboard[0]?.points} 🍪 diff --git a/src/components/InfoModal/InfoModal.jsx b/src/components/InfoModal/InfoModal.jsx index 4ed1a93..762e880 100644 --- a/src/components/InfoModal/InfoModal.jsx +++ b/src/components/InfoModal/InfoModal.jsx @@ -19,7 +19,13 @@ import ImageContainer from "../ImageContainer/ImageContainer"; import FeedbackModal from "../FeedbackModal/FeedbackModal"; import { LinkIcon, CheckIcon, EmailIcon } from "@chakra-ui/icons"; -export default function InfoModal({ setData, isOpen, onClose, props }) { +export default function InfoModal({ + setData, + isOpen, + onClose, + props, + setLeaderboard, +}) { const [showEmail, setShowEmail] = useState(false); const { onLoginModalOpen } = useContext(DataContext); const { user } = UserAuth(); @@ -178,6 +184,8 @@ export default function InfoModal({ setData, isOpen, onClose, props }) { onClose={feedbackModalDisclosure.onClose} props={props} setData={setData} + email={user?.email} + setLeaderboard={setLeaderboard} /> ); diff --git a/src/components/Map/Map.jsx b/src/components/Map/Map.jsx index 9267710..a8ed65b 100644 --- a/src/components/Map/Map.jsx +++ b/src/components/Map/Map.jsx @@ -41,8 +41,7 @@ export default function Map({ focusLocation, setFocusLocation, setUploadImg, - uploadImg, - upload, + setLeaderboard, }) { const { user } = UserAuth(); const { data, setLoading } = useContext(DataContext); @@ -76,7 +75,6 @@ export default function Map({ } }, [focusLocation, setFocusLocation]); - console.log(findFilter); const allMarkers = data .filter((item) => { return ( @@ -138,7 +136,6 @@ export default function Map({ ); async function handleSubmit() { - console.log("submitted"); const date = new Date(); axios @@ -185,6 +182,22 @@ export default function Map({ }); setIsCreate(!isCreate); setUploadImg(""); + + // Update the leaderboard + const pointsToAdd = newAddedItem.islost ? 1 : 3; + + axios.put(`${process.env.REACT_APP_AWS_BACKEND_URL}/leaderboard`, { + email: user.email, + pointsToAdd: pointsToAdd, + }); + + setLeaderboard((prev) => + prev.map((u) => + u.email === user.email + ? { ...u, points: (u.points || 0) + pointsToAdd } + : u + ) + ); }) .catch((err) => console.log(err)); @@ -268,22 +281,7 @@ export default function Map({ {!isEdit && } {!isEdit} {!isEdit && allMarkers} - {/* {isEdit && ( - - - toggleDraggable()}> - Click to Confirm Location 🤔 - - - - )} */} + {isEdit && } {showDonut && focusLocation && ( <> @@ -305,6 +303,7 @@ export default function Map({ onClose={onClose} isOpen={isOpen} setData={setData} + setLeaderboard={setLeaderboard} /> )} diff --git a/src/components/ResultCard/ResultCard.jsx b/src/components/ResultCard/ResultCard.jsx index e17e84c..18639f4 100644 --- a/src/components/ResultCard/ResultCard.jsx +++ b/src/components/ResultCard/ResultCard.jsx @@ -17,7 +17,12 @@ import InfoModal from "../InfoModal/InfoModal.jsx"; import { formatDate } from "../../utils.js"; import locate from "../../assets/logos/locate.svg"; -export default function ResultCard({ props, setData, onResultsBarClose }) { +export default function ResultCard({ + props, + setData, + onResultsBarClose, + setLeaderboard, +}) { const infoModalDisclosure = useDisclosure(); const { id } = useParams(); @@ -107,6 +112,7 @@ export default function ResultCard({ props, setData, onResultsBarClose }) { id === props.id.toString() ? true : infoModalDisclosure.isOpen } setData={setData} + setLeaderboard={setLeaderboard} /> )} diff --git a/src/components/ResultsBar/ResultsBar.jsx b/src/components/ResultsBar/ResultsBar.jsx index 0e56a6a..b2eee54 100644 --- a/src/components/ResultsBar/ResultsBar.jsx +++ b/src/components/ResultsBar/ResultsBar.jsx @@ -10,6 +10,7 @@ export default function ResultsBar({ setData, setFocusLocation, onResultsBarClose, + setLeaderboard, }) { const { data } = useContext(DataContext); const { user } = UserAuth(); @@ -44,6 +45,7 @@ export default function ResultsBar({ props={item} setData={setData} onResultsBarClose={onResultsBarClose} + setLeaderboard={setLeaderboard} /> );