feat(ui): use imageDTOs instead of images in starring queries

This commit is contained in:
psychedelicious 2023-08-16 11:45:21 +10:00
parent 8b1ec2685f
commit 230131646f
4 changed files with 22 additions and 16 deletions

View File

@ -30,11 +30,11 @@ const MultipleSelectionMenuItems = () => {
}, [dispatch, selection]);
const handleStarSelection = useCallback(() => {
starImages({ images: selection });
starImages({ imageDTOs: selection });
}, [starImages, selection]);
const handleUnstarSelection = useCallback(() => {
unstarImages({ images: selection });
unstarImages({ imageDTOs: selection });
}, [unstarImages, selection]);
const areAllStarred = useMemo(() => {

View File

@ -136,11 +136,11 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
}, [copyImageToClipboard, imageDTO.image_url]);
const handleStarImage = useCallback(() => {
if (imageDTO) starImages({ images: [imageDTO] });
if (imageDTO) starImages({ imageDTOs: [imageDTO] });
}, [starImages, imageDTO]);
const handleUnstarImage = useCallback(() => {
if (imageDTO) unstarImages({ images: [imageDTO] });
if (imageDTO) unstarImages({ imageDTOs: [imageDTO] });
}, [unstarImages, imageDTO]);
return (

View File

@ -71,10 +71,10 @@ const GalleryImage = (props: HoverableImageProps) => {
const toggleStarredState = useCallback(() => {
if (imageDTO) {
if (imageDTO.starred) {
unstarImages({ images: [imageDTO] });
unstarImages({ imageDTOs: [imageDTO] });
}
if (!imageDTO.starred) {
starImages({ images: [imageDTO] });
starImages({ imageDTOs: [imageDTO] });
}
}
}, [starImages, unstarImages, imageDTO]);

View File

@ -392,14 +392,14 @@ export const imagesApi = api.injectEndpoints({
*/
starImages: build.mutation<
paths['/api/v1/images/unstar']['post']['responses']['200']['content']['application/json'],
{ images: ImageDTO[] }
{ imageDTOs: ImageDTO[] }
>({
query: ({ images }) => ({
query: ({ imageDTOs: images }) => ({
url: `images/star`,
method: 'POST',
body: { image_names: images.map((img) => img.image_name) },
}),
invalidatesTags: (result, error, { images }) => {
invalidatesTags: (result, error, { imageDTOs: images }) => {
// assume all images are on the same board/category
if (images[0]) {
const categories = getCategories(images[0]);
@ -416,7 +416,10 @@ export const imagesApi = api.injectEndpoints({
}
return [];
},
async onQueryStarted({ images }, { dispatch, queryFulfilled, getState }) {
async onQueryStarted(
{ imageDTOs },
{ dispatch, queryFulfilled, getState }
) {
try {
/**
* Cache changes for pinImages:
@ -425,7 +428,7 @@ export const imagesApi = api.injectEndpoints({
*/
const { data } = await queryFulfilled;
const updatedImages = images.filter((i) =>
const updatedImages = imageDTOs.filter((i) =>
data.updated_image_names.includes(i.image_name)
);
@ -501,14 +504,14 @@ export const imagesApi = api.injectEndpoints({
*/
unstarImages: build.mutation<
paths['/api/v1/images/unstar']['post']['responses']['200']['content']['application/json'],
{ images: ImageDTO[] }
{ imageDTOs: ImageDTO[] }
>({
query: ({ images }) => ({
query: ({ imageDTOs: images }) => ({
url: `images/unstar`,
method: 'POST',
body: { image_names: images.map((img) => img.image_name) },
}),
invalidatesTags: (result, error, { images }) => {
invalidatesTags: (result, error, { imageDTOs: images }) => {
// assume all images are on the same board/category
if (images[0]) {
const categories = getCategories(images[0]);
@ -525,7 +528,10 @@ export const imagesApi = api.injectEndpoints({
}
return [];
},
async onQueryStarted({ images }, { dispatch, queryFulfilled, getState }) {
async onQueryStarted(
{ imageDTOs },
{ dispatch, queryFulfilled, getState }
) {
try {
/**
* Cache changes for unstarImages:
@ -534,7 +540,7 @@ export const imagesApi = api.injectEndpoints({
*/
const { data } = await queryFulfilled;
const updatedImages = images.filter((i) =>
const updatedImages = imageDTOs.filter((i) =>
data.updated_image_names.includes(i.image_name)
);