add points when add new items and return items

NwinNwin · Sep 24, 2023 · f1d9d44 · f1d9d44
1 parent c6bf8e9
commit f1d9d44
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 37 deletions.
diff --git 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
@@ -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();
   }, []);
 
-  //[email protected]
-  //[email protected]
-  //[email protected]
-  //[email protected]
-  //[email protected]
   //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}
                       />
                     </Flex>
                   </DrawerBody>
@@ -591,6 +584,7 @@ export default function Home() {
             setUploadImg={setUploadImg}
             uploadImg={uploadImg}
             upload={upload}
+            setLeaderboard={setLeaderboard}
           />
         </Flex>
         <Flex
@@ -604,6 +598,7 @@ export default function Home() {
             findFilter={findFilter}
             setData={setData}
             setFocusLocation={setFocusLocation}
+            setLeaderboard={setLeaderboard}
           />
         </Flex>
         <Box

diff --git a/src/components/Home/Leaderboard.jsx b/src/components/Home/Leaderboard.jsx
@@ -82,14 +82,14 @@ export default function Leaderboard({
                     <Text as={"b"} fontSize={"4xl"}>
                       1
                     </Text>
-                    <Text as={"b"} fontSize={"xl"}>
+                    <Text as={"b"} fontSize={"lg"}>
                       {leaderboard[0]?.email}
                     </Text>
                   </Flex>
 
                   <Flex>
                     <Text as={"b"} fontSize={"4xl"}>
-                      {leaderboard[0].points}
+                      {leaderboard[0]?.points}
                     </Text>
                     <Image
                       class="gold-medal"
@@ -113,14 +113,14 @@ export default function Leaderboard({
                     <Text as={"b"} fontSize={"4xl"}>
                       2
                     </Text>
-                    <Text as={"b"} fontSize={"xl"}>
+                    <Text as={"b"} fontSize={"lg"}>
                       {leaderboard[0]?.email}
                     </Text>
                   </Flex>
 
                   <Flex>
                     <Text as={"b"} fontSize={"4xl"}>
-                      {leaderboard[0].points} 🍪
+                      {leaderboard[0]?.points} 🍪
                     </Text>
                   </Flex>
                 </Flex>
@@ -139,14 +139,14 @@ export default function Leaderboard({
                     <Text as={"b"} fontSize={"4xl"}>
                       3
                     </Text>
-                    <Text as={"b"} fontSize={"xl"}>
+                    <Text as={"b"} fontSize={"lg"}>
                       {leaderboard[0]?.email}
                     </Text>
                   </Flex>
 
                   <Flex>
                     <Text as={"b"} fontSize={"4xl"}>
-                      {leaderboard[0].points} 🍪
+                      {leaderboard[0]?.points} 🍪
                     </Text>
                   </Flex>
                 </Flex>

diff --git 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
@@ -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 && <Test location={focusLocation} search={search} />}
         {!isEdit}
         {!isEdit && allMarkers}
-        {/* {isEdit && (
-          <Marker
-            className="marker"
-            draggable={true}
-            eventHandlers={eventHandlers}
-            position={position}
-            ref={markerRef}
-            icon={othersDrag}
-          >
-            <Popup minWidth={90} closeButton={false}>
-              <span className="popup" onClick={() => toggleDraggable()}>
-                Click to Confirm Location 🤔
-              </span>
-            </Popup>
-          </Marker>
-        )} */}
+
         {isEdit && <NewItemMarker />}
         {showDonut && focusLocation && (
           <>
@@ -305,6 +303,7 @@ export default function Map({
           onClose={onClose}
           isOpen={isOpen}
           setData={setData}
+          setLeaderboard={setLeaderboard}
         />
       )}
     </div>

diff --git 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
@@ -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}
           />
         </Box>
       );