File size: 1,596 Bytes
8a37e0a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import { useStore } from '@nanostores/react';
import { $customStarUI } from 'app/store/nanostores/customStarUI';
import { DndImageIcon } from 'features/dnd/DndImageIcon';
import { memo, useCallback } from 'react';
import { PiStarBold, PiStarFill } from 'react-icons/pi';
import { useStarImagesMutation, useUnstarImagesMutation } from 'services/api/endpoints/images';
import type { ImageDTO } from 'services/api/types';
type Props = {
imageDTO: ImageDTO;
};
export const GalleryImageStarIconButton = memo(({ imageDTO }: Props) => {
const customStarUi = useStore($customStarUI);
const [starImages] = useStarImagesMutation();
const [unstarImages] = useUnstarImagesMutation();
const toggleStarredState = useCallback(() => {
if (imageDTO.starred) {
unstarImages({ imageDTOs: [imageDTO] });
} else {
starImages({ imageDTOs: [imageDTO] });
}
}, [starImages, unstarImages, imageDTO]);
if (customStarUi) {
return (
<DndImageIcon
onClick={toggleStarredState}
icon={imageDTO.starred ? customStarUi.on.icon : customStarUi.off.icon}
tooltip={imageDTO.starred ? customStarUi.on.text : customStarUi.off.text}
position="absolute"
top={2}
insetInlineEnd={2}
/>
);
}
return (
<DndImageIcon
onClick={toggleStarredState}
icon={imageDTO.starred ? <PiStarFill /> : <PiStarBold />}
tooltip={imageDTO.starred ? 'Unstar' : 'Star'}
position="absolute"
top={2}
insetInlineEnd={2}
/>
);
});
GalleryImageStarIconButton.displayName = 'GalleryImageStarIconButton';
|