112 lines
3.7 KiB
JavaScript
112 lines
3.7 KiB
JavaScript
import { Fragment, useEffect, useState } from 'react';
|
|
|
|
import Button from '../common/button/Button';
|
|
|
|
import { TableStyle, TableInfo, ListOption, IndexTableWrap } from '../../styles/Components';
|
|
import { DailySearchBar } from './index';
|
|
import { DailyMedalView } from '../../apis';
|
|
|
|
const DailyMedalContent = () => {
|
|
const token = sessionStorage.getItem('token');
|
|
let d = new Date();
|
|
const START_DATE = new Date(new Date(d.setDate(d.getDate() - 1)).setHours(0, 0, 0, 0));
|
|
const END_DATE = new Date();
|
|
|
|
const [dataList, setDataList] = useState([]);
|
|
const [resultData, setResultData] = useState([]);
|
|
|
|
const [sendDate, setSendDate] = useState(START_DATE);
|
|
const [finishDate, setFinishDate] = useState(END_DATE);
|
|
|
|
useEffect(() => {
|
|
fetchData(START_DATE, END_DATE);
|
|
}, []);
|
|
|
|
const fetchData = async (startDate, endDate) => {
|
|
const startDateToLocal =
|
|
startDate.getFullYear() +
|
|
'-' +
|
|
(startDate.getMonth() + 1 < 9 ? '0' + (startDate.getMonth() + 1) : startDate.getMonth() + 1) +
|
|
'-' +
|
|
(startDate.getDate() < 9 ? '0' + startDate.getDate() : startDate.getDate());
|
|
|
|
const endDateToLocal =
|
|
endDate.getFullYear() +
|
|
'-' +
|
|
(endDate.getMonth() + 1 < 9 ? '0' + (endDate.getMonth() + 1) : endDate.getMonth() + 1) +
|
|
'-' +
|
|
(endDate.getDate() < 9 ? '0' + endDate.getDate() : endDate.getDate());
|
|
|
|
setDataList(await DailyMedalView(token, startDateToLocal, endDateToLocal));
|
|
|
|
setSendDate(startDateToLocal);
|
|
setFinishDate(endDateToLocal);
|
|
};
|
|
|
|
// 검색 함수
|
|
const handleSearch = (send_dt, end_dt) => {
|
|
fetchData(send_dt, end_dt);
|
|
};
|
|
|
|
// 엑셀 다운로드
|
|
const handleXlsxExport = () => {
|
|
const fileName = 'Caliverse_Daily_Medal.xlsx';
|
|
//DailyActiveUserExport(token, fileName, sendDate, finishDate);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<DailySearchBar setResultData={setResultData} resultData={resultData} handleSearch={handleSearch} fetchData={fetchData} />
|
|
<TableInfo>
|
|
<ListOption>
|
|
<Button theme="line" text="엑셀 다운로드" handleClick={handleXlsxExport} />
|
|
</ListOption>
|
|
</TableInfo>
|
|
<IndexTableWrap>
|
|
<TableStyle>
|
|
<caption></caption>
|
|
<thead >
|
|
<tr>
|
|
<th rowSpan="1" width="20">
|
|
일자
|
|
</th>
|
|
<th colSpan="1" width="30">
|
|
UserID
|
|
</th>
|
|
<th colSpan="1" width="30">
|
|
닉네임
|
|
</th>
|
|
<th colSpan="1" width="30">
|
|
Item ID
|
|
</th>
|
|
<th colSpan="1" width="30">
|
|
획득량
|
|
</th>
|
|
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
{(dataList || []).map((data, index) => (
|
|
<tr key={index}>
|
|
<td>{data.date}</td>
|
|
<td>{data.dau}</td>
|
|
<td>{data.dalc}</td>
|
|
<td>{data.dglc}</td>
|
|
<td>{data.maxAu}</td>
|
|
{Array.from({ length: 24 }, (_, i) => (
|
|
<td key={i}>{data['h' + i]}</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
|
|
</tbody>
|
|
</TableStyle>
|
|
</IndexTableWrap>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DailyMedalContent;
|
|
|