From e2338cb4e017880881f2a08e432c1270ebc0c838 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Fri, 28 Oct 2022 06:14:59 +0900 Subject: [PATCH 1/4] feat: downloadFileProps redux --- src/state/action-types/index.ts | 1 + src/state/actions-creators/index.ts | 7 +++++++ src/state/actions/index.ts | 7 ++++++- src/state/reducers/DownloadFileProps.ts | 16 ++++++++++++++++ src/state/reducers/index.ts | 2 ++ 5 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 src/state/reducers/DownloadFileProps.ts diff --git a/src/state/action-types/index.ts b/src/state/action-types/index.ts index 020513b..8c14626 100644 --- a/src/state/action-types/index.ts +++ b/src/state/action-types/index.ts @@ -1,4 +1,5 @@ export enum ActionType { SusccesFileProps = 'SusccesFileProps', DeleteFileName = 'DeleteFileName', + DownloadFileProps = 'DownloadFileProps', } diff --git a/src/state/actions-creators/index.ts b/src/state/actions-creators/index.ts index f816356..d34d7ee 100644 --- a/src/state/actions-creators/index.ts +++ b/src/state/actions-creators/index.ts @@ -16,3 +16,10 @@ export const SetDeleteFileName = (name: string) => (dispatch: Dispatch) name: name, }); }; + +export const SetDownloadFileProps = (props: any) => (dispatch: Dispatch) => { + dispatch({ + type: ActionType.DownloadFileProps, + props: props, + }); +}; diff --git a/src/state/actions/index.ts b/src/state/actions/index.ts index fe12175..4a29d08 100644 --- a/src/state/actions/index.ts +++ b/src/state/actions/index.ts @@ -10,4 +10,9 @@ interface DeleteFileProps { name: string; } -export type Action = SusccesFileProps | DeleteFileProps; +interface DownloadFileProps { + type: ActionType.DownloadFileProps; + props: any; +} + +export type Action = SusccesFileProps | DeleteFileProps | DownloadFileProps; diff --git a/src/state/reducers/DownloadFileProps.ts b/src/state/reducers/DownloadFileProps.ts new file mode 100644 index 0000000..f0db2a4 --- /dev/null +++ b/src/state/reducers/DownloadFileProps.ts @@ -0,0 +1,16 @@ +import { ActionType } from '../action-types'; +import { Action } from '../actions'; + +const reducer = ( + state: any = { Name: null, Size: null, LastModified: null }, + action: Action, +): any => { + switch (action.type) { + case ActionType.DownloadFileProps: + return action.props; + default: + return state; + } +}; + +export default reducer; diff --git a/src/state/reducers/index.ts b/src/state/reducers/index.ts index 9bda831..c12a1f2 100644 --- a/src/state/reducers/index.ts +++ b/src/state/reducers/index.ts @@ -1,11 +1,13 @@ import { combineReducers } from 'redux'; import DeleteFileName from './DeleteFileName'; +import DownloadFileProps from './DownloadFileProps'; import SuccessFileProps from './SuccessFileProps'; const reducers = combineReducers({ SuccessFileProps: SuccessFileProps, DeleteFileName: DeleteFileName, + DownloadFileProps: DownloadFileProps, }); export default reducers; From 88df4c7ac5789bc1853ee2a0ea744e8aead30ead Mon Sep 17 00:00:00 2001 From: anjaemin Date: Fri, 28 Oct 2022 06:15:33 +0900 Subject: [PATCH 2/4] feat: getDate utils --- src/utils/getDate.ts | 4 ++++ src/utils/index.ts | 1 + 2 files changed, 5 insertions(+) create mode 100644 src/utils/getDate.ts diff --git a/src/utils/getDate.ts b/src/utils/getDate.ts new file mode 100644 index 0000000..0f2091c --- /dev/null +++ b/src/utils/getDate.ts @@ -0,0 +1,4 @@ +export const getDate = (date: string) => { + const NewDate = new Date(date); + return { year: NewDate.getFullYear(), month: NewDate.getMonth() + 1, day: NewDate.getDay() }; +}; diff --git a/src/utils/index.ts b/src/utils/index.ts index 412bd74..aa41e31 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,2 +1,3 @@ export * from './getFileSize'; export * from './getShortFileName'; +export * from './getDate'; From b32e7efe945fd59c9e32e19c7329719a5bd14854 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Fri, 28 Oct 2022 06:16:36 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20getDate=EB=A1=9C=20=EB=82=A0?= =?UTF-8?q?=EC=A7=9C=20=EB=B0=9B=EC=95=84=EC=98=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/FileListBox/index.tsx | 14 ++++++++---- src/pages/filelist/index.tsx | 24 +++++++++++++++++---- 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/src/components/common/FileListBox/index.tsx b/src/components/common/FileListBox/index.tsx index 63e0640..b86b857 100644 --- a/src/components/common/FileListBox/index.tsx +++ b/src/components/common/FileListBox/index.tsx @@ -6,11 +6,17 @@ type FileListBoxProps = { filename: string; size: string; LastModified: any; + click: () => void; }; -export const FileListBox: React.FC = ({ filename, size, LastModified }) => ( - - 파일이름: {filename} / 크기:{size} / 업로드날짜:{LastModified.getFullYear()}- - {LastModified.getMonth() + 1}-{LastModified.getDate()} +export const FileListBox: React.FC = ({ + filename, + size, + LastModified, + click, +}) => ( + + 파일이름: {filename} / 크기:{size} / 업로드날짜:{LastModified.year}-{LastModified.month}- + {LastModified.day} ); diff --git a/src/pages/filelist/index.tsx b/src/pages/filelist/index.tsx index b923d65..1dd8db8 100644 --- a/src/pages/filelist/index.tsx +++ b/src/pages/filelist/index.tsx @@ -1,13 +1,20 @@ import axios from 'axios'; import React, { useEffect, useState } from 'react'; +import { useDispatch } from 'react-redux'; +import { useNavigate } from 'react-router-dom'; +import { bindActionCreators } from 'redux'; import { FileListBox } from '../../components'; -import { getFileSize, getShortFileName } from '../../utils'; +import { actionCreators } from '../../state'; +import { getFileSize, getShortFileName, getDate } from '../../utils'; import * as S from './styled'; export const FileListPage: React.FC = () => { + const navigate = useNavigate(); const [loading, setLoading] = useState(false); const SkeletonUIRandomWidth = ['50', '55', '60', '65', '70', '75', '80']; + const dispatch = useDispatch(); + const { SetDownloadFileProps } = bindActionCreators(actionCreators, dispatch); const [fileList, setFileList] = useState(); const getFileList = async () => { await axios({ @@ -15,10 +22,10 @@ export const FileListPage: React.FC = () => { url: 'https://tfb.minpeter.cf/list', }) .then((res) => { - setFileList(res.data.list); + setFileList(res.data.list); //파일리스트 요소 갯수에 따른 핸들링 추가예정 setTimeout(() => { setLoading(true); //loading 확인하고싶으면 false로 바꿔주세요. - }, 2000); + }, 1500); }) .catch((err) => { console.log(err); @@ -37,7 +44,16 @@ export const FileListPage: React.FC = () => { key={index} filename={getShortFileName(item.Name)} size={getFileSize(item.Size)} - LastModified={new Date(item.LastModified)} + LastModified={getDate(item.LastModified)} + click={() => { + SetDownloadFileProps({ + Name: item.Name, + Size: item.Size, + LastModified: item.LastModified, + //passowrd 유무 추가예정 + }); + navigate('/download'); + }} /> ))} From a54b0164e567751afda0f596eea34c1206d13d52 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Fri, 28 Oct 2022 06:17:20 +0900 Subject: [PATCH 4/4] feat: download version 1 (no password) --- src/pages/download/index.tsx | 53 ++++++++++++++++++++++++++++++------ src/pages/download/styled.ts | 17 ++++++++++-- 2 files changed, 59 insertions(+), 11 deletions(-) diff --git a/src/pages/download/index.tsx b/src/pages/download/index.tsx index 2d93319..f18640d 100644 --- a/src/pages/download/index.tsx +++ b/src/pages/download/index.tsx @@ -1,13 +1,48 @@ -import React from 'react'; +import React, { useEffect } from 'react'; +import { useSelector } from 'react-redux'; +import { useNavigate } from 'react-router-dom'; +import { toast } from 'react-toastify'; import { Button } from '../../components'; +import { RootState } from '../../state/reducers'; +import { getFileSize, getDate } from '../../utils'; import * as S from './styled'; -export const DownloadPage: React.FC = () => ( - - -