diff --git a/.prettierrc b/.prettierrc index aeea8c9..2fec1f2 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,5 @@ { - "singleQuote": true, - "trailingComma": "all", - "printWidth": 100 - } \ No newline at end of file + "singleQuote": true, + "trailingComma": "all", + "printWidth": 100 +} diff --git a/src/components/common/FileListBox/index.tsx b/src/components/common/FileListBox/index.tsx index 21e3624..96f08a0 100644 --- a/src/components/common/FileListBox/index.tsx +++ b/src/components/common/FileListBox/index.tsx @@ -5,22 +5,24 @@ import * as S from './styled'; type FileListBoxProps = { filename: string; + fileId: string; size: string; - LastModified: any; + uploadDate: any; isEncrypted: boolean; click: () => void; }; export const FileListBox: React.FC = ({ filename, + fileId, size, - LastModified, + uploadDate, isEncrypted, click, }) => ( {isEncrypted ? : <>} - 파일이름: {filename} / 크기:{size} / 업로드날짜:{LastModified.year}-{LastModified.month}- - {LastModified.day} + ID: {fileId} / 파일이름: {filename} / 크기:{size} / 업로드날짜:{uploadDate.year}- + {uploadDate.month}-{uploadDate.day} ); diff --git a/src/hooks/useDeletePageNavigate.ts b/src/hooks/useDeletePageNavigate.ts index 8f178aa..60d028d 100644 --- a/src/hooks/useDeletePageNavigate.ts +++ b/src/hooks/useDeletePageNavigate.ts @@ -4,12 +4,12 @@ import { bindActionCreators } from 'redux'; import { actionCreators } from '../state'; -export const useDeletePageNavigator = (filename: string, token: string) => { +export const useDeletePageNavigator = (delete_url: string, isEncrypted: boolean, token: string) => { const navigate = useNavigate(); const dispatch = useDispatch(); const { SetDeleteFileProps } = bindActionCreators(actionCreators, dispatch); const move = () => { - SetDeleteFileProps({ filename: filename, token: token }); + SetDeleteFileProps({ delete_url: delete_url, isEncrypted: isEncrypted, token: token }); navigate('/delete'); }; return [move]; diff --git a/src/pages/checkpw/index.tsx b/src/pages/checkpw/index.tsx index 3247333..5046b3a 100644 --- a/src/pages/checkpw/index.tsx +++ b/src/pages/checkpw/index.tsx @@ -15,7 +15,7 @@ import * as S from './styled'; export const CheckPasswordPage: React.FC = () => { const checkPasswordFileProps = useSelector((state: RootState) => state.CheckPasswordFileProps); const [password, setPassword] = useState(''); - const { year, month, day } = getDate(checkPasswordFileProps.lastModified); + const { year, month, day } = getDate(checkPasswordFileProps.uploadDate); const dispatch = useDispatch(); const { SetDownloadFileProps } = bindActionCreators(actionCreators, dispatch); @@ -30,13 +30,13 @@ export const CheckPasswordPage: React.FC = () => { } else { await axios({ method: 'get', - url: `${process.env.REACT_APP_BACKEND_BASEURL}/checkpw/${checkPasswordFileProps.filename}?pw=${password}`, + url: `${process.env.REACT_APP_BACKEND_BASEURL}/checkpw/${checkPasswordFileProps.fileId}/${checkPasswordFileProps.filename}?pw=${password}`, }) .then((res) => { SetDownloadFileProps({ filename: checkPasswordFileProps.filename, - size: checkPasswordFileProps.size, - lastModified: checkPasswordFileProps.lastModified, + fileId: checkPasswordFileProps.fileId, + isEncrypted: checkPasswordFileProps.isEncrypted, token: res.data.token, }); navigate('/download'); @@ -55,11 +55,7 @@ export const CheckPasswordPage: React.FC = () => { } }; useEffect(() => { - if ( - checkPasswordFileProps.filename === null || - checkPasswordFileProps.size === null || - checkPasswordFileProps.lastModified === null - ) { + if (checkPasswordFileProps.filename === null || checkPasswordFileProps.fileId === null) { navigate('/'); } }); diff --git a/src/pages/delete/index.tsx b/src/pages/delete/index.tsx index 8b5d30c..52b0c72 100644 --- a/src/pages/delete/index.tsx +++ b/src/pages/delete/index.tsx @@ -20,8 +20,8 @@ export const DeletePage: React.FC = () => { const deleteFile = async () => { await axios({ method: 'delete', - url: `${process.env.REACT_APP_BACKEND_BASEURL}/del/${DeleteFileProps.filename}${ - DeleteFileProps.token != null ? `?token=${DeleteFileProps.token}` : '' + url: `${DeleteFileProps.delete_url}${ + DeleteFileProps.isEncrypted ? `?token=${DeleteFileProps.token}` : '' }`, }) .then(() => { diff --git a/src/pages/download/index.tsx b/src/pages/download/index.tsx index 96eaef1..39a4d3b 100644 --- a/src/pages/download/index.tsx +++ b/src/pages/download/index.tsx @@ -1,4 +1,5 @@ -import React, { useEffect } from 'react'; +import axios from 'axios'; +import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { toast } from 'react-toastify'; @@ -6,40 +7,83 @@ import { toast } from 'react-toastify'; import { Button, FileBox } from '../../components'; import { useDeletePageNavigator } from '../../hooks'; import { RootState } from '../../state/reducers'; -import { getDate } from '../../utils'; +import { getDate, getFileSize } from '../../utils'; import * as S from './styled'; export const DownloadPage: React.FC = () => { const navigate = useNavigate(); const downloadFileProps: any = useSelector((state: RootState) => state.DownloadFileProps); - const { year, month, day } = getDate(downloadFileProps.lastModified); - const [move] = useDeletePageNavigator(downloadFileProps.filename, downloadFileProps.token); + const [fileProps, setFileProps] = useState({ + filename: '', + // fileId: '', + size: '', + uploadDate: { year: 0, month: 0, day: 0 }, + download_url: '', + delete_url: '', + isEncrypted: false, + }); + const [move] = useDeletePageNavigator( + fileProps.delete_url, + fileProps.isEncrypted, + downloadFileProps.token, + ); + + //https://github.com/facebook/react/issues/14920 useEffect(() => { - if ( - downloadFileProps.filename === null || - downloadFileProps.size === null || - downloadFileProps.lastModified === null - ) { + const getFileProps = async () => { + await axios({ + method: 'get', + url: `${process.env.REACT_APP_BACKEND_BASEURL}/file/${downloadFileProps.fileId}/${ + downloadFileProps.filename + }${downloadFileProps.isEncrypted ? `?token=${downloadFileProps.token}` : ''}`, + }) + .then((res) => { + setFileProps({ + filename: res.data.filename, + // fileId: res.data.fileId, + size: getFileSize(res.data.size), + uploadDate: getDate(res.data.uploadDate), + download_url: res.data.download_url, + delete_url: res.data.delete_url, + isEncrypted: res.data.isEncrypted, + }); + }) + .catch((err) => { + navigate(-1); + toast.error(`error 문의해주세요. ${err.response.status}`, { + autoClose: 1000, + position: toast.POSITION.BOTTOM_RIGHT, + }); + console.log(err); + }); + }; + if (downloadFileProps.filename != null || downloadFileProps.fileId != null) { + getFileProps(); + } else { navigate('/'); } - }, [navigate, downloadFileProps]); + }, [downloadFileProps, navigate]); return ( - 파일이름:{downloadFileProps.filename} / 크기:{downloadFileProps.size} / 업로드된 날짜: - {year}-{month}-{day} + 파일이름:{fileProps.filename} / 크기:{fileProps.size} / 업로드된 날짜: + {fileProps.uploadDate.year}-{fileProps.uploadDate.month}-{fileProps.uploadDate.day}