Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-09 09:56:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove unused imports

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-13 21:52:05 +02:00
parent 156fe1b61f
commit 7e98c33c11
1 changed files with 245 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

461
src/components/Group/QMailMessages.tsx
View File

@ -1,14 +1,12 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react' import { useCallback, useEffect, useMemo, useState } from 'react';
import List from "@mui/material/List"; import List from '@mui/material/List';
import ListItem from "@mui/material/ListItem"; import ListItem from '@mui/material/ListItem';
import ListItemButton from "@mui/material/ListItemButton"; import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from "@mui/material/ListItemText"; import ListItemText from '@mui/material/ListItemText';
import moment from 'moment' import moment from 'moment';
import { Box, ButtonBase, Collapse, Typography } from "@mui/material"; import { Box, ButtonBase, Collapse, Typography } from '@mui/material';
import { Spacer } from "../../common/Spacer"; import { getBaseApiReact, isMobile } from '../../App';
import { getBaseApiReact, isMobile } from "../../App";
import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
import MailIcon from '@mui/icons-material/Mail'; import MailIcon from '@mui/icons-material/Mail';
import MailOutlineIcon from '@mui/icons-material/MailOutline'; import MailOutlineIcon from '@mui/icons-material/MailOutline';
import { executeEvent } from '../../utils/events'; import { executeEvent } from '../../utils/events';
@ -18,262 +16,279 @@ import { mailsAtom, qMailLastEnteredTimestampAtom } from '../../atoms/global';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ExpandLessIcon from '@mui/icons-material/ExpandLess'; import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import MarkEmailUnreadIcon from '@mui/icons-material/MarkEmailUnread'; import MarkEmailUnreadIcon from '@mui/icons-material/MarkEmailUnread';
export const isLessThanOneWeekOld = (timestamp) => { export const isLessThanOneWeekOld = (timestamp) => {
// Current time in milliseconds // Current time in milliseconds
const now = Date.now(); const now = Date.now();
// One week ago in milliseconds (7 days * 24 hours * 60 minutes * 60 seconds * 1000 milliseconds) // One week ago in milliseconds (7 days * 24 hours * 60 minutes * 60 seconds * 1000 milliseconds)
const oneWeekAgo = now - (7 * 24 * 60 * 60 * 1000); const oneWeekAgo = now - 7 * 24 * 60 * 60 * 1000;
// Check if the timestamp is newer than one week ago // Check if the timestamp is newer than one week ago
return timestamp > oneWeekAgo; return timestamp > oneWeekAgo;
}; };
export function formatEmailDate(timestamp: number) { export function formatEmailDate(timestamp: number) {
const date = moment(timestamp); const date = moment(timestamp);
const now = moment(); const now = moment();
if (date.isSame(now, 'day')) { if (date.isSame(now, 'day')) {
// If the email was received today, show the time // If the email was received today, show the time
return date.format('h:mm A'); return date.format('h:mm A');
} else if (date.isSame(now, 'year')) { } else if (date.isSame(now, 'year')) {
// If the email was received this year, show the month and day // If the email was received this year, show the month and day
return date.format('MMM D'); return date.format('MMM D');
} else { } else {
// For older emails, show the full date // For older emails, show the full date
return date.format('MMM D, YYYY'); return date.format('MMM D, YYYY');
} }
} }
export const QMailMessages = ({userName, userAddress}) => {
const [isExpanded, setIsExpanded] = useState(false)
const [mails, setMails] = useRecoilState(mailsAtom)
const [lastEnteredTimestamp, setLastEnteredTimestamp] = useRecoilState(qMailLastEnteredTimestampAtom)
const [loading, setLoading] = useState(true)
const getMails = useCallback(async () => { export const QMailMessages = ({ userName, userAddress }) => {
try { const [isExpanded, setIsExpanded] = useState(false);
setLoading(true) const [mails, setMails] = useRecoilState(mailsAtom);
const query = `qortal_qmail_${userName.slice( const [lastEnteredTimestamp, setLastEnteredTimestamp] = useRecoilState(
0, qMailLastEnteredTimestampAtom
20 );
)}_${userAddress.slice(-6)}_mail_` const [loading, setLoading] = useState(true);
const response = await fetch(`${getBaseApiReact()}/arbitrary/resources/search?service=MAIL_PRIVATE&query=${query}&limit=10&includemetadata=false&offset=0&reverse=true&excludeblocked=true&mode=ALL`);
const mailData = await response.json();
const getMails = useCallback(async () => {
try {
setLoading(true);
const query = `qortal_qmail_${userName.slice(
0,
20
)}_${userAddress.slice(-6)}_mail_`;
const response = await fetch(
`${getBaseApiReact()}/arbitrary/resources/search?service=MAIL_PRIVATE&query=${query}&limit=10&includemetadata=false&offset=0&reverse=true&excludeblocked=true&mode=ALL`
);
const mailData = await response.json();
setMails(mailData); setMails(mailData);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} finally { } finally {
setLoading(false) setLoading(false);
}
}, []);
} const getTimestamp = async () => {
}, []) try {
return new Promise((res, rej) => {
const getTimestamp = async () => { window
try { .sendMessage('getEnteredQmailTimestamp')
return new Promise((res, rej) => { .then((response) => {
window.sendMessage("getEnteredQmailTimestamp") if (!response?.error) {
.then((response) => { if (response?.timestamp) {
if (!response?.error) { setLastEnteredTimestamp(response?.timestamp);
if(response?.timestamp){
setLastEnteredTimestamp(response?.timestamp)
}
} }
rej(response.error); }
}) rej(response.error);
.catch((error) => { })
rej(error.message || "An error occurred"); .catch((error) => {
}); rej(error.message || 'An error occurred');
}); });
} catch (error) {} });
}; } catch (error) {}
};
useEffect(() => { useEffect(() => {
getTimestamp() getTimestamp();
if(!userName || !userAddress) return if (!userName || !userAddress) return;
getMails(); getMails();
const interval = setInterval(() => { const interval = setInterval(() => {
getTimestamp() getTimestamp();
getMails(); getMails();
}, 300000); }, 300000);
return () => clearInterval(interval); return () => clearInterval(interval);
}, [getMails, userName, userAddress]);
}, [getMails, userName, userAddress]); const anyUnread = useMemo(() => {
let unread = false;
const anyUnread = useMemo(()=> { mails.forEach((mail) => {
let unread = false if (
(!lastEnteredTimestamp && isLessThanOneWeekOld(mail?.created)) ||
mails.forEach((mail)=> { (lastEnteredTimestamp &&
if(!lastEnteredTimestamp && isLessThanOneWeekOld(mail?.created) || (lastEnteredTimestamp && isLessThanOneWeekOld(mail?.created) && lastEnteredTimestamp < mail?.created)){ isLessThanOneWeekOld(mail?.created) &&
unread = true lastEnteredTimestamp < mail?.created)
} ) {
}) unread = true;
return unread }
}, [mails, lastEnteredTimestamp]) });
return unread;
}, [mails, lastEnteredTimestamp]);
return ( return (
<Box <Box
sx={{
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<ButtonBase
sx={{ sx={{
width: "322px", width: '100%',
display: "flex", display: 'flex',
flexDirection: "row", flexDirection: 'column',
gap: '10px', alignItems: 'center',
padding: "0px 20px",
justifyContent: 'flex-start'
}} }}
onClick={()=> setIsExpanded((prev)=> !prev)}
> >
<Typography <ButtonBase
sx={{ sx={{
fontSize: "1rem", width: '322px',
display: 'flex',
flexDirection: 'row',
gap: '10px',
padding: '0px 20px',
justifyContent: 'flex-start',
}} }}
onClick={() => setIsExpanded((prev) => !prev)}
> >
Latest Q-Mails <Typography
</Typography> sx={{
<MarkEmailUnreadIcon sx={{ fontSize: '1rem',
color: anyUnread ? 'var(--unread)' : 'white' }}
}}/> >
{isExpanded ? <ExpandLessIcon sx={{ Latest Q-Mails
marginLeft: 'auto' </Typography>
}} /> : ( <MarkEmailUnreadIcon
<ExpandMoreIcon sx={{ sx={{
color: anyUnread ? 'var(--unread)' : 'white', color: anyUnread ? 'var(--unread)' : 'white',
marginLeft: 'auto' }}
}} /> />
)} {isExpanded ? (
</ButtonBase> <ExpandLessIcon
<Collapse in={isExpanded} timeout="auto" unmountOnExit>
<Box
className="scrollable-container"
sx={{
width: "322px",
height: isMobile ? "165px" : "250px",
display: "flex",
flexDirection: "column",
bgcolor: "background.paper",
padding: "20px",
borderRadius: "19px",
overflow: 'auto'
}}
>
{loading && mails.length === 0 && (
<Box
sx={{ sx={{
width: "100%", marginLeft: 'auto',
display: "flex",
justifyContent: "center",
}} }}
> />
<CustomLoader /> ) : (
</Box> <ExpandMoreIcon
sx={{
color: anyUnread ? 'var(--unread)' : 'white',
marginLeft: 'auto',
}}
/>
)} )}
{!loading && mails.length === 0 && ( </ButtonBase>
<Box <Collapse in={isExpanded} timeout="auto" unmountOnExit>
sx={{ <Box
width: "100%", className="scrollable-container"
display: "flex", sx={{
justifyContent: "center", width: '322px',
alignItems: 'center', height: isMobile ? '165px' : '250px',
height: '100%', display: 'flex',
flexDirection: 'column',
}} bgcolor: 'background.paper',
> padding: '20px',
<Typography borderRadius: '19px',
overflow: 'auto',
}}
>
{loading && mails.length === 0 && (
<Box
sx={{ sx={{
fontSize: "11px", width: '100%',
fontWeight: 400, display: 'flex',
color: 'rgba(255, 255, 255, 0.2)' justifyContent: 'center',
}} }}
> >
Nothing to display <CustomLoader />
</Typography> </Box>
</Box> )}
)} {!loading && mails.length === 0 && (
<Box
sx={{
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100%',
}}
>
<Typography
sx={{
fontSize: '11px',
fontWeight: 400,
color: 'rgba(255, 255, 255, 0.2)',
}}
>
Nothing to display
</Typography>
</Box>
)}
<List sx={{ width: "100%", maxWidth: 360 }}> <List sx={{ width: '100%', maxWidth: 360 }}>
{mails?.map((mail)=> { {mails?.map((mail) => {
return ( return (
<ListItem <ListItem
disablePadding
disablePadding sx={{
marginBottom: '20px',
}}
onClick={() => {
executeEvent('addTab', {
data: { service: 'APP', name: 'q-mail' },
});
executeEvent('open-apps-mode', {});
setLastEnteredTimestamp(Date.now());
}}
>
<ListItemButton
sx={{ sx={{
marginBottom: '20px' padding: '0px',
}}
onClick={()=> {
executeEvent("addTab", { data: { service: 'APP', name: 'q-mail' } });
executeEvent("open-apps-mode", { });
setLastEnteredTimestamp(Date.now())
}} }}
disableRipple
role={undefined}
dense
> >
<ListItemButton <ListItemText
sx={{ sx={{
padding: "0px", '& .MuiTypography-root': {
fontSize: '13px',
fontWeight: 400,
},
}}
primary={`From: ${mail?.name}`}
secondary={`${formatEmailDate(mail?.created)}`}
/>
<ListItemIcon
sx={{
justifyContent: 'flex-end',
}} }}
disableRipple
role={undefined}
dense
> >
<ListItemText {!lastEnteredTimestamp &&
sx={{ isLessThanOneWeekOld(mail?.created) ? (
"& .MuiTypography-root": { <MailIcon
fontSize: "13px", sx={{
fontWeight: 400, color: 'var(--unread)',
}, }}
}} />
primary={`From: ${mail?.name}`} ) : !lastEnteredTimestamp ? (
secondary={`${formatEmailDate(mail?.created)}`} <MailOutlineIcon
/> sx={{
<ListItemIcon color: 'white',
sx={{ }}
justifyContent: "flex-end", />
}} ) : lastEnteredTimestamp < mail?.created &&
> isLessThanOneWeekOld(mail?.created) ? (
{!lastEnteredTimestamp && isLessThanOneWeekOld(mail?.created) ? ( <MailIcon
<MailIcon sx={{ sx={{
color: 'var(--unread)' color: 'var(--unread)',
}} /> }}
) : !lastEnteredTimestamp ? ( />
<MailOutlineIcon sx={{ ) : (
color: 'white' <MailOutlineIcon
}} /> sx={{
): (lastEnteredTimestamp < mail?.created) && isLessThanOneWeekOld(mail?.created) ? ( color: 'white',
<MailIcon sx={{ }}
color: 'var(--unread)' />
}} /> )}
) : ( </ListItemIcon>
<MailOutlineIcon sx={{ </ListItemButton>
color: 'white' </ListItem>
}} /> );
)
}
</ListItemIcon>
</ListItemButton>
</ListItem>
)
})} })}
</List>
</Box>
</List> </Collapse>
</Box> </Box>
</Collapse> );
</Box> };
)
}