-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
df882cb
commit d44f1c3
Showing
9 changed files
with
251 additions
and
47 deletions.
There are no files selected for viewing
Submodule config
updated
from 499029 to c1c4af
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
140 changes: 140 additions & 0 deletions
140
frontend/src/components/Modals/ExtendModal/ExtendModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| import React, { useState } from "react"; | ||
| import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; | ||
| import { | ||
| currentCabinetIdState, | ||
| isCurrentSectionRenderState, | ||
| myCabinetInfoState, | ||
| targetCabinetInfoState, | ||
| userState, | ||
| } from "@/recoil/atoms"; | ||
| import Modal, { IModalContents } from "@/components/Modals/Modal"; | ||
| import ModalPortal from "@/components/Modals/ModalPortal"; | ||
| import { | ||
| FailResponseModal, | ||
| SuccessResponseModal, | ||
| } from "@/components/Modals/ResponseModal/ResponseModal"; | ||
| import { additionalModalType, modalPropsMap } from "@/assets/data/maps"; | ||
| import checkIcon from "@/assets/images/checkIcon.svg"; | ||
| import { MyCabinetInfoResponseDto } from "@/types/dto/cabinet.dto"; | ||
| import { | ||
| axiosCabinetById, | ||
| axiosExtendLentPeriod, | ||
| axiosMyLentInfo, // axiosExtend, // TODO: 연장권 api 생성 후 연결해야 함 | ||
| } from "@/api/axios/axios.custom"; | ||
| import { | ||
| getExtendedDateString, | ||
| getLastDayofMonthString, | ||
| } from "@/utils/dateUtils"; | ||
|
|
||
| const ExtendModal: React.FC<{ | ||
| onClose: () => void; | ||
| cabinetId: Number; | ||
| }> = (props) => { | ||
| const [showResponseModal, setShowResponseModal] = useState<boolean>(false); | ||
| const [hasErrorOnResponse, setHasErrorOnResponse] = useState<boolean>(false); | ||
| const [modalTitle, setModalTitle] = useState<string>(""); | ||
| const currentCabinetId = useRecoilValue(currentCabinetIdState); | ||
| const [myInfo, setMyInfo] = useRecoilState(userState); | ||
| const [myLentInfo, setMyLentInfo] = | ||
| useRecoilState<MyCabinetInfoResponseDto>(myCabinetInfoState); | ||
| const setTargetCabinetInfo = useSetRecoilState(targetCabinetInfoState); | ||
| const setIsCurrentSectionRender = useSetRecoilState( | ||
| isCurrentSectionRenderState | ||
| ); | ||
| const formattedExtendedDate = getExtendedDateString( | ||
| myLentInfo.lents ? myLentInfo.lents[0].expiredAt : undefined | ||
| ); | ||
| const extendDetail = `사물함 연장권 사용 시, | ||
| 대여 기간이 <strong>${formattedExtendedDate} 23:59</strong>으로 | ||
| 연장됩니다. | ||
| 연장권 사용은 취소할 수 없습니다. | ||
| 연장권을 사용하시겠습니까?`; | ||
| const extendInfoDetail = `사물함을 대여하시면 연장권 사용이 가능합니다. | ||
| 연장권은 <strong>${getLastDayofMonthString( | ||
| null, | ||
| "/" | ||
| )} 23:59</strong> 이후 만료됩니다.`; | ||
| const getModalTitle = (cabinetId: number | null) => { | ||
| return cabinetId === null | ||
| ? modalPropsMap[additionalModalType.MODAL_OWN_EXTENSION].title | ||
| : modalPropsMap[additionalModalType.MODAL_USE_EXTENSION].title; | ||
| }; | ||
| const getModalDetail = (cabinetId: number | null) => { | ||
| return cabinetId === null ? extendInfoDetail : extendDetail; | ||
| }; | ||
| const getModalProceedBtnText = (cabinetId: number | null) => { | ||
| return cabinetId === null | ||
| ? modalPropsMap[additionalModalType.MODAL_OWN_EXTENSION].confirmMessage | ||
| : modalPropsMap[additionalModalType.MODAL_USE_EXTENSION].confirmMessage; | ||
| }; | ||
| const tryExtendRequest = async (e: React.MouseEvent) => { | ||
| if (currentCabinetId === 0 || myInfo.cabinetId === null) { | ||
| setHasErrorOnResponse(true); | ||
| setModalTitle("현재 대여중인 사물함이 없습니다."); | ||
| setShowResponseModal(true); | ||
| return; | ||
| } | ||
| try { | ||
| await axiosExtendLentPeriod(); | ||
| setMyInfo({ | ||
| ...myInfo, | ||
| cabinetId: currentCabinetId, | ||
| extensible: false, | ||
| }); | ||
| setIsCurrentSectionRender(true); | ||
| setModalTitle("연장되었습니다"); | ||
| try { | ||
| const { data } = await axiosCabinetById(currentCabinetId); | ||
| setTargetCabinetInfo(data); | ||
| } catch (error) { | ||
| throw error; | ||
| } | ||
| try { | ||
| const { data: myLentInfo } = await axiosMyLentInfo(); | ||
| setMyLentInfo(myLentInfo); | ||
| } catch (error) { | ||
| throw error; | ||
| } | ||
| } catch (error: any) { | ||
| setHasErrorOnResponse(true); | ||
| setModalTitle(error.response.data.message); | ||
| } finally { | ||
| setShowResponseModal(true); | ||
| } | ||
| }; | ||
|
|
||
| const extendModalContents: IModalContents = { | ||
| type: myInfo.cabinetId === null ? "penaltyBtn" : "hasProceedBtn", | ||
| icon: checkIcon, | ||
| title: getModalTitle(myInfo.cabinetId), | ||
| detail: getModalDetail(myInfo.cabinetId), | ||
| proceedBtnText: getModalProceedBtnText(myInfo.cabinetId), | ||
| onClickProceed: | ||
| myInfo.cabinetId === null | ||
| ? async (e: React.MouseEvent) => { | ||
| props.onClose(); | ||
| } | ||
| : tryExtendRequest, | ||
| closeModal: props.onClose, | ||
| }; | ||
|
|
||
| return ( | ||
| <ModalPortal> | ||
| {!showResponseModal && <Modal modalContents={extendModalContents} />} | ||
| {showResponseModal && | ||
| (hasErrorOnResponse ? ( | ||
| <FailResponseModal | ||
| modalTitle={modalTitle} | ||
| closeModal={props.onClose} | ||
| /> | ||
| ) : ( | ||
| <SuccessResponseModal | ||
| modalTitle={modalTitle} | ||
| closeModal={props.onClose} | ||
| /> | ||
| ))} | ||
| </ModalPortal> | ||
| ); | ||
| }; | ||
|
|
||
| export default ExtendModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.