Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-24 20:07:51 +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 {
addDataPublishes,
addEnteredQmailTimestamp,
addTimestampEnterChat,
addTimestampGroupAnnouncement,
addUserSettings,
@ -20,6 +21,7 @@ import {
getBalanceInfo,
getCustomNodesFromStorage,
getDataPublishes,
getEnteredQmailTimestamp,
getGroupDataSingle,
getKeyPair,
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) {
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 {
addDataPublishesCase,
addEnteredQmailTimestampCase,
addGroupNotificationTimestampCase,
addTimestampEnterChatCase,
addUserSettingsCase,
@ -52,6 +53,7 @@ import {
getApiKeyCase,
getCustomNodesFromStorageCase,
getDataPublishesCase,
getEnteredQmailTimestampCase,
getGroupDataSingleCase,
getGroupNotificationTimestampCase,
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() {
const wallet = await getSaveWallet();
const address = wallet.address0;
@ -2866,6 +2894,12 @@ function setupMessageListener() {
case "setupGroupWebsocket":
setupGroupWebsocketCase(request, event);
break;
case "addEnteredQmailTimestamp":
addEnteredQmailTimestampCase(request, event);
break;
case "getEnteredQmailTimestamp":
getEnteredQmailTimestampCase(request, event);
break;
case "logout":
{
try {

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

@ -509,6 +509,11 @@ isDOMContentLoaded: false
event?.data?.action === 'QDN_RESOURCE_DISPLAYED'){
const pathUrl = event?.data?.path != null ? (event?.data?.path.startsWith('/') ? '' : '/') + event?.data?.path : null
setPath(pathUrl)
if(appName.toLowerCase() === 'q-mail'){
window.sendMessage("addEnteredQmailTimestamp").catch((error) => {
// error
});
}
} else if(event?.data?.action === 'NAVIGATION_HISTORY'){
if(event?.data?.payload?.isDOMContentLoaded){
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) => {
console.error('WebSocket error:', error);
clearTimeout(groupSocketTimeoutRef.current);
clearTimeout(timeoutIdRef.current);
if (socketRef.current) {

4
src/components/CoreSyncStatus.tsx
View File

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

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

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

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