(ui) hook up toggle pin mutation with context menu for single image

This commit is contained in:
Mary Hipp 2023-08-11 11:50:54 -04:00 committed by psychedelicious
parent 04a9894e77
commit 37be827e17
3 changed files with 2829 additions and 2142 deletions

View File

@ -29,10 +29,14 @@ import {
FaShare, FaShare,
FaTrash, FaTrash,
} from 'react-icons/fa'; } from 'react-icons/fa';
import { useGetImageMetadataQuery } from 'services/api/endpoints/images'; import {
useChangeImagePinnedMutation,
useGetImageMetadataQuery,
} from 'services/api/endpoints/images';
import { ImageDTO } from 'services/api/types'; import { ImageDTO } from 'services/api/types';
import { useDebounce } from 'use-debounce'; import { useDebounce } from 'use-debounce';
import { sentImageToCanvas, sentImageToImg2Img } from '../../store/actions'; import { sentImageToCanvas, sentImageToImg2Img } from '../../store/actions';
import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
type SingleSelectionMenuItemsProps = { type SingleSelectionMenuItemsProps = {
imageDTO: ImageDTO; imageDTO: ImageDTO;
@ -59,6 +63,8 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
: debouncedMetadataQueryArg ?? skipToken : debouncedMetadataQueryArg ?? skipToken
); );
const [togglePin] = useChangeImagePinnedMutation();
const { isClipboardAPIAvailable, copyImageToClipboard } = const { isClipboardAPIAvailable, copyImageToClipboard } =
useCopyImageToClipboard(); useCopyImageToClipboard();
@ -127,6 +133,14 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
copyImageToClipboard(imageDTO.image_url); copyImageToClipboard(imageDTO.image_url);
}, [copyImageToClipboard, imageDTO.image_url]); }, [copyImageToClipboard, imageDTO.image_url]);
const handlePinImage = useCallback(() => {
togglePin({ imageName: imageDTO.image_name, pinned: true });
}, [togglePin, imageDTO.image_name]);
const handleUnpinImage = useCallback(() => {
togglePin({ imageName: imageDTO.image_name, pinned: false });
}, [togglePin, imageDTO.image_name]);
return ( return (
<> <>
<MenuItem <MenuItem
@ -196,6 +210,15 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
<MenuItem icon={<FaFolder />} onClickCapture={handleChangeBoard}> <MenuItem icon={<FaFolder />} onClickCapture={handleChangeBoard}>
Change Board Change Board
</MenuItem> </MenuItem>
{imageDTO.pinned ? (
<MenuItem icon={<BsPinAngle />} onClickCapture={handleUnpinImage}>
Unpin Image
</MenuItem>
) : (
<MenuItem icon={<BsPinAngleFill />} onClickCapture={handlePinImage}>
Pin Image
</MenuItem>
)}
<MenuItem <MenuItem
sx={{ color: 'error.600', _dark: { color: 'error.300' } }} sx={{ color: 'error.600', _dark: { color: 'error.300' } }}
icon={<FaTrash />} icon={<FaTrash />}

View File

@ -387,6 +387,54 @@ export const imagesApi = api.injectEndpoints({
} }
}, },
}), }),
/**
* Change an image's `pinned` state.
*/
changeImagePinned: build.mutation<
ImageDTO,
{ imageName: string; pinned: boolean }
>({
query: ({ imageName, pinned }) => ({
url: `images/i/${imageName}`,
method: 'PATCH',
body: { pinned },
}),
// invalidatesTags: (result, error, { imageDTO }) => [
// { type: 'BoardImagesTotal', id: imageDTO.board_id ?? 'none' },
// { type: 'BoardAssetsTotal', id: imageDTO.board_id ?? 'none' },
// ],
async onQueryStarted(
{ imageName, pinned },
{ dispatch, queryFulfilled, getState }
) {
/**
* Cache changes for `changeImageSessionId`:
* - *update* getImageDTO
*/
// Store patches so we can undo if the query fails
const patches: PatchCollection[] = [];
// *update* getImageDTO
patches.push(
dispatch(
imagesApi.util.updateQueryData(
'getImageDTO',
imageName,
(draft) => {
Object.assign(draft, { pinned });
}
)
)
);
try {
await queryFulfilled;
} catch {
patches.forEach((patchResult) => patchResult.undo());
}
},
}),
uploadImage: build.mutation< uploadImage: build.mutation<
ImageDTO, ImageDTO,
{ {
@ -1158,6 +1206,7 @@ export const {
useRemoveImageFromBoardMutation, useRemoveImageFromBoardMutation,
useChangeImageIsIntermediateMutation, useChangeImageIsIntermediateMutation,
useChangeImageSessionIdMutation, useChangeImageSessionIdMutation,
useChangeImagePinnedMutation,
useDeleteBoardAndImagesMutation, useDeleteBoardAndImagesMutation,
useDeleteBoardMutation, useDeleteBoardMutation,
} = imagesApi; } = imagesApi;

File diff suppressed because it is too large Load Diff