Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-23 19:37:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

added recent qmails in home

Browse Source
This commit is contained in:
PhilReact 2024-11-13 23:47:52 +02:00
parent 93a2071e77
commit 817b668cbc
8 changed files with 501 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/background-cases.ts
View File

@ -1,5 +1,6 @@
import { import {
addDataPublishes, addDataPublishes,
addEnteredQmailTimestamp,
addTimestampEnterChat, addTimestampEnterChat,
addTimestampGroupAnnouncement, addTimestampGroupAnnouncement,
addUserSettings, addUserSettings,
@ -20,6 +21,7 @@ import {
getBalanceInfo, getBalanceInfo,
getCustomNodesFromStorage, getCustomNodesFromStorage,
getDataPublishes, getDataPublishes,
getEnteredQmailTimestamp,
getGroupDataSingle, getGroupDataSingle,
getKeyPair, getKeyPair,
getLTCBalance, getLTCBalance,
@ -1052,6 +1054,56 @@ export async function addGroupNotificationTimestampCase(request, event) {
); );
} }
} }
export async function addEnteredQmailTimestampCase(request, event) {
try {
const response = await addEnteredQmailTimestamp();
event.source.postMessage(
{
requestId: request.requestId,
action: "addEnteredQmailTimestamp",
payload: response,
type: "backgroundMessageResponse",
},
event.origin
);
} catch (error) {
event.source.postMessage(
{
requestId: request.requestId,
action: "addEnteredQmailTimestamp",
error: error?.message,
type: "backgroundMessageResponse",
},
event.origin
);
}
}
export async function getEnteredQmailTimestampCase(request, event) {
try {
const response = await getEnteredQmailTimestamp();
event.source.postMessage(
{
requestId: request.requestId,
action: "getEnteredQmailTimestamp",
payload: {timestamp: response},
type: "backgroundMessageResponse",
},
event.origin
);
} catch (error) {
event.source.postMessage(
{
requestId: request.requestId,
action: "getEnteredQmailTimestamp",
error: error?.message,
type: "backgroundMessageResponse",
},
event.origin
);
}
}
export async function clearAllNotificationsCase(request, event) { export async function clearAllNotificationsCase(request, event) {
try { try {

34
src/background.ts
View File

@ -32,6 +32,7 @@ import { TradeBotRespondMultipleRequest } from "./transactions/TradeBotRespondMu
import { RESOURCE_TYPE_NUMBER_GROUP_CHAT_REACTIONS } from "./constants/resourceTypes"; import { RESOURCE_TYPE_NUMBER_GROUP_CHAT_REACTIONS } from "./constants/resourceTypes";
import { import {
addDataPublishesCase, addDataPublishesCase,
addEnteredQmailTimestampCase,
addGroupNotificationTimestampCase, addGroupNotificationTimestampCase,
addTimestampEnterChatCase, addTimestampEnterChatCase,
addUserSettingsCase, addUserSettingsCase,
@ -52,6 +53,7 @@ import {
getApiKeyCase, getApiKeyCase,
getCustomNodesFromStorageCase, getCustomNodesFromStorageCase,
getDataPublishesCase, getDataPublishesCase,
getEnteredQmailTimestampCase,
getGroupDataSingleCase, getGroupDataSingleCase,
getGroupNotificationTimestampCase, getGroupNotificationTimestampCase,
getTempPublishCase, getTempPublishCase,
@ -2575,6 +2577,32 @@ export async function addTimestampGroupAnnouncement({
}); });
} }
export async function addEnteredQmailTimestamp() {
const wallet = await getSaveWallet();
const address = wallet.address0;
return await new Promise((resolve, reject) => {
storeData(`qmail-entered-timestamp-${address}`, Date.now())
.then(() => resolve(true))
.catch((error) => {
reject(new Error(error.message || "Error saving data"));
});
});
}
export async function getEnteredQmailTimestamp() {
const wallet = await getSaveWallet();
const address = wallet.address0;
const key = `qmail-entered-timestamp-${address}`;
const res = await getData<any>(key).catch(() => null);
if (res) {
const parsedData = res;
return parsedData;
} else {
return null
}
}
async function getGroupData() { async function getGroupData() {
const wallet = await getSaveWallet(); const wallet = await getSaveWallet();
const address = wallet.address0; const address = wallet.address0;
@ -2866,6 +2894,12 @@ function setupMessageListener() {
case "setupGroupWebsocket": case "setupGroupWebsocket":
setupGroupWebsocketCase(request, event); setupGroupWebsocketCase(request, event);
break; break;
case "addEnteredQmailTimestamp":
addEnteredQmailTimestampCase(request, event);
break;
case "getEnteredQmailTimestamp":
getEnteredQmailTimestampCase(request, event);
break;
case "logout": case "logout":
{ {
try { try {

5
src/components/Apps/useQortalMessageListener.tsx
View File

@ -509,6 +509,11 @@ isDOMContentLoaded: false
event?.data?.action === 'QDN_RESOURCE_DISPLAYED'){ event?.data?.action === 'QDN_RESOURCE_DISPLAYED'){
const pathUrl = event?.data?.path != null ? (event?.data?.path.startsWith('/') ? '' : '/') + event?.data?.path : null const pathUrl = event?.data?.path != null ? (event?.data?.path.startsWith('/') ? '' : '/') + event?.data?.path : null
setPath(pathUrl) setPath(pathUrl)
if(appName.toLowerCase() === 'q-mail'){
window.sendMessage("addEnteredQmailTimestamp").catch((error) => {
// error
});
}
} else if(event?.data?.action === 'NAVIGATION_HISTORY'){ } else if(event?.data?.action === 'NAVIGATION_HISTORY'){
if(event?.data?.payload?.isDOMContentLoaded){ if(event?.data?.payload?.isDOMContentLoaded){
setHistory((prev)=> { setHistory((prev)=> {

1
src/components/Chat/ChatGroup.tsx
View File

@ -351,7 +351,6 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
} }
} }
socketRef.current.onerror = (e) => { socketRef.current.onerror = (e) => {
console.error('WebSocket error:', error);
clearTimeout(groupSocketTimeoutRef.current); clearTimeout(groupSocketTimeoutRef.current);
clearTimeout(timeoutIdRef.current); clearTimeout(timeoutIdRef.current);
if (socketRef.current) { if (socketRef.current) {

4
src/components/CoreSyncStatus.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import syncedImg from '../assets/syncStatus/synced.png' import syncedImg from '../assets/syncStatus/synced.png'
import syncedMintingImg from '../assets/syncStatus/synced.png' import syncedMintingImg from '../assets/syncStatus/synced_minting.png'
import syncingImg from '../assets/syncStatus/synced.png' import syncingImg from '../assets/syncStatus/syncing.png'
import { getBaseApiReact } from '../App'; import { getBaseApiReact } from '../App';
import './CoreSyncStatus.css' import './CoreSyncStatus.css'
export const CoreSyncStatus = ({imageSize, position}) => { export const CoreSyncStatus = ({imageSize, position}) => {

1
src/components/Group/HomeDesktop.tsx
View File

@ -80,6 +80,7 @@ export const HomeDesktop = ({
balance={balance} balance={balance}
myAddress={myAddress} myAddress={myAddress}
name={userInfo?.name} name={userInfo?.name}
userInfo={userInfo}
hasGroups={groups?.length !== 0} hasGroups={groups?.length !== 0}
/> />
</Box> </Box>

250
src/components/Group/QMailMessages.tsx Normal file
View File

@ -0,0 +1,250 @@
import React, { useCallback, useEffect, 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, Typography } from "@mui/material";
import { Spacer } from "../../common/Spacer";
import { getBaseApiReact, isMobile } from "../../App";
import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
import MailIcon from '@mui/icons-material/Mail';
import MailOutlineIcon from '@mui/icons-material/MailOutline';
import { executeEvent } from '../../utils/events';
import { CustomLoader } from '../../common/CustomLoader';
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);
// 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();
if (date.isSame(now, 'day')) {
// If the email was received today, show the time
return date.format('h:mm A');
} else if (date.isSame(now, 'year')) {
// If the email was received this year, show the month and day
return date.format('MMM D');
} else {
// For older emails, show the full date
return date.format('MMM D, YYYY');
}
}
export const QMailMessages = ({userName, userAddress}) => {
const [mails, setMails] = useState([])
const [lastEnteredTimestamp, setLastEnteredTimestamp] = useState(null)
const [loading, setLoading] = useState(true)
console.log('lastEnteredTimestamp', lastEnteredTimestamp)
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);
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}, [])
const getTimestamp = async () => {
try {
return new Promise((res, rej) => {
window.sendMessage("getEnteredQmailTimestamp")
.then((response) => {
if (!response?.error) {
if(response?.timestamp){
setLastEnteredTimestamp(response?.timestamp)
}
}
rej(response.error);
})
.catch((error) => {
rej(error.message || "An error occurred");
});
});
} catch (error) {}
};
useEffect(() => {
getTimestamp()
if(!userName || !userAddress) return
getMails();
const interval = setInterval(() => {
getTimestamp()
getMails();
}, 300000);
return () => clearInterval(interval);
}, [getMails, userName, userAddress]);
console.log('mails', mails)
return (
<Box
sx={{
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<Box
sx={{
width: "322px",
display: "flex",
flexDirection: "column",
padding: "0px 20px",
}}
>
<Typography
sx={{
fontSize: "13px",
fontWeight: 600,
}}
>
Latest Q-Mails
</Typography>
<Spacer height="10px" />
</Box>
<Box
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={{
width: "100%",
display: "flex",
justifyContent: "center",
}}
>
<CustomLoader />
</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 }}>
{mails?.map((mail)=> {
return (
<ListItem
disablePadding
sx={{
marginBottom: '20px'
}}
onClick={()=> {
executeEvent("addTab", { data: { service: 'APP', name: 'q-mail' } });
executeEvent("open-apps-mode", { });
}}
>
<ListItemButton
sx={{
padding: "0px",
}}
disableRipple
role={undefined}
dense
>
<ListItemText
sx={{
"& .MuiTypography-root": {
fontSize: "13px",
fontWeight: 400,
},
}}
primary={`From: ${mail?.name}`}
secondary={`${formatEmailDate(mail?.created)}`}
/>
<ListItemIcon
sx={{
justifyContent: "flex-end",
}}
>
{!lastEnteredTimestamp && isLessThanOneWeekOld(mail?.created) ? (
<MailIcon sx={{
color: 'var(--unread)'
}} />
) : !lastEnteredTimestamp ? (
<MailOutlineIcon sx={{
color: 'white'
}} />
): lastEnteredTimestamp < mail?.created ? (
<MailIcon sx={{
color: 'var(--unread)'
}} />
) : (
<MailOutlineIcon sx={{
color: 'white'
}} />
)
}
</ListItemIcon>
</ListItemButton>
</ListItem>
)
})}
</List>
</Box>
</Box>
)
}

302
src/components/Group/ThingsToDoInitial.tsx
View File

@ -11,8 +11,9 @@ import InfoIcon from "@mui/icons-material/Info";
import { Box, Typography } from "@mui/material"; import { Box, Typography } from "@mui/material";
import { Spacer } from "../../common/Spacer"; import { Spacer } from "../../common/Spacer";
import { isMobile } from "../../App"; import { isMobile } from "../../App";
import { QMailMessages } from "./QMailMessages";
export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance }) => { export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance, userInfo }) => {
const [checked1, setChecked1] = React.useState(false); const [checked1, setChecked1] = React.useState(false);
const [checked2, setChecked2] = React.useState(false); const [checked2, setChecked2] = React.useState(false);
const [checked3, setChecked3] = React.useState(false); const [checked3, setChecked3] = React.useState(false);
@ -47,6 +48,22 @@ export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance }) => {
if (name) setChecked2(true); if (name) setChecked2(true);
}, [name]); }, [name]);
const isLoaded = React.useMemo(()=> {
if(balance !== null && userInfo !== null) return true
return false
}, [balance, userInfo])
const hasDoneNameAndBalanceAndIsLoaded = React.useMemo(()=> {
if(isLoaded && checked1 && checked2) return true
return false
}, [checked1, isLoaded, checked2])
if(hasDoneNameAndBalanceAndIsLoaded){
return (
<QMailMessages userAddress={userInfo?.address} userName={userInfo?.name} />
);
}
return ( return (
<Box <Box
sx={{ sx={{
@ -70,7 +87,7 @@ export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance }) => {
fontWeight: 600, fontWeight: 600,
}} }}
> >
Getting Started: {!isLoaded ? 'Loading...' : 'Getting Started' }
</Typography> </Typography>
<Spacer height="10px" /> <Spacer height="10px" />
</Box> </Box>
@ -86,149 +103,144 @@ export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance }) => {
borderRadius: "19px", borderRadius: "19px",
}} }}
> >
<List sx={{ width: "100%", maxWidth: 360 }}> {isLoaded && (
<ListItem <List sx={{ width: "100%", maxWidth: 360 }}>
// secondaryAction={ <ListItem
// <IconButton edge="end" aria-label="comments">
// <InfoIcon disablePadding
// sx={{ sx={{
// color: "white", marginBottom: '20px'
// }} }}
// /> >
// </IconButton> <ListItemButton
// } sx={{
disablePadding padding: "0px",
sx={{ }}
marginBottom: '20px' disableRipple
}} role={undefined}
> dense
<ListItemButton >
sx={{ <ListItemText
padding: "0px", sx={{
}} "& .MuiTypography-root": {
disableRipple fontSize: "13px",
role={undefined} fontWeight: 400,
dense },
> }}
<ListItemText primary={`Have at least 6 QORT in your wallet`}
sx={{ />
"& .MuiTypography-root": { <ListItemIcon
fontSize: "13px", sx={{
fontWeight: 400, justifyContent: "flex-end",
}, }}
}} >
primary={`Have at least 6 QORT in your wallet`} <Box
/> sx={{
<ListItemIcon height: "18px",
sx={{ width: "18px",
justifyContent: "flex-end", borderRadius: "50%",
}} backgroundColor: checked1 ? "rgba(9, 182, 232, 1)" : "transparent",
> outline: "1px solid rgba(9, 182, 232, 1)",
<Box }}
sx={{ />
height: "18px", {/* <Checkbox
width: "18px", edge="start"
borderRadius: "50%", checked={checked1}
backgroundColor: checked1 ? "rgba(9, 182, 232, 1)" : "transparent", tabIndex={-1}
outline: "1px solid rgba(9, 182, 232, 1)", disableRipple
}} disabled={true}
/> sx={{
{/* <Checkbox "&.Mui-checked": {
edge="start" color: "white", // Customize the color when checked
checked={checked1} },
tabIndex={-1} "& .MuiSvgIcon-root": {
disableRipple color: "white",
disabled={true} },
sx={{ }}
"&.Mui-checked": { /> */}
color: "white", // Customize the color when checked </ListItemIcon>
}, </ListItemButton>
"& .MuiSvgIcon-root": { </ListItem>
color: "white", <ListItem
}, sx={{
}} marginBottom: '20px'
/> */} }}
</ListItemIcon> // secondaryAction={
</ListItemButton> // <IconButton edge="end" aria-label="comments">
</ListItem> // <InfoIcon
<ListItem // sx={{
sx={{ // color: "white",
marginBottom: '20px' // }}
}} // />
// secondaryAction={ // </IconButton>
// <IconButton edge="end" aria-label="comments"> // }
// <InfoIcon disablePadding
// sx={{ >
// color: "white", <ListItemButton sx={{
// }} padding: "0px",
// /> }} disableRipple role={undefined} dense>
// </IconButton>
// } <ListItemText sx={{
disablePadding "& .MuiTypography-root": {
> fontSize: "13px",
<ListItemButton sx={{ fontWeight: 400,
padding: "0px", },
}} disableRipple role={undefined} dense> }} primary={`Register a name`} />
<ListItemIcon sx={{
<ListItemText sx={{ justifyContent: "flex-end",
"& .MuiTypography-root": { }}>
fontSize: "13px", <Box
fontWeight: 400, sx={{
}, height: "18px",
}} primary={`Register a name`} /> width: "18px",
<ListItemIcon sx={{ borderRadius: "50%",
justifyContent: "flex-end", backgroundColor: checked2 ? "rgba(9, 182, 232, 1)" : "transparent",
}}> outline: "1px solid rgba(9, 182, 232, 1)",
<Box }}
sx={{ />
height: "18px", </ListItemIcon>
width: "18px", </ListItemButton>
borderRadius: "50%", </ListItem>
backgroundColor: checked2 ? "rgba(9, 182, 232, 1)" : "transparent", <ListItem
outline: "1px solid rgba(9, 182, 232, 1)", // secondaryAction={
}} // <IconButton edge="end" aria-label="comments">
/> // <InfoIcon
</ListItemIcon> // sx={{
</ListItemButton> // color: "white",
</ListItem> // }}
<ListItem // />
// secondaryAction={ // </IconButton>
// <IconButton edge="end" aria-label="comments"> // }
// <InfoIcon disablePadding
// sx={{ >
// color: "white", <ListItemButton sx={{
// }} padding: "0px",
// /> }} disableRipple role={undefined} dense>
// </IconButton>
// } <ListItemText sx={{
disablePadding "& .MuiTypography-root": {
> fontSize: "13px",
<ListItemButton sx={{ fontWeight: 400,
padding: "0px", },
}} disableRipple role={undefined} dense> }} primary={`Join a group`} />
<ListItemIcon sx={{
<ListItemText sx={{ justifyContent: "flex-end",
"& .MuiTypography-root": { }}>
fontSize: "13px", <Box
fontWeight: 400, sx={{
}, height: "18px",
}} primary={`Join a group`} /> width: "18px",
<ListItemIcon sx={{ borderRadius: "50%",
justifyContent: "flex-end", backgroundColor: checked3 ? "rgba(9, 182, 232, 1)" : "transparent",
}}> outline: "1px solid rgba(9, 182, 232, 1)",
<Box }}
sx={{ />
height: "18px", </ListItemIcon>
width: "18px", </ListItemButton>
borderRadius: "50%", </ListItem>
backgroundColor: checked3 ? "rgba(9, 182, 232, 1)" : "transparent", </List>
outline: "1px solid rgba(9, 182, 232, 1)", )}
}}
/>
</ListItemIcon>
</ListItemButton>
</ListItem>
</List>
</Box> </Box>
</Box> </Box>
); );