fix: edit mii image is sending when not changed

This commit is contained in:
trafficlunar 2026-04-02 22:12:41 +01:00
parent f30f12d086
commit 4a5126c87b
4 changed files with 22 additions and 12 deletions

View file

@ -11,15 +11,13 @@ interface Props {
isOpen: boolean;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
onCapture?: () => void;
setImage?: React.Dispatch<React.SetStateAction<string | undefined>>;
setImage?: (value: string | undefined) => void;
setQrBytesRaw?: React.Dispatch<React.SetStateAction<number[]>>;
}
export default function Camera({ isOpen, setIsOpen, onCapture, setImage, setQrBytesRaw }: Props) {
const [isVisible, setIsVisible] = useState(false);
const [permissionGranted, setPermissionGranted] = useState<boolean | null>(null);
const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null);

View file

@ -53,7 +53,7 @@ export default function EditForm({ mii, likes }: Props) {
const handleDrop = useCallback(
(acceptedFiles: FileWithPath[]) => {
if (files.length >= 3) return;
hasFilesChanged.current = true;
hasCustomImagesChanged.current = true;
setFiles((prev) => [...prev, ...acceptedFiles]);
},
@ -69,10 +69,12 @@ export default function EditForm({ mii, likes }: Props) {
const [makeup, setMakeup] = useState<MiiMakeup>(mii.makeup ?? "PARTIAL");
const [miiPortraitUri, setMiiPortraitUri] = useState<string | undefined>(`/mii/${mii.id}/image?type=mii`);
const [miiFeaturesUri, setMiiFeaturesUri] = useState<string | undefined>(`/mii/${mii.id}/image?type=features`);
const hasFilesChanged = useRef(false);
const instructions = useRef<SwitchMiiInstructions>(deepMerge(defaultInstructions, (mii.instructions as object) ?? {}));
const [quarantined, setQuarantined] = useState(mii.quarantined);
const hasCustomImagesChanged = useRef(false);
const hasMiiPortraitChanged = useRef(false);
const hasMiiFeaturesChanged = useRef(false);
const handleSubmit = async () => {
// Validate before sending request
@ -99,7 +101,7 @@ export default function EditForm({ mii, likes }: Props) {
if (minifyInstructions(structuredClone(instructions.current)) !== (mii.instructions as object))
formData.append("instructions", JSON.stringify(instructions.current));
if (hasFilesChanged.current) {
if (hasCustomImagesChanged.current) {
files.forEach((file, index) => {
// image1, image2, etc.
formData.append(`image${index + 1}`, file);
@ -123,11 +125,11 @@ export default function EditForm({ mii, likes }: Props) {
return blob;
}
if (miiPortraitUri) {
if (miiPortraitUri && hasMiiPortraitChanged.current) {
const blob = await getBlob(miiPortraitUri);
if (blob) formData.append("miiPortraitImage", blob);
}
if (miiFeaturesUri) {
if (miiFeaturesUri && hasMiiFeaturesChanged.current) {
const blob = await getBlob(miiFeaturesUri);
if (blob) formData.append("miiFeaturesImage", blob);
}
@ -146,6 +148,16 @@ export default function EditForm({ mii, likes }: Props) {
redirect(`/mii/${mii.id}`);
};
const handleMiiPortraitChange = (uri: string | undefined) => {
hasMiiPortraitChanged.current = true;
setMiiPortraitUri(uri);
};
const handleMiiFeaturesChange = (uri: string | undefined) => {
hasMiiFeaturesChanged.current = true;
setMiiFeaturesUri(uri);
};
// Load existing images - converts image URLs to File objects
useEffect(() => {
const loadExistingImages = async () => {
@ -368,8 +380,8 @@ export default function EditForm({ mii, likes }: Props) {
</div>
<div className="flex flex-col items-center gap-2">
<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={setMiiPortraitUri} forceCrop />
<SwitchFileUpload text="a screenshot of your Mii's features here" image={miiFeaturesUri} setImage={setMiiFeaturesUri} />
<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={handleMiiPortraitChange} forceCrop />
<SwitchFileUpload text="a screenshot of your Mii's features here" image={miiFeaturesUri} setImage={handleMiiFeaturesChange} />
<SwitchSubmitTutorialButton />
</div>

View file

@ -8,7 +8,7 @@ interface Props {
isOpen: boolean;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
image: string | undefined;
setImage: React.Dispatch<React.SetStateAction<string | undefined>>;
setImage: (value: string | undefined) => void;
}
export default function ImageEditorPortrait({ isOpen, setIsOpen, image, setImage }: Props) {

View file

@ -11,7 +11,7 @@ interface Props {
text: string;
forceCrop?: boolean;
image?: string | undefined;
setImage: React.Dispatch<React.SetStateAction<string | undefined>>;
setImage: (value: string | undefined) => void;
}
export default function SwitchFileUpload({ text, forceCrop, image, setImage }: Props) {