From 9fa5b09c4086873f79b2217a7bd4f1e011e23941 Mon Sep 17 00:00:00 2001 From: Umang Utkarsh Date: Sat, 2 Mar 2024 20:05:38 +0530 Subject: [PATCH 1/9] add-rest-api-endpoint --- packages/api/src/EmbeddedChatApi.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/api/src/EmbeddedChatApi.ts b/packages/api/src/EmbeddedChatApi.ts index 6d3cc6987..f9f203219 100644 --- a/packages/api/src/EmbeddedChatApi.ts +++ b/packages/api/src/EmbeddedChatApi.ts @@ -627,6 +627,26 @@ export default class EmbeddedChatApi { } } + async getAllFiles() { + try { + const { userId, authToken } = (await this.auth.getCurrentUser()) || {}; + const response = await fetch( + `${this.host}/api/v1/channels.files?roomId=${this.rid}`, + { + headers: { + "Content-Type": "application/json", + "X-Auth-Token": authToken, + "X-User-Id": userId, + }, + method: "GET", + } + ); + return await response.json(); + } catch (err) { + console.error(err); + } + } + async starMessage(mid: string) { try { const { userId, authToken } = (await this.auth.getCurrentUser()) || {}; From fef40eba0e05321e22d8dd2ebe83f1479593c5bb Mon Sep 17 00:00:00 2001 From: Umang Utkarsh Date: Sat, 2 Mar 2024 20:08:03 +0530 Subject: [PATCH 2/9] menu-option-ui --- .../react/src/components/ChatHeader/ChatHeader.js | 6 ++++++ packages/react/src/components/Icon/icons/Clip.js | 14 ++++++++++++++ packages/react/src/components/Icon/icons/index.js | 2 ++ packages/react/src/components/Menu/Menu.stories.js | 5 +++++ 4 files changed, 27 insertions(+) create mode 100644 packages/react/src/components/Icon/icons/Clip.js diff --git a/packages/react/src/components/ChatHeader/ChatHeader.js b/packages/react/src/components/ChatHeader/ChatHeader.js index 0ec1a8183..64f326873 100644 --- a/packages/react/src/components/ChatHeader/ChatHeader.js +++ b/packages/react/src/components/ChatHeader/ChatHeader.js @@ -229,6 +229,12 @@ const ChatHeader = ({ label: 'Members', icon: 'members', }, + { + id: 'files', + action: showAllFiles, + label: 'Files', + icon: 'clip', + }, { id: 'starred', action: showStarredMessage, diff --git a/packages/react/src/components/Icon/icons/Clip.js b/packages/react/src/components/Icon/icons/Clip.js new file mode 100644 index 000000000..429c2603c --- /dev/null +++ b/packages/react/src/components/Icon/icons/Clip.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const Clip = (props) => ( + + + +); + +export default Clip; diff --git a/packages/react/src/components/Icon/icons/index.js b/packages/react/src/components/Icon/icons/index.js index ea226f3e4..21a035ede 100644 --- a/packages/react/src/components/Icon/icons/index.js +++ b/packages/react/src/components/Icon/icons/index.js @@ -39,6 +39,7 @@ import PinFilled from './PinFilled'; import VideoRecorder from './VideoRecoder'; import DisabledRecorder from './DisableRecorder'; import Clipboard from './Clipboard'; +import Clip from './Clip'; const icons = { file: File, @@ -82,6 +83,7 @@ const icons = { 'arrow-down': ArrowDown, 'pin-filled': PinFilled, clipboard: Clipboard, + clip: Clip, }; export default icons; diff --git a/packages/react/src/components/Menu/Menu.stories.js b/packages/react/src/components/Menu/Menu.stories.js index 6a5235714..9b03f32ec 100644 --- a/packages/react/src/components/Menu/Menu.stories.js +++ b/packages/react/src/components/Menu/Menu.stories.js @@ -23,6 +23,11 @@ export const Menu = { label: 'Members', icon: 'members', }, + { + id: 'files', + label: 'Files', + icon: 'clip', + }, { id: 'starred', label: 'Starred', From fafd5c2f9b8a4a4d130f82d05669470ffaf739d8 Mon Sep 17 00:00:00 2001 From: Umang Utkarsh Date: Sat, 2 Mar 2024 20:11:26 +0530 Subject: [PATCH 3/9] files-menu-sidebar-ui --- .../src/components/ChatHeader/ChatHeader.js | 7 + packages/react/src/components/Files/Files.js | 185 ++++++++++++++++++ packages/react/src/components/Files/index.js | 1 + .../src/components/MessageList/MessageList.js | 4 + packages/react/src/store/fileStore.js | 8 + 5 files changed, 205 insertions(+) create mode 100644 packages/react/src/components/Files/Files.js create mode 100644 packages/react/src/components/Files/index.js create mode 100644 packages/react/src/store/fileStore.js diff --git a/packages/react/src/components/ChatHeader/ChatHeader.js b/packages/react/src/components/ChatHeader/ChatHeader.js index 64f326873..8e3a4493e 100644 --- a/packages/react/src/components/ChatHeader/ChatHeader.js +++ b/packages/react/src/components/ChatHeader/ChatHeader.js @@ -21,6 +21,7 @@ import { Menu } from '../Menu'; import useThreadsMessageStore from '../../store/threadsMessageStore'; import { useToastBarDispatch } from '../../hooks/useToastBarDispatch'; import useFetchChatData from '../../hooks/useFetchChatData'; +import useFileStore from '../../store/fileStore'; const ChatHeader = ({ isClosable, @@ -73,6 +74,7 @@ const ChatHeader = ({ const setShowAllThreads = useThreadsMessageStore( (state) => state.setShowAllThreads ); + const setShowAllFiles = useFileStore((state) => state.setShowAllFiles); const toastPosition = useToastStore((state) => state.position); const handleGoBack = async () => { @@ -141,6 +143,11 @@ const ChatHeader = ({ setShowSearch(false); }, [setShowAllThreads, setShowSearch]); + const showAllFiles = useCallback(async () => { + setShowAllFiles(true); + setShowSearch(false); + }, [setShowAllFiles, setShowSearch]); + useEffect(() => { const setMessageAllowed = async () => { const permissionRes = await RCInstance.permissionInfo(); diff --git a/packages/react/src/components/Files/Files.js b/packages/react/src/components/Files/Files.js new file mode 100644 index 000000000..6b40bea7c --- /dev/null +++ b/packages/react/src/components/Files/Files.js @@ -0,0 +1,185 @@ +import React, { useState, useMemo } from 'react'; +import { css } from '@emotion/react'; +import { Icon } from '../Icon'; +import { Box } from '../Box'; +import { ActionButton } from '../ActionButton'; +import { useMessageStore, useUserStore, useThreadsMessageStore } from '../../store'; +import { MessageBody } from '../Message/MessageBody'; +import { MessageMetrics } from '../Message/MessageMetrics'; +import MessageAvatarContainer from '../Message/MessageAvatarContainer'; +import MessageBodyContainer from '../Message/MessageBodyContainer'; +import MessageHeader from '../Message/MessageHeader'; +import useFileStore from '../../store/fileStore'; + +const MessageCss = css` + display: flex; + flex-direction: row; + align-items: flex-start; + padding-top: 0.5rem; + -webkit-padding-before: 0.5rem; + padding-block-start: 0.5rem; + padding-bottom: 0.25rem; + -webkit-padding-after: 0.25rem; + padding-block-end: 0.25rem; + padding-left: 1.25rem; + padding-right: 1.25rem; + padding-inline: 1.25rem; + cursor: pointer; + &:hover { + background: #f2f3f5; + } +`; + +const componentStyle = css` + position: fixed; + right: 0; + top: 0; + width: 350px; + height: 100%; + overflow: hidden; + background-color: white; + box-shadow: -1px 0px 5px rgb(0 0 0 / 25%); + z-index: 100; + @media (max-width: 550px) { + width: 100vw; + } +`; + +const wrapContainerStyle = css` + height: 100%; + display: flex; + flex-direction: column; +`; + +const searchContainerStyle = css` + display: flex; + align-items: center; + justify-content: center; + background-color: #fff; + border: 2px solid #ddd; + position: relative; +`; + +const textInputStyle = css` + width: 75%; + height: 2.5rem; + border: none; + outline: none; + &::placeholder { + padding-left: 5px; + } +`; + +const Files = () => { + const showAvatar = useUserStore((state) => state.showAvatar); + const messages = useMessageStore((state) => state.messages); + const setShowAllFiles = useFileStore((state) => state.setShowAllFiles); + const openThread = useMessageStore((state) => state.openThread); + const [text, setText] = useState(''); + + const toggleShowAllFiles = () => { + setShowAllFiles(false); + }; + + const handleOpenThread = (msg) => () => { + openThread(msg); + toggleShowAllFiles(false); + }; + + const handleInputChange = (e) => { + setText(e.target.value); + }; + + const filteredThreads = useMemo(() => { + return messages.filter((message) => + message.msg.toLowerCase().includes(text.toLowerCase()) + ); + }, [messages, text]); + + return ( + + + + + +

+ + + Files + + + + +

+ + + + + + + + + + + {filteredThreads.length === 0 ? ( + + + No files found + + ) : (filteredThreads + .map((message) => ( + !message.t && message.tcount && ( + + {showAvatar && ( + + )} + + {} + + {message.attachments && message.attachments.length > 0 ? ( + message.file.name + ) : ( + message.msg + )} + + + + + + ) + )))} + + + + ); +}; + +export default Files; diff --git a/packages/react/src/components/Files/index.js b/packages/react/src/components/Files/index.js new file mode 100644 index 000000000..7ccfadf96 --- /dev/null +++ b/packages/react/src/components/Files/index.js @@ -0,0 +1 @@ +export { default as Files } from './Files'; diff --git a/packages/react/src/components/MessageList/MessageList.js b/packages/react/src/components/MessageList/MessageList.js index 9a9203a89..f3f3271ae 100644 --- a/packages/react/src/components/MessageList/MessageList.js +++ b/packages/react/src/components/MessageList/MessageList.js @@ -14,9 +14,11 @@ import isMessageSequential from '../../lib/isMessageSequential'; import SearchMessage from '../SearchMessage/SearchMessage'; import Roominfo from '../RoomInformation/RoomInformation'; import AllThreads from '../AllThreads/AllThreads'; +import { Files } from '../Files'; import { Message } from '../Message'; import useThreadsMessageStore from '../../store/threadsMessageStore'; +import useFileStore from '../../store/fileStore'; const MessageList = ({ messages }) => { const showSearch = useSearchMessageStore((state) => state.showSearch); @@ -29,6 +31,7 @@ const MessageList = ({ messages }) => { const showAllThreads = useThreadsMessageStore( (state) => state.showAllThreads ); + const showAllFiles = useFileStore((state) => state.showAllFiles); const isMessageNewDay = (current, previous) => !previous || !isSameDay(new Date(current.ts), new Date(previous.ts)); @@ -59,6 +62,7 @@ const MessageList = ({ messages }) => { {showSearch && } {showChannelinfo && } {showAllThreads && } + {showAllFiles && } ); }; diff --git a/packages/react/src/store/fileStore.js b/packages/react/src/store/fileStore.js new file mode 100644 index 000000000..a073f0a58 --- /dev/null +++ b/packages/react/src/store/fileStore.js @@ -0,0 +1,8 @@ +import { create } from 'zustand'; + +const useFileStore = create((set) => ({ + showAllFiles: false, + setShowAllFiles: (showAllFiles) => set(() => ({ showAllFiles })), +})); + +export default useFileStore; From f32e8ca0a7115820598db38354bf3448e1bcca70 Mon Sep 17 00:00:00 2001 From: Umang Utkarsh Date: Sat, 2 Mar 2024 20:15:07 +0530 Subject: [PATCH 4/9] menu-sidebar-components --- .../react/src/components/Files/FileMetrics.js | 66 +++++++++++ .../components/Files/FilePreviewContainer.js | 31 +++++ .../src/components/Files/FilePreviewHeader.js | 107 ++++++++++++++++++ packages/react/src/components/Files/Files.js | 72 +++++++----- 4 files changed, 247 insertions(+), 29 deletions(-) create mode 100644 packages/react/src/components/Files/FileMetrics.js create mode 100644 packages/react/src/components/Files/FilePreviewContainer.js create mode 100644 packages/react/src/components/Files/FilePreviewHeader.js diff --git a/packages/react/src/components/Files/FileMetrics.js b/packages/react/src/components/Files/FileMetrics.js new file mode 100644 index 000000000..add66792f --- /dev/null +++ b/packages/react/src/components/Files/FileMetrics.js @@ -0,0 +1,66 @@ +import React from 'react'; +import { css } from '@emotion/react'; +import { formatDistance } from 'date-fns'; +import useComponentOverrides from '../../theme/useComponentOverrides'; +import { Box } from '../Box'; +import { appendClassNames } from '../../lib/appendClassNames'; +import { Icon } from '../Icon'; + +const FileMetricsCss = css` + display: flex; + margin-left: -0.25rem; + margin-right: -0.25rem; + margin-inline: -0.25rem; + margin-top: 0.5rem; +`; + +const FileMetricsItemCss = css` + letter-spacing: 0rem; + font-size: 0.625rem; + font-weight: 700; + line-height: 0.75rem; + display: flex; + justify-content: center; + align-items: center; + margin-left: 0.25rem; + color: #6c727a; +`; + +const FileMetricsItemLabelCss = css` + margin: 0.25rem; + margin-inline-start: 0.25rem; + white-space: nowrap; +`; + +export const FileMetrics = ({ + className = '', + file, + style = {}, + ...props +}) => { + const { styleOverrides, classNames } = useComponentOverrides( + 'MessageMetrics', + className, + style + ); + return ( + +
+ +
+ {formatDistance(new Date(file.uploadedAt), new Date(), { + addSuffix: true, + })} +
+
+ + ); +}; diff --git a/packages/react/src/components/Files/FilePreviewContainer.js b/packages/react/src/components/Files/FilePreviewContainer.js new file mode 100644 index 000000000..7b69bf831 --- /dev/null +++ b/packages/react/src/components/Files/FilePreviewContainer.js @@ -0,0 +1,31 @@ +import React, { useContext } from 'react'; +import { css } from '@emotion/react'; +import { Avatar } from '../Avatar'; +import { Box } from '../Box'; +import { Icon } from '../Icon'; + +const FilePreviewContainer = ({ file, sequential, isStarred }) => { + const FilePreviewContainerCss = css` + margin: 3px; + width: 2.25em; + max-height: 2.25em; + display: flex; + justify-content: flex-end; + `; + + return ( + + {!sequential ? ( + + ) : isStarred ? ( + + ) : null} + + ); +}; + +export default FilePreviewContainer; diff --git a/packages/react/src/components/Files/FilePreviewHeader.js b/packages/react/src/components/Files/FilePreviewHeader.js new file mode 100644 index 000000000..97c592322 --- /dev/null +++ b/packages/react/src/components/Files/FilePreviewHeader.js @@ -0,0 +1,107 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { css } from '@emotion/react'; +import { format } from 'date-fns'; +import { useUserStore } from '../../store'; +import { Icon } from '../Icon'; +import useComponentOverrides from '../../theme/useComponentOverrides'; +import { Box } from '../Box'; +import { appendClassNames } from '../../lib/appendClassNames'; + +const FilePreviewHeaderCss = css` + display: flex; + flex-direction: row; + flex-grow: 0; + flex-shrink: 1; + min-width: 1px; + margin-top: 0.125rem; + margin-bottom: 0.125rem; + margin-block: 0.125rem; + gap: 0.125rem; + align-items: center; +`; + +const FilePreviewHeaderNameCss = css` + letter-spacing: 0rem; + font-size: 0.875rem; + font-weight: 700; + line-height: 1.25rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex-shrink: 1; + color: #2f343d; +`; + +const FilePreviewHeaderUsernameCss = css` + letter-spacing: 0rem; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.25rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex-shrink: 1; + color: #6c727a; +`; + +const FilePreviewHeaderTimestapCss = css` + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + letter-spacing: 0rem; + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + flex-shrink: 0; + color: #9ea2a8; +`; + +const FilePreviewHeader = ({ file, isTimeStamped = true }) => { + const { styleOverrides, classNames } = useComponentOverrides('MessageHeader'); + const authenticatedUserId = useUserStore((state) => state.userId); + const isStarred = + file.starred && + file.starred.find((u) => u._id === authenticatedUserId); + + return ( + + + {file.name} + + + {isTimeStamped && ( + + {format(new Date(file.ts), 'h:mm a')} + + )} + {isStarred ? ( + + ) : null} + + ); + + +}; + +export default FilePreviewHeader; + +FilePreviewHeader.propTypes = { + file: PropTypes.any, +}; diff --git a/packages/react/src/components/Files/Files.js b/packages/react/src/components/Files/Files.js index 6b40bea7c..af5bcdf12 100644 --- a/packages/react/src/components/Files/Files.js +++ b/packages/react/src/components/Files/Files.js @@ -1,4 +1,4 @@ -import React, { useState, useMemo } from 'react'; +import React, { useState, useMemo, useEffect } from 'react'; import { css } from '@emotion/react'; import { Icon } from '../Icon'; import { Box } from '../Box'; @@ -10,6 +10,10 @@ import MessageAvatarContainer from '../Message/MessageAvatarContainer'; import MessageBodyContainer from '../Message/MessageBodyContainer'; import MessageHeader from '../Message/MessageHeader'; import useFileStore from '../../store/fileStore'; +import { useRCContext } from '../../context/RCInstance'; +import FilePreviewContainer from './FilePreviewContainer'; +import FilePreviewHeader from './FilePreviewHeader'; +import { FileMetrics } from './FileMetrics'; const MessageCss = css` display: flex; @@ -71,21 +75,17 @@ const textInputStyle = css` `; const Files = () => { + const { RCInstance } = useRCContext(); const showAvatar = useUserStore((state) => state.showAvatar); const messages = useMessageStore((state) => state.messages); const setShowAllFiles = useFileStore((state) => state.setShowAllFiles); - const openThread = useMessageStore((state) => state.openThread); const [text, setText] = useState(''); + const [files, setFiles] = useState([]); const toggleShowAllFiles = () => { setShowAllFiles(false); }; - const handleOpenThread = (msg) => () => { - openThread(msg); - toggleShowAllFiles(false); - }; - const handleInputChange = (e) => { setText(e.target.value); }; @@ -96,6 +96,23 @@ const Files = () => { ); }, [messages, text]); + const filteredFiles = useMemo(() => { + return files.filter((file) => + file.name.toLowerCase().includes(text.toLowerCase()) + ); + }, [files, text]); + + useEffect(() => { + const fetchAllFiles = async () => { + const res = await RCInstance.getAllFiles(); + if (res?.files) { + setFiles(res.files); + } + console.log(res); + } + fetchAllFiles(); + }, [RCInstance, setFiles]); + return ( @@ -138,40 +155,37 @@ const Files = () => { overflow: 'auto', display: 'flex', flexDirection: 'column', - justifyContent: filteredThreads.length === 0 ? 'center' : 'initial', - alignItems: filteredThreads.length === 0 ? 'center' : 'initial' + justifyContent: filteredFiles.length === 0 ? 'center' : 'initial', + alignItems: filteredFiles.length === 0 ? 'center' : 'initial' }} > - {filteredThreads.length === 0 ? ( + {filteredFiles.length === 0 ? ( No files found - ) : (filteredThreads - .map((message) => ( - !message.t && message.tcount && ( - - {showAvatar && ( + ) : (filteredFiles + .map((file) => ( + file.path && ( + + {/* {showAvatar && ( - )} + /> */} + + {/* )} */} - {} + {} - {message.attachments && message.attachments.length > 0 ? ( - message.file.name - ) : ( - message.msg - )} + @{file.user.username} - - + ) From 4065f7ba39cd8e81f1e6d7158cd5ef542da714c6 Mon Sep 17 00:00:00 2001 From: Umang Utkarsh Date: Sat, 2 Mar 2024 20:24:45 +0530 Subject: [PATCH 5/9] finalize-code --- .../src/components/ChatHeader/ChatHeader.js | 5 +- .../components/Files/FilePreviewContainer.js | 2 +- .../src/components/Files/FilePreviewHeader.js | 21 +- packages/react/src/components/Files/Files.js | 208 ++++++++++-------- .../src/components/MessageList/MessageList.js | 5 +- packages/react/src/store/index.js | 1 + 6 files changed, 132 insertions(+), 110 deletions(-) diff --git a/packages/react/src/components/ChatHeader/ChatHeader.js b/packages/react/src/components/ChatHeader/ChatHeader.js index 8e3a4493e..bcba72fbd 100644 --- a/packages/react/src/components/ChatHeader/ChatHeader.js +++ b/packages/react/src/components/ChatHeader/ChatHeader.js @@ -10,6 +10,8 @@ import { useSearchMessageStore, useChannelStore, useToastStore, + useThreadsMessageStore, + useFileStore, } from '../../store'; import { DynamicHeader } from '../DynamicHeader'; import { Tooltip } from '../Tooltip'; @@ -18,10 +20,8 @@ import useComponentOverrides from '../../theme/useComponentOverrides'; import { Icon } from '../Icon'; import { ActionButton } from '../ActionButton'; import { Menu } from '../Menu'; -import useThreadsMessageStore from '../../store/threadsMessageStore'; import { useToastBarDispatch } from '../../hooks/useToastBarDispatch'; import useFetchChatData from '../../hooks/useFetchChatData'; -import useFileStore from '../../store/fileStore'; const ChatHeader = ({ isClosable, @@ -285,6 +285,7 @@ const ChatHeader = ({ isUserAuthenticated, moreOpts, setFullScreen, + showAllFiles, showAllThreads, showChannelMembers, showChannelinformation, diff --git a/packages/react/src/components/Files/FilePreviewContainer.js b/packages/react/src/components/Files/FilePreviewContainer.js index 7b69bf831..6157c7553 100644 --- a/packages/react/src/components/Files/FilePreviewContainer.js +++ b/packages/react/src/components/Files/FilePreviewContainer.js @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import React from 'react'; import { css } from '@emotion/react'; import { Avatar } from '../Avatar'; import { Box } from '../Box'; diff --git a/packages/react/src/components/Files/FilePreviewHeader.js b/packages/react/src/components/Files/FilePreviewHeader.js index 97c592322..c57e214e5 100644 --- a/packages/react/src/components/Files/FilePreviewHeader.js +++ b/packages/react/src/components/Files/FilePreviewHeader.js @@ -10,19 +10,23 @@ import { appendClassNames } from '../../lib/appendClassNames'; const FilePreviewHeaderCss = css` display: flex; + overflow-x: hidden; flex-direction: row; flex-grow: 0; flex-shrink: 1; min-width: 1px; + padding-right: 3px; margin-top: 0.125rem; margin-bottom: 0.125rem; margin-block: 0.125rem; gap: 0.125rem; align-items: center; + max-width: 85%; `; const FilePreviewHeaderNameCss = css` letter-spacing: 0rem; + display: inline-block; font-size: 0.875rem; font-weight: 700; line-height: 1.25rem; @@ -33,18 +37,6 @@ const FilePreviewHeaderNameCss = css` color: #2f343d; `; -const FilePreviewHeaderUsernameCss = css` - letter-spacing: 0rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.25rem; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex-shrink: 1; - color: #6c727a; -`; - const FilePreviewHeaderTimestapCss = css` overflow: hidden; text-overflow: ellipsis; @@ -61,8 +53,7 @@ const FilePreviewHeader = ({ file, isTimeStamped = true }) => { const { styleOverrides, classNames } = useComponentOverrides('MessageHeader'); const authenticatedUserId = useUserStore((state) => state.userId); const isStarred = - file.starred && - file.starred.find((u) => u._id === authenticatedUserId); + file.starred && file.starred.find((u) => u._id === authenticatedUserId); return ( { ) : null} ); - - }; export default FilePreviewHeader; diff --git a/packages/react/src/components/Files/Files.js b/packages/react/src/components/Files/Files.js index af5bcdf12..2b7ddfdc0 100644 --- a/packages/react/src/components/Files/Files.js +++ b/packages/react/src/components/Files/Files.js @@ -3,14 +3,14 @@ import { css } from '@emotion/react'; import { Icon } from '../Icon'; import { Box } from '../Box'; import { ActionButton } from '../ActionButton'; -import { useMessageStore, useUserStore, useThreadsMessageStore } from '../../store'; +import { + useMessageStore, + useUserStore, + useFileStore, +} from '../../store'; +import { useRCContext } from '../../context/RCInstance'; import { MessageBody } from '../Message/MessageBody'; -import { MessageMetrics } from '../Message/MessageMetrics'; -import MessageAvatarContainer from '../Message/MessageAvatarContainer'; import MessageBodyContainer from '../Message/MessageBodyContainer'; -import MessageHeader from '../Message/MessageHeader'; -import useFileStore from '../../store/fileStore'; -import { useRCContext } from '../../context/RCInstance'; import FilePreviewContainer from './FilePreviewContainer'; import FilePreviewHeader from './FilePreviewHeader'; import { FileMetrics } from './FileMetrics'; @@ -35,43 +35,55 @@ const MessageCss = css` `; const componentStyle = css` - position: fixed; - right: 0; - top: 0; - width: 350px; - height: 100%; - overflow: hidden; - background-color: white; - box-shadow: -1px 0px 5px rgb(0 0 0 / 25%); - z-index: 100; - @media (max-width: 550px) { + position: fixed; + right: 0; + top: 0; + width: 350px; + height: 100%; + overflow: hidden; + background-color: white; + box-shadow: -1px 0px 5px rgb(0 0 0 / 25%); + z-index: 100; + @media (max-width: 550px) { width: 100vw; - } + } `; const wrapContainerStyle = css` - height: 100%; - display: flex; - flex-direction: column; + height: 100%; + display: flex; + flex-direction: column; `; const searchContainerStyle = css` - display: flex; - align-items: center; - justify-content: center; - background-color: #fff; - border: 2px solid #ddd; - position: relative; + display: flex; + align-items: center; + justify-content: center; + background-color: #fff; + border: 2px solid #ddd; + position: relative; `; const textInputStyle = css` - width: 75%; - height: 2.5rem; - border: none; - outline: none; - &::placeholder { + width: 75%; + height: 2.5rem; + border: none; + outline: none; + &::placeholder { padding-left: 5px; - } + } +`; + +const FilePreviewUsernameCss = css` + letter-spacing: 0rem; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.25rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex-shrink: 1; + color: #6c727a; `; const Files = () => { @@ -80,6 +92,7 @@ const Files = () => { const messages = useMessageStore((state) => state.messages); const setShowAllFiles = useFileStore((state) => state.setShowAllFiles); const [text, setText] = useState(''); + const [isFilesFetched, setIsFilesFetched] = useState(false); const [files, setFiles] = useState([]); const toggleShowAllFiles = () => { @@ -90,12 +103,6 @@ const Files = () => { setText(e.target.value); }; - const filteredThreads = useMemo(() => { - return messages.filter((message) => - message.msg.toLowerCase().includes(text.toLowerCase()) - ); - }, [messages, text]); - const filteredFiles = useMemo(() => { return files.filter((file) => file.name.toLowerCase().includes(text.toLowerCase()) @@ -107,28 +114,32 @@ const Files = () => { const res = await RCInstance.getAllFiles(); if (res?.files) { setFiles(res.files); + setIsFilesFetched(true); } - console.log(res); - } + }; fetchAllFiles(); }, [RCInstance, setFiles]); return ( - - +

- Files @@ -145,52 +156,73 @@ const Files = () => { css={textInputStyle} /> - + - - {filteredFiles.length === 0 ? ( - - - No files found - - ) : (filteredFiles - .map((file) => ( - file.path && ( - - {/* {showAvatar && ( - */} - - {/* )} */} - - {} - - @{file.user.username} - - - - + {isFilesFetched && ( + + {filteredFiles.length === 0 ? ( + + + + No files found + + + ) : ( + filteredFiles.map( + (file) => + file.path && ( + + + + { + + } + +
+ @{file.user.username} +
+ + + + + ) ) - )))} - + )} + + )} ); diff --git a/packages/react/src/components/MessageList/MessageList.js b/packages/react/src/components/MessageList/MessageList.js index f3f3271ae..ce0cb28d8 100644 --- a/packages/react/src/components/MessageList/MessageList.js +++ b/packages/react/src/components/MessageList/MessageList.js @@ -7,6 +7,8 @@ import { useSearchMessageStore, useChannelStore, useUserStore, + useThreadsMessageStore, + useFileStore, } from '../../store'; import RoomMembers from '../RoomMembers/RoomMember'; import MessageReportWindow from '../ReportMessage/MessageReportWindow'; @@ -17,9 +19,6 @@ import AllThreads from '../AllThreads/AllThreads'; import { Files } from '../Files'; import { Message } from '../Message'; -import useThreadsMessageStore from '../../store/threadsMessageStore'; -import useFileStore from '../../store/fileStore'; - const MessageList = ({ messages }) => { const showSearch = useSearchMessageStore((state) => state.showSearch); const showChannelinfo = useChannelStore((state) => state.showChannelinfo); diff --git a/packages/react/src/store/index.js b/packages/react/src/store/index.js index 1d734fbbe..ff66c7fc6 100644 --- a/packages/react/src/store/index.js +++ b/packages/react/src/store/index.js @@ -7,3 +7,4 @@ export { default as useSearchMessageStore } from './searchMessageStore'; export { default as loginModalStore } from './loginmodalStore'; export { default as useChannelStore } from './channelStore'; export { default as useThreadsMessageStore } from './threadsMessageStore'; +export { default as useFileStore } from './fileStore'; From 78970e9e2243cbbf20112cd0612cb938585432b0 Mon Sep 17 00:00:00 2001 From: Umang Utkarsh Date: Sat, 2 Mar 2024 20:39:09 +0530 Subject: [PATCH 6/9] format-fixes --- .../react/src/components/Files/FileMetrics.js | 55 +++++++-------- .../components/Files/FilePreviewContainer.js | 24 +++---- .../src/components/Files/FilePreviewHeader.js | 68 +++++++++---------- packages/react/src/components/Files/Files.js | 8 +-- .../react/src/components/Icon/icons/Clip.js | 16 ++--- .../src/components/Mentions/MembersList.js | 10 +-- .../src/components/Message/MessageHeader.js | 6 +- .../ReportMessage/ReportWindowButtons.js | 1 - .../components/SearchMessage/SearchMessage.js | 1 - packages/react/src/store/fileStore.js | 4 +- 10 files changed, 88 insertions(+), 105 deletions(-) diff --git a/packages/react/src/components/Files/FileMetrics.js b/packages/react/src/components/Files/FileMetrics.js index add66792f..ef1b0c115 100644 --- a/packages/react/src/components/Files/FileMetrics.js +++ b/packages/react/src/components/Files/FileMetrics.js @@ -32,35 +32,30 @@ const FileMetricsItemLabelCss = css` white-space: nowrap; `; -export const FileMetrics = ({ - className = '', - file, - style = {}, - ...props -}) => { - const { styleOverrides, classNames } = useComponentOverrides( - 'MessageMetrics', - className, - style - ); - return ( - { + const { styleOverrides, classNames } = useComponentOverrides( + 'MessageMetrics', + className, + style + ); + return ( + +
-
- -
- {formatDistance(new Date(file.uploadedAt), new Date(), { - addSuffix: true, - })} -
-
- - ); + +
+ {formatDistance(new Date(file.uploadedAt), new Date(), { + addSuffix: true, + })} +
+
+ + ); }; diff --git a/packages/react/src/components/Files/FilePreviewContainer.js b/packages/react/src/components/Files/FilePreviewContainer.js index 6157c7553..996a6edb2 100644 --- a/packages/react/src/components/Files/FilePreviewContainer.js +++ b/packages/react/src/components/Files/FilePreviewContainer.js @@ -5,7 +5,7 @@ import { Box } from '../Box'; import { Icon } from '../Icon'; const FilePreviewContainer = ({ file, sequential, isStarred }) => { - const FilePreviewContainerCss = css` + const FilePreviewContainerCss = css` margin: 3px; width: 2.25em; max-height: 2.25em; @@ -13,19 +13,15 @@ const FilePreviewContainer = ({ file, sequential, isStarred }) => { justify-content: flex-end; `; - return ( - - {!sequential ? ( - - ) : isStarred ? ( - - ) : null} - - ); + return ( + + {!sequential ? ( + + ) : isStarred ? ( + + ) : null} + + ); }; export default FilePreviewContainer; diff --git a/packages/react/src/components/Files/FilePreviewHeader.js b/packages/react/src/components/Files/FilePreviewHeader.js index c57e214e5..886959dca 100644 --- a/packages/react/src/components/Files/FilePreviewHeader.js +++ b/packages/react/src/components/Files/FilePreviewHeader.js @@ -50,47 +50,47 @@ const FilePreviewHeaderTimestapCss = css` `; const FilePreviewHeader = ({ file, isTimeStamped = true }) => { - const { styleOverrides, classNames } = useComponentOverrides('MessageHeader'); - const authenticatedUserId = useUserStore((state) => state.userId); - const isStarred = - file.starred && file.starred.find((u) => u._id === authenticatedUserId); + const { styleOverrides, classNames } = useComponentOverrides('MessageHeader'); + const authenticatedUserId = useUserStore((state) => state.userId); + const isStarred = + file.starred && file.starred.find((u) => u._id === authenticatedUserId); - return ( + return ( + - - {file.name} - - - {isTimeStamped && ( - - {format(new Date(file.ts), 'h:mm a')} - - )} - {isStarred ? ( - - ) : null} + {file.name} - ); + + {isTimeStamped && ( + + {format(new Date(file.ts), 'h:mm a')} + + )} + {isStarred ? ( + + ) : null} + + ); }; export default FilePreviewHeader; FilePreviewHeader.propTypes = { - file: PropTypes.any, + file: PropTypes.any, }; diff --git a/packages/react/src/components/Files/Files.js b/packages/react/src/components/Files/Files.js index 2b7ddfdc0..005afc5fe 100644 --- a/packages/react/src/components/Files/Files.js +++ b/packages/react/src/components/Files/Files.js @@ -3,11 +3,7 @@ import { css } from '@emotion/react'; import { Icon } from '../Icon'; import { Box } from '../Box'; import { ActionButton } from '../ActionButton'; -import { - useMessageStore, - useUserStore, - useFileStore, -} from '../../store'; +import { useFileStore } from '../../store'; import { useRCContext } from '../../context/RCInstance'; import { MessageBody } from '../Message/MessageBody'; import MessageBodyContainer from '../Message/MessageBodyContainer'; @@ -88,8 +84,6 @@ const FilePreviewUsernameCss = css` const Files = () => { const { RCInstance } = useRCContext(); - const showAvatar = useUserStore((state) => state.showAvatar); - const messages = useMessageStore((state) => state.messages); const setShowAllFiles = useFileStore((state) => state.setShowAllFiles); const [text, setText] = useState(''); const [isFilesFetched, setIsFilesFetched] = useState(false); diff --git a/packages/react/src/components/Icon/icons/Clip.js b/packages/react/src/components/Icon/icons/Clip.js index 429c2603c..c2c5588ab 100644 --- a/packages/react/src/components/Icon/icons/Clip.js +++ b/packages/react/src/components/Icon/icons/Clip.js @@ -1,14 +1,14 @@ import React from 'react'; const Clip = (props) => ( - - - + + + ); export default Clip; diff --git a/packages/react/src/components/Mentions/MembersList.js b/packages/react/src/components/Mentions/MembersList.js index b7ab4d3a4..d3ddc2edd 100644 --- a/packages/react/src/components/Mentions/MembersList.js +++ b/packages/react/src/components/Mentions/MembersList.js @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useCallback, useEffect } from 'react'; import { css } from '@emotion/react'; import PropTypes from 'prop-types'; import { Box } from '../Box'; @@ -46,9 +46,9 @@ function MembersList({ mentionIndex, filteredMembers = [], onMemberClick }) { font-weight: 600; `; - const handleMemberClick = (selectedItem) => { + const handleMemberClick = useCallback((selectedItem) => { onMemberClick(selectedItem); - }; + }, [handleMemberClick]); useEffect(() => { const handleKeyPress = (event) => { @@ -57,8 +57,8 @@ function MembersList({ mentionIndex, filteredMembers = [], onMemberClick }) { mentionIndex < filteredMembers.length ? filteredMembers[mentionIndex] : mentionIndex === filteredMembers.length - ? 'all' - : 'here'; + ? 'all' + : 'here'; handleMemberClick(selectedItem); } }; diff --git a/packages/react/src/components/Message/MessageHeader.js b/packages/react/src/components/Message/MessageHeader.js index fd3e91199..442e87afa 100644 --- a/packages/react/src/components/Message/MessageHeader.js +++ b/packages/react/src/components/Message/MessageHeader.js @@ -83,9 +83,9 @@ const MessageHeader = ({ message, isTimeStamped = true }) => { } }; - const userRoles = roles[message.u.username] - ? roles[message.u.username].roles - : null; + // const userRoles = roles[message.u.username] + // ? roles[message.u.username].roles + // : null; if (!message.t) { return ( diff --git a/packages/react/src/components/ReportMessage/ReportWindowButtons.js b/packages/react/src/components/ReportMessage/ReportWindowButtons.js index 4906582fd..f7525ef1f 100644 --- a/packages/react/src/components/ReportMessage/ReportWindowButtons.js +++ b/packages/react/src/components/ReportMessage/ReportWindowButtons.js @@ -14,7 +14,6 @@ const ReportWindowButtons = ({ children, reportDescription, messageId }) => { ]); const { RCInstance } = useContext(RCContext); const dispatchToastMessage = useToastBarDispatch(); - const toastPosition = useToastStore((state) => state.position); const handleOnClose = () => { toggleReportMessage(); diff --git a/packages/react/src/components/SearchMessage/SearchMessage.js b/packages/react/src/components/SearchMessage/SearchMessage.js index fa44ddf97..adb6a8894 100644 --- a/packages/react/src/components/SearchMessage/SearchMessage.js +++ b/packages/react/src/components/SearchMessage/SearchMessage.js @@ -4,7 +4,6 @@ import RCContext from '../../context/RCInstance'; import classes from './SearchMessage.module.css'; import { Markdown } from '../Markdown/index'; import { useUserStore, useSearchMessageStore } from '../../store'; -import { Button } from '../Button'; import { Box } from '../Box'; import { Icon } from '../Icon'; import { ActionButton } from '../ActionButton'; diff --git a/packages/react/src/store/fileStore.js b/packages/react/src/store/fileStore.js index a073f0a58..5f7db6f25 100644 --- a/packages/react/src/store/fileStore.js +++ b/packages/react/src/store/fileStore.js @@ -1,8 +1,8 @@ import { create } from 'zustand'; const useFileStore = create((set) => ({ - showAllFiles: false, - setShowAllFiles: (showAllFiles) => set(() => ({ showAllFiles })), + showAllFiles: false, + setShowAllFiles: (showAllFiles) => set(() => ({ showAllFiles })), })); export default useFileStore; From c9ba1f2fc202ce7339d1101808d455e35c0bb239 Mon Sep 17 00:00:00 2001 From: Umang Utkarsh Date: Sun, 3 Mar 2024 21:52:45 +0530 Subject: [PATCH 7/9] api-change/linting+format-fix --- packages/api/src/EmbeddedChatApi.ts | 5 +- .../react/src/components/ChatBody/ChatBody.js | 17 +- .../ChatInput/AudioMessageRecorder.js | 2 +- .../src/components/ChatInput/ChatInput.js | 2 +- packages/react/src/components/EmbeddedChat.js | 2 +- .../components/Files/FilePreviewContainer.js | 2 +- packages/react/src/components/Files/Files.js | 264 +++++++++--------- .../react/src/components/Flex/FlexItem.js | 2 +- .../components/Markdown/Markdown.styles.js | 2 +- .../src/components/Mentions/MembersList.js | 13 +- .../src/components/Message/MessageHeader.js | 1 - .../ReportMessage/ReportWindowButtons.js | 2 +- 12 files changed, 166 insertions(+), 148 deletions(-) diff --git a/packages/api/src/EmbeddedChatApi.ts b/packages/api/src/EmbeddedChatApi.ts index f9f203219..2654bc09c 100644 --- a/packages/api/src/EmbeddedChatApi.ts +++ b/packages/api/src/EmbeddedChatApi.ts @@ -627,11 +627,12 @@ export default class EmbeddedChatApi { } } - async getAllFiles() { + async getAllFiles(isChannelPrivate = false) { + const roomType = isChannelPrivate ? "groups" : "channels"; try { const { userId, authToken } = (await this.auth.getCurrentUser()) || {}; const response = await fetch( - `${this.host}/api/v1/channels.files?roomId=${this.rid}`, + `${this.host}/api/v1/${roomType}.files?roomId=${this.rid}`, { headers: { "Content-Type": "application/json", diff --git a/packages/react/src/components/ChatBody/ChatBody.js b/packages/react/src/components/ChatBody/ChatBody.js index a13a472f2..977fcce84 100644 --- a/packages/react/src/components/ChatBody/ChatBody.js +++ b/packages/react/src/components/ChatBody/ChatBody.js @@ -136,7 +136,7 @@ const ChatBody = ({ setViewData(null); }; - const onModalSubmit = useCallback(async (data, value) => { + const onModalSubmit = useCallback(async (data) => { console.log(data); // const { actionId, value, blockId, appId, viewId } = data; // await RCInstance?.triggerBlockAction({ @@ -147,7 +147,20 @@ const ChatBody = ({ // appId, // viewId, // }); - }); + }, []); + + // const onModalSubmit = useCallback(async (data, value) => { + // console.log(data); + // // const { actionId, value, blockId, appId, viewId } = data; + // // await RCInstance?.triggerBlockAction({ + // // rid: RCInstance.rid, + // // actionId, + // // value, + // // blockId, + // // appId, + // // viewId, + // // }); + // }, []); useEffect(() => { RCInstance.auth.onAuthChange((user) => { diff --git a/packages/react/src/components/ChatInput/AudioMessageRecorder.js b/packages/react/src/components/ChatInput/AudioMessageRecorder.js index 426e40f23..3637d80d6 100644 --- a/packages/react/src/components/ChatInput/AudioMessageRecorder.js +++ b/packages/react/src/components/ChatInput/AudioMessageRecorder.js @@ -135,7 +135,7 @@ const AudioMessageRecorder = () => { if (file) { setFile(null); } - }, [isRecorded, file]); + }, [isRecorded, file, ECOptions.enableThreads, RCInstance, threadId]); if (state === 'idle') { return ( diff --git a/packages/react/src/components/ChatInput/ChatInput.js b/packages/react/src/components/ChatInput/ChatInput.js index 7852f90cb..e2b65ae6b 100644 --- a/packages/react/src/components/ChatInput/ChatInput.js +++ b/packages/react/src/components/ChatInput/ChatInput.js @@ -65,7 +65,7 @@ const ChatInput = ({ scrollToBottom }) => { .catch(console.error); } }); - }, [RCInstance]); + }, [RCInstance, isChannelPrivate, setMembersHandler]); const [filteredCommands, setFilteredCommands] = useState([]); const getFilteredCommands = useCallback( diff --git a/packages/react/src/components/EmbeddedChat.js b/packages/react/src/components/EmbeddedChat.js index 999c82bd1..959518015 100644 --- a/packages/react/src/components/EmbeddedChat.js +++ b/packages/react/src/components/EmbeddedChat.js @@ -50,7 +50,7 @@ const EmbeddedChat = ({ useEffect(() => { setToastbarPosition(toastBarPosition); setShowAvatar(showAvatar); - }, [toastBarPosition, showAvatar]); + }, [toastBarPosition, showAvatar, setShowAvatar, setToastbarPosition]); const { onDrag, diff --git a/packages/react/src/components/Files/FilePreviewContainer.js b/packages/react/src/components/Files/FilePreviewContainer.js index 996a6edb2..55980dc66 100644 --- a/packages/react/src/components/Files/FilePreviewContainer.js +++ b/packages/react/src/components/Files/FilePreviewContainer.js @@ -16,7 +16,7 @@ const FilePreviewContainer = ({ file, sequential, isStarred }) => { return ( {!sequential ? ( - + ) : isStarred ? ( ) : null} diff --git a/packages/react/src/components/Files/Files.js b/packages/react/src/components/Files/Files.js index 005afc5fe..f3f830e44 100644 --- a/packages/react/src/components/Files/Files.js +++ b/packages/react/src/components/Files/Files.js @@ -3,7 +3,7 @@ import { css } from '@emotion/react'; import { Icon } from '../Icon'; import { Box } from '../Box'; import { ActionButton } from '../ActionButton'; -import { useFileStore } from '../../store'; +import { useChannelStore, useFileStore } from '../../store'; import { useRCContext } from '../../context/RCInstance'; import { MessageBody } from '../Message/MessageBody'; import MessageBodyContainer from '../Message/MessageBodyContainer'; @@ -83,143 +83,145 @@ const FilePreviewUsernameCss = css` `; const Files = () => { - const { RCInstance } = useRCContext(); - const setShowAllFiles = useFileStore((state) => state.setShowAllFiles); - const [text, setText] = useState(''); - const [isFilesFetched, setIsFilesFetched] = useState(false); - const [files, setFiles] = useState([]); - - const toggleShowAllFiles = () => { - setShowAllFiles(false); - }; - - const handleInputChange = (e) => { - setText(e.target.value); - }; - - const filteredFiles = useMemo(() => { - return files.filter((file) => - file.name.toLowerCase().includes(text.toLowerCase()) - ); - }, [files, text]); - - useEffect(() => { - const fetchAllFiles = async () => { - const res = await RCInstance.getAllFiles(); - if (res?.files) { - setFiles(res.files); - setIsFilesFetched(true); - } - }; - fetchAllFiles(); - }, [RCInstance, setFiles]); - - return ( - - - - state.setShowAllFiles); + const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate); + + const [text, setText] = useState(''); + const [isFilesFetched, setIsFilesFetched] = useState(false); + const [files, setFiles] = useState([]); + + const toggleShowAllFiles = () => { + setShowAllFiles(false); + }; + + const handleInputChange = (e) => { + setText(e.target.value); + }; + + const filteredFiles = useMemo( + () => + files.filter((file) => + file.name.toLowerCase().includes(text.toLowerCase()) + ), + [files, text] + ); + + useEffect(() => { + const fetchAllFiles = async () => { + const res = await RCInstance.getAllFiles(isChannelPrivate); + if (res?.files) { + const sortedFiles = res.files.sort( + (a, b) => new Date(b.uploadedAt) - new Date(a.uploadedAt) + ); + setFiles(sortedFiles); + setIsFilesFetched(true); + } + }; + fetchAllFiles(); + }, [RCInstance, isChannelPrivate, setFiles, setIsFilesFetched]); + + return ( + + + + -

- - +

+ + - Files - - - - -

- - - - - - - - - - {isFilesFetched && ( - - {filteredFiles.length === 0 ? ( - - - - No files found - - - ) : ( - filteredFiles.map( - (file) => - file.path && ( - - - - { - - } - -
- @{file.user.username} -
- - - - - ) - ) - )} - + > + Files + + + + +

+ + + + + + + + + + {isFilesFetched && ( + + {filteredFiles.length === 0 ? ( + + + + No files found + + + ) : ( + filteredFiles.map( + (file) => + file.path && ( + + + + + +
+ @{file.user.username} +
+ + + + + ) + ) )} - + + )} - ); + + ); }; export default Files; diff --git a/packages/react/src/components/Flex/FlexItem.js b/packages/react/src/components/Flex/FlexItem.js index 81bc00edd..26bd35ef2 100644 --- a/packages/react/src/components/Flex/FlexItem.js +++ b/packages/react/src/components/Flex/FlexItem.js @@ -37,7 +37,7 @@ function FlexItem({ } return style; - }, [align, basis, grow, order, shrink]); + }, [align, basis, grow, order, shrink, style]); return ( diff --git a/packages/react/src/components/Markdown/Markdown.styles.js b/packages/react/src/components/Markdown/Markdown.styles.js index 2aad12cbf..0979b9c1a 100644 --- a/packages/react/src/components/Markdown/Markdown.styles.js +++ b/packages/react/src/components/Markdown/Markdown.styles.js @@ -1,4 +1,4 @@ -import { css, keyframes } from '@emotion/react'; +import { css } from '@emotion/react'; export const markdownStyles = { p: css` diff --git a/packages/react/src/components/Mentions/MembersList.js b/packages/react/src/components/Mentions/MembersList.js index d3ddc2edd..bc5d75a98 100644 --- a/packages/react/src/components/Mentions/MembersList.js +++ b/packages/react/src/components/Mentions/MembersList.js @@ -46,9 +46,12 @@ function MembersList({ mentionIndex, filteredMembers = [], onMemberClick }) { font-weight: 600; `; - const handleMemberClick = useCallback((selectedItem) => { - onMemberClick(selectedItem); - }, [handleMemberClick]); + const handleMemberClick = useCallback( + (selectedItem) => { + onMemberClick(selectedItem); + }, + [onMemberClick] + ); useEffect(() => { const handleKeyPress = (event) => { @@ -57,8 +60,8 @@ function MembersList({ mentionIndex, filteredMembers = [], onMemberClick }) { mentionIndex < filteredMembers.length ? filteredMembers[mentionIndex] : mentionIndex === filteredMembers.length - ? 'all' - : 'here'; + ? 'all' + : 'here'; handleMemberClick(selectedItem); } }; diff --git a/packages/react/src/components/Message/MessageHeader.js b/packages/react/src/components/Message/MessageHeader.js index 442e87afa..ba877d639 100644 --- a/packages/react/src/components/Message/MessageHeader.js +++ b/packages/react/src/components/Message/MessageHeader.js @@ -59,7 +59,6 @@ const MessageHeaderTimestapCss = css` const MessageHeader = ({ message, isTimeStamped = true }) => { const { styleOverrides, classNames } = useComponentOverrides('MessageHeader'); - const roles = useUserStore((state) => state.roles); const authenticatedUserId = useUserStore((state) => state.userId); const isStarred = message.starred && diff --git a/packages/react/src/components/ReportMessage/ReportWindowButtons.js b/packages/react/src/components/ReportMessage/ReportWindowButtons.js index f7525ef1f..10b654fc9 100644 --- a/packages/react/src/components/ReportMessage/ReportWindowButtons.js +++ b/packages/react/src/components/ReportMessage/ReportWindowButtons.js @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import PropTypes from 'prop-types'; -import { useMessageStore, useToastStore } from '../../store'; +import { useMessageStore } from '../../store'; import RCContext from '../../context/RCInstance'; import { Button } from '../Button'; import { Icon } from '../Icon'; From b21245a0bd3c51d1b1abf8b5253c3b6cf93a7dc1 Mon Sep 17 00:00:00 2001 From: Umang Utkarsh Date: Sun, 3 Mar 2024 22:05:13 +0530 Subject: [PATCH 8/9] format-fix --- packages/react/src/components/ChatHeader/ChatHeader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/ChatHeader/ChatHeader.js b/packages/react/src/components/ChatHeader/ChatHeader.js index e5c82ce76..8b9392196 100644 --- a/packages/react/src/components/ChatHeader/ChatHeader.js +++ b/packages/react/src/components/ChatHeader/ChatHeader.js @@ -149,7 +149,7 @@ const ChatHeader = ({ setShowAllFiles(true); setShowSearch(false); }, [setShowAllFiles, setShowSearch]); - + const showMentions = useCallback(async () => { setShowMentions(true); setShowSearch(false); From 2f117b389b722e8442681a41d2981ff726faeb36 Mon Sep 17 00:00:00 2001 From: Umang Utkarsh Date: Mon, 11 Mar 2024 23:48:23 +0530 Subject: [PATCH 9/9] revert-lint-changes --- packages/react/src/components/ChatInput/AudioMessageRecorder.js | 2 +- packages/react/src/components/ChatInput/ChatInput.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/ChatInput/AudioMessageRecorder.js b/packages/react/src/components/ChatInput/AudioMessageRecorder.js index 3637d80d6..426e40f23 100644 --- a/packages/react/src/components/ChatInput/AudioMessageRecorder.js +++ b/packages/react/src/components/ChatInput/AudioMessageRecorder.js @@ -135,7 +135,7 @@ const AudioMessageRecorder = () => { if (file) { setFile(null); } - }, [isRecorded, file, ECOptions.enableThreads, RCInstance, threadId]); + }, [isRecorded, file]); if (state === 'idle') { return ( diff --git a/packages/react/src/components/ChatInput/ChatInput.js b/packages/react/src/components/ChatInput/ChatInput.js index 75d6ecaf6..cd5236cbe 100644 --- a/packages/react/src/components/ChatInput/ChatInput.js +++ b/packages/react/src/components/ChatInput/ChatInput.js @@ -66,7 +66,7 @@ const ChatInput = ({ scrollToBottom }) => { .catch(console.error); } }); - }, [RCInstance, isChannelPrivate, setMembersHandler]); + }, [RCInstance]); const [filteredCommands, setFilteredCommands] = useState([]); const getFilteredCommands = useCallback(