From fa4877b8b4464ceadef82e9c293d8092ba5f69ff Mon Sep 17 00:00:00 2001 From: Steven Zhou Date: Sun, 17 Sep 2023 21:42:40 -0700 Subject: [PATCH 1/4] added feedback modal --- .../FeedbackModal/FeedbackModal.jsx | 29 ++ src/components/InfoModal/InfoModal.jsx | 262 +++++++++--------- src/components/ResultCard/ResultCard.jsx | 6 +- 3 files changed, 167 insertions(+), 130 deletions(-) create mode 100644 src/components/FeedbackModal/FeedbackModal.jsx diff --git a/src/components/FeedbackModal/FeedbackModal.jsx b/src/components/FeedbackModal/FeedbackModal.jsx new file mode 100644 index 0000000..2dab59c --- /dev/null +++ b/src/components/FeedbackModal/FeedbackModal.jsx @@ -0,0 +1,29 @@ +import { + Modal, + ModalOverlay, + ModalContent, + ModalCloseButton, + ModalHeader, + ModalFooter, + Button +} from "@chakra-ui/react"; + +export default function FeedbackModal({feedbackIsOpen, feedbackOnClose}) { + return ( + + + + Modal Title + + + + + + + + + + ); +} diff --git a/src/components/InfoModal/InfoModal.jsx b/src/components/InfoModal/InfoModal.jsx index ef26b3e..d3b1a85 100644 --- a/src/components/InfoModal/InfoModal.jsx +++ b/src/components/InfoModal/InfoModal.jsx @@ -14,19 +14,22 @@ import { ModalCloseButton, Flex, Tag, + useDisclosure } from "@chakra-ui/react"; import { formatDate } from "../../utils"; import { UserAuth } from "../../context/AuthContext"; import DataContext from "../../context/DataContext"; import axios from "axios"; import ImageContainer from "../ImageContainer/ImageContainer"; +import FeedbackModal from "../FeedbackModal/FeedbackModal"; -export default function InfoModal({ setData, isOpen, onClose, props }) { +export default function InfoModal({ setData, infoIsOpen, infoOnClose, infoOnOpen, props }) { const [showEmail, setShowEmail] = useState(false); const { onLoginModalOpen } = useContext(DataContext); const { setLoading } = useContext(DataContext); const { user } = UserAuth(); const navigate = useNavigate(); + const { isOpen, onOpen, onClose } = useDisclosure() const currentEmail = user?.email; // function viewEmail() { @@ -36,145 +39,150 @@ export default function InfoModal({ setData, isOpen, onClose, props }) { // } async function handleDelete() { - onClose(); - setLoading(false); - axios - .delete(`${process.env.REACT_APP_AWS_BACKEND_URL}/items/${props.id}`) - .then(() => console.log("Success")) - .catch((err) => console.log(err)); - setData((prevItems) => { - if (prevItems && prevItems.length > 0) { - return prevItems.filter((item) => item.id !== props.id); - } - return prevItems; - }); - setLoading(true); + infoOnClose(); + // setLoading(false); + // axios + // .delete(`${process.env.REACT_APP_AWS_BACKEND_URL}/items/${props.id}`) + // .then(() => console.log("Success")) + // .catch((err) => console.log(err)); + // setData((prevItems) => { + // if (prevItems && prevItems.length > 0) { + // return prevItems.filter((item) => item.id !== props.id); + // } + // return prevItems; + // }); + // setLoading(true); } const formattedDate = formatDate(new Date(props.date)); return ( - { - onClose(); - navigate("/"); - }} - size={{ base: "full", md: "md" }} - > - - - -
- - - {currentEmail === props.email ? ( - - - Owner - - - ) : props.islost ? ( - - - Lost - - - ) : ( - - - Found - - - )} - - {props.name} - + <> + { + infoOnClose(); + navigate("/"); + }} + size={{ base: "full", md: "md" }} + > + + + +
+ + + {currentEmail === props.email ? ( + + + Owner + + + ) : props.islost ? ( + + + Lost + + + ) : ( + + + Found + + + )} + + {props.name} + - - - {/* + + {/* - RESOLVED + RESOLVED */} - - {props.description} - - {currentEmail !== props.email && - (!showEmail ? ( - + ) : ( + + {props.email} + + ))} + {currentEmail === props.email && ( + + )} + {props.islost ? ( + Lost on {props.itemDate} ) : ( - - {props.email} - - ))} - {currentEmail === props.email && ( - - )} - {props.islost ? ( - Lost on {props.itemDate} - ) : ( - Found on {props.itemDate} - )} - Posted on {formattedDate} - - -
- - + Found on {props.itemDate} + )} + Posted on {formattedDate} + + +
+ + + + ); } diff --git a/src/components/ResultCard/ResultCard.jsx b/src/components/ResultCard/ResultCard.jsx index c80de24..243aaf3 100644 --- a/src/components/ResultCard/ResultCard.jsx +++ b/src/components/ResultCard/ResultCard.jsx @@ -82,9 +82,9 @@ export default function ResultCard({ props, setData, onResultsBarClose }) { {(isOpen || id) && ( )} From 6a36de0018a944012a68f4cd25e10343ff1974b8 Mon Sep 17 00:00:00 2001 From: Steven Zhou Date: Mon, 18 Sep 2023 01:24:43 -0700 Subject: [PATCH 2/4] added second modal --- src/components/FeedbackModal/FeedbackModal.jsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/FeedbackModal/FeedbackModal.jsx b/src/components/FeedbackModal/FeedbackModal.jsx index 2dab59c..6fc0631 100644 --- a/src/components/FeedbackModal/FeedbackModal.jsx +++ b/src/components/FeedbackModal/FeedbackModal.jsx @@ -8,9 +8,12 @@ import { Button } from "@chakra-ui/react"; -export default function FeedbackModal({feedbackIsOpen, feedbackOnClose}) { +export default function FeedbackModal({infoOnClose, feedbackIsOpen, feedbackOnClose}) { return ( - + { + feedbackOnClose(); + infoOnClose(); + }}> Modal Title From aa66bb2e0d1289664cc89e843455d098c422777c Mon Sep 17 00:00:00 2001 From: Steven Zhou Date: Tue, 19 Sep 2023 23:30:38 -0700 Subject: [PATCH 3/4] finished feedback modal --- package-lock.json | 8 +- package.json | 2 +- .../FeedbackModal/FeedbackModal.jsx | 138 +++++++++++++++--- src/components/Home/Home.jsx | 2 + .../ImageContainer/ImageContainer.jsx | 2 +- src/components/InfoModal/InfoModal.jsx | 48 +++--- src/components/ResultCard/ResultCard.jsx | 12 +- src/context/AuthContext.js | 14 +- 8 files changed, 162 insertions(+), 64 deletions(-) diff --git a/package-lock.json b/package-lock.json index f97b346..ffbe500 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,7 +32,7 @@ "react-resizable-panels": "^0.0.53", "react-router-dom": "^6.11.2", "react-scripts": "5.0.1", - "swiper": "^10.0.4", + "swiper": "^10.2.0", "web-vitals": "^2.1.4" } }, @@ -18107,9 +18107,9 @@ } }, "node_modules/swiper": { - "version": "10.0.4", - "resolved": "https://registry.npmjs.org/swiper/-/swiper-10.0.4.tgz", - "integrity": "sha512-DlNR3KiaVkPep6RraZ2tNr7lvyuzELuR+4NZr4wO42t0UworIO3DxDlz8b5Q3uUioh7cJad99EdRJLkPF+r8Ag==", + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-10.2.0.tgz", + "integrity": "sha512-nktQsOtBInJjr3f5DicxC8eHYGcLXDVIGPSon0QoXRaO6NjKnATCbQ8SZsD3dN1Ph1RH4EhVPwSYCcuDRFWHGQ==", "funding": [ { "type": "patreon", diff --git a/package.json b/package.json index caf2bc2..c95238f 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "react-resizable-panels": "^0.0.53", "react-router-dom": "^6.11.2", "react-scripts": "5.0.1", - "swiper": "^10.0.4", + "swiper": "^10.2.0", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/components/FeedbackModal/FeedbackModal.jsx b/src/components/FeedbackModal/FeedbackModal.jsx index 6fc0631..45feba0 100644 --- a/src/components/FeedbackModal/FeedbackModal.jsx +++ b/src/components/FeedbackModal/FeedbackModal.jsx @@ -1,32 +1,134 @@ import { + Text, + Flex, Modal, ModalOverlay, ModalContent, ModalCloseButton, ModalHeader, ModalFooter, - Button + Button, } from "@chakra-ui/react"; +import axios from "axios"; +import DataContext from "../../context/DataContext"; +import { useState, useContext } from "react"; + +export default function FeedbackModal({ + setData, + infoOnClose, + isOpen, + onClose, + props, +}) { + const [feedbackHelped, setFeedbackHelped] = useState(null); + const { setLoading } = useContext(DataContext); + + async function handleFeedback() { + setLoading(false); + axios + .put(`${process.env.REACT_APP_AWS_BACKEND_URL}/items/${props.id}`, { + isHelped: feedbackHelped, + }) + .then(() => console.log("Success")) + .catch((err) => console.log(err)); + + setData((prevItems) => { + if (prevItems && prevItems.length > 0) { + return prevItems.map((item) => { + if (item.id === props.id) { + item.isresolved = true; + item.isHelped = feedbackHelped; + } + return item; + }); + } + return prevItems; + }); + setLoading(true); + } -export default function FeedbackModal({infoOnClose, feedbackIsOpen, feedbackOnClose}) { return ( - { - feedbackOnClose(); - infoOnClose(); - }}> + { + if (feedbackHelped === null) { + onClose(); + } else { + onClose(); + infoOnClose(); + } + }} + > - - Modal Title - - - - - - - - + {feedbackHelped === null ? ( + + + ⚠️ Feedback ⚠️ + + + + Did ZotnFound help with resolving your item? + + + + + + + ) : ( + + + ❤️ Thank You For Your Feedback ❤️ + + + + Your feedback has been recorded. + + + + + + )} ); } diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx index 21319e2..9e39de7 100644 --- a/src/components/Home/Home.jsx +++ b/src/components/Home/Home.jsx @@ -97,6 +97,8 @@ export default function Home() { const [screenWidth, setScreenWidth] = useState(window.screen.width); const [uploadImg, setUploadImg] = useState(""); + console.log(data) + // LOGIN MODAL const { isOpen: isLoginModalOpen, diff --git a/src/components/ImageContainer/ImageContainer.jsx b/src/components/ImageContainer/ImageContainer.jsx index d05708c..39b03fe 100644 --- a/src/components/ImageContainer/ImageContainer.jsx +++ b/src/components/ImageContainer/ImageContainer.jsx @@ -16,7 +16,7 @@ export default function ImageContainer({ image, isresolved }) { alignItems={"center"} marginTop={30} flexDir={"column"} - w={400} + w={450} > RETURNED diff --git a/src/components/InfoModal/InfoModal.jsx b/src/components/InfoModal/InfoModal.jsx index 7b295da..52fb575 100644 --- a/src/components/InfoModal/InfoModal.jsx +++ b/src/components/InfoModal/InfoModal.jsx @@ -19,26 +19,18 @@ import { import { formatDate } from "../../utils"; import { UserAuth } from "../../context/AuthContext"; import DataContext from "../../context/DataContext"; -import axios from "axios"; import ImageContainer from "../ImageContainer/ImageContainer"; import FeedbackModal from "../FeedbackModal/FeedbackModal"; -import { LinkIcon, EmailIcon, CloseIcon, PhoneIcon } from "@chakra-ui/icons"; +import { LinkIcon, EmailIcon, CheckIcon, PhoneIcon } from "@chakra-ui/icons"; -export default function InfoModal({ - setData, - infoIsOpen, - infoOnClose, - infoOnOpen, - props, -}) { +export default function InfoModal({ setData, isOpen, onClose, onOpen, props }) { const [showEmail, setShowEmail] = useState(false); const { onLoginModalOpen } = useContext(DataContext); - const { setLoading } = useContext(DataContext); const { user } = UserAuth(); const navigate = useNavigate(); - const { isOpen, onOpen, onClose } = useDisclosure(); + const feedbackModalDisclosure = useDisclosure(); const currentEmail = user?.email; - + // function viewEmail() { // if (user) { // setShowEmail(true); @@ -46,29 +38,16 @@ export default function InfoModal({ // } async function handleDelete() { - // infoOnClose(); - onOpen(); - // setLoading(false); - // axios - // .delete(`${process.env.REACT_APP_AWS_BACKEND_URL}/items/${props.id}`) - // .then(() => console.log("Success")) - // .catch((err) => console.log(err)); - // setData((prevItems) => { - // if (prevItems && prevItems.length > 0) { - // return prevItems.filter((item) => item.id !== props.id); - // } - // return prevItems; - // }); - // setLoading(true); + feedbackModalDisclosure.onOpen(); } const formattedDate = formatDate(new Date(props.date)); return ( <> { - infoOnClose(); + onClose(); navigate("/"); }} size={{ base: "full", md: "5xl" }} @@ -174,12 +153,13 @@ export default function InfoModal({ ))} {currentEmail === props.email && ( )} @@ -79,12 +79,12 @@ export default function ResultCard({ props, setData, onResultsBarClose }) { - {(isOpen || id) && ( + {(infoModalDisclosure.isOpen || id) && ( )} diff --git a/src/context/AuthContext.js b/src/context/AuthContext.js index 53e4b26..cf7b1bf 100644 --- a/src/context/AuthContext.js +++ b/src/context/AuthContext.js @@ -1,5 +1,10 @@ import { useContext, createContext } from "react"; -import { GoogleAuthProvider, signOut, onAuthStateChanged, signInWithPopup } from "firebase/auth"; +import { + GoogleAuthProvider, + signOut, + onAuthStateChanged, + signInWithPopup, +} from "firebase/auth"; import { auth } from "../firebase"; import { useEffect, useState } from "react"; @@ -19,7 +24,6 @@ export const AuthContextProvider = ({ children }) => { }); }; - const logOut = () => { signOut(auth); }; @@ -37,7 +41,11 @@ export const AuthContextProvider = ({ children }) => { }; }, []); - return {children}; + return ( + + {children} + + ); }; export const UserAuth = () => { From 76c6ce31cc39d64cc268d630298df6945cb00611 Mon Sep 17 00:00:00 2001 From: Steven Zhou Date: Tue, 19 Sep 2023 23:32:44 -0700 Subject: [PATCH 4/4] fix eslint --- src/components/InfoModal/InfoModal.jsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/InfoModal/InfoModal.jsx b/src/components/InfoModal/InfoModal.jsx index 52fb575..74406b3 100644 --- a/src/components/InfoModal/InfoModal.jsx +++ b/src/components/InfoModal/InfoModal.jsx @@ -1,13 +1,9 @@ import { useState, useContext } from "react"; import { useNavigate } from "react-router-dom"; import { - Box, Button, - Center, Heading, Text, - Stack, - useColorModeValue, Modal, ModalOverlay, ModalContent, @@ -21,7 +17,7 @@ import { UserAuth } from "../../context/AuthContext"; import DataContext from "../../context/DataContext"; import ImageContainer from "../ImageContainer/ImageContainer"; import FeedbackModal from "../FeedbackModal/FeedbackModal"; -import { LinkIcon, EmailIcon, CheckIcon, PhoneIcon } from "@chakra-ui/icons"; +import { LinkIcon, CheckIcon, PhoneIcon } from "@chakra-ui/icons"; export default function InfoModal({ setData, isOpen, onClose, onOpen, props }) { const [showEmail, setShowEmail] = useState(false);