94 lines
2.6 KiB
TypeScript
94 lines
2.6 KiB
TypeScript
import LoaderButton from '@/components/primitives/LoaderButton';
|
|
import { storeColorDataForPhotoAction, syncPhotoAction } from '@/photo/actions';
|
|
import IconGrSync from '@/components/icons/IconGrSync';
|
|
import { toastSuccess } from '@/toast';
|
|
import { ComponentProps, useRef, useState } from 'react';
|
|
import Tooltip from '@/components/Tooltip';
|
|
import clsx from 'clsx/lite';
|
|
import useScrollIntoView from '@/utility/useScrollIntoView';
|
|
import { Photo } from '@/photo';
|
|
import { syncPhotoConfirmText } from './confirm';
|
|
import { isPhotoOnlyMissingColorData } from '@/photo/update';
|
|
import IconBroom from '@/components/icons/IconBroom';
|
|
|
|
export default function PhotoSyncButton({
|
|
photo,
|
|
onSyncComplete,
|
|
updateMode,
|
|
className,
|
|
isSyncingExternal,
|
|
hasAiTextGeneration,
|
|
disabled,
|
|
shouldConfirm,
|
|
shouldToast,
|
|
shouldScrollIntoViewOnExternalSync,
|
|
}: {
|
|
photo: Photo
|
|
onSyncComplete?: () => void
|
|
updateMode?: boolean
|
|
isSyncingExternal?: boolean
|
|
hasAiTextGeneration: boolean
|
|
shouldConfirm?: boolean
|
|
shouldToast?: boolean
|
|
shouldScrollIntoViewOnExternalSync?: boolean
|
|
} & ComponentProps<typeof LoaderButton>) {
|
|
const ref = useRef<HTMLButtonElement>(null);
|
|
|
|
const [isSyncing, setIsSyncing] = useState(false);
|
|
|
|
useScrollIntoView({
|
|
ref,
|
|
shouldScrollIntoView:
|
|
isSyncingExternal &&
|
|
shouldScrollIntoViewOnExternalSync,
|
|
});
|
|
|
|
const onlySyncColorData = updateMode &&
|
|
isPhotoOnlyMissingColorData(photo);
|
|
|
|
return (
|
|
<Tooltip content={onlySyncColorData
|
|
? 'Update color data'
|
|
: 'Regenerate photo data'}>
|
|
<LoaderButton
|
|
ref={ref}
|
|
className={clsx(
|
|
'scroll-mt-32',
|
|
className,
|
|
)}
|
|
icon={updateMode
|
|
? <IconBroom size={18} />
|
|
: <IconGrSync
|
|
className="translate-y-[0.5px] translate-x-[0.5px]"
|
|
/>}
|
|
onClick={() => {
|
|
if (
|
|
!shouldConfirm ||
|
|
window.confirm(syncPhotoConfirmText(
|
|
photo,
|
|
hasAiTextGeneration,
|
|
onlySyncColorData,
|
|
))
|
|
) {
|
|
setIsSyncing(true);
|
|
(onlySyncColorData
|
|
? storeColorDataForPhotoAction(photo.id)
|
|
: syncPhotoAction(photo.id, { updateMode }))
|
|
.then(() => {
|
|
onSyncComplete?.();
|
|
if (shouldToast) {
|
|
toastSuccess(photo.title
|
|
? `"${photo.title}" data synced`
|
|
: 'Data synced');
|
|
}
|
|
})
|
|
.finally(() => setIsSyncing(false));
|
|
}
|
|
}}
|
|
isLoading={isSyncing || isSyncingExternal}
|
|
disabled={disabled}
|
|
/>
|
|
</Tooltip>
|
|
);
|
|
}
|