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

added contextmenu for groups

Browse Source
This commit is contained in:
PhilReact
2024-09-16 12:35:43 +03:00
parent 47c3ab2779
commit c56b4824d7
13 changed files with 2362 additions and 1653 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Group/Forum/GroupMail.tsx
View File

@@ -53,7 +53,7 @@ import ArrowDownSVG from "../../../assets/svgs/ArrowDown.svg";
import { LoadingSnackbar } from "../../Snackbar/LoadingSnackbar";
import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from "../../../utils/events";
import RefreshIcon from '@mui/icons-material/Refresh';
import { getBaseApiReact } from "../../../App";
import { getArbitraryEndpointReact, getBaseApiReact } from "../../../App";
import { WrapperUserAction } from "../../WrapperUserAction";
import { addDataPublishesFunc, getDataPublishesFunc } from "../Group";
const filterOptions = ["Recently active", "Newest", "Oldest"];
@@ -126,6 +126,7 @@ export const GroupMail = ({
const res = await fetch(
`${getBaseApiReact()}/arbitrary/DOCUMENT/${name}/${identifier}?encoding=base64`
);
if(!res?.ok) return
data = await res.text();
await addDataPublishesFunc({...resource, data}, groupId, 'thread')
@@ -176,7 +177,7 @@ export const GroupMail = ({
}
const identifier = `grp-${groupId}-thread-`;
const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=${20}&includemetadata=false&offset=${offset}&reverse=${isReverse}&prefix=true`;
const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=${20}&includemetadata=false&offset=${offset}&reverse=${isReverse}&prefix=true`;
const response = await fetch(url, {
method: "GET",
headers: {
@@ -263,7 +264,7 @@ export const GroupMail = ({
// dispatch(setIsLoadingCustom("Loading recent threads"));
const identifier = `thmsg-grp-${groupId}-thread-`;
const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=100&includemetadata=false&offset=${0}&reverse=true&prefix=true`;
const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=100&includemetadata=false&offset=${0}&reverse=true&prefix=true`;
const response = await fetch(url, {
method: "GET",
headers: {
@@ -299,7 +300,7 @@ export const GroupMail = ({
const getMessageForThreads = newArray.map(async (message: any) => {
try {
const identifierQuery = message.threadId;
const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=${threadIdentifier}&identifier=${identifierQuery}&limit=1&includemetadata=false&offset=${0}&reverse=true&prefix=true`;
const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${threadIdentifier}&identifier=${identifierQuery}&limit=1&includemetadata=false&offset=${0}&reverse=true&prefix=true`;
const response = await fetch(url, {
method: "GET",
headers: {

6
src/components/Group/Forum/Thread copy.tsx
View File

@@ -24,7 +24,7 @@ import ReturnSVG from '../../../assets/svgs/Return.svg'
import { NewThread } from './NewThread'
import { decryptPublishes } from '../../Chat/GroupAnnouncements'
import { getBaseApi } from '../../../background'
import { getBaseApiReact } from '../../../App'
import { getArbitraryEndpointReact, getBaseApiReact } from '../../../App'
interface ThreadProps {
currentThread: any
groupInfo: any
@@ -91,7 +91,7 @@ export const Thread = ({
const offset = messages.length
const identifier = `thmsg-${threadId}`
const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=20&includemetadata=false&offset=${offset}&reverse=true&prefix=true`
const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=20&includemetadata=false&offset=${offset}&reverse=true&prefix=true`
const response = await fetch(url, {
method: 'GET',
headers: {
@@ -180,7 +180,7 @@ export const Thread = ({
let threadId = groupInfo.threadId
const identifier = `thmsg-${threadId}`
const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=20&includemetadata=false&offset=${0}&reverse=true&prefix=true`
const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=20&includemetadata=false&offset=${0}&reverse=true&prefix=true`
const response = await fetch(url, {
method: 'GET',
headers: {

702
src/components/Group/Forum/Thread.tsx
View File

@@ -1,5 +1,20 @@
import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Box, Button, ButtonBase, IconButton, Skeleton } from "@mui/material";
import React, {
FC,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import {
Avatar,
Box,
Button,
ButtonBase,
IconButton,
Skeleton,
Typography,
} from "@mui/material";
import { ShowMessage } from "./ShowMessageWithoutModal";
import {
ComposeP,
@@ -10,22 +25,38 @@ import {
SingleThreadParent,
ThreadContainer,
ThreadContainerFullWidth,
ThreadInfoColumn,
ThreadInfoColumnNameP,
ThreadInfoColumnTime,
} from "./Mail-styles";
import { Spacer } from "../../../common/Spacer";
import { threadIdentifier } from "./GroupMail";
import LazyLoad from "../../../common/LazyLoad";
import ReturnSVG from "../../../assets/svgs/Return.svg";
import { NewThread } from "./NewThread";
import { decryptPublishes, getTempPublish } from "../../Chat/GroupAnnouncements";
import {
decryptPublishes,
getTempPublish,
} from "../../Chat/GroupAnnouncements";
import { LoadingSnackbar } from "../../Snackbar/LoadingSnackbar";
import { subscribeToEvent, unsubscribeFromEvent } from "../../../utils/events";
import RefreshIcon from "@mui/icons-material/Refresh";
import { getBaseApiReact, isMobile } from "../../../App";
import { ArrowDownward as ArrowDownwardIcon, ArrowUpward as ArrowUpwardIcon } from '@mui/icons-material';
import {
getArbitraryEndpointReact,
getBaseApiReact,
isMobile,
} from "../../../App";
import {
ArrowDownward as ArrowDownwardIcon,
ArrowUpward as ArrowUpwardIcon,
} from "@mui/icons-material";
import { addDataPublishesFunc, getDataPublishesFunc } from "../Group";
import { RequestQueueWithPromise } from "../../../utils/queue/queue";
const requestQueueSaveToLocal = new RequestQueueWithPromise(1)
const requestQueueDownloadPost = new RequestQueueWithPromise(3)
import { CustomLoader } from "../../../common/CustomLoader";
import { WrapperUserAction } from "../../WrapperUserAction";
import { formatTimestampForum } from "../../../utils/time";
const requestQueueSaveToLocal = new RequestQueueWithPromise(1);
const requestQueueDownloadPost = new RequestQueueWithPromise(3);
interface ThreadProps {
currentThread: any;
groupInfo: any;
@@ -33,22 +64,41 @@ interface ThreadProps {
members: any;
}
const getEncryptedResource = async ({ name, identifier, secretKey, resource, groupId, dataPublishes }) => {
let data = dataPublishes[`${name}-${identifier}`]
if(!data || (data?.update || data?.created !== (resource?.updated || resource?.created))){
const res = await requestQueueDownloadPost.enqueue(()=> {
return fetch(
`${getBaseApiReact()}/arbitrary/DOCUMENT/${name}/${identifier}?encoding=base64`
);
})
data = await res.text();
await requestQueueSaveToLocal.enqueue(()=> {
return addDataPublishesFunc({...resource, data}, groupId, 'thmsg')
})
} else {
data = data.data
const getEncryptedResource = async ({
name,
identifier,
secretKey,
resource,
groupId,
dataPublishes,
}) => {
let data = dataPublishes[`${name}-${identifier}`];
if (
!data ||
data?.update ||
data?.created !== (resource?.updated || resource?.created)
) {
const res = await requestQueueDownloadPost.enqueue(() => {
return fetch(
`${getBaseApiReact()}/arbitrary/DOCUMENT/${name}/${identifier}?encoding=base64`
);
});
if (!res.ok) {
const errorData = await res.json();
return {
error: errorData?.message,
};
}
data = await res.text();
if (data?.error || typeof data !== "string") return;
await requestQueueSaveToLocal.enqueue(() => {
return addDataPublishesFunc({ ...resource, data }, groupId, "thmsg");
});
} else {
data = data.data;
}
const response = await decryptPublishes([{ data }], secretKey);
const messageData = response[0];
@@ -63,9 +113,9 @@ export const Thread = ({
userInfo,
secretKey,
getSecretKey,
updateThreadActivityCurrentThread
updateThreadActivityCurrentThread,
}: ThreadProps) => {
const [tempPublishedList, setTempPublishedList] = useState([])
const [tempPublishedList, setTempPublishedList] = useState([]);
const [messages, setMessages] = useState<any[]>([]);
const [hashMapMailMessages, setHashMapMailMessages] = useState({});
const [hasFirstPage, setHasFirstPage] = useState(false);
@@ -77,7 +127,7 @@ export const Thread = ({
// Update: Use a new ref for the scrollable container
const threadContainerRef = useRef(null);
const threadBeginningRef = useRef(null)
// New state variables
const [showScrollButton, setShowScrollButton] = useState(false);
const [isAtBottom, setIsAtBottom] = useState(false);
@@ -85,18 +135,17 @@ export const Thread = ({
const secretKeyRef = useRef(null);
const currentThreadRef = useRef(null);
const containerRef = useRef(null);
const dataPublishes = useRef({})
const dataPublishes = useRef({});
const getSavedData = useCallback(async (groupId)=> {
const res = await getDataPublishesFunc(groupId, 'thmsg')
dataPublishes.current = res || {}
}, [])
const getSavedData = useCallback(async (groupId) => {
const res = await getDataPublishesFunc(groupId, "thmsg");
dataPublishes.current = res || {};
}, []);
useEffect(()=> {
if(!groupInfo?.groupId) return
getSavedData(groupInfo?.groupId)
}, [groupInfo?.groupId])
useEffect(() => {
if (!groupInfo?.groupId) return;
getSavedData(groupInfo?.groupId);
}, [groupInfo?.groupId]);
useEffect(() => {
currentThreadRef.current = currentThread;
@@ -114,9 +163,24 @@ export const Thread = ({
secretKey,
resource: message,
groupId: groupInfo?.groupId,
dataPublishes: dataPublishes.current
dataPublishes: dataPublishes.current,
});
if (responseDataMessage?.error) {
const fullObject = {
...message,
error: responseDataMessage?.error,
id: message.identifier,
};
setHashMapMailMessages((prev) => {
return {
...prev,
[message.identifier]: fullObject,
};
});
return;
}
const fullObject = {
...message,
...(responseDataMessage || {}),
@@ -128,39 +192,34 @@ export const Thread = ({
[message.identifier]: fullObject,
};
});
} catch (error) { }
} catch (error) {}
};
const setTempData = async () => {
try {
let threadId = currentThread.threadId;
const keyTemp = 'thread-post'
const getTempAnnouncements = await getTempPublish()
const keyTemp = "thread-post";
const getTempAnnouncements = await getTempPublish();
if (getTempAnnouncements?.[keyTemp]) {
let tempData = []
let tempData = [];
Object.keys(getTempAnnouncements?.[keyTemp] || {}).map((key) => {
const value = getTempAnnouncements?.[keyTemp][key]
const value = getTempAnnouncements?.[keyTemp][key];
if (value.data?.threadId === threadId) {
tempData.push(value.data)
tempData.push(value.data);
}
})
setTempPublishedList(tempData)
});
setTempPublishedList(tempData);
}
} catch (error) {
}
}
} catch (error) {}
};
const getMailMessages = React.useCallback(
async (groupInfo: any, before, after, isReverse, groupId) => {
try {
setTempPublishedList([])
setTempPublishedList([]);
setIsLoading(true);
setHasFirstPage(false);
setHasPreviousPage(false);
@@ -169,7 +228,7 @@ export const Thread = ({
let threadId = groupInfo.threadId;
const identifier = `thmsg-${threadId}`;
let url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=20&includemetadata=false&prefix=true`;
let url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=20&includemetadata=false&prefix=true`;
if (!isReverse) {
url = url + "&reverse=false";
}
@@ -191,29 +250,35 @@ export const Thread = ({
});
const responseData = await response.json();
let fullArrayMsg = [...responseData];
if (isReverse) {
fullArrayMsg = fullArrayMsg.reverse();
}
// let newMessages: any[] = []
for (const message of responseData) {
getIndividualMsg(message);
getIndividualMsg(message);
}
setMessages(fullArrayMsg);
if (before === null && after === null && isReverse) {
setTimeout(() => {
containerRef.current.scrollIntoView({ behavior: "smooth" });
}, 300);
}
if(after || before === null && after === null && !isReverse){
setTimeout(() => {
threadBeginningRef.current.scrollIntoView();
}, 100);
}
if (fullArrayMsg.length === 0) {
setTempData()
setTempData();
return;
}
// check if there are newer posts
const urlNewer = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=1&includemetadata=false&reverse=false&prefix=true&before=${fullArrayMsg[0].created}`;
const urlNewer = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=1&includemetadata=false&reverse=false&prefix=true&before=${
fullArrayMsg[0].created
}`;
const responseNewer = await fetch(urlNewer, {
method: "GET",
headers: {
@@ -229,9 +294,9 @@ export const Thread = ({
setHasPreviousPage(false);
}
// check if there are older posts
const urlOlder = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=1&includemetadata=false&reverse=false&prefix=true&after=${
const urlOlder = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=1&includemetadata=false&reverse=false&prefix=true&after=${
fullArrayMsg[fullArrayMsg.length - 1].created
}`;
}`;
const responseOlder = await fetch(urlOlder, {
method: "GET",
headers: {
@@ -245,14 +310,14 @@ export const Thread = ({
} else {
setHasLastPage(false);
setHasNextPage(false);
setTempData()
updateThreadActivityCurrentThread()
setTempData();
updateThreadActivityCurrentThread();
}
} catch (error) {
console.log('error', error)
console.log("error", error);
} finally {
setIsLoading(false);
getSavedData(groupId)
getSavedData(groupId);
}
},
[messages, secretKey]
@@ -332,7 +397,7 @@ export const Thread = ({
let threadId = groupInfo.threadId;
const identifier = `thmsg-${threadId}`;
const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=20&includemetadata=false&offset=${0}&reverse=true&prefix=true`;
const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=20&includemetadata=false&offset=${0}&reverse=true&prefix=true`;
const response = await fetch(url, {
method: "GET",
headers: {
@@ -359,7 +424,7 @@ export const Thread = ({
secretKey: secretKeyRef.current,
resource: message,
groupId: groupInfo?.groupId,
dataPublishes: dataPublishes.current
dataPublishes: dataPublishes.current,
});
const fullObject = {
@@ -381,7 +446,7 @@ export const Thread = ({
} else {
fullArrayMsg.unshift(fullObject);
}
} catch (error) { }
} catch (error) {}
}
setMessages(fullArrayMsg);
} catch (error) {
@@ -421,12 +486,14 @@ export const Thread = ({
// Remove duplicates based on the "identifier"
const uniqueItems = new Map();
combined.forEach(item => {
uniqueItems.set(item.identifier, item); // This will overwrite duplicates, keeping the last occurrence
combined.forEach((item) => {
uniqueItems.set(item.identifier, item); // This will overwrite duplicates, keeping the last occurrence
});
// Convert the map back to an array and sort by "created" timestamp in descending order
const sortedList = Array.from(uniqueItems.values()).sort((a, b) => a.created - b.created);
const sortedList = Array.from(uniqueItems.values()).sort(
(a, b) => a.created - b.created
);
return sortedList;
}, [tempPublishedList, messages]);
@@ -452,15 +519,15 @@ export const Thread = ({
setShowScrollButton(false);
}
};
setTimeout(() => {
handleScroll()
}, 400);
setTimeout(() => {
handleScroll();
}, 400);
container.addEventListener('scroll', handleScroll);
container.addEventListener("scroll", handleScroll);
// Cleanup
return () => {
container.removeEventListener('scroll', handleScroll);
container.removeEventListener("scroll", handleScroll);
};
}, [messages]);
@@ -470,31 +537,32 @@ export const Thread = ({
if (!container) return;
if (isAtBottom) {
container.scrollTo({ top: 0, behavior: 'smooth' }); // Scroll to top
container.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top
} else {
container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' }); // Scroll to bottom
container.scrollTo({ top: container.scrollHeight, behavior: "smooth" }); // Scroll to bottom
}
};
if (!currentThread) return null;
return (
<GroupContainer
sx={{
position: "relative",
width: "100%",
display: 'flex',
flexDirection: 'column',
overflow: 'hidden'
display: "flex",
flexDirection: "column",
overflow: "hidden",
}}
// Removed the ref from here since the scrollable area has changed
>
<Box sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexShrink: 0 // Corrected property name
}}>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
flexShrink: 0, // Corrected property name
}}
>
<NewThread
groupInfo={groupInfo}
isMessage={true}
@@ -509,65 +577,63 @@ export const Thread = ({
publishCallback={setTempData}
setPostReply={setPostReply}
/>
<Box sx={{
display: 'flex',
gap: isMobile ? '45px' : '35px',
alignItems: 'center',
padding: isMobile && '5px'
}}>
<ShowMessageReturnButton
<Box
sx={{
padding: isMobile && '5px',
minWidth: isMobile && '50px'
display: "flex",
gap: isMobile ? "45px" : "35px",
alignItems: "center",
padding: isMobile && "5px",
}}
>
<ShowMessageReturnButton
sx={{
padding: isMobile && "5px",
minWidth: isMobile && "50px",
}}
onClick={() => {
setMessages([]);
closeThread();
}}
>
<MailIconImg src={ReturnSVG} />
{!isMobile && (
<ComposeP>Return to Threads</ComposeP>
)}
{!isMobile && <ComposeP>Return to Threads</ComposeP>}
</ShowMessageReturnButton>
{/* Conditionally render the scroll buttons */}
{showScrollButton && (
isAtBottom ? (
{showScrollButton &&
(isAtBottom ? (
<ButtonBase onClick={scrollToPosition}>
<ArrowUpwardIcon
sx={{
color: 'white',
cursor: 'pointer',
fontSize: isMobile ? '28px' : '36px',
}}
/>
<ArrowUpwardIcon
sx={{
color: "white",
cursor: "pointer",
fontSize: isMobile ? "28px" : "36px",
}}
/>
</ButtonBase>
) : (
<ButtonBase onClick={scrollToPosition}>
<ArrowDownwardIcon
sx={{
color: 'white',
cursor: 'pointer',
fontSize: isMobile ? '28px' : '36px',
}}
/>
<ArrowDownwardIcon
sx={{
color: "white",
cursor: "pointer",
fontSize: isMobile ? "28px" : "36px",
}}
/>
</ButtonBase>
)
)}
))}
</Box>
</Box>
<ThreadContainerFullWidth
sx={{
flexGrow: 1,
overflow: 'auto'
overflow: "auto",
}}
ref={threadContainerRef} // Updated ref attached here
>
<div ref={threadBeginningRef}/>
<ThreadContainer>
<Spacer height={isMobile ? '10px' : '30px'} />
<Spacer height={isMobile ? "10px" : "30px"} />
<Box
sx={{
width: "100%",
@@ -576,11 +642,15 @@ export const Thread = ({
justifyContent: "space-between",
}}
>
<GroupNameP sx={{
fontSize: isMobile && '18px'
}}>{currentThread?.threadData?.title}</GroupNameP>
<GroupNameP
sx={{
fontSize: isMobile && "18px",
}}
>
{currentThread?.threadData?.title}
</GroupNameP>
</Box>
<Spacer height={'15px'} />
<Spacer height={"15px"} />
<Box
sx={{
@@ -592,13 +662,19 @@ export const Thread = ({
}}
>
<Button
sx={{
padding: isMobile && '5px',
fontSize: isMobile && '14px',
textTransformation: 'capitalize'
}}
sx={{
padding: isMobile && "5px",
fontSize: isMobile && "14px",
textTransformation: "capitalize",
}}
onClick={() => {
getMailMessages(currentThread, null, null, false, groupInfo?.groupId);
getMailMessages(
currentThread,
null,
null,
false,
groupInfo?.groupId
);
}}
disabled={!hasFirstPage}
variant="contained"
@@ -606,11 +682,11 @@ export const Thread = ({
First
</Button>
<Button
sx={{
padding: isMobile && '5px',
fontSize: isMobile && '14px',
textTransformation: 'capitalize'
}}
sx={{
padding: isMobile && "5px",
fontSize: isMobile && "14px",
textTransformation: "capitalize",
}}
onClick={() => {
getMailMessages(
currentThread,
@@ -626,11 +702,11 @@ export const Thread = ({
Previous
</Button>
<Button
sx={{
padding: isMobile && '5px',
fontSize: isMobile && '14px',
textTransformation: 'capitalize'
}}
sx={{
padding: isMobile && "5px",
fontSize: isMobile && "14px",
textTransformation: "capitalize",
}}
onClick={() => {
getMailMessages(
currentThread,
@@ -646,13 +722,19 @@ export const Thread = ({
Next
</Button>
<Button
sx={{
padding: isMobile && '5px',
fontSize: isMobile && '14px',
textTransformation: 'capitalize'
}}
sx={{
padding: isMobile && "5px",
fontSize: isMobile && "14px",
textTransformation: "capitalize",
}}
onClick={() => {
getMailMessages(currentThread, null, null, true, groupInfo?.groupId);
getMailMessages(
currentThread,
null,
null,
true,
groupInfo?.groupId
);
}}
disabled={!hasLastPage}
variant="contained"
@@ -660,12 +742,93 @@ export const Thread = ({
Last
</Button>
</Box>
<Spacer height={isMobile ? '10px' : '30px'} />
<Spacer height={isMobile ? "10px" : "30px"} />
{combinedListTempAndReal.map((message, index, list) => {
let fullMessage = message;
if (hashMapMailMessages[message?.identifier]) {
fullMessage = hashMapMailMessages[message.identifier];
if (fullMessage?.error) {
return (
<SingleThreadParent
sx={{
height: "auto",
}}
>
<Box
style={{
width: "100%",
borderRadius: "8px",
overflow: "hidden",
position: "relative",
flexDirection: "column",
}}
>
<Box
sx={{
display: "flex",
alignItems: "flex-start",
gap: "10px",
}}
>
<WrapperUserAction
disabled={userInfo?.name === message?.name}
address={undefined}
name={message?.name}
>
<Avatar
sx={{
height: "50px",
width: "50px",
}}
src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
message?.name
}/qortal_avatar?async=true`}
alt={message?.name}
>
{message?.name?.charAt(0)}
</Avatar>
</WrapperUserAction>
<ThreadInfoColumn>
<WrapperUserAction
disabled={userInfo?.name === message?.name}
address={undefined}
name={message?.name}
>
<ThreadInfoColumnNameP>
{message?.name}
</ThreadInfoColumnNameP>
</WrapperUserAction>
<ThreadInfoColumnTime>
{formatTimestampForum(message?.created)}
</ThreadInfoColumnTime>
</ThreadInfoColumn>
</Box>
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
}}
>
<Typography
sx={{
fontSize: "18px",
color: "white",
}}
>
{fullMessage?.error}
</Typography>
</Box>
</Box>
</SingleThreadParent>
);
}
return (
<ShowMessage
key={message?.identifier}
@@ -686,20 +849,85 @@ export const Thread = ({
}
return (
<SingleThreadParent>
<Skeleton
variant="rectangular"
<SingleThreadParent
sx={{
height: "auto",
}}
>
<Box
style={{
width: "100%",
height: 60,
borderRadius: "8px",
overflow: "hidden",
position: "relative",
flexDirection: "column",
}}
/>
>
<Box
sx={{
display: "flex",
alignItems: "flex-start",
gap: "10px",
}}
>
<WrapperUserAction
disabled={userInfo?.name === message?.name}
address={undefined}
name={message?.name}
>
<Avatar
sx={{
height: "50px",
width: "50px",
}}
src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
message?.name
}/qortal_avatar?async=true`}
alt={message?.name}
>
{message?.name?.charAt(0)}
</Avatar>
</WrapperUserAction>
<ThreadInfoColumn>
<WrapperUserAction
disabled={userInfo?.name === message?.name}
address={undefined}
name={message?.name}
>
<ThreadInfoColumnNameP>
{message?.name}
</ThreadInfoColumnNameP>
</WrapperUserAction>
<ThreadInfoColumnTime>
{formatTimestampForum(message?.created)}
</ThreadInfoColumnTime>
</ThreadInfoColumn>
</Box>
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
}}
>
<CustomLoader />
<Typography
sx={{
fontSize: "18px",
color: "white",
}}
>
Downloading from QDN
</Typography>
</Box>
</Box>
</SingleThreadParent>
);
})}
<div ref={containerRef} />
{!hasLastPage && !isLoading && (
<>
<Spacer height="20px" />
@@ -714,7 +942,13 @@ export const Thread = ({
variant="outlined"
startIcon={<RefreshIcon />}
onClick={() => {
getMailMessages(currentThread, null, null, true, groupInfo?.groupId);
getMailMessages(
currentThread,
null,
null,
true,
groupInfo?.groupId
);
}}
sx={{
color: "white",
@@ -726,8 +960,11 @@ export const Thread = ({
</>
)}
{messages?.length > 4 && (
<>
<Box sx={{
width: '100%',
visibility: messages?.length > 4 ? 'visible' : 'hidden'
}}>
<Spacer height="30px" />
<Box
sx={{
@@ -739,77 +976,90 @@ export const Thread = ({
}}
>
<Button
sx={{
padding: isMobile && '5px',
fontSize: isMobile && '14px',
textTransformation: 'capitalize'
}}
onClick={() => {
getMailMessages(currentThread, null, null, false, groupInfo?.groupId);
}}
disabled={!hasFirstPage}
variant="contained"
>
First
</Button>
<Button
sx={{
padding: isMobile && '5px',
fontSize: isMobile && '14px',
textTransformation: 'capitalize'
}}
onClick={() => {
getMailMessages(
currentThread,
messages[0].created,
null,
false,
groupInfo?.groupId
);
}}
disabled={!hasPreviousPage}
variant="contained"
>
Previous
</Button>
<Button
sx={{
padding: isMobile && '5px',
fontSize: isMobile && '14px',
textTransformation: 'capitalize'
}}
onClick={() => {
getMailMessages(
currentThread,
null,
messages[messages.length - 1].created,
false,
groupInfo?.groupId
);
}}
disabled={!hasNextPage}
variant="contained"
>
Next
</Button>
<Button
sx={{
padding: isMobile && '5px',
fontSize: isMobile && '14px',
textTransformation: 'capitalize'
}}
onClick={() => {
getMailMessages(currentThread, null, null, true, groupInfo?.groupId);
}}
disabled={!hasLastPage}
variant="contained"
>
Last
</Button>
sx={{
padding: isMobile && "5px",
fontSize: isMobile && "14px",
textTransformation: "capitalize",
}}
onClick={() => {
getMailMessages(
currentThread,
null,
null,
false,
groupInfo?.groupId
);
}}
disabled={!hasFirstPage}
variant="contained"
>
First
</Button>
<Button
sx={{
padding: isMobile && "5px",
fontSize: isMobile && "14px",
textTransformation: "capitalize",
}}
onClick={() => {
getMailMessages(
currentThread,
messages[0].created,
null,
false,
groupInfo?.groupId
);
}}
disabled={!hasPreviousPage}
variant="contained"
>
Previous
</Button>
<Button
sx={{
padding: isMobile && "5px",
fontSize: isMobile && "14px",
textTransformation: "capitalize",
}}
onClick={() => {
getMailMessages(
currentThread,
null,
messages[messages.length - 1].created,
false,
groupInfo?.groupId
);
}}
disabled={!hasNextPage}
variant="contained"
>
Next
</Button>
<Button
sx={{
padding: isMobile && "5px",
fontSize: isMobile && "14px",
textTransformation: "capitalize",
}}
onClick={() => {
getMailMessages(
currentThread,
null,
null,
true,
groupInfo?.groupId
);
}}
disabled={!hasLastPage}
variant="contained"
>
Last
</Button>
</Box>
<Spacer height="30px" />
</>
)}
</Box>
<div ref={containerRef} />
</ThreadContainer>
</ThreadContainerFullWidth>
<LoadingSnackbar

114
src/components/Group/Group.tsx
View File

@@ -33,6 +33,7 @@ import RefreshIcon from "@mui/icons-material/Refresh";
import AnnouncementsIcon from "@mui/icons-material/Notifications";
import GroupIcon from "@mui/icons-material/Group";
import PersonIcon from "@mui/icons-material/Person";
import {
AuthenticatedContainerInnerRight,
CustomButton,
@@ -45,6 +46,7 @@ import MarkChatUnreadIcon from "@mui/icons-material/MarkChatUnread";
import {
MyContext,
clearAllQueues,
getArbitraryEndpointReact,
getBaseApiReact,
isMobile,
pauseAllQueues,
@@ -74,6 +76,7 @@ import { flushSync } from "react-dom";
import { useMessageQueue } from "../../MessageQueueContext";
import { DrawerComponent } from "../Drawer/Drawer";
import { isExtMsg } from "../../background";
import { ContextMenu } from "../ContextMenu";
// let touchStartY = 0;
// let disablePullToRefresh = false;
@@ -195,6 +198,7 @@ export const decryptResource = async (data: string) => {
(response) => {
if (!response?.error) {
res(response);
return
}
rej(response.error);
}
@@ -399,8 +403,11 @@ export const Group = ({
const [groupAnnouncements, setGroupAnnouncements] = React.useState({});
const [defaultThread, setDefaultThread] = React.useState(null);
const [isOpenDrawer, setIsOpenDrawer] = React.useState(false);
const [hideCommonKeyPopup, setHideCommonKeyPopup] = React.useState(false)
const [isLoadingGroupMessage, setIsLoadingGroupMessage] = React.useState('')
const [drawerMode, setDrawerMode] = React.useState("groups");
const [mutedGroups, setMutedGroups] = useState([])
const isFocusedRef = useRef(true);
const selectedGroupRef = useRef(null);
const selectedDirectRef = useRef(null);
@@ -430,6 +437,37 @@ export const Group = ({
selectedDirectRef.current = selectedDirect;
}, [selectedDirect]);
const getUserSettings = async () => {
try {
return new Promise((res, rej) => {
chrome?.runtime?.sendMessage(
{
action: "getUserSettings",
payload: {
key: 'mutedGroups'
}
},
(response) => {
if (!response?.error) {
setMutedGroups(response || []);
res(response);
return
}
rej(response.error);
}
);
});
} catch (error) {
console.log('error', error)
}
};
useEffect(()=> {
getUserSettings()
}, [])
const getTimestampEnterChat = async () => {
try {
return new Promise((res, rej) => {
@@ -610,7 +648,7 @@ export const Group = ({
const getPublishesFromAdmins = async (admins: string[]) => {
// const validApi = await findUsableApi();
const queryString = admins.map((name) => `name=${name}`).join("&");
const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=DOCUMENT_PRIVATE&identifier=symmetric-qchat-group-${
const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT_PRIVATE&identifier=symmetric-qchat-group-${
selectedGroup?.groupId
}&exactmatchnames=true&limit=0&reverse=true&${queryString}&prefix=true`;
const response = await fetch(url);
@@ -642,21 +680,22 @@ export const Group = ({
secretKeyToPublish?: boolean
) => {
try {
setIsLoadingGroupMessage('Locating encryption keys')
// setGroupDataLastSet(null)
pauseAllQueues();
let dataFromStorage;
let publishFromStorage;
let adminsFromStorage;
const groupData = await getGroupDataSingle(selectedGroup?.groupId);
if (
groupData?.secretKeyData &&
Date.now() - groupData?.timestampLastSet < 3600000
) {
dataFromStorage = groupData.secretKeyData;
publishFromStorage = groupData.secretKeyResource;
adminsFromStorage = groupData.admins;
// setGroupDataLastSet(groupData.timestampLastSet)
}
// const groupData = await getGroupDataSingle(selectedGroup?.groupId);
// if (
// groupData?.secretKeyData &&
// Date.now() - groupData?.timestampLastSet < 3600000
// ) {
// dataFromStorage = groupData.secretKeyData;
// publishFromStorage = groupData.secretKeyResource;
// adminsFromStorage = groupData.admins;
// // setGroupDataLastSet(groupData.timestampLastSet)
// }
if (
secretKeyToPublish &&
@@ -704,6 +743,7 @@ export const Group = ({
if (dataFromStorage) {
data = dataFromStorage;
} else {
setIsLoadingGroupMessage('Downloading encryption keys')
const res = await fetch(
`${getBaseApiReact()}/arbitrary/DOCUMENT_PRIVATE/${publish.name}/${
publish.identifier
@@ -748,6 +788,7 @@ export const Group = ({
}
} finally {
setIsLoadingGroup(false);
setIsLoadingGroupMessage('')
if (!secretKeyToPublish) {
// await getAdmins(selectedGroup?.groupId);
}
@@ -967,7 +1008,7 @@ export const Group = ({
secretKey &&
admins.includes(myAddress)
) {
console.log("goung through", admins);
// getAdmins(selectedGroup?.groupId);
getMembers(selectedGroup?.groupId);
initiatedGetMembers.current = true;
@@ -1156,6 +1197,41 @@ export const Group = ({
};
}, [directs, selectedDirect]);
const handleMarkAsRead = (e)=> {
const {groupId} = e.detail
chrome?.runtime?.sendMessage({
action: "addTimestampEnterChat",
payload: {
timestamp: Date.now(),
groupId,
},
});
chrome?.runtime?.sendMessage({
action: "addGroupNotificationTimestamp",
payload: {
timestamp: Date.now(),
groupId,
},
});
setTimeout(() => {
getGroupAnnouncements();
getTimestampEnterChat();
}, 200);
}
useEffect(() => {
subscribeToEvent("markAsRead", handleMarkAsRead);
return () => {
unsubscribeFromEvent("markAsRead", handleMarkAsRead);
};
}, []);
const resetAllStatesAndRefs = () => {
// Reset all useState values to their initial states
setSecretKey(null);
@@ -1173,6 +1249,7 @@ export const Group = ({
setMembers([]);
setGroupOwner(null);
setTriedToFetchSecretKey(false);
setHideCommonKeyPopup(false)
setOpenAddGroup(false);
setIsInitialGroups(false);
setOpenManageMembers(false);
@@ -1641,7 +1718,7 @@ export const Group = ({
onClick={() => {
clearAllQueues();
setSelectedDirect(null);
setTriedToFetchSecretKey(false);
setNewChat(false);
setSelectedGroup(null);
setSecretKey(null);
@@ -1652,7 +1729,7 @@ export const Group = ({
setAdminsWithNames([]);
setMembers([]);
setMemberCountFromSecretKeyData(null);
setTriedToFetchSecretKey(false);
setHideCommonKeyPopup(false);
setFirstSecretKeyInCreation(false);
// setGroupSection("announcement");
setGroupSection("chat");
@@ -1701,6 +1778,7 @@ export const Group = ({
group?.groupId === selectedGroup?.groupId && "white",
}}
>
<ContextMenu mutedGroups={mutedGroups} getUserSettings={getUserSettings} groupId={group.groupId}>
<Box
sx={{
display: "flex",
@@ -1764,6 +1842,7 @@ export const Group = ({
/>
)}
</Box>
</ContextMenu>
</ListItem>
</List>
))}
@@ -2019,8 +2098,9 @@ export const Group = ({
{admins.includes(myAddress) &&
shouldReEncrypt &&
triedToFetchSecretKey &&
!firstSecretKeyInCreation && (
!firstSecretKeyInCreation && !hideCommonKeyPopup && (
<CreateCommonSecret
setHideCommonKeyPopup={setHideCommonKeyPopup}
groupId={selectedGroup?.groupId}
secretKey={secretKey}
secretKeyDetails={secretKeyDetails}
@@ -2351,7 +2431,7 @@ export const Group = ({
<LoadingSnackbar
open={isLoadingGroup}
info={{
message: "Setting up group... please wait.",
message: isLoadingGroupMessage || "Setting up group... please wait.",
}}
/>