diff --git a/src/@types/index.d.ts b/src/@types/index.d.ts index 17269c81..0f878aa5 100644 --- a/src/@types/index.d.ts +++ b/src/@types/index.d.ts @@ -131,6 +131,7 @@ export type MarketplaceRequest = { classes?: Array, pending_motive?: DirectExchangePendingMotive, accepted: boolean, + canceled: boolean } export type DirectExchangeRequest = { diff --git a/src/api/services/exchangeRequestService.ts b/src/api/services/exchangeRequestService.ts index 2c35fa13..69423553 100644 --- a/src/api/services/exchangeRequestService.ts +++ b/src/api/services/exchangeRequestService.ts @@ -120,6 +120,16 @@ const acceptDirectExchangeRequest = async (id: number) => { }); } +const cancelMarketplaceRequest = async (id: number) => { + return fetch(`${api.BACKEND_URL}/exchange/marketplace/${id}/cancel/`, { + method: "PUT", + credentials: "include", + headers: { + "X-CSRFToken": api.getCSRFToken(), + }, + }); +} + const exchangeRequestService = { submitExchangeRequest, retrieveMarketplaceRequest, @@ -128,7 +138,8 @@ const exchangeRequestService = { adminAcceptExchangeRequest, adminMarkRequestAsAwaitingInformation, verifyExchangeRequest, - acceptDirectExchangeRequest + acceptDirectExchangeRequest, + cancelMarketplaceRequest } export default exchangeRequestService; \ No newline at end of file diff --git a/src/components/exchange/requests/view/cards/CommonCardHeader.tsx b/src/components/exchange/requests/view/cards/CommonCardHeader.tsx index 03d0bf36..aef1f1fd 100644 --- a/src/components/exchange/requests/view/cards/CommonCardHeader.tsx +++ b/src/components/exchange/requests/view/cards/CommonCardHeader.tsx @@ -33,7 +33,7 @@ export const CommonCardHeader = ({ useEffect(() => { if (!showRequestStatus) return; - if ((request as DirectExchangeRequest).canceled) { + if (request.canceled) { setRequestStatus(StudentRequestCardStatus.CANCELED); return; } diff --git a/src/components/exchange/requests/view/cards/MineRequestCard.tsx b/src/components/exchange/requests/view/cards/MineRequestCard.tsx index 21e6fb70..e2d5db46 100644 --- a/src/components/exchange/requests/view/cards/MineRequestCard.tsx +++ b/src/components/exchange/requests/view/cards/MineRequestCard.tsx @@ -5,15 +5,24 @@ import SessionContext from "../../../../../contexts/SessionContext"; import { Card, CardContent, CardFooter } from "../../../../ui/card" import { CommonCardHeader } from "./CommonCardHeader"; import { ListRequestChanges } from "./ListRequestChanges"; +import { Button } from "../../../../ui/button"; +import useCancelMarketplaceExchange from "../../../../../hooks/exchange/useCancelMarketplaceExchange"; +import { MoonLoader } from "react-spinners"; +import { StudentRequestCardStatus } from "../../../../../utils/requests"; type Props = { request: MarketplaceRequest } export const MineRequestCard = ({ request }: Props) => { - const { open, setOpen, selectedOptions, setSelectedOptions, setSelectAll, togglePreview } = useContext(ExchangeRequestCommonContext); + const { + open, setOpen, selectedOptions, setSelectedOptions, setSelectAll, togglePreview, + setRequestStatus + } = useContext(ExchangeRequestCommonContext); const [hovered, setHovered] = useState(false); + const { trigger: cancelMarketplaceExchange, isMutating: cancelingMarketplaceExchange } = useCancelMarketplaceExchange(request.id); + const { user } = useContext(SessionContext); return { )} - {/*
*/} - {/*
*/} - {/* {!request.accepted && request.pending_motive === DirectExchangePendingMotive.USER_DID_NOT_ACCEPT && */} - {/* */} - {/* } */} - {/*
*/} - {/*
*/} - + {(!request.canceled || !request.accepted) && + }
-
} diff --git a/src/hooks/exchange/useCancelMarketplaceExchange.tsx b/src/hooks/exchange/useCancelMarketplaceExchange.tsx new file mode 100644 index 00000000..25b31b06 --- /dev/null +++ b/src/hooks/exchange/useCancelMarketplaceExchange.tsx @@ -0,0 +1,22 @@ +import useSWRMutation from "swr/mutation"; +import exchangeRequestService from "../../api/services/exchangeRequestService"; + +export default (id: number) => { + const submit = async () => { + return await exchangeRequestService.cancelMarketplaceRequest(id); + } + + const { error, trigger, isMutating } = useSWRMutation( + `${id}`, + submit + ); + + return { + error, + trigger, + isMutating + }; +}; + + +