Removing data from firestore/storage does not follow the expected pathway

Question

Removing data from firestore/storage does not follow the expected pathway

I have created an image gallery for users using Firebase Storage and React, allowing them to upload and delete images. However, I am facing an issue where the deletion process is taking longer than expected.

Expected flow:

User clicks on the trashcan icon > confirmation modal pops up > user confirms deletion > confirmation disappears and deletion process occurs.

Actual flow:

User clicks on the trashcan icon > confirmation modal pops up > user confirms deletion > confirmation disappears > user clicks on the trashcan icon again > deletion process occurs but another confirmation modal pops up.

export default function EditImageGallery({ handleUser }) {
  // code here
}

I would appreciate any insights on what may be causing this delay in the deletion process within my code. Feel free to ask for additional code if needed for further investigation.

javascript reactjs firebase google-cloud-firestore firebase-storage

Answer 1

Answer №1

Upon further investigation, I came to a realization. Following the setHidden(false) action, the subsequent execution of the if statement causes a change in the state of continueDelete. However, since the if statement is already evaluated at that point, it does not reevaluate the condition.

To address this issue, I opted to employ the use of useEffect for evaluation and deletion purposes.

useEffect(() => {
    const deleteData = async () => {
      const deleteRef = ref(storage, id);
      console.log("Proceeding with the deletion process:", deleteRef);
      await deleteObject(deleteRef)
        .then(() => {
          console.log("Item successfully deleted from Firebase Storage", deleteRef);
        })
        .catch((error) => {
          console.log(error.message);
          toast.error(error.message);
        });

      //delete reference in firestore
      try {
        const imageDelete = collection(db, "images");
        const q = query(imageDelete, where("imageURL", "==", id));
        const snaps = await getDocs(q);
        console.log("Number of documents to be deleted:", snaps.docs.length);
        snaps.docs.forEach(async (doc) => {
          console.log("Deleted Document: ", doc.ref.id);
          await deleteDoc(doc.ref);
          console.log("Deleted Document: ", doc.ref.id);
        });
        // await Promise.all(deletePromises);
        console.log("All documents have been deleted");
        window.location.reload(true);
      } catch (error) {
        console.log(error.message);
        setContinueDelete(false);
      }

      setContinueDelete(false);
    };

    if (continueDelete === true) {
      deleteData();
    }

    return () => {
      console.log("cleanup");
    };
  }, [continueDelete, id]);

  //Deletion process
  const onDelete = async (e) => {
    const { id } = e.target;
    console.log("Clicked URL", id);
    setId(id);
    setHidden(false);
  };

Answer 2

Upon further investigation, I came to a realization. Following the setHidden(false) action, the subsequent execution of the if statement causes a change in the state of continueDelete. However, since the if statement is already evaluated at that point, it does not reevaluate the condition.

To address this issue, I opted to employ the use of useEffect for evaluation and deletion purposes.

useEffect(() => {
    const deleteData = async () => {
      const deleteRef = ref(storage, id);
      console.log("Proceeding with the deletion process:", deleteRef);
      await deleteObject(deleteRef)
        .then(() => {
          console.log("Item successfully deleted from Firebase Storage", deleteRef);
        })
        .catch((error) => {
          console.log(error.message);
          toast.error(error.message);
        });

      //delete reference in firestore
      try {
        const imageDelete = collection(db, "images");
        const q = query(imageDelete, where("imageURL", "==", id));
        const snaps = await getDocs(q);
        console.log("Number of documents to be deleted:", snaps.docs.length);
        snaps.docs.forEach(async (doc) => {
          console.log("Deleted Document: ", doc.ref.id);
          await deleteDoc(doc.ref);
          console.log("Deleted Document: ", doc.ref.id);
        });
        // await Promise.all(deletePromises);
        console.log("All documents have been deleted");
        window.location.reload(true);
      } catch (error) {
        console.log(error.message);
        setContinueDelete(false);
      }

      setContinueDelete(false);
    };

    if (continueDelete === true) {
      deleteData();
    }

    return () => {
      console.log("cleanup");
    };
  }, [continueDelete, id]);

  //Deletion process
  const onDelete = async (e) => {
    const { id } = e.target;
    console.log("Clicked URL", id);
    setId(id);
    setHidden(false);
  };

Removing data from firestore/storage does not follow the expected pathway

Answer №1

Similar questions

Utilize jQuery and HTML simplistically to display or conceal divs throughout a webpage

React - Refreshing a component with the help of another component

Preact was implemented within the Shadow DOM, but unfortunately, all of the styles were

Generate a text box that only accepts numbers

Maintain the visibility of the jQuery dropdown menu even when navigating to a different page within the

Vue.js - encountering an issue with undefined response data

Is there a way to monitor individual users in the application based on their session, allowing for unique sets of redirects or rules for each user?

Preserving scroll position during page navigation in Next.js

While utilizing Ajax with Spring, it is possible to send a JavaScript object and receive it as a custom object. However, there was an issue with

Discover the basics of incorporating libraries using npm

Click to remove the accordion div

Implementing popup alert for multiple tabs when Javascript session times out

Transforming a JSON file into a new JSON file using an alternative method in React

Utilizing Firebase for Microsoft authentication

Jenkins is unable to locate the module, '@babel/plugin-proposal-private-property-in-object' (0:undefined) for React

What methods can be used to center a Google map on a specific location?

Secure your browsing experience with AngularJS authentication prompt

Is there a method to retrieve Mui state classes easily?

Move information from one webpage to a different page

View is unable to trigger the success attribute