Initial commit: Tapalka monorepo (bot, front, strapi)

CMyTapper/robucks-front/components/ui/modal-exchange/ModalExchangeContainer.tsx

@@ -0,0 +1,116 @@
+'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;