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

251
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,16 +16,18 @@ 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();
@ -43,137 +43,151 @@ export function formatEmailDate(timestamp: number) {
return date.format('MMM D, YYYY'); return date.format('MMM D, YYYY');
} }
} }
export const QMailMessages = ({userName, userAddress}) => {
const [isExpanded, setIsExpanded] = useState(false) export const QMailMessages = ({ userName, userAddress }) => {
const [mails, setMails] = useRecoilState(mailsAtom) const [isExpanded, setIsExpanded] = useState(false);
const [lastEnteredTimestamp, setLastEnteredTimestamp] = useRecoilState(qMailLastEnteredTimestampAtom) const [mails, setMails] = useRecoilState(mailsAtom);
const [loading, setLoading] = useState(true) const [lastEnteredTimestamp, setLastEnteredTimestamp] = useRecoilState(
qMailLastEnteredTimestampAtom
);
const [loading, setLoading] = useState(true);
const getMails = useCallback(async () => { const getMails = useCallback(async () => {
try { try {
setLoading(true) setLoading(true);
const query = `qortal_qmail_${userName.slice( const query = `qortal_qmail_${userName.slice(
0, 0,
20 20
)}_${userAddress.slice(-6)}_mail_` )}_${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 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 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 () => { const getTimestamp = async () => {
try { try {
return new Promise((res, rej) => { return new Promise((res, rej) => {
window.sendMessage("getEnteredQmailTimestamp") window
.sendMessage('getEnteredQmailTimestamp')
.then((response) => { .then((response) => {
if (!response?.error) { if (!response?.error) {
if(response?.timestamp){ if (response?.timestamp) {
setLastEnteredTimestamp(response?.timestamp) setLastEnteredTimestamp(response?.timestamp);
} }
} }
rej(response.error); rej(response.error);
}) })
.catch((error) => { .catch((error) => {
rej(error.message || "An error occurred"); 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(()=> { const anyUnread = useMemo(() => {
let unread = false let unread = false;
mails.forEach((mail)=> { mails.forEach((mail) => {
if(!lastEnteredTimestamp && isLessThanOneWeekOld(mail?.created) || (lastEnteredTimestamp && isLessThanOneWeekOld(mail?.created) && lastEnteredTimestamp < mail?.created)){ if (
unread = true (!lastEnteredTimestamp && isLessThanOneWeekOld(mail?.created)) ||
(lastEnteredTimestamp &&
isLessThanOneWeekOld(mail?.created) &&
lastEnteredTimestamp < mail?.created)
) {
unread = true;
} }
}) });
return unread return unread;
}, [mails, lastEnteredTimestamp]) }, [mails, lastEnteredTimestamp]);
return ( return (
<Box <Box
sx={{ sx={{
width: "100%", width: '100%',
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
alignItems: "center", alignItems: 'center',
}} }}
> >
<ButtonBase <ButtonBase
sx={{ sx={{
width: "322px", width: '322px',
display: "flex", display: 'flex',
flexDirection: "row", flexDirection: 'row',
gap: '10px', gap: '10px',
padding: "0px 20px", padding: '0px 20px',
justifyContent: 'flex-start' justifyContent: 'flex-start',
}} }}
onClick={()=> setIsExpanded((prev)=> !prev)} onClick={() => setIsExpanded((prev) => !prev)}
> >
<Typography <Typography
sx={{ sx={{
fontSize: "1rem", fontSize: '1rem',
}} }}
> >
Latest Q-Mails Latest Q-Mails
</Typography> </Typography>
<MarkEmailUnreadIcon sx={{ <MarkEmailUnreadIcon
color: anyUnread ? 'var(--unread)' : 'white' sx={{
}}/>
{isExpanded ? <ExpandLessIcon sx={{
marginLeft: 'auto'
}} /> : (
<ExpandMoreIcon sx={{
color: anyUnread ? 'var(--unread)' : 'white', color: anyUnread ? 'var(--unread)' : 'white',
marginLeft: 'auto' }}
}} /> />
{isExpanded ? (
<ExpandLessIcon
sx={{
marginLeft: 'auto',
}}
/>
) : (
<ExpandMoreIcon
sx={{
color: anyUnread ? 'var(--unread)' : 'white',
marginLeft: 'auto',
}}
/>
)} )}
</ButtonBase> </ButtonBase>
<Collapse in={isExpanded} timeout="auto" unmountOnExit> <Collapse in={isExpanded} timeout="auto" unmountOnExit>
<Box <Box
className="scrollable-container" className="scrollable-container"
sx={{ sx={{
width: "322px", width: '322px',
height: isMobile ? "165px" : "250px", height: isMobile ? '165px' : '250px',
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
bgcolor: "background.paper", bgcolor: 'background.paper',
padding: "20px", padding: '20px',
borderRadius: "19px", borderRadius: '19px',
overflow: 'auto' overflow: 'auto',
}} }}
> >
{loading && mails.length === 0 && ( {loading && mails.length === 0 && (
<Box <Box
sx={{ sx={{
width: "100%", width: '100%',
display: "flex", display: 'flex',
justifyContent: "center", justifyContent: 'center',
}} }}
> >
<CustomLoader /> <CustomLoader />
@ -182,19 +196,18 @@ export const QMailMessages = ({userName, userAddress}) => {
{!loading && mails.length === 0 && ( {!loading && mails.length === 0 && (
<Box <Box
sx={{ sx={{
width: "100%", width: '100%',
display: "flex", display: 'flex',
justifyContent: "center", justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
height: '100%', height: '100%',
}} }}
> >
<Typography <Typography
sx={{ sx={{
fontSize: "11px", fontSize: '11px',
fontWeight: 400, fontWeight: 400,
color: 'rgba(255, 255, 255, 0.2)' color: 'rgba(255, 255, 255, 0.2)',
}} }}
> >
Nothing to display Nothing to display
@ -202,25 +215,25 @@ export const QMailMessages = ({userName, userAddress}) => {
</Box> </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={{ sx={{
marginBottom: '20px' marginBottom: '20px',
}} }}
onClick={()=> { onClick={() => {
executeEvent("addTab", { data: { service: 'APP', name: 'q-mail' } }); executeEvent('addTab', {
executeEvent("open-apps-mode", { }); data: { service: 'APP', name: 'q-mail' },
setLastEnteredTimestamp(Date.now()) });
executeEvent('open-apps-mode', {});
setLastEnteredTimestamp(Date.now());
}} }}
> >
<ListItemButton <ListItemButton
sx={{ sx={{
padding: "0px", padding: '0px',
}} }}
disableRipple disableRipple
role={undefined} role={undefined}
@ -228,8 +241,8 @@ export const QMailMessages = ({userName, userAddress}) => {
> >
<ListItemText <ListItemText
sx={{ sx={{
"& .MuiTypography-root": { '& .MuiTypography-root': {
fontSize: "13px", fontSize: '13px',
fontWeight: 400, fontWeight: 400,
}, },
}} }}
@ -238,42 +251,44 @@ export const QMailMessages = ({userName, userAddress}) => {
/> />
<ListItemIcon <ListItemIcon
sx={{ sx={{
justifyContent: "flex-end", justifyContent: 'flex-end',
}} }}
> >
{!lastEnteredTimestamp && isLessThanOneWeekOld(mail?.created) ? ( {!lastEnteredTimestamp &&
<MailIcon sx={{ isLessThanOneWeekOld(mail?.created) ? (
color: 'var(--unread)' <MailIcon
}} /> sx={{
color: 'var(--unread)',
}}
/>
) : !lastEnteredTimestamp ? ( ) : !lastEnteredTimestamp ? (
<MailOutlineIcon sx={{ <MailOutlineIcon
color: 'white' sx={{
}} /> color: 'white',
): (lastEnteredTimestamp < mail?.created) && isLessThanOneWeekOld(mail?.created) ? ( }}
<MailIcon sx={{ />
color: 'var(--unread)' ) : lastEnteredTimestamp < mail?.created &&
}} /> isLessThanOneWeekOld(mail?.created) ? (
<MailIcon
sx={{
color: 'var(--unread)',
}}
/>
) : ( ) : (
<MailOutlineIcon sx={{ <MailOutlineIcon
color: 'white' sx={{
}} /> color: 'white',
) }}
} />
)}
</ListItemIcon> </ListItemIcon>
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
) );
})} })}
</List> </List>
</Box> </Box>
</Collapse> </Collapse>
</Box> </Box>
) );
} };