From 2e9f9a76db520d835844b3378acaff2345abec4d Mon Sep 17 00:00:00 2001 From: Umang Utkarsh Date: Sun, 18 Feb 2024 03:05:49 +0530 Subject: [PATCH] logic-integrate/remove-store --- .../src/components/ChatInput/ChatInput.js | 87 +++++++++++-------- .../src/components/Markup/elements/Mention.js | 6 +- .../react/src/store/mentionmemberStore.js | 10 --- 3 files changed, 56 insertions(+), 47 deletions(-) delete mode 100644 packages/react/src/store/mentionmemberStore.js diff --git a/packages/react/src/components/ChatInput/ChatInput.js b/packages/react/src/components/ChatInput/ChatInput.js index 026b152f0..6df8f06d4 100644 --- a/packages/react/src/components/ChatInput/ChatInput.js +++ b/packages/react/src/components/ChatInput/ChatInput.js @@ -8,11 +8,11 @@ import { useMessageStore, loginModalStore, useChannelStore, + useMemberStore } from '../../store'; import ChatInputFormattingToolbar from './ChatInputFormattingToolbar'; import useAttachmentWindowStore from '../../store/attachmentwindow'; import MembersList from '../Mentions/MembersList'; -import mentionmemberStore from '../../store/mentionmemberStore'; import { searchToMentionUser } from '../../lib/searchToMentionUser'; import TypingUsers from '../TypingUsers'; import createPendingMessage from '../../lib/createPendingMessage'; @@ -22,6 +22,7 @@ import { Box } from '../Box'; import { Icon } from '../Icon'; import { CommandsList } from '../CommandList'; import { ActionButton } from '../ActionButton'; +import { Divider } from '../Divider'; import useComponentOverrides from '../../theme/useComponentOverrides'; import { useToastBarDispatch } from '../../hooks/useToastBarDispatch'; @@ -45,12 +46,21 @@ const ChatInput = ({ scrollToBottom }) => { (state) => state.setIsUserAuthenticated ); + const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate); + + const members = useMemberStore((state) => state.members); + const setMembersHandler = useMemberStore((state) => state.setMembersHandler); + useEffect(() => { RCInstance.auth.onAuthChange((user) => { if (user) { RCInstance.getCommandsList() .then((data) => setCommands(data.commands || [])) .catch(console.error); + + RCInstance.getChannelMembers(isChannelPrivate) + .then((channelMembers) => setMembersHandler(channelMembers.members || [])) + .catch(console.error); } }); }, [RCInstance]); @@ -68,28 +78,19 @@ const ChatInput = ({ scrollToBottom }) => { const inputRef = useRef(null); const typingRef = useRef(); - const messageRef = useRef(); + const messageRef = useRef(null); const [disableButton, setDisableButton] = useState(true); - const roomMembers = mentionmemberStore((state) => state.roomMembers); - const setRoomMembers = mentionmemberStore((state) => state.setRoomMembers); - const [filteredMembers, setFilteredMembers] = useState([]); const [mentionIndex, setmentionIndex] = useState(-1); const [startReading, setStartReading] = useState(false); - const showMembersList = mentionmemberStore((state) => state.showMembersList); - const setshowMembersList = mentionmemberStore( - (state) => state.toggleShowMembers - ); + const [showMembersList, setshowMembersList] = useState(false); + const setIsLoginModalOpen = loginModalStore( (state) => state.setIsLoginModalOpen ); - const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate); - const setIsChannelPrivate = useChannelStore( - (state) => state.setIsChannelPrivate - ); const { editMessage, @@ -217,16 +218,6 @@ const ChatInput = ({ scrollToBottom }) => { toggle(); setData(event.target.files[0]); }; - const getAllChannelMembers = useCallback(async () => { - try { - const channelMembers = await RCInstance.getChannelMembers( - isChannelPrivate - ); - setRoomMembers(channelMembers.members); - } catch (e) { - console.error(e); - } - }, [RCInstance, setRoomMembers, isChannelPrivate]); useEffect(() => { if (editMessage.msg) { @@ -235,9 +226,6 @@ const ChatInput = ({ scrollToBottom }) => { messageRef.current.value = ''; } }, [editMessage]); - useEffect(() => { - getAllChannelMembers(); - }, [getAllChannelMembers]); const username = useUserStore((state) => state.username); const timerRef = useRef(); @@ -285,6 +273,33 @@ const ChatInput = ({ scrollToBottom }) => { } }, []); + const handleMemberClick = (selectedItem) => { + setshowMembersList(false); + + let insertionText; + if (selectedItem === 'all') { + insertionText = `@all `; + } + + else if (selectedItem === 'here') { + insertionText = `@here `; + } + + else { + insertionText = `${messageRef.current.value.substring( + 0, + messageRef.current.value.lastIndexOf('@') + )}@${selectedItem.username} `; + } + + messageRef.current.value = insertionText; + + const cursorPosition = insertionText.length; + messageRef.current.setSelectionRange(cursorPosition, cursorPosition); + messageRef.current.focus(); + }; + + const showCommands = useCallback( async (e) => { const cursor = e.target.selectionStart; @@ -320,7 +335,7 @@ const ChatInput = ({ scrollToBottom }) => { } searchToMentionUser( messageRef.current.value, - roomMembers, + members, startReading, setStartReading, setFilteredMembers, @@ -400,7 +415,7 @@ const ChatInput = ({ scrollToBottom }) => { let selectedMember = null; if (mentionIndex === filteredMembers.length) selectedMember = 'all'; else if (mentionIndex === filteredMembers.length + 1) - selectedMember = 'everyone'; + selectedMember = 'here'; else selectedMember = filteredMembers[mentionIndex].username; messageRef.current.value = `${messageRef.current.value.substring( 0, @@ -434,10 +449,14 @@ const ChatInput = ({ scrollToBottom }) => { `} > {showMembersList ? ( - + <> + + + ) : ( <> )} @@ -465,8 +484,8 @@ const ChatInput = ({ scrollToBottom }) => { isUserAuthenticated && canSendMsg ? 'Message' : isUserAuthenticated - ? 'This room is read only' - : 'Sign in to chat' + ? 'This room is read only' + : 'Sign in to chat' } className={styles.textInput} onChange={onTextChange} diff --git a/packages/react/src/components/Markup/elements/Mention.js b/packages/react/src/components/Markup/elements/Mention.js index c2885feed..a0d2f5e8b 100644 --- a/packages/react/src/components/Markup/elements/Mention.js +++ b/packages/react/src/components/Markup/elements/Mention.js @@ -4,6 +4,9 @@ import PropTypes from 'prop-types'; import { useMemberStore, useUserStore } from '../../../store'; const Mention = ({ contents }) => { + const members = useMemberStore((state) => state.members); + const username = useUserStore((state) => state.username); + const mentionStyles = css` background-color: ${contents.value === 'all' || contents.value === 'here' ? '#f38c39' : (contents.value === username ? '#ec0d2a' : '#e4e7ea') @@ -21,9 +24,6 @@ const Mention = ({ contents }) => { } `; - const members = useMemberStore((state) => state.members); - const username = useUserStore((state) => state.username); - const hasMember = (user) => { if (user === 'all' || user === 'here') return true; let found = false; diff --git a/packages/react/src/store/mentionmemberStore.js b/packages/react/src/store/mentionmemberStore.js deleted file mode 100644 index 3025c9248..000000000 --- a/packages/react/src/store/mentionmemberStore.js +++ /dev/null @@ -1,10 +0,0 @@ -import { create } from 'zustand'; - -const mentionmemberStore = create((set) => ({ - roomMembers: {}, - showMembersList: false, - toggleShowMembers: (showMembersList) => set({ showMembersList }), - setRoomMembers: (roomMembers) => set({ roomMembers }), -})); - -export default mentionmemberStore;