batch-photos-list.js

export function PhotosList() {
  const onUpdate = useCallback(() => {
    return new Promise((resolve) =>
      setTimeout(resolve, getRandomBetween(1500, 2000))
    );
  }, []);

  const { photos, updatePhotos } = usePhotos({
    photos: DEFAULT_PHOTOS,
    onUpdate,
  });

  function handleLike(photoId) {
    updatePhotos([{ id: photoId, liked: true }]);
  }

  function handleUnlike(photoId) {
    updatePhotos([{ id: photoId, liked: false }]);
  }

  return (
    <PhotoGrid>
      {photos.map((photo) => (
        <PhotoWrapper key={photo.id}>
          <Photo src={photo.src}></Photo>

          {photo.locked ? (
            <UpdatingButton />
          ) : photo.liked ? (
            <UnlikeButton onUnlike={() => handleUnlike(photo.id)} />
          ) : (
            <LikeButton onLike={() => handleLike(photo.id)}>Like</LikeButton>
          )}
        </PhotoWrapper>
      ))}
    </PhotoGrid>
  );
}