BUG: Delete button on My Reviews page doesn't update properly

[pconrad]

When you click the "Delete" button on the MyReviews page, it deletes the review but does NOT update the page, so it appears that the item was NOT deleted. Subsequent clicks produce an error message.

Steps to reproduce:

1. Log in
2. Review a menu item
3. Go to the My Reviews Page
4. Click the delete button on that menu item

Expected: The item disappears

Observed: The item does NOT disappear (unless you refresh the page). Accordingly, if you then click again, you get an error message.

Root cause

The react query caching key is not being handled properly by the delete. The "useBackend" call that populates the table has a caching key that shoudl be invalidated by the delete so that the table re-renders.

Here's the call that populates the table:

 const {
    data: reviews,
    error: _error,
    status: _status,
  } = useBackend(
    // Stryker disable next-line all : don't test internal caching of React Query
    ["/api/reviews/userReviews"],
    { method: "GET", url: "/api/reviews/userReviews" },
    [],
  );

The caching key is ["/api/reviews/userReviews"],

The delete button is invalidating: ["/api/reviews/userReviews", "/api/reviews/needsmoderation"],

This is likely because react-query's default behavior is to treat the entire array as a cache key; However, this is not how we generally use react query. When we include an array with multiple items, we would like it to invalidate each of them. As a result, you should port some of the code we have from proj-frontiers to fix this:

https://github.com/ucsb-cs156/proj-frontiers/blob/85f2cae02522202da913d6f3ea24f22dc519c8ef/frontend/src/main/utils/useBackend.js#L68-L88

  return useMutation({
    mutationFn: (object) => wrappedParams(objectToAxiosParams(object)),
    onError: (data) => {
      toast(`${data}`);
    },
    // Stryker disable all: Not sure how to set up the complex behavior needed to test this
    onSettled: () => {
      if (queryKey !== null) {
        // Handle array of query keys for cache invalidation
        if (Array.isArray(queryKey)) {
          queryKey.forEach((key) => {
            queryClient.invalidateQueries({ queryKey: [key] });
          });
        }
      }
    },
    // Stryker restore all
    retry: false,
    ...useMutationParams,
  });
}

You'll also need to write appropriate tests: see here