mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-05-22 09:36:58 +00:00
Add translation for chat section
This commit is contained in:
Nicola Benaglia
parent
30b5d1e36b
commit
0759994891
@ -1,4 +1,4 @@
|
||||
import React, { useMemo, useRef, useState } from 'react';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import TipTap from './TipTap';
|
||||
import {
|
||||
AuthenticatedContainerInnerTop,
|
||||
@ -8,7 +8,7 @@ import { Box, CircularProgress, useTheme } from '@mui/material';
|
||||
import { objectToBase64 } from '../../qdn/encryption/group-encryption';
|
||||
import ShortUniqueId from 'short-unique-id';
|
||||
import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar';
|
||||
import { getBaseApi, getFee } from '../../background';
|
||||
import { getFee } from '../../background';
|
||||
import {
|
||||
decryptPublishes,
|
||||
getTempPublish,
|
||||
@ -24,6 +24,7 @@ import {
|
||||
pauseAllQueues,
|
||||
resumeAllQueues,
|
||||
} from '../../App';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const tempKey = 'accouncement-comment';
|
||||
|
||||
@ -39,10 +40,10 @@ export const AnnouncementDiscussion = ({
|
||||
isPrivate,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation(['auth', 'core', 'group']);
|
||||
const [isSending, setIsSending] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isFocusedParent, setIsFocusedParent] = useState(false);
|
||||
|
||||
const [comments, setComments] = useState([]);
|
||||
const [tempPublishedList, setTempPublishedList] = useState([]);
|
||||
const firstMountRef = useRef(false);
|
||||
@ -100,7 +101,12 @@ export const AnnouncementDiscussion = ({
|
||||
rej(response.error);
|
||||
})
|
||||
.catch((error) => {
|
||||
rej(error.message || 'An error occurred');
|
||||
rej(
|
||||
error.message ||
|
||||
t('core:message.error.generic', {
|
||||
postProcess: 'capitalizeFirst',
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
@ -131,9 +137,13 @@ export const AnnouncementDiscussion = ({
|
||||
pauseAllQueues();
|
||||
const fee = await getFee('ARBITRARY');
|
||||
await show({
|
||||
message: 'Would you like to perform a ARBITRARY transaction?',
|
||||
message: t('core:question.perform_transaction', {
|
||||
action: 'ARBITRARY',
|
||||
postProcess: 'capitalizeFirst',
|
||||
}),
|
||||
publishFee: fee.fee + ' QORT',
|
||||
});
|
||||
|
||||
if (isSending) return;
|
||||
if (editorRef.current) {
|
||||
const htmlContent = editorRef.current.getHTML();
|
||||
@ -155,10 +165,11 @@ export const AnnouncementDiscussion = ({
|
||||
: await encryptChatMessage(message64, secretKeyObject);
|
||||
const randomUid = uid.rnd();
|
||||
const identifier = `cm-${selectedAnnouncement.identifier}-${randomUid}`;
|
||||
|
||||
const res = await publishAnc({
|
||||
encryptedData: encryptSingle,
|
||||
identifier,
|
||||
});
|
||||
}); // TODO remove unused?
|
||||
|
||||
const dataToSaveToStorage = {
|
||||
name: myName,
|
||||
@ -168,12 +179,13 @@ export const AnnouncementDiscussion = ({
|
||||
created: Date.now(),
|
||||
announcementId: selectedAnnouncement.identifier,
|
||||
};
|
||||
|
||||
await saveTempPublish({ data: dataToSaveToStorage, key: tempKey });
|
||||
setTempData();
|
||||
|
||||
clearEditorContent();
|
||||
}
|
||||
// send chat message
|
||||
// TODO send chat message
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
@ -182,14 +194,12 @@ export const AnnouncementDiscussion = ({
|
||||
}
|
||||
};
|
||||
|
||||
const getComments = React.useCallback(
|
||||
const getComments = useCallback(
|
||||
async (selectedAnnouncement, isPrivate) => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
|
||||
const offset = 0;
|
||||
|
||||
// dispatch(setIsLoadingGlobal(true))
|
||||
const identifier = `cm-${selectedAnnouncement.identifier}`;
|
||||
const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=20&includemetadata=false&offset=${offset}&reverse=true&prefix=true`;
|
||||
const response = await fetch(url, {
|
||||
@ -209,8 +219,6 @@ export const AnnouncementDiscussion = ({
|
||||
console.log(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
|
||||
// dispatch(setIsLoadingGlobal(false))
|
||||
}
|
||||
},
|
||||
[secretKey]
|
||||
@ -259,7 +267,7 @@ export const AnnouncementDiscussion = ({
|
||||
return sortedList;
|
||||
}, [tempPublishedList, comments]);
|
||||
|
||||
React.useEffect(() => {
|
||||
useEffect(() => {
|
||||
if (!secretKey && isPrivate) return;
|
||||
if (selectedAnnouncement && !firstMountRef.current && isPrivate !== null) {
|
||||
getComments(selectedAnnouncement, isPrivate);
|
||||
@ -299,6 +307,7 @@ export const AnnouncementDiscussion = ({
|
||||
|
||||
<Spacer height="20px" />
|
||||
</div>
|
||||
|
||||
<AnnouncementList
|
||||
announcementData={data}
|
||||
initialMessages={combinedListTempAndReal}
|
||||
@ -308,6 +317,7 @@ export const AnnouncementDiscussion = ({
|
||||
loadMore={loadMore}
|
||||
myName={myName}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: theme.palette.background.default,
|
||||
@ -343,6 +353,7 @@ export const AnnouncementDiscussion = ({
|
||||
setIsFocusedParent={setIsFocusedParent}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
@ -359,7 +370,7 @@ export const AnnouncementDiscussion = ({
|
||||
if (isSending) return;
|
||||
setIsFocusedParent(false);
|
||||
clearEditorContent();
|
||||
// Unfocus the editor
|
||||
// TODO Unfocus the editor
|
||||
}}
|
||||
style={{
|
||||
alignSelf: 'center',
|
||||
@ -371,7 +382,7 @@ export const AnnouncementDiscussion = ({
|
||||
padding: '5px',
|
||||
}}
|
||||
>
|
||||
{` Close`}
|
||||
{t('core:action.close', { postProcess: 'capitalizeFirst' })}
|
||||
</CustomButton>
|
||||
)}
|
||||
<CustomButton
|
||||
@ -402,7 +413,9 @@ export const AnnouncementDiscussion = ({
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{` Publish Comment`}
|
||||
{t('core:action.publish_comment', {
|
||||
postProcess: 'capitalizeFirst',
|
||||
})}
|
||||
</CustomButton>
|
||||
</Box>
|
||||
</div>
|
||||
@ -410,7 +423,9 @@ export const AnnouncementDiscussion = ({
|
||||
<LoadingSnackbar
|
||||
open={isLoading}
|
||||
info={{
|
||||
message: 'Loading comments... please wait.',
|
||||
message: t('core:loading_comments', {
|
||||
postProcess: 'capitalizeFirst',
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { MessageDisplay } from './MessageDisplay';
|
||||
import { Avatar, Box, Typography, useTheme } from '@mui/material';
|
||||
import { formatTimestamp } from '../../utils/time';
|
||||
import ChatBubbleIcon from '@mui/icons-material/ChatBubble';
|
||||
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
|
||||
import { getBaseApi } from '../../background';
|
||||
import { requestQueueCommentCount } from './GroupAnnouncements';
|
||||
import { CustomLoader } from '../../common/CustomLoader';
|
||||
import { getArbitraryEndpointReact, getBaseApiReact } from '../../App';
|
||||
import { WrapperUserAction } from '../WrapperUserAction';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export const AnnouncementItem = ({
|
||||
message,
|
||||
@ -18,12 +18,12 @@ export const AnnouncementItem = ({
|
||||
myName,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation(['auth', 'core', 'group']);
|
||||
const [commentLength, setCommentLength] = useState(0);
|
||||
const getNumberOfComments = React.useCallback(async () => {
|
||||
|
||||
const getNumberOfComments = useCallback(async () => {
|
||||
try {
|
||||
const offset = 0;
|
||||
|
||||
// dispatch(setIsLoadingGlobal(true))
|
||||
const identifier = `cm-${message.identifier}`;
|
||||
const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=0&includemetadata=false&offset=${offset}&reverse=true&prefix=true`;
|
||||
|
||||
@ -84,6 +84,7 @@ export const AnnouncementItem = ({
|
||||
{message?.name?.charAt(0)}
|
||||
</Avatar>
|
||||
</WrapperUserAction>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
@ -106,6 +107,7 @@ export const AnnouncementItem = ({
|
||||
{message?.name}
|
||||
</Typography>
|
||||
</WrapperUserAction>
|
||||
|
||||
{!messageData?.decryptedData && (
|
||||
<Box
|
||||
sx={{
|
||||
@ -117,6 +119,7 @@ export const AnnouncementItem = ({
|
||||
<CustomLoader />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{messageData?.decryptedData?.message && (
|
||||
<>
|
||||
{messageData?.type === 'notification' ? (
|
||||
@ -150,6 +153,7 @@ export const AnnouncementItem = ({
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{!disableComment && (
|
||||
<Box
|
||||
sx={{
|
||||
@ -189,10 +193,13 @@ export const AnnouncementItem = ({
|
||||
fontSize: '14px',
|
||||
}}
|
||||
>
|
||||
Leave comment
|
||||
{t('core:action.leave_comment', {
|
||||
postProcess: 'capitalizeFirst',
|
||||
})}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<ArrowForwardIosIcon
|
||||
sx={{
|
||||
fontSize: '20px',
|
||||
|
||||
@ -3,6 +3,7 @@ import { CellMeasurerCache } from 'react-virtualized';
|
||||
import { AnnouncementItem } from './AnnouncementItem';
|
||||
import { Box } from '@mui/material';
|
||||
import { CustomButton } from '../../styles/App-styles';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const cache = new CellMeasurerCache({
|
||||
fixedWidth: true,
|
||||
@ -18,8 +19,8 @@ export const AnnouncementList = ({
|
||||
loadMore,
|
||||
myName,
|
||||
}) => {
|
||||
const listRef = useRef(null);
|
||||
const [messages, setMessages] = useState(initialMessages);
|
||||
const { t } = useTranslation(['auth', 'core', 'group']);
|
||||
|
||||
useEffect(() => {
|
||||
cache.clearAll();
|
||||
@ -36,9 +37,9 @@ export const AnnouncementList = ({
|
||||
flexDirection: 'column',
|
||||
flexGrow: 1,
|
||||
flexShrink: 1,
|
||||
overflow: 'auto',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
overflow: 'auto',
|
||||
}}
|
||||
>
|
||||
{messages.map((message) => {
|
||||
@ -69,19 +70,7 @@ export const AnnouncementList = ({
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{/* <AutoSizer>
|
||||
{({ height, width }) => (
|
||||
<List
|
||||
ref={listRef}
|
||||
width={width}
|
||||
height={height}
|
||||
rowCount={messages.length}
|
||||
rowHeight={cache.rowHeight}
|
||||
rowRenderer={rowRenderer}
|
||||
deferredMeasurementCache={cache}
|
||||
/>
|
||||
)}
|
||||
</AutoSizer> */}
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
@ -92,7 +81,9 @@ export const AnnouncementList = ({
|
||||
>
|
||||
{showLoadMore && (
|
||||
<CustomButton onClick={loadMore}>
|
||||
Load older announcements
|
||||
{t('core:action.load_announcements', {
|
||||
postProcess: 'capitalizeFirst',
|
||||
})}
|
||||
</CustomButton>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
@ -31,6 +31,8 @@
|
||||
"import": "import",
|
||||
"invite": "invite",
|
||||
"join": "join",
|
||||
"leave_comment": "leave comment",
|
||||
"load_announcements": "load older announcements",
|
||||
"login": "login",
|
||||
"logout": "logout",
|
||||
"new": {
|
||||
@ -46,6 +48,7 @@
|
||||
"post_message": "post message",
|
||||
"publish": "publish",
|
||||
"publish_app": "publish your app",
|
||||
"publish_comment": "publish comment",
|
||||
"register_name": "register name",
|
||||
"remove": "remove",
|
||||
"return_apps_dashboard": "return to Apps Dashboard",
|
||||
@ -104,6 +107,7 @@
|
||||
"member": "member list"
|
||||
},
|
||||
"loading": "loading...",
|
||||
"loading_comments": "loading comments... please wait.",
|
||||
"loading_posts": "loading posts... please wait.",
|
||||
"message_us": "please message us on Telegram or Discord if you need 4 QORT to start chatting without any limitations",
|
||||
"message": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user