117 lines
4.0 KiB
TypeScript
117 lines
4.0 KiB
TypeScript
'use client';
|
|
|
|
import { FC, useCallback, useEffect, useRef, useState } from 'react';
|
|
import ModalExchange from '@/components/ui/modal-exchange/ModalExchange';
|
|
import { usePlayerStore } from '@/store/player.state';
|
|
import { useConfigStore } from '@/store/config.state';
|
|
import { useNotify } from '@/hooks/useNotify';
|
|
import { ExchangeRequestApi } from '@/api/exchange-request.api';
|
|
import { useModalStore } from '@/store/modal.state';
|
|
import { useTokenStore } from '@/store/token.state';
|
|
import { toFixed } from '@/utils/FormatNumber';
|
|
|
|
interface IModalExchangeContainer {
|
|
isOpen: boolean;
|
|
balance: number | undefined;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const ModalExchangeContainer: FC<IModalExchangeContainer> = ({ balance, isOpen, onClose }) => {
|
|
const { token } = useTokenStore();
|
|
|
|
const [amount, setAmount] = useState<number>(1);
|
|
const [nickname, setNickname] = useState<string>('');
|
|
const [isClosing, setIsClosing] = useState<boolean>(false);
|
|
|
|
const rangeRef = useRef<HTMLInputElement>(null);
|
|
|
|
const { player, setPlayer } = usePlayerStore();
|
|
const { config } = useConfigStore();
|
|
const { shopItemId, isDecimal, image, setShopItemId, setIsDecimal } = useModalStore();
|
|
|
|
const { getSuccessNotify, getErrorNotifyByCount, getErrorNotifyByNickname } = useNotify();
|
|
|
|
useEffect(() => {
|
|
if (rangeRef.current) {
|
|
rangeRef.current.style.setProperty('--value', amount.toString());
|
|
}
|
|
}, [amount]);
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setIsClosing(false);
|
|
setAmount(0);
|
|
}
|
|
}, [isOpen]);
|
|
|
|
const handleClose = () => {
|
|
setIsClosing(true);
|
|
setTimeout(() => {
|
|
onClose();
|
|
}, 500);
|
|
};
|
|
|
|
const handleCreateExchange = useCallback(
|
|
async (amount: number, total: number, nickname: string) => {
|
|
if (!token) {
|
|
return;
|
|
}
|
|
const exchangeRequestApi = ExchangeRequestApi.getInstance(token);
|
|
if (player && config) {
|
|
if (nickname.length === 0) {
|
|
getErrorNotifyByNickname();
|
|
} else if (total === 0) {
|
|
getErrorNotifyByCount();
|
|
} else {
|
|
exchangeRequestApi
|
|
.createExchange({
|
|
amount: amount,
|
|
total: total,
|
|
playerId: player.id,
|
|
nickname: nickname,
|
|
balance: player.attributes.balance,
|
|
telegram_id: config.attributes.admins.data.map(
|
|
user => user.attributes.telegram_id,
|
|
),
|
|
shop_item: shopItemId || undefined,
|
|
archive_request_id: player!.attributes.archive_request!.data?.id || -1,
|
|
})
|
|
.then(() => {
|
|
if (player) {
|
|
setPlayer({
|
|
...player,
|
|
attributes: {
|
|
...player.attributes,
|
|
balance: toFixed(player?.attributes.balance) - amount,
|
|
},
|
|
});
|
|
setShopItemId(null);
|
|
setIsDecimal(true);
|
|
}
|
|
});
|
|
getSuccessNotify();
|
|
handleClose();
|
|
}
|
|
}
|
|
},
|
|
[player, token, shopItemId],
|
|
);
|
|
|
|
return (
|
|
<ModalExchange
|
|
isOpen={isOpen}
|
|
isClosing={isClosing}
|
|
balance={balance}
|
|
amount={amount}
|
|
nickname={nickname}
|
|
rangeRef={rangeRef}
|
|
onClose={handleClose}
|
|
setNickname={setNickname}
|
|
setAmount={setAmount}
|
|
handleCreateExchange={handleCreateExchange}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default ModalExchangeContainer;
|