+
+
+
+ )
+}
+
+export default DynamicHeightItem
diff --git a/src/components/DynamicHeightItemMinimal.tsx b/src/components/DynamicHeightItemMinimal.tsx
new file mode 100644
index 0000000..b80d53f
--- /dev/null
+++ b/src/components/DynamicHeightItemMinimal.tsx
@@ -0,0 +1,39 @@
+import React, { useRef, useState, useEffect } from 'react'
+import ReactResizeDetector from 'react-resize-detector'
+import { Layouts, Layout } from 'react-grid-layout'
+
+interface DynamicHeightItemProps {
+ children: React.ReactNode
+ layouts: Layouts
+ setLayouts: (layouts: any) => void
+ i: string
+ breakpoint: keyof Layouts
+ rows?: number
+ count?: number
+ type?: string
+ padding?: number
+}
+
+export const DynamicHeightItemMinimal: React.FC
+ {children}
+
+
+
+ )
+}
diff --git a/src/components/FileElement.tsx b/src/components/FileElement.tsx
new file mode 100644
index 0000000..9bd304d
--- /dev/null
+++ b/src/components/FileElement.tsx
@@ -0,0 +1,503 @@
+import * as React from 'react'
+import { styled, useTheme } from '@mui/material/styles'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import AudiotrackIcon from '@mui/icons-material/Audiotrack'
+import { MyContext } from '../wrappers/DownloadWrapper'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../state/store'
+import { CircularProgress } from '@mui/material'
+import AttachFileIcon from '@mui/icons-material/AttachFile'
+import {
+ setCurrAudio,
+ setShowingAudioPlayer
+} from '../state/features/globalSlice'
+import {
+ base64ToUint8Array,
+ objectToUint8ArrayFromResponse
+} from '../utils/toBase64'
+import { setNotification } from '../state/features/notificationsSlice'
+
+const Widget = styled('div')(({ theme }) => ({
+ padding: 8,
+ borderRadius: 10,
+ maxWidth: 350,
+ position: 'relative',
+ zIndex: 1,
+ // backgroundColor:
+ // theme.palette.mode === 'dark' ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.4)',
+ backdropFilter: 'blur(40px)',
+ background: 'skyblue',
+ transition: '0.2s all',
+ '&:hover': {
+ opacity: 0.75
+ }
+}))
+
+const CoverImage = styled('div')({
+ width: 40,
+ height: 40,
+ objectFit: 'cover',
+ overflow: 'hidden',
+ flexShrink: 0,
+ borderRadius: 8,
+ backgroundColor: 'rgba(0,0,0,0.08)',
+ '& > img': {
+ width: '100%'
+ }
+})
+
+const TinyText = styled(Typography)({
+ fontSize: '0.75rem',
+ opacity: 0.38,
+ fontWeight: 500,
+ letterSpacing: 0.2
+})
+
+interface IAudioElement {
+ title: string
+ description?: string
+ author?: string
+ fileInfo?: any
+ postId?: string
+ user?: string
+ children?: React.ReactNode
+ mimeType?: string
+ disable?: boolean
+ mode?: string
+ otherUser?: string
+}
+
+interface CustomWindow extends Window {
+ showSaveFilePicker: any // Replace 'any' with the appropriate type if you know it
+}
+
+const customWindow = window as unknown as CustomWindow
+
+export default function FileElement({
+ title,
+ description,
+ author,
+ fileInfo,
+ postId = '',
+ user,
+ children,
+ mimeType,
+ disable,
+ mode,
+ otherUser
+}: IAudioElement) {
+ const { downloadVideo } = React.useContext(MyContext)
+ const [isLoading, setIsLoading] = React.useState
+ {children}
+
+ -
+ {videos.map((video) => (
+
-
+ {blockedNames.map((name, index) => (
+
-
+ {Object.keys(downloads)
+ .filter(
+ (item) =>
+ downloads[item].service !== MAIL_ATTACHMENT_SERVICE_TYPE
+ )
+ .map((download: any) => {
+ const downloadObj = downloads[download]
+ const progress = downloads[download]?.status?.percentLoaded || 0
+ const status = downloads[download]?.status?.status
+ const service = downloads[download]?.service
+ return (
+
-
+ {Object.keys(downloads).map((download: any) => {
+ const downloadObj = downloads[download]
+ const progress = downloads[download]?.status?.percentLoaded || 0
+ return (
+
+ {item.content}
+
+ ))}
+ -
+ {videos.map((video) => (
+
+
+ )
+}
+
+export default LazyLoad
diff --git a/src/components/common/LoaderBar.tsx b/src/components/common/LoaderBar.tsx
new file mode 100644
index 0000000..2471b9c
--- /dev/null
+++ b/src/components/common/LoaderBar.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react'
+import LinearProgress, {
+ LinearProgressProps
+} from '@mui/material/LinearProgress'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import { useTheme } from '@mui/material'
+
+interface LoaderBarProps {
+ message: string
+}
+export const LoaderBar = ({ message }: LoaderBarProps) => {
+ const theme = useTheme()
+ return (
+
+
+ -
+ {videos.map((video) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {children}+ case 'heading-2': + return ( +
+ {children} +
+ ) + case 'heading-3': + return ( ++ {children} +
+ ) + case 'code-block': + return ( +
+ {children}
+
+ )
+ case 'code-line':
+ return {children}
+ case 'link':
+ return (
+
+ {children}
+
+ )
+ default:
+ return (
+ + {children} +
+ ) + } +} + + +export const renderLeaf = ({ attributes, children, leaf }: RenderLeafProps) => { + let el = children + + if (leaf.bold) { + el = {el} + } + + if (leaf.italic) { + el = {el} + } + + if (leaf.underline) { + el = {el} + } + + if (leaf.link) { + el = ( + + {el} + + ) + } + + return {el} +} \ No newline at end of file diff --git a/src/components/editor/ReadOnlySlate.tsx b/src/components/editor/ReadOnlySlate.tsx new file mode 100644 index 0000000..cd2616c --- /dev/null +++ b/src/components/editor/ReadOnlySlate.tsx @@ -0,0 +1,25 @@ +import React, { useMemo } from 'react'; +import { createEditor, Descendant, Editor } from 'slate'; +import { withReact, Slate, Editable, RenderElementProps, RenderLeafProps } from 'slate-react'; +import { renderElement, renderLeaf } from './BlogEditor'; + +interface ReadOnlySlateProps { + content: any + mode?: string +} +const ReadOnlySlate: React.FC
+
+
+ )
+}
diff --git a/src/components/modals/EditBlogModal.tsx b/src/components/modals/EditBlogModal.tsx
new file mode 100644
index 0000000..631ac25
--- /dev/null
+++ b/src/components/modals/EditBlogModal.tsx
@@ -0,0 +1,247 @@
+import React, { useState } from 'react'
+import {
+ Box,
+ Button,
+ TextField,
+ Typography,
+ Modal,
+ Select,
+ MenuItem,
+ FormControl,
+ InputLabel,
+ SelectChangeEvent,
+ OutlinedInput,
+ Chip,
+ IconButton
+} from '@mui/material'
+import { useDispatch } from 'react-redux'
+import { togglePublishBlogModal } from '../../state/features/globalSlice'
+import AddIcon from '@mui/icons-material/Add'
+import CloseIcon from '@mui/icons-material/Close'
+import { styled } from '@mui/system'
+interface SelectOption {
+ id: string
+ name: string
+}
+interface MyModalProps {
+ open: boolean
+ onClose: () => void
+ onPublish: (
+ title: string,
+ description: string,
+ category: string,
+ tags: string[]
+ ) => Promise
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+
+
+
+ )
+ }
+ if (section?.type === 'image') {
+ return (
+
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+ 
+
+
+
+ )
+ }
+ if (section?.type === 'video') {
+ return (
+
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+
+
+
+ )
+ }
+ if (section?.type === 'audio') {
+ return (
+
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+ {
+ if (!blog || !postId) return
+
+ const formBlogId = addPrefix(blog)
+ const formPostId =
+ buildIdentifierFromCreateTitleIdAndId(
+ formBlogId,
+ postId
+ )
+ if (audioPostId && formPostId !== audioPostId) {
+ tempSaveAudio.current = {
+ ...(tempSaveAudio.current || {}),
+ currentSelection: section,
+ message:
+ 'You are current on a playlist. Would you like to switch?'
+ }
+ setisOpenSwitchPlaylistModal(true)
+ } else {
+ if (!audios && saveAudio?.current) {
+ const findIndex = (
+ saveAudio?.current?.audios || []
+ ).findIndex(
+ (item: any) =>
+ item.identifier ===
+ section.content.identifier
+ )
+ dispatch(setAudio(saveAudio?.current))
+ dispatch(setCurrAudio(findIndex))
+ return
+ }
+
+ const findIndex = (audios || []).findIndex(
+ (item) =>
+ item.identifier === section.content.identifier
+ )
+ if (findIndex >= 0) {
+ dispatch(setCurrAudio(findIndex))
+ }
+ }
+ }}
+ title={section.content?.title}
+ description={section.content?.description}
+ author=""
+ />
+
+
+
+ )
+ }
+ if (section?.type === 'file') {
+ return (
+
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+
+
+
+ )
+ }
+ })}
+
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+
+
+
+ )
+ }
+ if (section?.type === 'image') {
+ return (
+
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+
+
+
+
+
+
+ )
+ }
+
+ if (section?.type === 'video') {
+ return (
+
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+
+
+
+
+
+ )
+ }
+ if (section?.type === 'audio') {
+ return (
+
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+ {
+ if (!blog || !postId) return
+ const formBlogId = addPrefix(blog)
+ const formPostId =
+ buildIdentifierFromCreateTitleIdAndId(
+ formBlogId,
+ postId
+ )
+ if (formPostId !== audioPostId) {
+ tempSaveAudio.current = {
+ ...(tempSaveAudio.current || {}),
+ currentSelection: section,
+ message:
+ 'You are current on a playlist. Would you like to switch?'
+ }
+ setisOpenSwitchPlaylistModal(true)
+ } else {
+ const findIndex = (audios || []).findIndex(
+ (item) =>
+ item.identifier ===
+ section.content.identifier
+ )
+ if (findIndex >= 0) {
+ dispatch(setCurrAudio(findIndex))
+ }
+ }
+ }}
+ title={section.content?.title}
+ description={section.content?.description}
+ author=""
+ />
+
+
+
+ )
+ }
+ if (section?.type === 'file') {
+ return (
+
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+
+
+
+ )
+ }
+ })}
+ - */}
+ {!mode && countNewPosts > 0 && !isFiltering && (
+
CreatEditProfile
+ )
+}
diff --git a/src/pages/CreatePost/CreatePost-styles.ts b/src/pages/CreatePost/CreatePost-styles.ts
new file mode 100644
index 0000000..da84d3a
--- /dev/null
+++ b/src/pages/CreatePost/CreatePost-styles.ts
@@ -0,0 +1,14 @@
+import { styled } from '@mui/system'
+
+import { Button } from '@mui/material'
+
+export const BuilderButton = styled(Button)(({ theme }) => ({
+ backgroundColor: theme.palette.primary.light,
+ color: theme.palette.text.primary,
+ fontFamily: 'Arial',
+ transition: "all 0.3s ease-in-out",
+ "&:hover": {
+ cursor: "pointer",
+ filter: "brightness(0.9)"
+ }
+}));
\ No newline at end of file
diff --git a/src/pages/CreatePost/CreatePost.tsx b/src/pages/CreatePost/CreatePost.tsx
new file mode 100644
index 0000000..e66783d
--- /dev/null
+++ b/src/pages/CreatePost/CreatePost.tsx
@@ -0,0 +1,194 @@
+import { Box, Button, Typography } from '@mui/material'
+import React, { useMemo, useState } from 'react'
+import { ReusableModal } from '../../components/modals/ReusableModal'
+import { CreatePostBuilder } from './CreatePostBuilder'
+import { CreatePostMinimal } from './CreatePostMinimal'
+import HandymanRoundedIcon from '@mui/icons-material/HandymanRounded'
+import HourglassFullRoundedIcon from '@mui/icons-material/HourglassFullRounded'
+import { display } from '@mui/system'
+import { useDispatch, useSelector } from 'react-redux'
+import { setIsLoadingGlobal } from '../../state/features/globalSlice'
+import { useParams } from 'react-router-dom'
+import { checkStructure } from '../../utils/checkStructure'
+import { RootState } from '../../state/store'
+import {
+ addPrefix,
+ buildIdentifierFromCreateTitleIdAndId
+} from '../../utils/blogIdformats'
+import { Tipping } from '../../components/common/Tipping/Tipping'
+type EditorType = 'minimal' | 'builder'
+interface CreatePostProps {
+ mode?: string
+}
+export const CreatePost = ({ mode }: CreatePostProps) => {
+ const { user: username, postId, blog } = useParams()
+ const fullPostId = useMemo(() => {
+ if (!blog || !postId || mode !== 'edit') return ''
+ const formBlogId = addPrefix(blog)
+ const formPostId = buildIdentifierFromCreateTitleIdAndId(formBlogId, postId)
+ return formPostId
+ }, [blog, postId, mode])
+ const { user } = useSelector((state: RootState) => state.auth)
+
+ const [toggleEditorType, setToggleEditorType] = useState
+ {Array.from({ length: gridItemCount }, (_, i) => (
+
+ ))}
+
+
+
+ {editingSection &&
+ editingSection.id === section.id ? null : (
+
+
+ removeSection(section)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+ editSection(section)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+
+
+ )}
+
+
+ )
+ }
+ if (section.type === 'image') {
+ return (
+
+
+
+
+
+ removeSection(section)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+ editImage(base64, section)}
+ >
+
+
+
+
+
+ )
+ }
+
+ if (section.type === 'video') {
+ return (
+
+
+
+
+ removeSection(section)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+
+ editVideo(
+ {
+ name: video.name,
+ identifier: video.identifier,
+ service: video.service,
+ title: video?.metadata?.title,
+ description: video?.metadata?.description
+ },
+ section
+ )
+ }
+ />
+
+
+
+
+ )
+ }
+ if (section.type === 'audio') {
+ return (
+
+
+
+ {}}
+ title={section.content?.title}
+ description={section.content?.description}
+ author=""
+ />
+
+ removeSection(section)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+
+ editAudio(
+ {
+ name: audio.name,
+ identifier: audio.identifier,
+ service: audio.service,
+ title: audio?.metadata?.title,
+ description: audio?.metadata?.description
+ },
+ section
+ )
+ }
+ />
+
+
+
+
+ )
+ }
+ if (section.type === 'file') {
+ return (
+
+
+
+
+ removeSection(section)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+
+
+
+
+ )
+ }
+ })}
+
+
+ {editingSection &&
+ editingSection.id === section.id ? null : (
+
+
+
+ removeSection(section, rowIndex)
+ }
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+ editSection(section)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+
+
+ )}
+
+
+ )
+ }
+ if (section.type === 'image') {
+ return (
+
+
+
+
+
+ removeSection(section, rowIndex)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+ editImage(base64, section)}
+ >
+
+
+
+
+
+ )
+ }
+
+ if (section.type === 'video') {
+ return (
+
+
+
+
+ removeSection(section, rowIndex)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+
+ editVideo(
+ {
+ name: video.name,
+ identifier: video.identifier,
+ service: video.service,
+ title: video?.metadata?.title,
+ description: video?.metadata?.description
+ },
+ section
+ )
+ }
+ />
+
+
+
+
+ )
+ }
+ if (section.type === 'audio') {
+ return (
+
+
+
+ {}}
+ title={section.content?.title}
+ description={section.content?.description}
+ author=""
+ />
+
+ removeSection(section, rowIndex)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+
+ editAudio(
+ {
+ name: audio.name,
+ identifier: audio.identifier,
+ service: audio.service,
+ title: audio?.metadata?.title,
+ description: audio?.metadata?.description
+ },
+ section
+ )
+ }
+ />
+
+
+
+
+ )
+ }
+ if (section.type === 'file') {
+ return (
+
+
+
+
+ removeSection(section, rowIndex)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+
+
+
+
+ )
+ }
+ })}
+ {row.type === 'image' && row.ids.length < 3 && (
+ -
+ {navItems.map((navItem: any) => (
+
Home
+ )
+}
diff --git a/src/pages/Mail/AliasMail.tsx b/src/pages/Mail/AliasMail.tsx
new file mode 100644
index 0000000..7c245bf
--- /dev/null
+++ b/src/pages/Mail/AliasMail.tsx
@@ -0,0 +1,297 @@
+import React, {
+ FC,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState
+} from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import EditIcon from '@mui/icons-material/Edit'
+import { Box, Button, Input, Typography, useTheme } from '@mui/material'
+import { useFetchPosts } from '../../hooks/useFetchPosts'
+import LazyLoad from '../../components/common/LazyLoad'
+import { removePrefix } from '../../utils/blogIdformats'
+import { NewMessage } from './NewMessage'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+import { useFetchMail } from '../../hooks/useFetchMail'
+import { ShowMessage } from './ShowMessage'
+import { fetchAndEvaluateMail } from '../../utils/fetchMail'
+import { addToHashMapMail } from '../../state/features/mailSlice'
+import {
+ setIsLoadingGlobal,
+ setUserAvatarHash
+} from '../../state/features/globalSlice'
+import SimpleTable from './MailTable'
+import { MAIL_SERVICE_TYPE } from '../../constants/mail'
+import { BlogPost } from '../../state/features/blogSlice'
+
+interface AliasMailProps {
+ value: string
+}
+export const AliasMail = ({ value }: AliasMailProps) => {
+ const theme = useTheme()
+ const { user } = useSelector((state: RootState) => state.auth)
+ const [isOpen, setIsOpen] = useState
+
+ Chat
+ Group: {groupInfo?.groupName}
+
+ {isInitialLoad && (
+ getOldMailMessages(currentThread)}
+ >
+ )}
+
+
+ {messages.map((message) => {
+ return (
+
+
+
+
+
+ )
+}
diff --git a/src/pages/Mail/ChatInput.tsx b/src/pages/Mail/ChatInput.tsx
new file mode 100644
index 0000000..44bc67f
--- /dev/null
+++ b/src/pages/Mail/ChatInput.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import { TextField, Button, Box } from '@mui/material'
+import SendIcon from '@mui/icons-material/Send'
+
+export const ChatInput = ({ onSendMessage }: any) => {
+ const [message, setMessage] = useState('')
+
+ const handleInputChange = (e: any) => {
+ setMessage(e.target.value)
+ }
+
+ const handleSendMessage = async () => {
+ if (message.trim() !== '') {
+ try {
+ await onSendMessage(message)
+ setMessage('')
+ } catch (error) {}
+ }
+ }
+
+ const handleKeyDown = (e: any) => {
+ if (e.key === 'Enter' && message.trim() !== '') {
+ handleSendMessage()
+ e.preventDefault() // Prevents a newline in the TextField
+ }
+ }
+
+ return (
+
+
+ )
+}
diff --git a/src/pages/Mail/GroupMail.tsx b/src/pages/Mail/GroupMail.tsx
new file mode 100644
index 0000000..7ce8014
--- /dev/null
+++ b/src/pages/Mail/GroupMail.tsx
@@ -0,0 +1,498 @@
+import React, {
+ FC,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState
+} from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import EditIcon from '@mui/icons-material/Edit'
+import { Box, Button, Input, Typography, useTheme } from '@mui/material'
+import { useFetchPosts } from '../../hooks/useFetchPosts'
+import LazyLoad from '../../components/common/LazyLoad'
+import { removePrefix } from '../../utils/blogIdformats'
+import { NewMessage } from './NewMessage'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+import { useFetchMail } from '../../hooks/useFetchMail'
+import { ShowMessage } from './ShowMessage'
+import { fetchAndEvaluateMail } from '../../utils/fetchMail'
+import { addToHashMapMail } from '../../state/features/mailSlice'
+import MailIcon from '@mui/icons-material/Mail'
+import {
+ setIsLoadingCustom,
+ setIsLoadingGlobal,
+ setUserAvatarHash
+} from '../../state/features/globalSlice'
+import SimpleTable from './MailTable'
+import { MAIL_SERVICE_TYPE } from '../../constants/mail'
+import { BlogPost } from '../../state/features/blogSlice'
+import {
+ base64ToUint8Array,
+ objectToBase64,
+ uint8ArrayToObject
+} from '../../utils/toBase64'
+import { formatDate } from '../../utils/time'
+import { NewThread } from './NewThread'
+import { Thread } from './Thread'
+import { current } from '@reduxjs/toolkit'
+import { delay } from '../../utils/helpers'
+import { setNotification } from '../../state/features/notificationsSlice'
+import { getNameInfo } from '../../utils/apiCalls'
+import BackupIcon from '@mui/icons-material/Backup'
+import { FlexLayout } from './FlexLayout'
+interface AliasMailProps {
+ groupInfo: any
+}
+export const GroupMail = ({ groupInfo }: AliasMailProps) => {
+ const theme = useTheme()
+ const { user } = useSelector((state: RootState) => state.auth)
+ const [isOpen, setIsOpen] = useState
+
+ {allThreads.length === 0 && (
+
+ )}
+ {allThreads.length > 0 && (
+
+
+ )
+}
diff --git a/src/pages/Mail/Mail.tsx b/src/pages/Mail/Mail.tsx
new file mode 100644
index 0000000..155bcdd
--- /dev/null
+++ b/src/pages/Mail/Mail.tsx
@@ -0,0 +1,719 @@
+import React, {
+ FC,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState
+} from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import EditIcon from '@mui/icons-material/Edit'
+import CloseIcon from '@mui/icons-material/Close'
+import Joyride, { ACTIONS, EVENTS, STATUS, Step } from 'react-joyride'
+import SendIcon from '@mui/icons-material/Send'
+import MailIcon from '@mui/icons-material/Mail'
+import GroupIcon from '@mui/icons-material/Group'
+import { styled } from '@mui/system'
+import {
+ Box,
+ Button,
+ Input,
+ Typography,
+ useTheme,
+ IconButton,
+ Select,
+ InputLabel,
+ FormControl,
+ MenuItem,
+ OutlinedInput,
+ SelectChangeEvent
+} from '@mui/material'
+import { useFetchPosts } from '../../hooks/useFetchPosts'
+import LazyLoad from '../../components/common/LazyLoad'
+import { removePrefix } from '../../utils/blogIdformats'
+import { NewMessage } from './NewMessage'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+import { useFetchMail } from '../../hooks/useFetchMail'
+import { ShowMessage } from './ShowMessage'
+import { fetchAndEvaluateMail } from '../../utils/fetchMail'
+import { addToHashMapMail } from '../../state/features/mailSlice'
+import { setIsLoadingGlobal } from '../../state/features/globalSlice'
+import SimpleTable from './MailTable'
+import { AliasMail } from './AliasMail'
+import { SentMail } from './SentMail'
+import { NewThread } from './NewThread'
+import { GroupMail } from './GroupMail'
+
+const steps: Step[] = [
+ {
+ content: (
+
+
+ {recentThreads.map((thread) => {
+ return (
+ Latest threads
+ {
+ setCurrentThread(thread)
+ }}
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ margin: '5px 10px',
+ gap: '20px',
+ padding: '20px 10px',
+ border: 'solid 1px',
+ borderRadius: '5px',
+ marginBottom: '10px',
+ cursor: 'pointer',
+ position: 'relative'
+ }}
+ >
+ {user?.name === thread?.threadOwner && (
+ {
+ e.stopPropagation()
+ republishThread(thread)
+ }}
+ >
+
+ )}
+
+ )
+ })}
+
+
+
+
+ {thread?.threadData?.title}
+
+
+
+ last message: @{thread.name} - {formatDate(thread?.created)}
+
+
+
+
+ )}
+ {allThreads.map((thread) => {
+ return (
+ All threads
+ {
+ setCurrentThread(thread)
+ }}
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ margin: '5px 10px',
+ gap: '20px',
+ padding: '20px 10px',
+ border: 'solid 1px',
+ borderRadius: '5px',
+ marginBottom: '10px',
+ cursor: 'pointer'
+ }}
+ >
+
+ )
+ })}
+
+ {allThreads.length > 0 && (
+
+ )}
+
+
+
+ {thread?.threadData?.title}
+
+
+
+ ),
+ placement: 'center',
+ target: '.step-1'
+ },
+
+ {
+ target: '.step-2',
+ content: (
+ Welcome To Q-Mail
++ Let's take a tour +
++ The Qortal community, along with its development team and the creators + of this application, cannot be held accountable for any content + published or displayed. Furthermore, they bear no responsibility for + any data loss that may occur as a result of using this application. +
+
+
+ ),
+ placement: 'bottom'
+ },
+ {
+ target: '.step-3',
+ content: (
+ Composing a mail message
++ Compose a secure message featuring encrypted attachments (up to 25MB + per attachment). +
++ To protect the identity of the recipient, assign them an alias for + added anonymity. +
+
+
+ ),
+ placement: 'bottom'
+ }
+]
+
+const GroupTabs = styled(Tabs)({
+ maxWidth: '50vw'
+})
+
+interface MailProps {
+ isFromTo: boolean
+}
+
+export const Mail = ({ isFromTo }: MailProps) => {
+ const theme = useTheme()
+ const { user } = useSelector((state: RootState) => state.auth)
+ const [isOpen, setIsOpen] = useStateWhat is an alias?
++ To conceal the identity of the message recipient, utilize the alias + option when sending. +
++ For instance, instruct your friend to address the message to you using + the alias 'FrederickGreat'. +
++ To access messages sent to that alias, simply enter 'FrederickGreat' + in the provided input field and click the '+ Alias' button. +
+
+
+ {label}
+
+
+
+
+ )
+ }
+
+ function CustomTabLabel({ index, label }: any) {
+ return (
+
+
+ {label}
+
+ {
+ event.stopPropagation() // Add this l
+ setValueTab(0)
+ const newList = [...alias]
+
+ newList.splice(index, 1)
+
+ setAlias(newList)
+ if (userName) {
+ try {
+ localStorage.setItem(
+ `alias-qmail-${userName}`,
+ JSON.stringify(newList)
+ )
+ } catch (error) {}
+ }
+ }}
+ >
+
+
+ )
+ }
+
+ function CustomTabLabelGroup({ index, label }: any) {
+ return (
+
+
+ )
+ }
+
+ useEffect(() => {
+ const savedTourStatus = localStorage.getItem('tourStatus-qmail')
+ if (!savedTourStatus || savedTourStatus === STATUS.SKIPPED) {
+ setRun(true)
+ }
+ }, [])
+
+ useEffect(() => {
+ if (!userName) return
+ const savedAlias = localStorage.getItem(`alias-qmail-${userName}`)
+ if (savedAlias) {
+ try {
+ setAlias(JSON.parse(savedAlias))
+ } catch (error) {
+ console.error('Error parsing JSON from localStorage:', error)
+ }
+ }
+ }, [userName])
+
+ const handleJoyrideCallback = (data: any) => {
+ const { action, status } = data
+
+ if (status === STATUS.FINISHED || status === STATUS.SKIPPED) {
+ setRun(false)
+ localStorage.setItem('tourStatus-qmail', status)
+ }
+ }
+
+ const handleOptionChange = (event: SelectChangeEvent
+ {value === index && children}
+
+ )
+}
diff --git a/src/pages/Mail/MailTable.tsx b/src/pages/Mail/MailTable.tsx
new file mode 100644
index 0000000..95e919c
--- /dev/null
+++ b/src/pages/Mail/MailTable.tsx
@@ -0,0 +1,171 @@
+import * as React from 'react'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import Paper from '@mui/material/Paper'
+import { Avatar, Box } from '@mui/material'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import { formatTimestamp } from '../../utils/time'
+
+const tableCellFontSize = '16px'
+
+interface Data {
+ name: string
+ description: string
+ createdAt: number
+ user: string
+ id: string
+ tags: string[]
+ subject?: string
+}
+
+interface ColumnData {
+ dataKey: keyof Data
+ label: string
+ numeric?: boolean
+ width?: number
+}
+
+const columns: ColumnData[] = [
+ {
+ label: 'Sender',
+ dataKey: 'user',
+ width: 200
+ },
+ {
+ label: 'Subject',
+ dataKey: 'description'
+ },
+ {
+ label: 'Date',
+ dataKey: 'createdAt',
+ numeric: true,
+ width: 200
+ }
+]
+
+
+
+function fixedHeaderContent() {
+ return (
+