mobile update

This commit is contained in:
2024-09-14 06:33:41 +03:00
parent eebcd8c36f
commit 93fba38de3
17 changed files with 524 additions and 217 deletions

View File

@@ -26,6 +26,8 @@ export const AnnouncementDiscussion = ({
}) => {
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)
@@ -38,6 +40,12 @@ export const AnnouncementDiscussion = ({
const clearEditorContent = () => {
if (editorRef.current) {
editorRef.current.chain().focus().clearContent().run();
if(isMobile){
setTimeout(() => {
editorRef.current?.chain().blur().run();
setIsFocusedParent(false)
}, 200);
}
}
};
@@ -78,6 +86,7 @@ export const AnnouncementDiscussion = ({
if (!response?.error) {
res(response);
return
}
rej(response.error);
}
@@ -281,14 +290,18 @@ export const AnnouncementDiscussion = ({
// position: 'fixed',
// bottom: '0px',
backgroundColor: "#232428",
minHeight: "150px",
maxHeight: "400px",
minHeight: isMobile ? "0px" : "150px",
maxHeight: isMobile ? "auto" : "400px",
display: "flex",
flexDirection: "column",
overflow: "hidden",
width: "100%",
boxSizing: "border-box",
padding: "20px",
padding: isMobile ? "10px": "20px",
position: isFocusedParent ? 'fixed' : 'relative',
bottom: isFocusedParent ? '0px' : 'unset',
top: isFocusedParent ? '0px' : 'unset',
zIndex: isFocusedParent ? 5 : 'unset',
flexShrink:0,
}}
>
@@ -297,6 +310,7 @@ export const AnnouncementDiscussion = ({
display: "flex",
flexDirection: "column",
// height: '100%',
flexGrow: isMobile && 1,
overflow: "auto",
}}
>
@@ -304,8 +318,19 @@ export const AnnouncementDiscussion = ({
setEditorRef={setEditorRef}
onEnter={publishComment}
disableEnter
maxHeightOffset="60px"
isFocusedParent={isFocusedParent} setIsFocusedParent={setIsFocusedParent}
/>
</div>
<Box sx={{
display: 'flex',
width: '100&',
gap: '10px',
justifyContent: 'center',
flexShrink: 0,
position: 'relative',
}}>
<CustomButton
onClick={() => {
if (isSending) return;
@@ -317,6 +342,8 @@ export const AnnouncementDiscussion = ({
cursor: isSending ? "default" : "pointer",
background: isSending && "rgba(0, 0, 0, 0.8)",
flexShrink: 0,
padding: isMobile && '5px',
fontSize: isMobile && '14px'
}}
>
{isSending && (
@@ -334,6 +361,30 @@ export const AnnouncementDiscussion = ({
)}
{` Publish Comment`}
</CustomButton>
{isFocusedParent && (
<CustomButton
onClick={()=> {
if(isSending) return
setIsFocusedParent(false)
clearEditorContent()
// Unfocus the editor
}}
style={{
marginTop: 'auto',
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: isSending && 'rgba(0, 0, 0, 0.8)',
flexShrink: 0,
padding: isMobile && '5px',
fontSize: isMobile && '14px',
}}
>
{` Close`}
</CustomButton>
)}
</Box>
</div>
<LoadingSnackbar

View File

@@ -6,7 +6,7 @@ import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import Tiptap from './TipTap'
import { CustomButton } from '../../App-styles'
import CircularProgress from '@mui/material/CircularProgress';
import { Input } from '@mui/material';
import { Box, Input } from '@mui/material';
import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar';
import { getNameInfo } from '../Group/Group';
import { Spacer } from '../../common/Spacer';
@@ -15,6 +15,7 @@ import { getBaseApiReactSocket, isMobile, pauseAllQueues, resumeAllQueues } from
import { getPublicKey } from '../../background';
import { useMessageQueue } from '../../MessageQueueContext';
import { executeEvent } from '../../utils/events';
import zIndex from '@mui/material/styles/zIndex';
@@ -22,6 +23,7 @@ import { executeEvent } from '../../utils/events';
export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDirect, setNewChat, getTimestampEnterChat, myName, balance}) => {
const { queueChats, addToQueue, } = useMessageQueue();
const [isFocusedParent, setIsFocusedParent] = useState(false);
const [messages, setMessages] = useState([])
const [isSending, setIsSending] = useState(false)
@@ -252,6 +254,13 @@ const sendChatDirect = async ({ chatReference = undefined, messageText}: any, ad
const clearEditorContent = () => {
if (editorRef.current) {
editorRef.current.chain().focus().clearContent().run();
if(isMobile){
setTimeout(() => {
editorRef.current?.chain().blur().run();
setIsFocusedParent(false)
executeEvent("sent-new-message-group", {})
}, 200);
}
}
};
@@ -293,7 +302,6 @@ const clearEditorContent = () => {
executeEvent("sent-new-message-group", {})
}, 150);
clearEditorContent()
clearEditorContent()
}
// send chat message
} catch (error) {
@@ -310,7 +318,7 @@ const clearEditorContent = () => {
}
}
console.log('isFocusedParent', isFocusedParent)
return (
<div style={{
@@ -336,25 +344,37 @@ const clearEditorContent = () => {
// position: 'fixed',
// bottom: '0px',
backgroundColor: "#232428",
minHeight: '150px',
maxHeight: '400px',
minHeight: isMobile ? '0px' : '150px',
maxHeight: isMobile ? 'auto' : '400px',
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
width: '100%',
boxSizing: 'border-box',
padding: '20px'
padding: isMobile ? '10px' : '20px',
position: isFocusedParent ? 'fixed' : 'relative',
bottom: isFocusedParent ? '0px' : 'unset',
top: isFocusedParent ? '0px' : 'unset',
zIndex: isFocusedParent ? 5 : 'unset'
}}>
<div style={{
display: 'flex',
flexDirection: 'column',
// height: '100%',
overflow: 'auto'
flexGrow: isMobile && 1,
overflow: !isMobile && "auto",
}}>
<Tiptap setEditorRef={setEditorRef} onEnter={sendMessage} isChat />
<Tiptap isFocusedParent={isFocusedParent} setEditorRef={setEditorRef} onEnter={sendMessage} isChat disableEnter={isMobile ? true : false} setIsFocusedParent={setIsFocusedParent}/>
</div>
<Box sx={{
display: 'flex',
width: '100&',
gap: '10px',
justifyContent: 'center',
flexShrink: 0,
position: 'relative',
}}>
<CustomButton
onClick={()=> {
if(isSending) return
@@ -365,7 +385,8 @@ const clearEditorContent = () => {
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: isSending && 'rgba(0, 0, 0, 0.8)',
flexShrink: 0
flexShrink: 0,
padding: isMobile && '5px'
}}
>
{isSending && (
@@ -383,6 +404,29 @@ const clearEditorContent = () => {
)}
{` Send`}
</CustomButton>
{isFocusedParent && (
<CustomButton
onClick={()=> {
if(isSending) return
setIsFocusedParent(false)
clearEditorContent()
// Unfocus the editor
}}
style={{
marginTop: 'auto',
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: isSending && 'rgba(0, 0, 0, 0.8)',
flexShrink: 0,
padding: isMobile && '5px'
}}
>
{` Close`}
</CustomButton>
)}
</Box>
</div>
<LoadingSnackbar open={isLoading} info={{
message: "Loading chat... please wait."

View File

@@ -15,6 +15,7 @@ import { CustomizedSnackbars } from '../Snackbar/Snackbar'
import { PUBLIC_NOTIFICATION_CODE_FIRST_SECRET_KEY } from '../../constants/codes'
import { useMessageQueue } from '../../MessageQueueContext'
import { executeEvent } from '../../utils/events'
import { Box } from '@mui/material'
@@ -28,6 +29,8 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
const [openSnack, setOpenSnack] = React.useState(false);
const [infoSnack, setInfoSnack] = React.useState(null);
const hasInitialized = useRef(false)
const [isFocusedParent, setIsFocusedParent] = useState(false);
const hasInitializedWebsocket = useRef(false)
const socketRef = useRef(null); // WebSocket reference
const timeoutIdRef = useRef(null); // Timeout ID reference
@@ -270,6 +273,13 @@ const sendChatGroup = async ({groupId, typeMessage = undefined, chatReference =
const clearEditorContent = () => {
if (editorRef.current) {
editorRef.current.chain().focus().clearContent().run();
if(isMobile){
setTimeout(() => {
editorRef.current?.chain().blur().run();
setIsFocusedParent(false)
executeEvent("sent-new-message-group", {})
}, 200);
}
}
};
@@ -354,25 +364,37 @@ const clearEditorContent = () => {
// position: 'fixed',
// bottom: '0px',
backgroundColor: "#232428",
minHeight: '150px',
maxHeight: '400px',
minHeight: isMobile ? '0px' : '150px',
maxHeight: isMobile ? 'auto' : '400px',
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
width: '100%',
boxSizing: 'border-box',
padding: '20px'
padding: isMobile ? '10px' : '20px',
position: isFocusedParent ? 'fixed' : 'relative',
bottom: isFocusedParent ? '0px' : 'unset',
top: isFocusedParent ? '0px' : 'unset',
zIndex: isFocusedParent ? 5 : 'unset'
}}>
<div style={{
display: 'flex',
flexDirection: 'column',
// height: '100%',
overflow: 'auto'
flexGrow: isMobile && 1,
overflow: !isMobile && "auto",
}}>
<Tiptap setEditorRef={setEditorRef} onEnter={sendMessage} isChat />
<Tiptap setEditorRef={setEditorRef} onEnter={sendMessage} isChat disableEnter={isMobile ? true : false} isFocusedParent={isFocusedParent} setIsFocusedParent={setIsFocusedParent} />
</div>
<Box sx={{
display: 'flex',
width: '100&',
gap: '10px',
justifyContent: 'center',
flexShrink: 0,
position: 'relative',
}}>
<CustomButton
onClick={()=> {
if(isSending) return
@@ -383,7 +405,9 @@ const clearEditorContent = () => {
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: isSending && 'rgba(0, 0, 0, 0.8)',
flexShrink: 0
flexShrink: 0,
padding: isMobile && '5px',
}}
>
{isSending && (
@@ -401,6 +425,29 @@ const clearEditorContent = () => {
)}
{` Send`}
</CustomButton>
{isFocusedParent && (
<CustomButton
onClick={()=> {
if(isSending) return
setIsFocusedParent(false)
clearEditorContent()
// Unfocus the editor
}}
style={{
marginTop: 'auto',
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: isSending && 'rgba(0, 0, 0, 0.8)',
flexShrink: 0,
padding: isMobile && '5px'
}}
>
{` Close`}
</CustomButton>
)}
</Box>
{/* <button onClick={sendMessage}>send</button> */}
</div>
{/* <ChatContainerComp messages={formatMessages} /> */}

View File

@@ -51,6 +51,7 @@ export const saveTempPublish = async ({ data, key }: any) => {
if (!response?.error) {
res(response);
return
}
rej(response.error);
}
@@ -71,6 +72,7 @@ export const getTempPublish = async () => {
(response) => {
if (!response?.error) {
res(response);
return
}
rej(response.error);
}
@@ -135,6 +137,8 @@ export const GroupAnnouncements = ({
const [tempPublishedList, setTempPublishedList] = useState([])
const [announcementData, setAnnouncementData] = useState({});
const [selectedAnnouncement, setSelectedAnnouncement] = useState(null);
const [isFocusedParent, setIsFocusedParent] = useState(false);
const { show } = React.useContext(MyContext);
const [openSnack, setOpenSnack] = React.useState(false);
const [infoSnack, setInfoSnack] = React.useState(null);
@@ -226,6 +230,12 @@ export const GroupAnnouncements = ({
const clearEditorContent = () => {
if (editorRef.current) {
editorRef.current.chain().focus().clearContent().run();
if(isMobile){
setTimeout(() => {
editorRef.current?.chain().blur().run();
setIsFocusedParent(false)
}, 200);
}
}
};
@@ -500,18 +510,18 @@ export const GroupAnnouncements = ({
width: "100%",
display: "flex",
justifyContent: "center",
padding: "25px",
fontSize: "20px",
padding: isMobile ? '8px' : "25px",
fontSize: isMobile ? '16px' : "20px",
gap: '20px',
alignItems: 'center'
}}
>
<CampaignIcon sx={{
fontSize: '30px'
fontSize: isMobile ? '16px' : '30px'
}} />
Group Announcements
</Box>
<Spacer height="25px" />
<Spacer height={isMobile ? "10px" : "25px"} />
</div>
{!isLoading && combinedListTempAndReal?.length === 0 && (
@@ -541,31 +551,46 @@ export const GroupAnnouncements = ({
// position: 'fixed',
// bottom: '0px',
backgroundColor: "#232428",
minHeight: "150px",
maxHeight: "400px",
minHeight: isMobile ? "0px" : "150px",
maxHeight: isMobile ? "auto" : "400px",
display: "flex",
flexDirection: "column",
overflow: "hidden",
width: "100%",
boxSizing: "border-box",
padding: "20px",
flexShrink: 0
padding: isMobile ? "10px": "20px",
position: isFocusedParent ? 'fixed' : 'relative',
bottom: isFocusedParent ? '0px' : 'unset',
top: isFocusedParent ? '0px' : 'unset',
zIndex: isFocusedParent ? 5 : 'unset',
flexShrink: 0
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
flexGrow: isMobile && 1,
overflow: "auto",
// height: '100%',
overflow: "auto",
}}
}}
>
<Tiptap
setEditorRef={setEditorRef}
onEnter={publishAnnouncement}
disableEnter
maxHeightOffset="40px"
isFocusedParent={isFocusedParent} setIsFocusedParent={setIsFocusedParent}
/>
</div>
<Box sx={{
display: 'flex',
width: '100&',
gap: '10px',
justifyContent: 'center',
flexShrink: 0,
position: 'relative',
}}>
<CustomButton
onClick={() => {
if (isSending) return;
@@ -577,6 +602,9 @@ export const GroupAnnouncements = ({
cursor: isSending ? "default" : "pointer",
background: isSending && "rgba(0, 0, 0, 0.8)",
flexShrink: 0,
padding: isMobile && '5px',
fontSize: isMobile && '14px',
}}
>
{isSending && (
@@ -594,6 +622,30 @@ export const GroupAnnouncements = ({
)}
{` Publish Announcement`}
</CustomButton>
{isFocusedParent && (
<CustomButton
onClick={()=> {
if(isSending) return
setIsFocusedParent(false)
clearEditorContent()
// Unfocus the editor
}}
style={{
marginTop: 'auto',
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: isSending && 'rgba(0, 0, 0, 0.8)',
flexShrink: 0,
padding: isMobile && '5px',
fontSize: isMobile && '14px',
}}
>
{` Close`}
</CustomButton>
)}
</Box>
</div>
)}

View File

@@ -1,4 +1,4 @@
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { EditorProvider, useCurrentEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { Color } from '@tiptap/extension-color';
@@ -25,6 +25,7 @@ import CustomImage from './CustomImage';
import Compressor from 'compressorjs'
import ImageResize from 'tiptap-extension-resize-image'; // Import the ResizeImage extension
import { isMobile } from '../../App';
const MenuBar = ({ setEditorRef, isChat }) => {
const { editor } = useCurrentEditor();
const fileInputRef = useRef(null);
@@ -88,10 +89,11 @@ const MenuBar = ({ setEditorRef, isChat }) => {
}
// color={editor.isActive('bold') ? 'white' : 'gray'}
sx={{
color: editor.isActive('bold') ? 'white' : 'gray'
color: editor.isActive('bold') ? 'white' : 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<FormatBoldIcon />
<FormatBoldIcon />
</IconButton>
<IconButton
onClick={() => editor.chain().focus().toggleItalic().run()}
@@ -104,7 +106,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
}
// color={editor.isActive('italic') ? 'white' : 'gray'}
sx={{
color: editor.isActive('italic') ? 'white' : 'gray'
color: editor.isActive('italic') ? 'white' : 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<FormatItalicIcon />
@@ -120,7 +123,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
}
// color={editor.isActive('strike') ? 'white' : 'gray'}
sx={{
color: editor.isActive('strike') ? 'white' : 'gray'
color: editor.isActive('strike') ? 'white' : 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<StrikethroughSIcon />
@@ -136,19 +140,23 @@ const MenuBar = ({ setEditorRef, isChat }) => {
}
// color={editor.isActive('code') ? 'white' : 'gray'}
sx={{
color: editor.isActive('code') ? 'white' : 'gray'
color: editor.isActive('code') ? 'white' : 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<CodeIcon />
</IconButton>
<IconButton onClick={() => editor.chain().focus().unsetAllMarks().run()}>
<IconButton sx={{
padding: isMobile ? '5px' : 'revert'
}} onClick={() => editor.chain().focus().unsetAllMarks().run()}>
<FormatClearIcon />
</IconButton>
<IconButton
onClick={() => editor.chain().focus().toggleBulletList().run()}
// color={editor.isActive('bulletList') ? 'white' : 'gray'}
sx={{
color: editor.isActive('bulletList') ? 'white' : 'gray'
color: editor.isActive('bulletList') ? 'white' : 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<FormatListBulletedIcon />
@@ -157,7 +165,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
onClick={() => editor.chain().focus().toggleOrderedList().run()}
// color={editor.isActive('orderedList') ? 'white' : 'gray'}
sx={{
color: editor.isActive('orderedList') ? 'white' : 'gray'
color: editor.isActive('orderedList') ? 'white' : 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<FormatListNumberedIcon />
@@ -166,7 +175,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
// color={editor.isActive('codeBlock') ? 'white' : 'gray'}
sx={{
color: editor.isActive('codeBlock') ? 'white' : 'gray'
color: editor.isActive('codeBlock') ? 'white' : 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<DeveloperModeIcon />
@@ -175,7 +185,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
onClick={() => editor.chain().focus().toggleBlockquote().run()}
// color={editor.isActive('blockquote') ? 'white' : 'gray'}
sx={{
color: editor.isActive('blockquote') ? 'white' : 'gray'
color: editor.isActive('blockquote') ? 'white' : 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<FormatQuoteIcon />
@@ -187,7 +198,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
// color={editor.isActive('heading', { level: 1 }) ? 'white' : 'gray'}
sx={{
color: editor.isActive('heading', { level: 1 }) ? 'white' : 'gray'
color: editor.isActive('heading', { level: 1 }) ? 'white' : 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<FormatHeadingIcon fontSize="small" />
@@ -202,7 +214,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
.run()
}
sx={{
color: 'gray'
color: 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<UndoIcon />
@@ -227,7 +240,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
<IconButton
onClick={triggerImageUpload}
sx={{
color: 'gray'
color: 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<ImageIcon />
@@ -268,32 +282,66 @@ const extensions = [
const content = ``;
export default ({ setEditorRef, onEnter, disableEnter, isChat }) => {
export default ({ setEditorRef, onEnter, disableEnter, isChat, maxHeightOffset, setIsFocusedParent, isFocusedParent, overrideMobile, customEditorHeight }) => {
const [isFocused, setIsFocused] = useState(false);
const extensionsFiltered = isChat ? extensions.filter((item)=> item?.name !== 'image') : extensions
const editorRef = useRef(null);
const setEditorRefFunc = (editorInstance) => {
editorRef.current = editorInstance;
setEditorRef(editorInstance)
};
const handleFocus = () => {
if(!isMobile) return
// setIsFocused(true);
setIsFocusedParent(true)
};
const handleBlur = () => {
const htmlContent = editorRef.current.getHTML();
if (!htmlContent?.trim() || htmlContent?.trim() === "<p></p>"){
// setIsFocused(false);
// setIsFocusedParent(false)
};
};
// useEffect(()=> {
// setIsFocused(isFocusedParent)
// },[isFocusedParent])
return (
<EditorProvider
slotBefore={<MenuBar setEditorRef={setEditorRef} isChat={isChat} />}
extensions={extensionsFiltered}
content={content}
editorProps={{
handleKeyDown(view, event) {
if (!disableEnter && event.key === 'Enter') {
if (event.shiftKey) {
// Shift+Enter: Insert a hard break
view.dispatch(view.state.tr.replaceSelectionWith(view.state.schema.nodes.hardBreak.create()));
return true;
} else {
// Enter: Call the callback function
if (typeof onEnter === 'function') {
onEnter();
}
return true; // Prevent the default action of adding a new line
slotBefore={(isFocusedParent || !isMobile || overrideMobile) && <MenuBar setEditorRef={setEditorRefFunc} isChat={isChat} />}
extensions={extensionsFiltered}
content={content}
onCreate={({ editor }) => {
editor.on('focus', handleFocus); // Listen for focus event
editor.on('blur', handleBlur); // Listen for blur event
}}
onUpdate={({ editor }) => {
editor.on('focus', handleFocus); // Ensure focus is updated
editor.on('blur', handleBlur); // Ensure blur is updated
}}
editorProps={{
attributes: {
class: 'tiptap-prosemirror',
style: isMobile && `overflow: auto; min-height: ${customEditorHeight ? '200px' : '0px'}; 200px; max-height:calc(100svh - ${ customEditorHeight ? customEditorHeight : '140px'})`,
},
handleKeyDown(view, event) {
if (!disableEnter && event.key === 'Enter') {
if (event.shiftKey) {
view.dispatch(view.state.tr.replaceSelectionWith(view.state.schema.nodes.hardBreak.create()));
return true;
} else {
if (typeof onEnter === 'function') {
onEnter();
}
return true;
}
return false; // Allow default handling for other keys
},
}}
/>
);
}
return false;
},
}}
/>
)
};

View File

@@ -118,4 +118,5 @@
.tiptap img {
display: block;
max-width: 100%;
}
}