How do i rerender my screen after deletion from list?

Question

Hello I've been looking through several threads on stackoverflow but I haven't been able to solve my problem. I have an app where you can save movies to a watchlist. On this specific screen I want to display a users watchlist and give them the ability to delete it from the list. Currently the function is indeed deleting the movie from the list and removing it from firebase but i can't get my screen to rerender to visually represent the deletion.

This is the code right now:


export default function MovieWatchlistTab(props: any) {
  let { movies } = props;
  let movieWatchlist: any[] = [];
  const [watchlistSnapshot, setWatchlistSnapshot] = useState();
  const user: firebase.User = auth().currentUser;
  const { email } = user;
  const watchlistRef = firestore().collection("Watchlist");

  useEffect(() => {
    getWatchlistSnapshot();
  }, []);

  const getWatchlistSnapshot = async () => {
    setWatchlistSnapshot(await watchlistRef.where("userId", "==", email).get());
  };

  const convertDataToArray = () => {
    const convertedMovieList = [];
    for (let movie in movies) {
      let newMovie = {
        backdrop: movies[movie].backdrop,
        overview: movies[movie].overview,
        release: movies[movie].release,
        title: movies[movie].title,
      };
      convertedMovieList.push(newMovie);
    }
    movieWatchlist = convertedMovieList;
  };

  const renderMovieList = () => {
    convertDataToArray();
    return movieWatchlist.map((m) => {
      const handleOnPressDelete = () => {
        const documentRef = watchlistRef.doc(watchlistSnapshot.docs[0].id);
        const FieldValue = firestore.FieldValue;
        documentRef.set(
          {
            movies: {
              [m.title]: FieldValue.delete(),
            },
          },
          { merge: true }
        );
        movieWatchlist.splice(
          movieWatchlist.indexOf(m),
          movieWatchlist.indexOf(m) + 1
        );
        console.log("movieWatchlist", movieWatchlist);
      };

      const swipeButtons = [
        {
          text: "Delete",
          color: "white",
          backgroundColor: "#b9042c",
          onPress: handleOnPressDelete,
        },
      ];
      return (
        
          
            
            
              
                {m.title}
              
              
                Release: {m.release}
              
            
          
        
      );
    });
  };

  return (
    
      
        {renderMovieList()}
      
    
  );
}

I've been trying to play around with useStates and I think the answer is in that direction but I just can't seem to get it to work anyway. Any help would be appreciated!

Linda Paiste · Accepted Answer

There are a few lines in your code that show a misunderstand of React state. You have a value let movieWatchlist: any[] = []; that you reassign in convertDataToArray() and mutate in handleOnPressDelete. That's just not how we do things in React and it's not going to trigger updates properly. movieWatchlist either needs to be a stateful variable created with useState.

Do the movies passed in through props change? If they do, then you don't need to store them in state here. You could just return an array from convertDataToArray() rather than setting a variable and returning void.

To be honest it's really not clear what convertDataToArray is even doing as it seems like newMovie is either the same or a subset of the original movie object. If the point is to remove the other properties aside from these four, that's not actually needed. If the prop movies is already an array, just delete this whole function and use movies directly. If it's a keyed object, use Object.values(movies) to get it as an array.

I'm thoroughly confused as to what we are getting from props and what we are getting from firebase. It seems like we would want to update the snapshot state after deletion, but you only run your useEffect once on mount.

You may still have errors, but this code should be an improvement:

interface Movie {
  backdrop: string;
  overview: string;
  release: string;
  title: string;
}

const MovieThumbnail = (props: Movie) => (
  
    
    
      
        {props.title}
      
      
        Release: {props.release}
      
    
  
);

export default function MovieWatchlistTab() {
  const [watchlistSnapshot, setWatchlistSnapshot] = useState();
  const user: firebase.User = auth().currentUser;
  const { email } = user;
  const watchlistRef = firestore().collection("Watchlist");

  const getWatchlistSnapshot = async () => {
    const results = await watchlistRef.where("userId", "==", email).get();
    setWatchlistSnapshot(results.docs[0]);
  };

  useEffect(() => {
    getWatchlistSnapshot();
  }, []);

  const deleteMovie = async (title: string) => {
    if ( ! watchlistSnapshot ) return;
    const documentRef = watchlistRef.doc(watchlistSnapshot.id);
    const FieldValue = firestore.FieldValue;
    await documentRef.set(
      {
        movies: {
          [title]: FieldValue.delete()
        }
      },
      { merge: true }
    );
    // reload watch list
    getWatchlistSnapshot();
  };

  // is this right?  I'm just guessing
  const movies = ( watchlistSnapshot ? watchlistSnapshot.data().movies : []) as Movie[];

  return (
    
      
        {movies.map((m) => (
           deleteMovie(m.title)
              }
            ]}
            backgroundColor={"#18181b"}
          >
            
          
        ))}
      
    
  );
}

How do i rerender my screen after deletion from list?

Answers (1)

Related Questions