add actions for copying image and opening image in new tab

This commit is contained in:
Mary Hipp
2025-02-25 09:37:07 -05:00
committed by Mary Hipp Rogers
parent 7bcbe180df
commit b1c9f59c30
3 changed files with 14 additions and 2 deletions

View File

@@ -1,5 +1,7 @@
import { useAppDispatch } from 'app/store/storeHooks';
import { useClipboard } from 'common/hooks/useClipboard';
import { convertImageUrlToBlob } from 'common/util/convertImageUrlToBlob';
import { imageCopiedToClipboard } from 'features/gallery/store/actions';
import { toast } from 'features/toast/toast';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@@ -7,6 +9,7 @@ import { useTranslation } from 'react-i18next';
export const useCopyImageToClipboard = () => {
const { t } = useTranslation();
const clipboard = useClipboard();
const dispatch = useAppDispatch();
const copyImageToClipboard = useCallback(
async (image_url: string) => {
@@ -23,6 +26,7 @@ export const useCopyImageToClipboard = () => {
title: t('toast.imageCopied'),
status: 'success',
});
dispatch(imageCopiedToClipboard());
});
} catch (err) {
toast({
@@ -33,7 +37,7 @@ export const useCopyImageToClipboard = () => {
});
}
},
[clipboard, t]
[clipboard, t, dispatch]
);
return copyImageToClipboard;

View File

@@ -1,5 +1,7 @@
import { useAppDispatch } from 'app/store/storeHooks';
import { IconMenuItem } from 'common/components/IconMenuItem';
import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
import { imageOpenedInNewTab } from 'features/gallery/store/actions';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { PiArrowSquareOutBold } from 'react-icons/pi';
@@ -7,9 +9,11 @@ import { PiArrowSquareOutBold } from 'react-icons/pi';
export const ImageMenuItemOpenInNewTab = memo(() => {
const { t } = useTranslation();
const imageDTO = useImageDTOContext();
const dispatch = useAppDispatch();
const onClick = useCallback(() => {
window.open(imageDTO.image_url, '_blank');
}, [imageDTO.image_url]);
dispatch(imageOpenedInNewTab());
}, [imageDTO.image_url, dispatch]);
return (
<IconMenuItem

View File

@@ -3,3 +3,7 @@ import { createAction } from '@reduxjs/toolkit';
export const sentImageToCanvas = createAction('gallery/sentImageToCanvas');
export const imageDownloaded = createAction('gallery/imageDownloaded');
export const imageCopiedToClipboard = createAction('gallery/imageCopiedToClipboard');
export const imageOpenedInNewTab = createAction('gallery/imageOpenedInNewTab');