fix: merge errors
This commit is contained in:
Koosha Lahouti
280
src/features/profile/routes/ActiveDevicesPage.tsx
Normal file
280
src/features/profile/routes/ActiveDevicesPage.tsx
Normal file
@@ -0,0 +1,280 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
useTheme,
|
||||
useMediaQuery,
|
||||
CircularProgress,
|
||||
} from '@mui/material';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { DeviceMessage, Logout } from 'iconsax-react';
|
||||
import { CardContainer } from '@/components/CardContainer';
|
||||
import { PageWrapper } from '../components/PageWrapper';
|
||||
import { Icon } from '@rkheftan/harmony-ui';
|
||||
import { fetchProfile, deleteSessions } from '../api/settingsApi';
|
||||
import { type ApiSession } from '../types/settingsApiType';
|
||||
import { useApi } from '@/hooks/useApi';
|
||||
import { formatDate } from '@/utils/formatSessionDate';
|
||||
import { type Device } from '../types/settingsType';
|
||||
|
||||
export function ActiveDevicesPage() {
|
||||
const { t, i18n } = useTranslation('setting');
|
||||
const [devices, setDevices] = useState<Device[]>([]);
|
||||
const [loadingDeleteIds, setLoadingDeleteIds] = useState<string[]>([]);
|
||||
const theme = useTheme();
|
||||
const isXsup = useMediaQuery(theme.breakpoints.up('xs'));
|
||||
|
||||
const {
|
||||
data: profileData,
|
||||
loading: isLoading,
|
||||
error: fetchError,
|
||||
} = useApi(fetchProfile, { immediate: true });
|
||||
|
||||
const {
|
||||
data: terminateData,
|
||||
loading: isTerminating,
|
||||
execute: executeTerminateAll,
|
||||
} = useApi(deleteSessions);
|
||||
|
||||
useEffect(() => {
|
||||
if (profileData?.success && profileData.activeSessions) {
|
||||
const { sessions, currentKey } = profileData.activeSessions;
|
||||
const formattedDevices = sessions.map((session: ApiSession) => ({
|
||||
id: session.key,
|
||||
timeAndDate: formatDate(session.created, i18n.language, t),
|
||||
deviceModel: `${session.deviceOs} ${session.deviceName}`,
|
||||
ip: session.ipAddress,
|
||||
current: session.key === currentKey,
|
||||
}));
|
||||
setDevices(formattedDevices);
|
||||
}
|
||||
}, [profileData, i18n.language, t]);
|
||||
|
||||
useEffect(() => {
|
||||
if (terminateData?.success) {
|
||||
setDevices((prev) => prev.filter((d) => d.current));
|
||||
}
|
||||
}, [terminateData]);
|
||||
|
||||
const handleDeleteDevice = async (id: string) => {
|
||||
if (loadingDeleteIds.includes(id)) return;
|
||||
setLoadingDeleteIds((prev) => [...prev, id]);
|
||||
try {
|
||||
const { data } = await deleteSessions({ keys: [id] });
|
||||
if (data.success) {
|
||||
setDevices((prevDevices) => prevDevices.filter((d) => d.id !== id));
|
||||
} else {
|
||||
console.error('Delete failed:', data.message);
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
console.error('Delete error:', error);
|
||||
} finally {
|
||||
setLoadingDeleteIds((prev) =>
|
||||
prev.filter((loadingId) => loadingId !== id),
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTerminateAllOtherSessions = () => {
|
||||
const otherSessionKeys = devices.filter((d) => !d.current).map((d) => d.id);
|
||||
if (otherSessionKeys.length > 0) {
|
||||
executeTerminateAll({ keys: otherSessionKeys });
|
||||
}
|
||||
};
|
||||
|
||||
const getErrorMessage = (error: unknown): string | null => {
|
||||
if (!error) return null;
|
||||
if (error instanceof Error) return error.message;
|
||||
return String(error);
|
||||
};
|
||||
|
||||
return (
|
||||
<PageWrapper>
|
||||
<CardContainer
|
||||
title={t('active.activeDevices')}
|
||||
subtitle={t('active.activeDevicesCaption')}
|
||||
action={
|
||||
<Button
|
||||
size="medium"
|
||||
variant="outlined"
|
||||
onClick={handleTerminateAllOtherSessions}
|
||||
sx={{
|
||||
borderRadius: 1,
|
||||
borderColor: 'error.main',
|
||||
color: 'error.main',
|
||||
textTransform: 'none',
|
||||
}}
|
||||
disabled={isLoading || isTerminating}
|
||||
>
|
||||
{isTerminating
|
||||
? t('active.deleting')
|
||||
: t('active.deleteDevicesButton')}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
p: 4,
|
||||
minHeight: '200px',
|
||||
}}
|
||||
>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
) : fetchError ? (
|
||||
<Box sx={{ textAlign: 'center', p: 4 }}>
|
||||
<Typography color="error.main">
|
||||
{getErrorMessage(fetchError)}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
px: { xs: 2, sm: 3, md: 4 },
|
||||
py: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
{devices.map((device) => (
|
||||
<React.Fragment key={device.id}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
alignItems: { xs: 'flex-start', sm: 'center' },
|
||||
minHeight: 50,
|
||||
py: 1.5,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
flexBasis: { xs: '100%', sm: 'auto' },
|
||||
mb: { xs: 1, sm: 0 },
|
||||
minWidth: { sm: '138px' },
|
||||
order: { xs: 1, sm: 1 },
|
||||
}}
|
||||
>
|
||||
{device.timeAndDate}
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
width: '100%',
|
||||
order: { xs: 2, sm: 2 },
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
Component={DeviceMessage}
|
||||
size="medium"
|
||||
color="primary.main"
|
||||
/>
|
||||
<Typography variant="body2" noWrap>
|
||||
{device.deviceModel}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
flexBasis: { xs: '100%', sm: 'auto' },
|
||||
mb: { xs: 1, sm: 0 },
|
||||
minWidth: { sm: '138px' },
|
||||
order: { xs: 3, sm: 3 },
|
||||
}}
|
||||
>
|
||||
{device.ip}
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
flexBasis: { xs: '100%', sm: 'auto' },
|
||||
mb: { xs: 1, sm: 0 },
|
||||
minWidth: { sm: '138px' },
|
||||
order: { xs: 4, sm: 4 },
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{device.current && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="medium"
|
||||
sx={{
|
||||
borderRadius: 12.5,
|
||||
border: '1px solid',
|
||||
borderColor: 'success.main',
|
||||
whiteSpace: 'nowrap',
|
||||
color: 'success.main',
|
||||
textTransform: 'none',
|
||||
'&.Mui-disabled': {
|
||||
color: 'success.main',
|
||||
borderColor: 'success.main',
|
||||
},
|
||||
}}
|
||||
disabled
|
||||
>
|
||||
{t('active.currentDevice')}
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
flexBasis: { xs: '100%', sm: 'auto' },
|
||||
mb: { xs: 1, sm: 0 },
|
||||
textAlign: { xs: 'left', sm: 'center' },
|
||||
minWidth: { sm: '138px' },
|
||||
order: { xs: 5, sm: 5 },
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={<Icon Component={Logout} size="small" />}
|
||||
disabled={
|
||||
device.current || loadingDeleteIds.includes(device.id)
|
||||
}
|
||||
onClick={() => handleDeleteDevice(device.id)}
|
||||
sx={{
|
||||
color: 'error.main',
|
||||
borderRadius: 1,
|
||||
borderColor: 'error.main',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
whiteSpace: 'nowrap',
|
||||
textTransform: 'none',
|
||||
'& .MuiButton-startIcon': {
|
||||
marginRight: 0.5,
|
||||
marginLeft: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{loadingDeleteIds.includes(device.id) ? (
|
||||
<CircularProgress size={20} color="error" />
|
||||
) : (
|
||||
t('active.deleteDevice')
|
||||
)}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
{isXsup && (
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</CardContainer>
|
||||
</PageWrapper>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user