Added delete toast

cornell-dti · Oct 15, 2024 · 528fe99 · 528fe99
1 parent b8b3d1a
commit 528fe99
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 3 deletions.
diff --git a/frontend/src/components/Review/Review.tsx b/frontend/src/components/Review/Review.tsx
@@ -53,7 +53,8 @@ type Props = {
   readonly addLike: (reviewId: string) => Promise<void>;
   readonly removeLike: (reviewId: string) => Promise<void>;
   setToggle: React.Dispatch<React.SetStateAction<boolean>>;
-  readonly triggerEditToast?: () => void;
+  readonly triggerEditToast: () => void;
+  readonly triggerDeleteToast: () => void;
   user: firebase.User | null;
   setUser: React.Dispatch<React.SetStateAction<firebase.User | null>>;
   readonly showLabel: boolean;
@@ -175,7 +176,8 @@ const useStyles = makeStyles(() => ({
  * @param {function} props.addLike - Function to add a like to the review.
  * @param {function} props.removeLike - Function to remove a like from the review.
  * @param {React.Dispatch<React.SetStateAction<boolean>>} props.setToggle - Function to toggle a state.
- * @param {function} [props.triggerEditToast] - Optional function to trigger a toast notification on edit.
+ * @param {function} props.triggerEditToast - function to trigger a toast notification on edit.
+ * @param {function} props.triggerDeleteToast - function to trigger a toast notification on delete.
  * @param {firebase.User | null} props.user - The current logged-in user.
  * @param {React.Dispatch<React.SetStateAction<firebase.User | null>>} props.setUser - Function to set the current user.
  * @param {boolean} props.showLabel - Indicates if the property or landlord label should be shown.
@@ -189,6 +191,7 @@ const ReviewComponent = ({
   removeLike,
   setToggle,
   triggerEditToast,
+  triggerDeleteToast,
   user,
   setUser,
   showLabel,
@@ -363,6 +366,7 @@ const ReviewComponent = ({
         let user = await getUser(true);
         setUser(user);
       }
+      if (triggerDeleteToast) triggerDeleteToast();
     }
     setDeleteModalOpen(false);
   };

diff --git a/frontend/src/pages/ApartmentPage.tsx b/frontend/src/pages/ApartmentPage.tsx
@@ -133,6 +133,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
   const [carouselOpen, setCarouselOpen] = useState(false);
   const [showConfirmation, setShowConfirmation] = useState(false);
   const [showEditSuccessConfirmation, setShowEditSuccessConfirmation] = useState(false);
+  const [showDeleteSuccessConfirmation, setShowDeleteSuccessConfirmation] = useState(false);
   const [buildings, setBuildings] = useState<Apartment[]>([]);
   const [aptData, setAptData] = useState<ApartmentWithId[]>([]);
   const [apt, setApt] = useState<ApartmentWithId | undefined>(undefined);
@@ -307,6 +308,10 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
     showToast(setShowEditSuccessConfirmation);
   };
 
+  const showDeleteSuccessConfirmationToast = () => {
+    showToast(setShowDeleteSuccessConfirmation);
+  };
+
   const likeHelper = (dislike = false) => {
     return async (reviewId: string) => {
       setLikeStatuses((reviews) => ({ ...reviews, [reviewId]: true }));
@@ -666,7 +671,14 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
                 time={toastTime}
               />
             )}
-
+            {showDeleteSuccessConfirmation && (
+              <Toast
+                isOpen={showDeleteSuccessConfirmation}
+                severity="success"
+                message="Review successfully deleted!"
+                time={toastTime}
+              />
+            )}
             <Grid container alignItems="flex-start" justifyContent="center" spacing={3}>
               <Grid item xs={12} sm={8} justifyContent="flex-end">
                 <Grid
@@ -715,6 +727,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
                             removeLike={removeLike}
                             setToggle={setToggle}
                             triggerEditToast={showEditSuccessConfirmationToast}
+                            triggerDeleteToast={showDeleteSuccessConfirmationToast}
                             user={user}
                             setUser={setUser}
                           />

diff --git a/frontend/src/pages/BookmarksPage.tsx b/frontend/src/pages/BookmarksPage.tsx
@@ -108,6 +108,7 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
   const [showMoreLessState, setShowMoreLessState] = useState<string>('Show More');
   const [isMobile, setIsMobile] = useState<boolean>(false);
   const [showEditSuccessConfirmation, setShowEditSuccessConfirmation] = useState(false);
+  const [showDeleteSuccessConfirmation, setShowDeleteSuccessConfirmation] = useState(false);
 
   useEffect(() => {
     const handleResize = () => setIsMobile(window.innerWidth <= 600);
@@ -169,6 +170,9 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
   const showEditSuccessConfirmationToast = () => {
     showToast(setShowEditSuccessConfirmation);
   };
+  const showDeleteSuccessConfirmationToast = () => {
+    showToast(setShowDeleteSuccessConfirmation);
+  };
 
   // Function to handle liking or disliking a review
   const likeHelper = (dislike = false) => {
@@ -213,6 +217,14 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
           time={toastTime}
         />
       )}
+      {showDeleteSuccessConfirmation && (
+        <Toast
+          isOpen={showDeleteSuccessConfirmation}
+          severity="success"
+          message="Review successfully deleted!"
+          time={toastTime}
+        />
+      )}
       <Grid item xs={11} sm={11} md={9}>
         <Box
           display="flex"
@@ -351,6 +363,7 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
                       removeLike={removeLike}
                       setToggle={setToggle}
                       triggerEditToast={showEditSuccessConfirmationToast}
+                      triggerDeleteToast={showDeleteSuccessConfirmationToast}
                       user={user}
                       setUser={setUser}
                       showLabel={true}

diff --git a/frontend/src/pages/LandlordPage.tsx b/frontend/src/pages/LandlordPage.tsx
@@ -95,6 +95,7 @@ const LandlordPage = ({ user, setUser }: Props): ReactElement => {
   const [carouselOpen, setCarouselOpen] = useState(false);
   const [showConfirmation, setShowConfirmation] = useState(false);
   const [showEditSuccessConfirmation, setShowEditSuccessConfirmation] = useState(false);
+  const [showDeleteSuccessConfirmation, setShowDeleteSuccessConfirmation] = useState(false);
   const [buildings, setBuildings] = useState<CardData[]>([]);
   const [loaded, setLoaded] = useState(false);
   const [showSignInError, setShowSignInError] = useState(false);
@@ -223,6 +224,9 @@ const LandlordPage = ({ user, setUser }: Props): ReactElement => {
   const showEditSuccessConfirmationToast = () => {
     showToast(setShowEditSuccessConfirmation);
   };
+  const showDeleteSuccessConfirmationToast = () => {
+    showToast(setShowDeleteSuccessConfirmation);
+  };
 
   // Function to handle liking or disliking a review
   const likeHelper = (dislike = false) => {
@@ -534,6 +538,14 @@ const LandlordPage = ({ user, setUser }: Props): ReactElement => {
                 time={toastTime}
               />
             )}
+            {showDeleteSuccessConfirmation && (
+              <Toast
+                isOpen={showDeleteSuccessConfirmation}
+                severity="success"
+                message="Review successfully deleted!"
+                time={toastTime}
+              />
+            )}
 
             <Grid container item spacing={3}>
               {sortReviews(reviewData, sortBy)
@@ -549,6 +561,7 @@ const LandlordPage = ({ user, setUser }: Props): ReactElement => {
                       removeLike={removeLike}
                       setToggle={setToggle}
                       triggerEditToast={showEditSuccessConfirmationToast}
+                      triggerDeleteToast={showDeleteSuccessConfirmationToast}
                       user={user}
                       setUser={setUser}
                       showLabel={true}

diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
@@ -165,6 +165,7 @@ const ProfilePage = ({ user, setUser }: Props): ReactElement => {
   const [likeStatuses, setLikeStatuses] = useState<Likes>({});
   const [toggle, setToggle] = useState(false);
   const [showEditSuccessConfirmation, setShowEditSuccessConfirmation] = useState(false);
+  const [showDeleteSuccessConfirmation, setShowDeleteSuccessConfirmation] = useState(false);
   const toastTime = 3500;
 
   useTitle('Profile');
@@ -241,6 +242,10 @@ const ProfilePage = ({ user, setUser }: Props): ReactElement => {
     showToast(setShowEditSuccessConfirmation);
   };
 
+  const showDeleteSuccessConfirmationToast = () => {
+    showToast(setShowDeleteSuccessConfirmation);
+  };
+
   /** This closes the modal (who can view my profile) when modal is open and user clicks out **/
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -268,6 +273,14 @@ const ProfilePage = ({ user, setUser }: Props): ReactElement => {
               time={toastTime}
             />
           )}
+          {showDeleteSuccessConfirmation && (
+            <Toast
+              isOpen={showDeleteSuccessConfirmation}
+              severity="success"
+              message="Review successfully deleted!"
+              time={toastTime}
+            />
+          )}
           <div style={isXsScreen ? { width: '100%' } : { width: '70%' }}>
             <h2 className={headerStyle}>My Profile</h2>
             <Card variant="outlined" className={myProfileCard}>
@@ -324,6 +337,7 @@ const ProfilePage = ({ user, setUser }: Props): ReactElement => {
                   removeLike={removeLike}
                   setToggle={setToggle}
                   triggerEditToast={showEditSuccessConfirmationToast}
+                  triggerDeleteToast={showDeleteSuccessConfirmationToast}
                   user={user}
                   setUser={setUser}
                   showLabel={true}
@@ -345,6 +359,7 @@ const ProfilePage = ({ user, setUser }: Props): ReactElement => {
                   removeLike={removeLike}
                   setToggle={setToggle}
                   triggerEditToast={showEditSuccessConfirmationToast}
+                  triggerDeleteToast={showDeleteSuccessConfirmationToast}
                   user={user}
                   setUser={setUser}
                   showLabel={true}