jhynsoo/worlabel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor: 이미지 업로드 로직 mutate로 분리

Browse Source
This commit is contained in:
홍창기 2024-09-23 13:50:31 +09:00
parent e551e4040d
commit 6aa58a0f01
4 changed files with 60 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx
View File

@ -1,9 +1,9 @@
import { useState } from 'react';
import { Button } from '../ui/button';
import { cn } from '@/lib/utils';
import { uploadImageFolder } from '@/api/imageApi';
import useAuthStore from '@/stores/useAuthStore';
import { X } from 'lucide-react';
import useUploadImageFolderQuery from '@/queries/projects/useUploadImageFolderQuery';
export default function ImageUploadFolderForm({ onClose, projectId }: { onClose: () => void; projectId: number }) {
const profile = useAuthStore((state) => state.profile);
@ -12,9 +12,11 @@ export default function ImageUploadFolderForm({ onClose, projectId }: { onClose:
const [files, setFiles] = useState<File[]>([]);
const [isDragging, setIsDragging] = useState<boolean>(false);
const [isUploading, setIsUploading] = useState<boolean>(false);
const [progress, setProgress] = useState<number>(0);
const [isUploaded, setIsUploaded] = useState<boolean>(false);
const [isFailed, setIsFailed] = useState<boolean>(false);
const uploadImageFolder = useUploadImageFolderQuery();
const handleClose = () => {
onClose();
};
@ -47,16 +49,22 @@ export default function ImageUploadFolderForm({ onClose, projectId }: { onClose:
const handleUpload = async () => {
setIsUploading(true);
setProgress(0);
await uploadImageFolder(memberId, projectId, files)
.then(() => {
setProgress(100);
})
.catch(() => {
setProgress(100);
setIsFailed(true);
});
uploadImageFolder.mutate(
{
memberId,
projectId,
files,
},
{
onSuccess: () => {
setIsUploaded(true);
},
onError: () => {
setIsFailed(true);
},
}
);
};
return (
@ -120,9 +128,9 @@ export default function ImageUploadFolderForm({ onClose, projectId }: { onClose:
? 'border-red-500 text-red-500 hover:bg-red-500 dark:border-red-500 dark:text-red-500 dark:hover:bg-red-500'
: ''
}
disabled={progress != 100}
disabled={!isUploaded && !isFailed}
>
{progress === 100 ? (isFailed ? '업로드 실패 (닫기)' : '업로드 완료 (닫기)') : `업로드 중... ${progress}%`}
{isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : '업로드 중...'}
</Button>
) : (
<Button

34
frontend/src/components/ImageUploadZipModal/ImageUploadZipForm.tsx
View File

@ -1,9 +1,9 @@
import { useState } from 'react';
import { Button } from '../ui/button';
import { cn } from '@/lib/utils';
import { uploadImageZip } from '@/api/imageApi';
import useAuthStore from '@/stores/useAuthStore';
import { X } from 'lucide-react';
import useUploadImageZipQuery from '@/queries/projects/useUploadImageZipQuery';
export default function ImageUploadZipForm({ onClose, projectId }: { onClose: () => void; projectId: number }) {
const profile = useAuthStore((state) => state.profile);
@ -12,9 +12,11 @@ export default function ImageUploadZipForm({ onClose, projectId }: { onClose: ()
const [file, setFile] = useState<File>();
const [isDragging, setIsDragging] = useState<boolean>(false);
const [isUploading, setIsUploading] = useState<boolean>(false);
const [progress, setProgress] = useState<number>(0);
const [isUploaded, setIsUploaded] = useState<boolean>(false);
const [isFailed, setIsFailed] = useState<boolean>(false);
const uploadImageZip = useUploadImageZipQuery();
const handleClose = () => {
onClose();
};
@ -48,16 +50,22 @@ export default function ImageUploadZipForm({ onClose, projectId }: { onClose: ()
const handleUpload = async () => {
if (file) {
setIsUploading(true);
setProgress(0);
await uploadImageZip(memberId, projectId, file)
.then(() => {
setProgress(100);
})
.catch(() => {
setProgress(100);
setIsFailed(true);
});
uploadImageZip.mutate(
{
memberId,
projectId,
file,
},
{
onSuccess: () => {
setIsUploaded(true);
},
onError: () => {
setIsFailed(true);
},
}
);
}
};
@ -116,9 +124,9 @@ export default function ImageUploadZipForm({ onClose, projectId }: { onClose: ()
? 'border-red-500 text-red-500 hover:bg-red-500 dark:border-red-500 dark:text-red-500 dark:hover:bg-red-500'
: ''
}
disabled={progress != 100}
disabled={!isUploaded && !isFailed}
>
{progress === 100 ? (isFailed ? '업로드 실패 (닫기)' : '업로드 완료 (닫기)') : `업로드 중... ${progress}%`}
{isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : '업로드 중...'}
</Button>
) : (
<Button

9
frontend/src/queries/projects/useUploadImageFolderQuery.ts Normal file
View File

@ -0,0 +1,9 @@
import { uploadImageFolder } from '@/api/imageApi';
import { useMutation } from '@tanstack/react-query';
export default function useUploadImageFolderQuery() {
return useMutation({
mutationFn: ({ memberId, projectId, files }: { memberId: number; projectId: number; files: File[] }) =>
uploadImageFolder(memberId, projectId, files),
});
}

9
frontend/src/queries/projects/useUploadImageZipQuery.ts Normal file
View File

@ -0,0 +1,9 @@
import { uploadImageZip } from '@/api/imageApi';
import { useMutation } from '@tanstack/react-query';
export default function useUploadImageZipQuery() {
return useMutation({
mutationFn: ({ memberId, projectId, file }: { memberId: number; projectId: number; file: File }) =>
uploadImageZip(memberId, projectId, file),
});
}