mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-06-09 01:46:58 +00:00
Remove unused imports
This commit is contained in:
Nicola Benaglia
parent
156fe1b61f
commit
7e98c33c11
@ -1,14 +1,12 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import List from "@mui/material/List";
|
||||
import ListItem from "@mui/material/ListItem";
|
||||
import ListItemButton from "@mui/material/ListItemButton";
|
||||
import ListItemIcon from "@mui/material/ListItemIcon";
|
||||
import ListItemText from "@mui/material/ListItemText";
|
||||
import moment from 'moment'
|
||||
import { Box, ButtonBase, Collapse, Typography } from "@mui/material";
|
||||
import { Spacer } from "../../common/Spacer";
|
||||
import { getBaseApiReact, isMobile } from "../../App";
|
||||
import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import moment from 'moment';
|
||||
import { Box, ButtonBase, Collapse, Typography } from '@mui/material';
|
||||
import { getBaseApiReact, isMobile } from '../../App';
|
||||
import MailIcon from '@mui/icons-material/Mail';
|
||||
import MailOutlineIcon from '@mui/icons-material/MailOutline';
|
||||
import { executeEvent } from '../../utils/events';
|
||||
@ -18,16 +16,18 @@ import { mailsAtom, qMailLastEnteredTimestampAtom } from '../../atoms/global';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
|
||||
import MarkEmailUnreadIcon from '@mui/icons-material/MarkEmailUnread';
|
||||
|
||||
export const isLessThanOneWeekOld = (timestamp) => {
|
||||
// Current time in milliseconds
|
||||
const now = Date.now();
|
||||
|
||||
// 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
|
||||
return timestamp > oneWeekAgo;
|
||||
};
|
||||
|
||||
export function formatEmailDate(timestamp: number) {
|
||||
const date = moment(timestamp);
|
||||
const now = moment();
|
||||
@ -43,137 +43,151 @@ export function formatEmailDate(timestamp: number) {
|
||||
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 [isExpanded, setIsExpanded] = useState(false);
|
||||
const [mails, setMails] = useRecoilState(mailsAtom);
|
||||
const [lastEnteredTimestamp, setLastEnteredTimestamp] = useRecoilState(
|
||||
qMailLastEnteredTimestampAtom
|
||||
);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const getMails = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
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`);
|
||||
)}_${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);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false)
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
}, [])
|
||||
}, []);
|
||||
|
||||
const getTimestamp = async () => {
|
||||
try {
|
||||
return new Promise((res, rej) => {
|
||||
window.sendMessage("getEnteredQmailTimestamp")
|
||||
window
|
||||
.sendMessage('getEnteredQmailTimestamp')
|
||||
.then((response) => {
|
||||
if (!response?.error) {
|
||||
if (response?.timestamp) {
|
||||
setLastEnteredTimestamp(response?.timestamp)
|
||||
setLastEnteredTimestamp(response?.timestamp);
|
||||
}
|
||||
}
|
||||
rej(response.error);
|
||||
})
|
||||
.catch((error) => {
|
||||
rej(error.message || "An error occurred");
|
||||
rej(error.message || 'An error occurred');
|
||||
});
|
||||
|
||||
});
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getTimestamp()
|
||||
if(!userName || !userAddress) return
|
||||
getTimestamp();
|
||||
if (!userName || !userAddress) return;
|
||||
getMails();
|
||||
|
||||
const interval = setInterval(() => {
|
||||
getTimestamp()
|
||||
getTimestamp();
|
||||
getMails();
|
||||
}, 300000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
|
||||
}, [getMails, userName, userAddress]);
|
||||
|
||||
const anyUnread = useMemo(() => {
|
||||
let unread = false
|
||||
let unread = false;
|
||||
|
||||
mails.forEach((mail) => {
|
||||
if(!lastEnteredTimestamp && isLessThanOneWeekOld(mail?.created) || (lastEnteredTimestamp && isLessThanOneWeekOld(mail?.created) && lastEnteredTimestamp < mail?.created)){
|
||||
unread = true
|
||||
if (
|
||||
(!lastEnteredTimestamp && isLessThanOneWeekOld(mail?.created)) ||
|
||||
(lastEnteredTimestamp &&
|
||||
isLessThanOneWeekOld(mail?.created) &&
|
||||
lastEnteredTimestamp < mail?.created)
|
||||
) {
|
||||
unread = true;
|
||||
}
|
||||
})
|
||||
return unread
|
||||
}, [mails, lastEnteredTimestamp])
|
||||
});
|
||||
return unread;
|
||||
}, [mails, lastEnteredTimestamp]);
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
|
||||
<ButtonBase
|
||||
sx={{
|
||||
width: "322px",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
width: '322px',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: '10px',
|
||||
padding: "0px 20px",
|
||||
justifyContent: 'flex-start'
|
||||
padding: '0px 20px',
|
||||
justifyContent: 'flex-start',
|
||||
}}
|
||||
onClick={() => setIsExpanded((prev) => !prev)}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "1rem",
|
||||
fontSize: '1rem',
|
||||
}}
|
||||
>
|
||||
Latest Q-Mails
|
||||
</Typography>
|
||||
<MarkEmailUnreadIcon sx={{
|
||||
color: anyUnread ? 'var(--unread)' : 'white'
|
||||
}}/>
|
||||
{isExpanded ? <ExpandLessIcon sx={{
|
||||
marginLeft: 'auto'
|
||||
}} /> : (
|
||||
<ExpandMoreIcon sx={{
|
||||
<MarkEmailUnreadIcon
|
||||
sx={{
|
||||
color: anyUnread ? 'var(--unread)' : 'white',
|
||||
marginLeft: 'auto'
|
||||
}} />
|
||||
}}
|
||||
/>
|
||||
{isExpanded ? (
|
||||
<ExpandLessIcon
|
||||
sx={{
|
||||
marginLeft: 'auto',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<ExpandMoreIcon
|
||||
sx={{
|
||||
color: anyUnread ? 'var(--unread)' : 'white',
|
||||
marginLeft: 'auto',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</ButtonBase>
|
||||
<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'
|
||||
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={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<CustomLoader />
|
||||
@ -182,19 +196,18 @@ export const QMailMessages = ({userName, userAddress}) => {
|
||||
{!loading && mails.length === 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "11px",
|
||||
fontSize: '11px',
|
||||
fontWeight: 400,
|
||||
color: 'rgba(255, 255, 255, 0.2)'
|
||||
color: 'rgba(255, 255, 255, 0.2)',
|
||||
}}
|
||||
>
|
||||
Nothing to display
|
||||
@ -202,25 +215,25 @@ export const QMailMessages = ({userName, userAddress}) => {
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<List sx={{ width: "100%", maxWidth: 360 }}>
|
||||
<List sx={{ width: '100%', maxWidth: 360 }}>
|
||||
{mails?.map((mail) => {
|
||||
return (
|
||||
<ListItem
|
||||
|
||||
disablePadding
|
||||
sx={{
|
||||
marginBottom: '20px'
|
||||
marginBottom: '20px',
|
||||
}}
|
||||
onClick={() => {
|
||||
executeEvent("addTab", { data: { service: 'APP', name: 'q-mail' } });
|
||||
executeEvent("open-apps-mode", { });
|
||||
setLastEnteredTimestamp(Date.now())
|
||||
|
||||
executeEvent('addTab', {
|
||||
data: { service: 'APP', name: 'q-mail' },
|
||||
});
|
||||
executeEvent('open-apps-mode', {});
|
||||
setLastEnteredTimestamp(Date.now());
|
||||
}}
|
||||
>
|
||||
<ListItemButton
|
||||
sx={{
|
||||
padding: "0px",
|
||||
padding: '0px',
|
||||
}}
|
||||
disableRipple
|
||||
role={undefined}
|
||||
@ -228,8 +241,8 @@ export const QMailMessages = ({userName, userAddress}) => {
|
||||
>
|
||||
<ListItemText
|
||||
sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "13px",
|
||||
'& .MuiTypography-root': {
|
||||
fontSize: '13px',
|
||||
fontWeight: 400,
|
||||
},
|
||||
}}
|
||||
@ -238,42 +251,44 @@ export const QMailMessages = ({userName, userAddress}) => {
|
||||
/>
|
||||
<ListItemIcon
|
||||
sx={{
|
||||
justifyContent: "flex-end",
|
||||
justifyContent: 'flex-end',
|
||||
}}
|
||||
>
|
||||
{!lastEnteredTimestamp && isLessThanOneWeekOld(mail?.created) ? (
|
||||
<MailIcon sx={{
|
||||
color: 'var(--unread)'
|
||||
}} />
|
||||
{!lastEnteredTimestamp &&
|
||||
isLessThanOneWeekOld(mail?.created) ? (
|
||||
<MailIcon
|
||||
sx={{
|
||||
color: 'var(--unread)',
|
||||
}}
|
||||
/>
|
||||
) : !lastEnteredTimestamp ? (
|
||||
<MailOutlineIcon sx={{
|
||||
color: 'white'
|
||||
}} />
|
||||
): (lastEnteredTimestamp < mail?.created) && isLessThanOneWeekOld(mail?.created) ? (
|
||||
<MailIcon sx={{
|
||||
color: 'var(--unread)'
|
||||
}} />
|
||||
<MailOutlineIcon
|
||||
sx={{
|
||||
color: 'white',
|
||||
}}
|
||||
/>
|
||||
) : lastEnteredTimestamp < mail?.created &&
|
||||
isLessThanOneWeekOld(mail?.created) ? (
|
||||
<MailIcon
|
||||
sx={{
|
||||
color: 'var(--unread)',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<MailOutlineIcon sx={{
|
||||
color: 'white'
|
||||
}} />
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
<MailOutlineIcon
|
||||
sx={{
|
||||
color: 'white',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</ListItemIcon>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
)
|
||||
);
|
||||
})}
|
||||
|
||||
|
||||
</List>
|
||||
|
||||
|
||||
</Box>
|
||||
</Collapse>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user