operationSystem-front/src/components/DataManage/UserSnapshotLogContent.js

import React, { Fragment, useMemo, useRef, useState } from 'react';

import {
	CircularProgressWrapper,
	FormWrapper,
	TableStyle,
	TableWrapper,
} from '../../styles/Components';
import { useTranslation } from 'react-i18next';
import { TableSkeleton } from '../Skeleton/TableSkeleton';
import { UserSnapshotLogSearchBar, useUserSnapshotLogSearch } from '../searchBar';
import { TopButton, ViewTableInfo } from '../common';
import Pagination from '../common/Pagination/Pagination';
import {
	INITIAL_PAGE_LIMIT,
} from '../../assets/data/adminConstants';
import ExcelExportButton from '../common/button/ExcelExportButton';
import CircularProgress from '../common/CircularProgress';
import { AnimatedPageWrapper } from '../common/Layout';
import { numberFormatter } from '../../utils';

const UserSnapshotLogContent = ({ active }) => {
	const { t } = useTranslation();
	const token = sessionStorage.getItem('token');
	const tableRef = useRef(null);
	const [downloadState, setDownloadState] = useState({
		loading: false,
		progress: 0
	});

	const {
		searchParams,
		loading: dataLoading,
		data: dataList,
		handleSearch,
		handleReset,
		handlePageChange,
		updateSearchParams
	} = useUserSnapshotLogSearch(token, 500);

	const tableHeaders = useMemo(() => {
		return [
			{ id: 'logDay', label: '일자', width: '80px' },
			{ id: 'accountId', label: 'account ID', width: '80px' },
			{ id: 'userGuid', label: 'GUID', width: '180px' },
			{ id: 'userNickname', label: '아바타명', width: '150px' },
			{ id: 'gold', label: '골드', width: '80px' },
			{ id: 'sapphire', label: '사파이어', width: '80px' },
			{ id: 'calium', label: '칼리움', width: '80px' },
			{ id: 'ruby', label: '루비', width: '80px' },
			{ id: 'item_13080002', label: '퀘스트 메달', width: '80px' },
			{ id: 'item_13080004', label: '보급품 메달', width: '80px' },
			{ id: 'item_13080005', label: '제작 메달', width: '80px' },
			{ id: 'item_13080006', label: '에테론 315 포드', width: '80px' },
			{ id: 'item_13080007', label: '에테론 316 포드', width: '80px' },
			{ id: 'item_13080008', label: '에테론 317 포드', width: '80px' },
			{ id: 'item_13080009', label: '에테론 318 포드', width: '80px' },
			{ id: 'item_11570001', label: '강화잉크', width: '80px' },
			{ id: 'item_11570002', label: '연성잉크', width: '80px' },
			{ id: 'lastLogoutTime', label: '마지막 로그아웃 일자', width: '150px' },
		];
	}, []);

	if(!active) return null;

	return (
		<AnimatedPageWrapper>
			<FormWrapper>
				<UserSnapshotLogSearchBar
					searchParams={searchParams}
					onSearch={(newParams, executeSearch = true) => {
						if (executeSearch) {
							handleSearch(newParams);
						} else {
							updateSearchParams(newParams);
						}
					}}
					onReset={handleReset}
				/>
			</FormWrapper>
			<ViewTableInfo orderType="asc" pageType="B" total={dataList?.total} total_all={dataList?.total_all}>
				<ExcelExportButton
					functionName="GameUserSnapshotLogExport"
					params={searchParams}
					fileName={t('FILE_GAME_LOG_USER_SNAPSHOT')}
					onLoadingChange={setDownloadState}
					dataSize={dataList?.total_all}
				/>
				{downloadState.loading && (
					<CircularProgressWrapper>
						<CircularProgress
							progress={downloadState.progress}
							size={36}
							progressColor="#4A90E2"
						/>
					</CircularProgressWrapper>
				)}
			</ViewTableInfo>
			{dataLoading ? <TableSkeleton width='100%' count={15} /> :
				<>
					<TableWrapper>
						<TableStyle ref={tableRef}>
							<thead>
							<tr>
								{tableHeaders.map(header => (
									<th key={header.id} width={header.width}>{header.label}</th>
								))}
							</tr>
							</thead>
							<tbody>
							{dataList?.snapshot_list?.map((item, index) => (
								<Fragment key={index}>
									<tr>
										<td>{item.logDay}</td>
										<td>{item.accountId}</td>
										<td>{item.userGuid}</td>
										<td>{item.userNickname}</td>
										<td>{numberFormatter.formatCurrency(item.gold)}</td>
										<td>{numberFormatter.formatCurrency(item.sapphire)}</td>
										<td>{numberFormatter.formatCurrency(item.calium)}</td>
										<td>{numberFormatter.formatCurrency(item.ruby)}</td>
										<td>{item.item_13080002}</td>
										<td>{item.item_13080004}</td>
										<td>{item.item_13080005}</td>
										<td>{item.item_13080006}</td>
										<td>{item.item_13080007}</td>
										<td>{item.item_13080008}</td>
										<td>{item.item_13080009}</td>
										<td>{item.item_11570001}</td>
										<td>{item.item_11570002}</td>
										<td>{item.lastLogoutTime}</td>
									</tr>
								</Fragment>
							))}
							</tbody>
						</TableStyle>
					</TableWrapper>
					{dataList?.snapshot_list &&
						<Pagination
							postsPerPage={searchParams.page_size}
							totalPosts={dataList?.total_all}
							setCurrentPage={handlePageChange}
							currentPage={searchParams.page_no}
							pageLimit={INITIAL_PAGE_LIMIT}
						/>
					}
					<TopButton />
				</>
			}
		</AnimatedPageWrapper>
	);
};
export default UserSnapshotLogContent;