import { useContext, useEffect, useMemo, useState } from 'react';
import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
import {
Box,
ButtonBase,
CircularProgress,
Dialog,
DialogActions,
DialogContent,
Typography,
useTheme,
} from '@mui/material';
import { CustomButtonAccept } from '../../styles/App-styles';
import { getBaseApiReact, MyContext } from '../../App';
import { getFee } from '../../background';
import { CustomizedSnackbars } from '../Snackbar/Snackbar';
import { FidgetSpinner } from 'react-loader-spinner';
import { useAtom, useSetAtom } from 'jotai';
import { memberGroupsAtom, txListAtom } from '../../atoms/global';
import { useTranslation } from 'react-i18next';
export const JoinGroup = () => {
const { show } = useContext(MyContext);
const setTxList = useSetAtom(txListAtom);
const [memberGroups] = useAtom(memberGroupsAtom);
const [openSnack, setOpenSnack] = useState(false);
const [infoSnack, setInfoSnack] = useState(null);
const [groupInfo, setGroupInfo] = useState(null);
const [isLoadingInfo, setIsLoadingInfo] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const theme = useTheme();
const { t } = useTranslation(['core', 'group']);
const [isLoadingJoinGroup, setIsLoadingJoinGroup] = useState(false);
const handleJoinGroup = async (e) => {
setGroupInfo(null);
const groupId = e?.detail?.groupId;
if (groupId) {
try {
setIsOpen(true);
setIsLoadingInfo(true);
const response = await fetch(`${getBaseApiReact()}/groups/${groupId}`);
const groupData = await response.json();
setGroupInfo(groupData);
} catch (error) {
console.log(error);
} finally {
setIsLoadingInfo(false);
}
}
};
useEffect(() => {
subscribeToEvent('globalActionJoinGroup', handleJoinGroup);
return () => {
unsubscribeFromEvent('globalActionJoinGroup', handleJoinGroup);
};
}, []);
const isInGroup = useMemo(() => {
return !!memberGroups.find(
(item) => +item?.groupId === +groupInfo?.groupId
);
}, [memberGroups, groupInfo]);
const joinGroup = async (group, isOpen) => {
try {
const groupId = group.groupId;
const fee = await getFee('JOIN_GROUP');
await show({
message: t('group:question.perform_transaction', {
action: 'JOIN_GROUP',
postProcess: 'capitalizeFirst',
}),
publishFee: fee.fee + ' QORT',
});
setIsLoadingJoinGroup(true);
await new Promise((res, rej) => {
window
.sendMessage('joinGroup', {
groupId,
})
.then((response) => {
if (!response?.error) {
setInfoSnack({
type: 'success',
message: t('group:message.success.group_join', {
postProcess: 'capitalizeFirst',
}),
});
if (isOpen) {
setTxList((prev) => [
{
...response,
type: 'joined-group',
label: t('group:message.success.group_join_label', {
group_name: group?.groupName,
postProcess: 'capitalizeFirst',
}),
labelDone: t('group:message.success.group_join_label', {
group_name: group?.groupName,
postProcess: 'capitalizeFirst',
}),
done: false,
groupId,
},
...prev,
]);
} else {
setTxList((prev) => [
{
...response,
type: 'joined-group-request',
label: t('group:message.success.group_join_request', {
group_name: group?.groupName,
postProcess: 'capitalizeFirst',
}),
labelDone: t('group:message.success.group_join_outcome', {
group_name: group?.groupName,
postProcess: 'capitalizeFirst',
}),
done: false,
groupId,
},
...prev,
]);
}
setOpenSnack(true);
res(response);
return;
} else {
setInfoSnack({
type: 'error',
message: response?.error,
});
setOpenSnack(true);
rej(response.error);
}
})
.catch((error) => {
setInfoSnack({
type: 'error',
message:
error.message ||
t('core:message.error.generic', {
postProcess: 'capitalizeFirst',
}),
});
setOpenSnack(true);
rej(error);
});
});
setIsLoadingJoinGroup(false);
} catch (error) {
console.log(error);
} finally {
setIsLoadingJoinGroup(false);
}
};
return (
<>
{isLoadingJoinGroup && (
)}
);
};