Refactor FileListBox component and add downloading status

tempfiles-team · Mar 30, 2024 · dccb31f · dccb31f
1 parent f84ad31
commit dccb31f
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 100 deletions.
diff --git a/src/components/FileListBox/index.tsx b/src/components/FileListBox/index.tsx
@@ -1,21 +1,33 @@
+import { getFileSize } from '../../utils';
 import { downloadFile } from '../../utils/axios';
 import * as S from './styled';
 
-type FileListBoxProps = {
+export type FileListBoxProps = {
   filename: string;
-  size: string;
+  size: number;
   downloadUrl: string;
+  downloading: boolean;
+  setDownloading: (downloading: boolean) => typeof downloading;
 };
 
-export function FileListBox({ filename, size, downloadUrl }: FileListBoxProps) {
+export function FileListBox({
+  filename,
+  size,
+  downloadUrl,
+  downloading,
+  setDownloading,
+}: FileListBoxProps) {
   return (
     <S.FileListBoxContainer>
       <div
         onClick={async () => {
+          setDownloading(true);
           await downloadFile(downloadUrl, filename);
+          setDownloading(false);
         }}
       >
-        {filename} / {size}
+        {filename} / {getFileSize(size)}
+        {downloading && size >= 2000_000 ? ' / 다운로드 중...' : ''}
       </div>
     </S.FileListBoxContainer>
   );

diff --git a/src/pages/download/index.tsx b/src/pages/download/index.tsx
@@ -1,12 +1,14 @@
 import { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { toast } from 'react-hot-toast';
-import { FileListBox, Button, SkeletonUI } from '../../components';
-import { getDate, getFileSize, getExpireTime } from '../../utils';
+import { FileListBox, Button, SkeletonUI, type FileListBoxProps } from '../../components';
+import { getDate, getExpireTime } from '../../utils';
 import * as S from './styled';
 import axiosInstance, { downloadFile } from '../../utils/axios';
 
 export function DownloadPage() {
+  const navigate = useNavigate();
+
   const [loading, setLoading] = useState(true);
   const { folderid } = useParams<{ folderid: string }>();
   const [fileProps, setFileProps] = useState({
@@ -19,7 +21,7 @@ export function DownloadPage() {
     folderId: '',
   });
 
-  const navigate = useNavigate();
+  const [itemDownloading, setItemDownloading] = useState<boolean[]>([]);
 
   useEffect(() => {
     const getFileProps = async () => {
@@ -30,7 +32,7 @@ export function DownloadPage() {
             files: res.data.files.map(
               (file: { fileName: string; fileSize: number; downloadUrl: string }) => ({
                 filename: file.fileName,
-                size: getFileSize(file.fileSize),
+                size: file.fileSize,
                 downloadUrl: file.downloadUrl,
               })
             ),
@@ -44,9 +46,9 @@ export function DownloadPage() {
 
           setLoading(false);
           setFileProps(updatedFileProps);
+
+          setItemDownloading(new Array(updatedFileProps.files.length).fill(false));
         })
-        // .catch((err) => {
-        // if (err.response.status !== 401) {
         .catch(() => {
           toast.error('ID를 다시 확인해주세요.', {
             duration: 3000,
@@ -67,24 +69,23 @@ export function DownloadPage() {
             {fileProps.isHidden ? '비공개 파일' : '공개 파일'} / {fileProps.folderId}
           </S.IdBox>
           <S.DownloadFileListBoxContainer>
-            {fileProps.files.map(
-              (
-                file: {
-                  filename: string;
-                  size: string;
-                  downloadUrl: string;
-                },
-                index: number
-              ) => (
-                <div key={index}>
-                  <FileListBox
-                    filename={file.filename}
-                    size={file.size}
-                    downloadUrl={file.downloadUrl}
-                  />
-                </div>
-              )
-            )}
+            {fileProps.files.map((file: FileListBoxProps, index: number) => (
+              <div key={index}>
+                <FileListBox
+                  filename={file.filename}
+                  size={file.size}
+                  downloadUrl={file.downloadUrl}
+                  downloading={itemDownloading[index]}
+                  setDownloading={(downloading: boolean) => {
+                    const updatedItemDownloading = [...itemDownloading];
+                    updatedItemDownloading[index] = downloading;
+                    setItemDownloading(updatedItemDownloading);
+
+                    return downloading;
+                  }}
+                />
+              </div>
+            ))}
           </S.DownloadFileListBoxContainer>
 
           <S.DownloadFileStatusText>
@@ -94,7 +95,22 @@ export function DownloadPage() {
             <Button
               click={async () => {
                 for (let i = 0; i < fileProps.files.length; i++) {
-                  await downloadFile(fileProps.files[i].downloadUrl, fileProps.files[i].filename);
+                  setItemDownloading((prev) => {
+                    const updatedItemDownloading = [...prev];
+                    updatedItemDownloading[i] = true;
+                    return updatedItemDownloading;
+                  });
+
+                  await downloadFile(
+                    fileProps.files[i].downloadUrl,
+                    fileProps.files[i].filename
+                  ).then(() => {
+                    setItemDownloading((prev) => {
+                      const updatedItemDownloading = [...prev];
+                      updatedItemDownloading[i] = false;
+                      return updatedItemDownloading;
+                    });
+                  });
                 }
               }}
               bgColor="var(--color-button-primary)"

diff --git a/src/pages/filelist/index.tsx b/src/pages/filelist/index.tsx
@@ -2,16 +2,14 @@ import axiosInstance from '../../utils/axios';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import toast from 'react-hot-toast';
-import { FolderListBox, SkeletonUIBox } from '../../components';
+import { FolderListBox } from '../../components';
 import { getElapsed } from '../../utils';
 import * as S from './styled';
 
 export function FileListPage() {
-  const [loading, setLoading] = useState(false);
-  const [listZero, setListZero] = useState(false);
-  const SkeletonUIRandomWidth = ['50', '55', '60', '65', '70', '75', '80'];
-
   const navigate = useNavigate();
+
+  const [listZero, setListZero] = useState(false);
   const [fileList, setFileList] = useState<
     {
       fileCount: string;
@@ -21,77 +19,60 @@ export function FileListPage() {
     }[]
   >();
 
-  const getFileList = async () => {
-    await axiosInstance
-      .get('/list')
-      .then((res) => {
-        setFileList(res.data.list); //파일리스트 요소 갯수에 따른 핸들링 추가예정
+  useEffect(() => {
+    const getFileList = async () => {
+      await axiosInstance
+        .get('/list')
+        .then((res) => {
+          setFileList(res.data.list); //파일리스트 요소 갯수에 따른 핸들링 추가예정
 
-        if (res.data.list === null) {
-          setListZero(true);
-        }
-        setTimeout(() => {
-          setLoading(true); //loading 확인하고싶으면 false로 바꿔주세요.
-        }, 1000);
-      })
-      .catch((err) => {
-        toast.error(`파일 리스트를 불러오는데 실패했습니다. ${err.response.status}`, {
-          duration: 3000,
-          icon: '❌',
+          if (res.data.list === null) {
+            setListZero(true);
+          }
+        })
+        .catch((err) => {
+          toast.error(`파일 리스트를 불러오는데 실패했습니다. ${err.response.status}`, {
+            duration: 3000,
+            icon: '❌',
+          });
         });
-      });
-  };
-  useEffect(() => {
+    };
+
     getFileList();
   }, []);
+
   return (
-    <>
-      {loading ? (
-        <S.FileListPageContainer>
-          <S.HideFileIdInput
-            type="text"
-            placeholder="숨겨진 파일의 ID를 입력하세요"
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                navigate(`/dl/${e.currentTarget.value}`);
-              }
-            }}
-          />
+    <S.FileListPageContainer>
+      <S.HideFileIdInput
+        type="text"
+        placeholder="숨겨진 파일의 ID를 입력하세요"
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            navigate(`/dl/${e.currentTarget.value}`);
+          }
+        }}
+      />
 
-          <S.FileListContainer>
-            {!listZero ? (
-              <>
-                {fileList?.map((item, index: number) => (
-                  <FolderListBox
-                    key={index}
-                    folderId={item.folderId}
-                    fileCount={item.fileCount}
-                    uploadElapsed={getElapsed(item.uploadDate)}
-                    isHidden={item.isHidden}
-                    click={() => {
-                      navigate(`/dl/${item.folderId}`);
-                    }}
-                  />
-                ))}
-              </>
-            ) : (
-              <S.FileListZero>업로드된 파일이 없습니다.</S.FileListZero>
-            )}
-          </S.FileListContainer>
-        </S.FileListPageContainer>
-      ) : (
-        <>
-          <S.FileListPageContainer>
-            <SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
-            <SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
-            <SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
-            <SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
-            <SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
-            <SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
-            <SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
-          </S.FileListPageContainer>
-        </>
-      )}
-    </>
+      <S.FileListContainer>
+        {!listZero ? (
+          <>
+            {fileList?.map((item, index: number) => (
+              <FolderListBox
+                key={index}
+                folderId={item.folderId}
+                fileCount={item.fileCount}
+                uploadElapsed={getElapsed(item.uploadDate)}
+                isHidden={item.isHidden}
+                click={() => {
+                  navigate(`/dl/${item.folderId}`);
+                }}
+              />
+            ))}
+          </>
+        ) : (
+          <S.FileListZero>업로드된 파일이 없습니다.</S.FileListZero>
+        )}
+      </S.FileListContainer>
+    </S.FileListPageContainer>
   );
 }