toast 메시지 추가

alert 글로벌화
loading 글로벌화

src/pages/UserManage/CaliumRequest.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, Fragment, useRef } from 'react';
+import { useState, Fragment, useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 import { useTranslation } from 'react-i18next';
 import 'react-datepicker/dist/react-datepicker.css';
@@ -7,7 +7,6 @@ import { authList } from '../../store/authList';
 import {
 	authType,
 	commonStatus,
-	modalTypes,
 	ViewTitleCountType,
 	caliumStatus
 } from '../../assets/data';
@@ -17,159 +16,79 @@ import {
 	ChargeBtn,
 	StatusLabel,
 } from '../../styles/ModuleComponents';
-import {Button, ExcelDownButton, Pagination, DynamicModal, ViewTableInfo, Loading} from '../../components/common';
+import {Button, ExcelDownButton, Pagination, ViewTableInfo} from '../../components/common';
 import { convertKTC, truncateText } from '../../utils';
 import { CaliumRequestRegistModal } from '../../components/UserManage';
-import { CaliumCharge, CaliumRequestView } from '../../apis';
-import { withAuth } from '../../hooks/hook';
-import { convertEndDateToISO, convertStartDateToISO } from '../../utils/date';
-import {CaliumRequestSearchBar} from '../../components/ServiceManage';
+import { CaliumCharge } from '../../apis';
+import { useModal, withAuth } from '../../hooks/hook';
+import { CommonSearchBar, useCommonSearch } from '../../components/ServiceManage';
+import { INITIAL_PAGE_LIMIT } from '../../assets/data/adminConstants';
+import { useAlert } from '../../context/AlertProvider';
+import { useLoading } from '../../context/LoadingProvider';
+import { alertTypes } from '../../assets/data/types';
 
 const CaliumRequest = () => {
 	const token = sessionStorage.getItem('token');
 	const userInfo = useRecoilValue(authList);
 	const { t } = useTranslation();
+	const { showModal, showToast } = useAlert();
+	const {withLoading} = useLoading();
 
 	const tableRef = useRef(null);
-	const [currentPage, setCurrentPage] = useState(1);
-	const [pageSize, setPageSize] = useState(50);
-
-	const [dataList, setDataList] = useState([]);
-	const [detailData, setDetailData] = useState('');
-	const [loading, setLoading] = useState(false);
-	const [alertMsg, setAlertMsg] = useState('');
 	const [selectCharge, setSelectCharge] = useState({});
 
-	const [searchData, setSearchData] = useState({
-		content: '',
-		status: 'ALL',
-		startDate: '',
-		endDate: '',
-	});
-	const [orderBy, setOrderBy] = useState('DESC');
-	const [modalState, setModalState] = useState({
-		detailModal: 'hidden',
-		registerModal: 'hidden',
-		chargedCompleteModal: 'hidden',
-		chargedConfirmModal: 'hidden'
+	const {
+		modalState,
+		handleModalView,
+		handleModalClose
+	} = useModal({
+		register: 'hidden',
 	});
 
-	useEffect(() => {
-		fetchData('', 'ALL', '', '');
-	}, [currentPage]);
-
-	// 리스트 조회
-	const fetchData = async (content, status, startDate, endDate, order, size) => {
-		setDataList(
-			await CaliumRequestView(
-				token,
-				content,
-				status,
-				startDate && convertStartDateToISO(startDate),
-				endDate && convertEndDateToISO(endDate),
-				order ? order : orderBy,
-				size ? size : pageSize,
-				currentPage,
-			),
-		);
-	};
-
-	// 검색 함수
-	const handleSearch = (content, status, startDate, endDate) => {
-		fetchData(content, status, startDate, endDate);
-	};
-
-	// 오름차순 내림차순
-	const handleOrderBy = e => {
-		const order = e.target.value;
-
-		setOrderBy(order);
-		fetchData(
-			searchData.content,
-			searchData.status,
-			searchData.startDate,
-			searchData.endDate,
-			order,
-			pageSize,
-		);
-	};
-
-	const handlePageSize = e => {
-		const size = e.target.value;
-		setPageSize(size);
-		setCurrentPage(1);
-
-		fetchData(
-			searchData.content,
-			searchData.status,
-			searchData.startDate,
-			searchData.endDate,
-			orderBy,
-			size,
-			1,
-		);
-	};
-
-	// 상세보기 호출
-	// const handleDetailModal = async (e, id) => {
-	// 	await EventDetailView(token, id).then(data => {
-	// 		setDetailData(data);
-	// 	});
-	//
-	// 	e.preventDefault();
-	// 	handleModalView('detail');
-	// };
-
-	const handleModalView = (type) => {
-		setModalState((prevState) => ({
-			...prevState,
-			[`${type}Modal`]: 'view',
-		}));
-	}
-
-	const handleModalClose = (type) => {
-		setModalState((prevState) => ({
-			...prevState,
-			[`${type}Modal`]: 'hidden',
-		}));
-	}
+	const {
+		config,
+		searchParams,
+		data: dataList,
+		handleSearch,
+		handleReset,
+		handlePageChange,
+		handlePageSizeChange,
+		handleOrderByChange,
+		updateSearchParams,
+		configLoaded
+	} = useCommonSearch(token, "caliumRequestSearch");
 
 	const handleSubmit = async (type, param = null) => {
 		switch (type) {
 			case "detail":
-				setDetailData(param);
-				handleModalView('detail');
+				showModal(param, {
+					type: alertTypes.info
+				});
 				break;
 			case "chargedConfirm":
 				setSelectCharge({id: param.id, count: param.count});
-				handleModalView('chargedConfirm');
-				break;
-			case "charged":
-				handleModalClose('chargedConfirm');
-				setLoading(true);
-				await CaliumCharge(token, selectCharge).then(data => {
-					setLoading(false);
-					if(data.result === "SUCCESS") {
-						setAlertMsg(t('CHARGE_COMPLTED'));
-						handleModalView('chargedComplete');
-					}else if(data.result === "ERROR_CALIUM_FINISH") {
-						setAlertMsg(t('CHARGE_FINISH_FAIL'));
-						handleModalView('chargedComplete');
-					}else{
-						setAlertMsg(t('CHARGE_FAIL'));
-						handleModalView('chargedComplete');
-					}
-					setSelectCharge({});
+				showModal('CALIUM_CHARGE_CONFIRM', {
+					type: alertTypes.confirm,
+					onConfirm: () => handleSubmit('charged')
 				});
 				break;
-			case "chargedComplete":
-				handleModalClose('chargedComplete');
-				await fetchData(
-					searchData.content,
-					searchData.status,
-					searchData.startDate,
-					searchData.endDate
-				);
+			case "charged":
+				await withLoading( async () => {
+					return await CaliumCharge(token, selectCharge);
+				}).then(data => {
+					if(data.result === "SUCCESS") {
+						showToast('CHARGE_COMPLTED', {type: alertTypes.success});
+					}else if(data.result === "ERROR_CALIUM_FINISH") {
+						showToast('CHARGE_FINISH_FAIL', {type: alertTypes.error});
+					}else{
+						showToast('CHARGE_FAIL', {type: alertTypes.error});
+					}
+				}).catch(error => {
+					showToast('API_FAIL', {type: alertTypes.error});
+				}).finally(() =>{
+					setSelectCharge({});
+					handleSearch(updateSearchParams);
+				});
 				break;
 		}
 	}
@@ -178,9 +97,20 @@ const CaliumRequest = () => {
 		<>
 			<Title>칼리움 사용 수량 요청</Title>
 			<FormWrapper>
-				<CaliumRequestSearchBar handleSearch={handleSearch} setResultData={setSearchData} />
+				<CommonSearchBar
+					config={config}
+					searchParams={searchParams}
+					onSearch={(newParams, executeSearch = true) => {
+						if (executeSearch) {
+							handleSearch(newParams);
+						} else {
+							updateSearchParams(newParams);
+						}
+					}}
+					onReset={handleReset}
+				/>
 			</FormWrapper>
-			<ViewTableInfo total={dataList.total} total_all={dataList.total_all} handleOrderBy={handleOrderBy} handlePageSize={handlePageSize} countType={ViewTitleCountType.calium}>
+			<ViewTableInfo total={dataList?.total} total_all={dataList?.total_all} handleOrderBy={handleOrderByChange} handlePageSize={handlePageSizeChange} countType={ViewTitleCountType.calium}>
 				<ExcelDownButton tableRef={tableRef} fileName={t('FILE_CALIUM_REQUEST')} />
 				{userInfo.auth_list && userInfo.auth_list.some(auth => auth.id === authType.eventUpdate) && (
 					<Button
@@ -210,8 +140,7 @@ const CaliumRequest = () => {
 					</tr>
 					</thead>
 					<tbody>
-						{dataList.list &&
-							dataList.list.map(calium => (
+						{dataList?.list?.map(calium => (
 								<Fragment key={calium.row_num}>
 									<tr>
 										{/*<td>{calium.row_num}</td>*/}
@@ -238,39 +167,23 @@ const CaliumRequest = () => {
 				</TableStyle>
 			</TableWrapper>
 
-			<Pagination postsPerPage={pageSize} totalPosts={dataList && dataList.total_all} setCurrentPage={setCurrentPage} currentPage={currentPage} pageLimit={10} />
+			<Pagination
+				postsPerPage={searchParams.pageSize}
+				totalPosts={dataList?.total_all}
+				setCurrentPage={handlePageChange}
+				currentPage={searchParams.currentPage}
+				pageLimit={INITIAL_PAGE_LIMIT}
+			/>
 
-			{/*상세*/}
-			{/*<EventDetailModal detailView={modalState.detailModal} handleDetailView={() => handleModalClose('detail')} content={detailData} setDetailData={setDetailData}/>*/}
+			<CaliumRequestRegistModal
+				registView={modalState.registerModal}
+				setRegistView={() => {
+					handleModalClose('register');
+					handleSearch(updateSearchParams);
+				}}
+				userInfo={userInfo}
+			/>
 
-			<CaliumRequestRegistModal registView={modalState.registerModal} setRegistView={() => handleModalClose('register')} userInfo={userInfo} />
-
-			<DynamicModal
-				modalType={modalTypes.confirmOkCancel}
-				view={modalState.chargedConfirmModal}
-				handleCancel={() => handleModalClose('chargedConfirm')}
-				handleSubmit={() => handleSubmit('charged')}
-				modalText={t('CALIUM_CHARGE_CONFIRM')}
-			/>
-			<DynamicModal
-				modalType={modalTypes.completed}
-				view={modalState.chargedCompleteModal}
-				modalText={alertMsg}
-				handleSubmit={() => handleSubmit('chargedComplete')}
-			/>
-			<DynamicModal
-				modalType={modalTypes.completed}
-				view={modalState.chargedCompleteModal}
-				modalText={alertMsg}
-				handleSubmit={() => handleSubmit('chargedComplete')}
-			/>
-			<DynamicModal
-				modalType={modalTypes.completed}
-				view={modalState.detailModal}
-				modalText={detailData}
-				handleSubmit={() => handleModalClose('detail')}
-			/>
-			{loading && <Loading/>}
 		</>
 	);
 };