diff --git a/src/App.tsx b/src/App.tsx index c0043de..bae4331 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -109,7 +109,7 @@ import { MainAvatar } from "./components/MainAvatar"; import { useRetrieveDataLocalStorage } from "./useRetrieveDataLocalStorage"; import { useQortalGetSaveSettings } from "./useQortalGetSaveSettings"; import { useRecoilState, useResetRecoilState, useSetRecoilState } from "recoil"; -import { canSaveSettingToQdnAtom, fullScreenAtom, hasSettingsChangedAtom, isDisabledEditorEnterAtom, isUsingImportExportSettingsAtom, oldPinnedAppsAtom, settingsLocalLastUpdatedAtom, settingsQDNLastUpdatedAtom, sortablePinnedAppsAtom } from "./atoms/global"; +import { canSaveSettingToQdnAtom, fullScreenAtom, hasSettingsChangedAtom, isDisabledEditorEnterAtom, isUsingImportExportSettingsAtom, mailsAtom, oldPinnedAppsAtom, qMailLastEnteredTimestampAtom, settingsLocalLastUpdatedAtom, settingsQDNLastUpdatedAtom, sortablePinnedAppsAtom } from "./atoms/global"; import { useAppFullScreen } from "./useAppFullscreen"; import { NotAuthenticated } from "./ExtStates/NotAuthenticated"; import { useFetchResources } from "./common/useFetchResources"; @@ -123,6 +123,7 @@ import { test } from "vitest"; import { useHandleUserInfo } from "./components/Group/useHandleUserInfo"; import { Minting } from "./components/Minting/Minting"; import { isRunningGateway } from "./qortalRequests"; +import { QMailStatus } from "./components/QMailStatus"; type extStates = | "not-authenticated" @@ -412,7 +413,8 @@ function App() { const resetAtomSettingsQDNLastUpdatedAtom = useResetRecoilState(settingsQDNLastUpdatedAtom); const resetAtomSettingsLocalLastUpdatedAtom = useResetRecoilState(settingsLocalLastUpdatedAtom); const resetAtomOldPinnedAppsAtom = useResetRecoilState(oldPinnedAppsAtom); - + const resetAtomQMailLastEnteredTimestampAtom = useResetRecoilState(qMailLastEnteredTimestampAtom) + const resetAtomMailsAtom = useResetRecoilState(mailsAtom) const resetAllRecoil = () => { resetAtomSortablePinnedAppsAtom(); resetAtomCanSaveSettingToQdnAtom(); @@ -420,6 +422,8 @@ function App() { resetAtomSettingsLocalLastUpdatedAtom(); resetAtomOldPinnedAppsAtom(); resetAtomIsUsingImportExportSettingsAtom() + resetAtomQMailLastEnteredTimestampAtom() + resetAtomMailsAtom() }; useEffect(() => { if (!isMobile) return; @@ -1647,6 +1651,8 @@ function App() { )} + + - )} + )} diff --git a/src/components/Group/HomeDesktop.tsx b/src/components/Group/HomeDesktop.tsx index 302f5a9..70819df 100644 --- a/src/components/Group/HomeDesktop.tsx +++ b/src/components/Group/HomeDesktop.tsx @@ -21,12 +21,13 @@ export const HomeDesktop = ({ setOpenManageMembers, setOpenAddGroup, setMobileViewMode, - setDesktopViewMode + setDesktopViewMode, + desktopViewMode }) => { return ( + {desktopViewMode === 'home' && ( + <> + + )} )} {!isLoadingGroups && ( diff --git a/src/components/Group/QMailMessages.tsx b/src/components/Group/QMailMessages.tsx index 1c0317d..5ebbc17 100644 --- a/src/components/Group/QMailMessages.tsx +++ b/src/components/Group/QMailMessages.tsx @@ -13,7 +13,9 @@ 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) => { +import { useRecoilState } from 'recoil'; +import { mailsAtom, qMailLastEnteredTimestampAtom } from '../../atoms/global'; +export const isLessThanOneWeekOld = (timestamp) => { // Current time in milliseconds const now = Date.now(); @@ -39,8 +41,8 @@ export function formatEmailDate(timestamp: number) { } } export const QMailMessages = ({userName, userAddress}) => { - const [mails, setMails] = useState([]) - const [lastEnteredTimestamp, setLastEnteredTimestamp] = useState(null) + const [mails, setMails] = useRecoilState(mailsAtom) + const [lastEnteredTimestamp, setLastEnteredTimestamp] = useRecoilState(qMailLastEnteredTimestampAtom) const [loading, setLoading] = useState(true) const getMails = useCallback(async () => { @@ -186,6 +188,8 @@ export const QMailMessages = ({userName, userAddress}) => { onClick={()=> { executeEvent("addTab", { data: { service: 'APP', name: 'q-mail' } }); executeEvent("open-apps-mode", { }); + setLastEnteredTimestamp(Date.now()) + }} > { - ): lastEnteredTimestamp < mail?.created ? ( + ): (lastEnteredTimestamp < mail?.created) && isLessThanOneWeekOld(mail?.created) ? ( diff --git a/src/components/QMailStatus.tsx b/src/components/QMailStatus.tsx new file mode 100644 index 0000000..2787336 --- /dev/null +++ b/src/components/QMailStatus.tsx @@ -0,0 +1,43 @@ +import React, { useMemo } from 'react' +import QMailLogo from '../assets/QMailLogo.png' +import { useRecoilState } from 'recoil' +import { mailsAtom, qMailLastEnteredTimestampAtom } from '../atoms/global' +import { isLessThanOneWeekOld } from './Group/QMailMessages' +import { ButtonBase } from '@mui/material' +import { executeEvent } from '../utils/events' +export const QMailStatus = () => { + const [lastEnteredTimestamp, setLastEnteredTimestamp] = useRecoilState(qMailLastEnteredTimestampAtom) + const [mails, setMails] = useRecoilState(mailsAtom) + + const hasNewMail = useMemo(()=> { + if(mails?.length === 0) return false + const latestMail = mails[0] + if(!lastEnteredTimestamp && isLessThanOneWeekOld(latestMail?.created)) return true + if((lastEnteredTimestamp < latestMail?.created) && isLessThanOneWeekOld(latestMail?.created)) return true + return false + }, [lastEnteredTimestamp, mails]) + return ( + { + executeEvent("addTab", { data: { service: 'APP', name: 'q-mail' } }); + executeEvent("open-apps-mode", { }); + setLastEnteredTimestamp(Date.now()) + }} style={{ + position: 'relative' + }}>{hasNewMail && ( +
+ )} + ) +}