146 lines
3.6 KiB
JavaScript
146 lines
3.6 KiB
JavaScript
import { useState, Fragment, useRef } from 'react';
|
|
import { Title, FormWrapper } from '../../styles/Components';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
CommonSearchBar,
|
|
useCommonSearch,
|
|
UserBlockDetailModal,
|
|
} from '../../components/ServiceManage/';
|
|
import { BlackListDetail, BlackListDelete } from '../../apis';
|
|
import Pagination from '../../components/common/Pagination/Pagination';
|
|
|
|
import { authType } from '../../assets/data';
|
|
import { CaliTable, TableHeader } from '../../components/common';
|
|
import { useModal, useTable, withAuth } from '../../hooks/hook';
|
|
import { alertTypes } from '../../assets/data/types';
|
|
import { INITIAL_PAGE_LIMIT } from '../../assets/data/adminConstants';
|
|
import tableInfo from '../../assets/data/pages/userBlockTable.json'
|
|
import { useAlert } from '../../context/AlertProvider';
|
|
import { useLoading } from '../../context/LoadingProvider';
|
|
|
|
const UserBlock = () => {
|
|
const token = sessionStorage.getItem('token');
|
|
const navigate = useNavigate();
|
|
const {showModal, showToast} = useAlert();
|
|
const {withLoading} = useLoading();
|
|
|
|
const [detail, setDetail] = useState([]);
|
|
const {
|
|
modalState,
|
|
handleModalView,
|
|
handleModalClose
|
|
} = useModal({
|
|
detail: 'hidden',
|
|
});
|
|
|
|
|
|
const {
|
|
config,
|
|
searchParams,
|
|
data: dataList,
|
|
handleSearch,
|
|
handleReset,
|
|
handlePageChange,
|
|
handlePageSizeChange,
|
|
handleOrderByChange,
|
|
updateSearchParams,
|
|
configLoaded
|
|
} = useCommonSearch(token, "userBlockSearch");
|
|
|
|
const {
|
|
selectedRows,
|
|
handleSelectRow,
|
|
isRowSelected
|
|
} = useTable(dataList?.list || [], {mode: 'single'});
|
|
|
|
const handleAction = async (action, item = null) => {
|
|
switch (action) {
|
|
case "detail":
|
|
await BlackListDetail(token, item.id).then(data => {
|
|
setDetail(data);
|
|
handleModalView('detail');
|
|
});
|
|
break;
|
|
case "delete":
|
|
showModal('USER_BLOCK_DELETE_CONFIRM', {
|
|
type: alertTypes.confirm,
|
|
onConfirm: () => handleAction('deleteConfirm')
|
|
});
|
|
break;
|
|
case "deleteConfirm":
|
|
let list = [];
|
|
|
|
selectedRows.map(data => {
|
|
list.push({
|
|
id: data.id,
|
|
});
|
|
});
|
|
|
|
await withLoading(async () => {
|
|
return BlackListDelete(token, list);
|
|
}).then(data => {
|
|
showToast('DEL_COMPLETE', {type: alertTypes.success});
|
|
}).catch(reason => {
|
|
showToast('API_FAIL', {type: alertTypes.error});
|
|
}).finally(() => {
|
|
handleSearch(updateSearchParams);
|
|
});
|
|
|
|
break;
|
|
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Title>이용자 제재 조회 및 등록</Title>
|
|
<FormWrapper>
|
|
<CommonSearchBar
|
|
config={config}
|
|
searchParams={searchParams}
|
|
onSearch={(newParams, executeSearch = true) => {
|
|
if (executeSearch) {
|
|
handleSearch(newParams);
|
|
} else {
|
|
updateSearchParams(newParams);
|
|
}
|
|
}}
|
|
onReset={handleReset}
|
|
/>
|
|
</FormWrapper>
|
|
<TableHeader
|
|
config={tableInfo.header}
|
|
total={dataList?.total}
|
|
total_all={dataList?.total_all}
|
|
handleOrderBy={handleOrderByChange}
|
|
handlePageSize={handlePageSizeChange}
|
|
selectedRows={selectedRows}
|
|
onAction={handleAction}
|
|
navigate={navigate}
|
|
/>
|
|
<CaliTable
|
|
columns={tableInfo.columns}
|
|
data={dataList?.list}
|
|
selectedRows={selectedRows}
|
|
onSelectRow={handleSelectRow}
|
|
onAction={handleAction}
|
|
/>
|
|
<Pagination
|
|
postsPerPage={searchParams.pageSize}
|
|
totalPosts={dataList?.total_all}
|
|
setCurrentPage={handlePageChange}
|
|
currentPage={searchParams.currentPage}
|
|
pageLimit={INITIAL_PAGE_LIMIT}
|
|
/>
|
|
|
|
<UserBlockDetailModal
|
|
stateModal={modalState.detailModal}
|
|
data={detail}
|
|
handleModal={() => handleModalClose('detail')}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default withAuth(authType.blackListRead)(UserBlock);
|