From 24ebf4d99ac8d48a5f0f90ab8edefeefe841efa0 Mon Sep 17 00:00:00 2001 From: spaenleh Date: Mon, 5 Sep 2022 17:39:02 +0200 Subject: [PATCH 01/13] test: add logs --- src/components/Chatbox/Input.tsx | 5 +++++ src/components/Chatbox/InputBar.tsx | 1 + src/utils/mentions.ts | 4 ++-- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/Chatbox/Input.tsx b/src/components/Chatbox/Input.tsx index 09afb6bb..6f5b2778 100644 --- a/src/components/Chatbox/Input.tsx +++ b/src/components/Chatbox/Input.tsx @@ -149,11 +149,15 @@ const Input: FC = ({ const onSend = (): void => { if (textInput) { const mentions = getAllMentions(textInput).map(({ id }) => id); + console.log('mentions from the message', mentions); let expandedMentions: string[] = mentions; + console.log('expanded mentions initial', expandedMentions); // expand '@all' to all members in mentions array (skip if there are no members) if (mentions.includes(ALL_MEMBERS_ID) && members?.size) { expandedMentions = members.map((m) => m.id).toArray(); + console.log('All detected, mentions are now', expandedMentions); } + console.log('Just before sending mentions are', expandedMentions); sendMessageFunction?.({ message: textInput, mentions: expandedMentions }); // reset input content setTextInput(''); @@ -167,6 +171,7 @@ const Input: FC = ({ }, newValue: string, ): void => { + console.log('new value for the input', newValue); setTextInput(newValue); }; diff --git a/src/components/Chatbox/InputBar.tsx b/src/components/Chatbox/InputBar.tsx index 99ef256c..6e492887 100644 --- a/src/components/Chatbox/InputBar.tsx +++ b/src/components/Chatbox/InputBar.tsx @@ -59,6 +59,7 @@ const InputBar: FC = ({ body, }); } else { + console.log('message body to send is', body); sendMessageFunction?.({ chatId, body }); } // reset editing diff --git a/src/utils/mentions.ts b/src/utils/mentions.ts index 3bd66722..842c3724 100644 --- a/src/utils/mentions.ts +++ b/src/utils/mentions.ts @@ -1,8 +1,8 @@ const mentionRegEx = - /\w+)>\[(?[\da-f]{8}-[\da-f]{4}-4[\da-f]{3}-[89ab][\da-f]{3}-[\da-f]{12})]/i; + /[\s\w]+)>\[(?[\da-f]{8}-[\da-f]{4}-4[\da-f]{3}-[89ab][\da-f]{3}-[\da-f]{12})]/i; const mentionCodeRegEx = - /`\w+)>\[(?[\da-f]{8}-[\da-f]{4}-4[\da-f]{3}-[89ab][\da-f]{3}-[\da-f]{12})]`/i; + /`[\s\w]+)>\[(?[\da-f]{8}-[\da-f]{4}-4[\da-f]{3}-[89ab][\da-f]{3}-[\da-f]{12})]`/i; export const getMention = (textContent: string): RegExpMatchArray | null => textContent.match(mentionRegEx); From cc6ac2bb0032be901c1724ff71ca79db55dae493 Mon Sep 17 00:00:00 2001 From: spaenleh Date: Mon, 5 Sep 2022 18:39:59 +0200 Subject: [PATCH 02/13] test: add log in regex function --- src/utils/mentions.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/utils/mentions.ts b/src/utils/mentions.ts index 842c3724..580504c5 100644 --- a/src/utils/mentions.ts +++ b/src/utils/mentions.ts @@ -15,6 +15,7 @@ export const getAllMentions = ( id: match.groups?.id || '', name: match.groups?.name || '', })); + console.log('found mentions', arr); return arr.filter(({ id, name }) => id && name); }; From 8a517ec1eec34b234076675f72ee6885c181d69d Mon Sep 17 00:00:00 2001 From: spaenleh Date: Mon, 5 Sep 2022 19:36:38 +0200 Subject: [PATCH 03/13] test: check input of find mentions --- example/src/components/ChatboxWrapper.tsx | 7 ++++--- package.json | 1 + src/utils/mentions.ts | 7 +++++-- yarn.lock | 20 ++++++++++++++++++++ 4 files changed, 30 insertions(+), 5 deletions(-) diff --git a/example/src/components/ChatboxWrapper.tsx b/example/src/components/ChatboxWrapper.tsx index 5f758287..882d0d83 100644 --- a/example/src/components/ChatboxWrapper.tsx +++ b/example/src/components/ChatboxWrapper.tsx @@ -27,15 +27,16 @@ const ChatboxWrapper: FC = ({ // use hooks const { data: currentMember } = hooks.useCurrentMember(); const { data: chat } = hooks.useItemChat(chatId); - const memberships = hooks.useItemMemberships(chatId).data; // get chat messages const chatMessages = chat?.messages; + const { data: memberships } = hooks.useItemMemberships(chatId); + const memberIds: string[] = - memberships?.map((m) => m.memberId)?.toArray() || []; + (memberships?.size && memberships?.map((m) => m.memberId)?.toArray()) || []; + const members = hooks.useMembers(memberIds).data; const member = new ImmutableMember(currentMember); - const members = hooks.useMembers(memberIds).data; const { mutate: sendMessage, diff --git a/package.json b/package.json index 2b8c55cd..fb4d00a5 100644 --- a/package.json +++ b/package.json @@ -96,6 +96,7 @@ "@typescript-eslint/parser": "5.30.7", "cross-env": "7.0.3", "cypress": "10.6.0", + "env-cmd": "10.1.0", "eslint": "8.23.0", "eslint-config-prettier": "8.3.0", "eslint-config-standard": "16.0.3", diff --git a/src/utils/mentions.ts b/src/utils/mentions.ts index 580504c5..74a1080a 100644 --- a/src/utils/mentions.ts +++ b/src/utils/mentions.ts @@ -9,9 +9,12 @@ export const getMention = (textContent: string): RegExpMatchArray | null => export const getAllMentions = ( textContent: string, ): { id: string; name: string }[] => { - const arr = Array.from( + console.log('Message to analyze', textContent); + const tempArr = Array.from( textContent.matchAll(new RegExp(mentionRegEx, 'g')), - ).map((match) => ({ + ); + console.log('found matches', tempArr); + const arr = tempArr.map((match) => ({ id: match.groups?.id || '', name: match.groups?.name || '', })); diff --git a/yarn.lock b/yarn.lock index 62ae159b..6189682a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2204,6 +2204,7 @@ __metadata: clsx: 1.1.1 cross-env: 7.0.3 cypress: 10.6.0 + env-cmd: 10.1.0 eslint: 8.23.0 eslint-config-prettier: 8.3.0 eslint-config-standard: 16.0.3 @@ -5986,6 +5987,13 @@ __metadata: languageName: node linkType: hard +"commander@npm:^4.0.0": + version: 4.1.1 + resolution: "commander@npm:4.1.1" + checksum: d7b9913ff92cae20cb577a4ac6fcc121bd6223319e54a40f51a14740a681ad5c574fd29a57da478a5f234a6fa6c52cbf0b7c641353e03c648b1ae85ba670b977 + languageName: node + linkType: hard + "commander@npm:^5.1.0": version: 5.1.0 resolution: "commander@npm:5.1.0" @@ -7503,6 +7511,18 @@ __metadata: languageName: node linkType: hard +"env-cmd@npm:10.1.0": + version: 10.1.0 + resolution: "env-cmd@npm:10.1.0" + dependencies: + commander: ^4.0.0 + cross-spawn: ^7.0.0 + bin: + env-cmd: bin/env-cmd.js + checksum: efef55074250f14cfc0b80c98dd98f1f056a80e1f3c7db14097ceefdd2d56c766bbb83b54c22932112707f41b36ce2e923f8015d69e62a75c12d98640b972e75 + languageName: node + linkType: hard + "env-paths@npm:^2.2.0": version: 2.2.1 resolution: "env-paths@npm:2.2.1" From 2d659d2bf5c6cf20eee82039d287c293dc81887a Mon Sep 17 00:00:00 2001 From: spaenleh Date: Mon, 5 Sep 2022 21:17:57 +0200 Subject: [PATCH 04/13] fix: use provided mention array instead of trying to extract from the markup --- src/components/Chatbox/Input.tsx | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/src/components/Chatbox/Input.tsx b/src/components/Chatbox/Input.tsx index 6f5b2778..afb639ad 100644 --- a/src/components/Chatbox/Input.tsx +++ b/src/components/Chatbox/Input.tsx @@ -1,9 +1,10 @@ import clsx from 'clsx'; -import React, { FC, ReactElement, RefObject, useEffect } from 'react'; +import React, { FC, ReactElement, RefObject, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Mention, + MentionItem, MentionsInput, OnChangeHandlerFunc, SuggestionDataItem, @@ -31,7 +32,7 @@ import { } from '../../constants'; import { useCurrentMemberContext } from '../../context/CurrentMemberContext'; import { useMessagesContext } from '../../context/MessagesContext'; -import { getAllMentions, normalizeMentions } from '../../utils/mentions'; +import { normalizeMentions } from '../../utils/mentions'; type Props = { id?: string; @@ -128,6 +129,7 @@ const Input: FC = ({ const { members } = useMessagesContext(); const { id: currentMemberId } = useCurrentMemberContext(); const { t } = useTranslation(); + const [currentMentions, setCurrentMentions] = useState([]); // exclude self from suggestions and add @all pseudo member const memberSuggestions: SuggestionDataItem[] = [ @@ -148,12 +150,12 @@ const Input: FC = ({ const onSend = (): void => { if (textInput) { - const mentions = getAllMentions(textInput).map(({ id }) => id); - console.log('mentions from the message', mentions); - let expandedMentions: string[] = mentions; + // const mentions = getAllMentions(textInput).map(({ id }) => id); + // console.log('mentions from the message', mentions); + let expandedMentions: string[] = currentMentions; console.log('expanded mentions initial', expandedMentions); // expand '@all' to all members in mentions array (skip if there are no members) - if (mentions.includes(ALL_MEMBERS_ID) && members?.size) { + if (currentMentions.includes(ALL_MEMBERS_ID) && members?.size) { expandedMentions = members.map((m) => m.id).toArray(); console.log('All detected, mentions are now', expandedMentions); } @@ -169,10 +171,15 @@ const Input: FC = ({ _: { target: { value: string }; }, + // new value of the field newValue: string, + // newPlainTextValue of the field + __: string, + newMentions: MentionItem[], ): void => { - console.log('new value for the input', newValue); + console.log('new value for the input', newValue, newMentions); setTextInput(newValue); + setCurrentMentions(newMentions.map(({ id }) => id)); }; // catch {enter} key press to send messages From fcb8b1e3fa768fdc46f2336bf95fc5e75d536199 Mon Sep 17 00:00:00 2001 From: spaenleh Date: Tue, 6 Sep 2022 12:11:20 +0200 Subject: [PATCH 05/13] fix: chat export and message preview --- README.md | 1 - example/src/components/ChatboxTest.tsx | 8 +++++++- example/src/config/constants.js | 2 +- src/components/Chatbox/EditBanner.tsx | 5 ++++- src/components/Chatbox/ExportChat.tsx | 7 ++++--- src/components/Chatbox/Input.tsx | 15 +++++++-------- src/components/Mentions/MentionsTable.tsx | 7 +++++-- src/utils/mentions.ts | 12 ++++-------- 8 files changed, 32 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 2e2907e7..64d25373 100644 --- a/README.md +++ b/README.md @@ -10,4 +10,3 @@ following content: ```bash REACT_APP_API_HOST="http://localhost:3000" ``` - diff --git a/example/src/components/ChatboxTest.tsx b/example/src/components/ChatboxTest.tsx index e27f7c29..f99d7ed5 100644 --- a/example/src/components/ChatboxTest.tsx +++ b/example/src/components/ChatboxTest.tsx @@ -1,4 +1,4 @@ -import { FC, useState } from 'react'; +import { FC, useEffect, useState } from 'react'; import { Checkbox, @@ -31,6 +31,12 @@ const ChatboxTest: FC = () => { const [lang, setLang] = useState(DEFAULT_LANG); const [chatId, setChatId] = useState(DEFAULT_CHAT_ID); + // get chatId from url + useEffect(() => { + const choppedUrl = window.location.pathname.split('/'); + setChatId(choppedUrl[choppedUrl.length - 1]); + }, [window.location.pathname]); + const useStyles = makeStyles((theme) => ({ container: { display: 'flex', diff --git a/example/src/config/constants.js b/example/src/config/constants.js index a027e131..f0f1bd40 100644 --- a/example/src/config/constants.js +++ b/example/src/config/constants.js @@ -16,5 +16,5 @@ export const TOOLS_SIZE = 64; export const GRAASP_PANEL_WIDTH = 290; -export const DEFAULT_CHAT_ID = '39370f67-2153-4ab9-9679-b1966542d27d'; +export const DEFAULT_CHAT_ID = ''; export const DEFAULT_LANG = 'fr'; diff --git a/src/components/Chatbox/EditBanner.tsx b/src/components/Chatbox/EditBanner.tsx index 9e74881f..fb89d580 100644 --- a/src/components/Chatbox/EditBanner.tsx +++ b/src/components/Chatbox/EditBanner.tsx @@ -75,7 +75,10 @@ const EditBanner: FC = ({ onClose, editedText }) => { className={classes.oldTextPreview} data-cy={editBannerOldTextCypress} > - {normalizeMentions(editedText)} + { + // todo: make this work as expected in dev + normalizeMentions(editedText) + } diff --git a/src/components/Chatbox/ExportChat.tsx b/src/components/Chatbox/ExportChat.tsx index 0c53d76d..c5a6da9b 100644 --- a/src/components/Chatbox/ExportChat.tsx +++ b/src/components/Chatbox/ExportChat.tsx @@ -8,6 +8,7 @@ import { IconButton, Tooltip } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; import { GetApp } from '@material-ui/icons'; +import { ChatMessage } from '@graasp/query-client/dist/src/types'; import { Button } from '@graasp/ui'; import { exportChatButtonCypress } from '../../config/selectors'; @@ -48,17 +49,17 @@ const ExportChat: FC = ({ variant = ToolVariants.ICON, text }) => { } const csvMessages: ExportedChatMessage[] = messages - .toArray() .map((message) => { const creatorName = members.find((m) => m.id === message.creator)?.name || DEFAULT_USER_NAME; return { - ...message, + ...(message.toJS() as ChatMessage), body: normalizeMentions(message.body), creatorName, }; - }); + }) + .toArray(); // render nothing if there is no data if (!csvMessages.length) { return null; diff --git a/src/components/Chatbox/Input.tsx b/src/components/Chatbox/Input.tsx index afb639ad..3b348a5b 100644 --- a/src/components/Chatbox/Input.tsx +++ b/src/components/Chatbox/Input.tsx @@ -32,7 +32,6 @@ import { } from '../../constants'; import { useCurrentMemberContext } from '../../context/CurrentMemberContext'; import { useMessagesContext } from '../../context/MessagesContext'; -import { normalizeMentions } from '../../utils/mentions'; type Props = { id?: string; @@ -130,6 +129,7 @@ const Input: FC = ({ const { id: currentMemberId } = useCurrentMemberContext(); const { t } = useTranslation(); const [currentMentions, setCurrentMentions] = useState([]); + const [plainTextMessage, setPlainTextMessage] = useState(''); // exclude self from suggestions and add @all pseudo member const memberSuggestions: SuggestionDataItem[] = [ @@ -150,8 +150,6 @@ const Input: FC = ({ const onSend = (): void => { if (textInput) { - // const mentions = getAllMentions(textInput).map(({ id }) => id); - // console.log('mentions from the message', mentions); let expandedMentions: string[] = currentMentions; console.log('expanded mentions initial', expandedMentions); // expand '@all' to all members in mentions array (skip if there are no members) @@ -163,6 +161,8 @@ const Input: FC = ({ sendMessageFunction?.({ message: textInput, mentions: expandedMentions }); // reset input content setTextInput(''); + setPlainTextMessage(''); + setCurrentMentions([]); } }; @@ -174,11 +174,11 @@ const Input: FC = ({ // new value of the field newValue: string, // newPlainTextValue of the field - __: string, + newPlainTextValue: string, newMentions: MentionItem[], ): void => { - console.log('new value for the input', newValue, newMentions); setTextInput(newValue); + setPlainTextMessage(newPlainTextValue); setCurrentMentions(newMentions.map(({ id }) => id)); }; @@ -203,9 +203,8 @@ const Input: FC = ({ // when the textInput is empty, return a text with just a whitespace // to keep the height of the element the same let helperText = ' '; - const normalizedTextInput = normalizeMentions(textInput); - if (textInput) { - helperText = normalizedTextInput.length.toString(); + if (textInput && plainTextMessage) { + helperText = plainTextMessage.length.toString(); // append the max message size if (isMessageTooLong) { // there is a "space" before the message diff --git a/src/components/Mentions/MentionsTable.tsx b/src/components/Mentions/MentionsTable.tsx index 4a3a9647..5ac36099 100644 --- a/src/components/Mentions/MentionsTable.tsx +++ b/src/components/Mentions/MentionsTable.tsx @@ -25,7 +25,7 @@ import { import { CHATBOX } from '@graasp/translations'; import { Button } from '@graasp/ui'; -import { normalizeMentions } from '../../utils/mentions'; +import MessageBody from '../Chatbox/MessageBody'; import ConfirmationDialog from '../common/ConfirmationDialog'; const useStyles = makeStyles({ @@ -77,6 +77,7 @@ const MentionsTable: FC = ({ itemId: getIdsFromPath(m.itemPath).slice(-1)[0], chatOpen: true, }); + markAsRead(m.id); window.location.href = link; }} > @@ -85,7 +86,9 @@ const MentionsTable: FC = ({ )} - {normalizeMentions(m.message)} + + + {m.creator} diff --git a/src/utils/mentions.ts b/src/utils/mentions.ts index 74a1080a..9ef512a9 100644 --- a/src/utils/mentions.ts +++ b/src/utils/mentions.ts @@ -2,25 +2,21 @@ const mentionRegEx = /[\s\w]+)>\[(?[\da-f]{8}-[\da-f]{4}-4[\da-f]{3}-[89ab][\da-f]{3}-[\da-f]{12})]/i; const mentionCodeRegEx = - /`[\s\w]+)>\[(?[\da-f]{8}-[\da-f]{4}-4[\da-f]{3}-[89ab][\da-f]{3}-[\da-f]{12})]`/i; + /`[\s\w]+)>\[(?[\da-f]{8}-[\da-f]{4}-4[\da-f]{3}-[89ab][\da-f]{3}-[\da-f]{12})]`/gi; export const getMention = (textContent: string): RegExpMatchArray | null => textContent.match(mentionRegEx); export const getAllMentions = ( textContent: string, ): { id: string; name: string }[] => { - console.log('Message to analyze', textContent); - const tempArr = Array.from( + const arr = Array.from( textContent.matchAll(new RegExp(mentionRegEx, 'g')), - ); - console.log('found matches', tempArr); - const arr = tempArr.map((match) => ({ + ).map((match) => ({ id: match.groups?.id || '', name: match.groups?.name || '', })); - console.log('found mentions', arr); return arr.filter(({ id, name }) => id && name); }; export const normalizeMentions = (message: string): string => - message.replaceAll(new RegExp(mentionCodeRegEx, 'g'), '@$'); + message.replaceAll(mentionCodeRegEx, '@$'); From 97cd5ad78ffab203503f40c851323186632d1e29 Mon Sep 17 00:00:00 2001 From: spaenleh Date: Tue, 6 Sep 2022 18:33:30 +0200 Subject: [PATCH 06/13] feat: remove admin tools from the chatbox --- example/package.json | 1 + example/src/components/ChatboxTest.tsx | 157 +++++++++++++--------- example/src/components/ChatboxWrapper.tsx | 6 +- package.json | 5 +- src/components/Chatbox/AdminTools.tsx | 23 ---- src/components/Chatbox/Chatbox.tsx | 2 - src/components/Chatbox/ClearChat.tsx | 44 +++--- src/components/Chatbox/ExportChat.tsx | 2 + src/components/Chatbox/Header.tsx | 2 - src/components/Chatbox/Input.tsx | 9 +- src/index.ts | 4 +- src/utils/mentions.ts | 11 +- yarn.lock | 14 +- 13 files changed, 151 insertions(+), 129 deletions(-) delete mode 100644 src/components/Chatbox/AdminTools.tsx diff --git a/example/package.json b/example/package.json index a14e5630..5264d34a 100644 --- a/example/package.json +++ b/example/package.json @@ -25,6 +25,7 @@ "immutable": "4.0.0", "react": "17.0.2", "react-dom": "17.0.2", + "react-i18next": "11.18.1", "react-scripts": "5.0.1", "typescript": "4.7.4" }, diff --git a/example/src/components/ChatboxTest.tsx b/example/src/components/ChatboxTest.tsx index f99d7ed5..630931f3 100644 --- a/example/src/components/ChatboxTest.tsx +++ b/example/src/components/ChatboxTest.tsx @@ -1,4 +1,5 @@ -import { FC, useEffect, useState } from 'react'; +import { FC, useEffect, useMemo, useState } from 'react'; +import { I18nextProvider } from 'react-i18next'; import { Checkbox, @@ -13,10 +14,12 @@ import { makeStyles, } from '@material-ui/core'; -import { MentionButton } from '@graasp/chatbox'; +import { ClearChatButton, MentionButton, ToolVariants } from '@graasp/chatbox'; import { MUTATION_KEYS } from '@graasp/query-client'; import { ChatMention } from '@graasp/query-client/dist/src/types'; +import buildI18n, { namespaces } from '@graasp/translations'; +import { ClearChatHookType } from '../../../dist/types'; import { DEFAULT_CHAT_ID, DEFAULT_LANG, @@ -72,6 +75,7 @@ const ChatboxTest: FC = () => { const classes = useStyles(); const { data: currentMember } = hooks.useCurrentMember(); const memberId = currentMember?.get('id') as string; + // mutations to handle the mentions const { mutate: patchMentionMutate } = useMutation< ChatMention, @@ -80,6 +84,7 @@ const ChatboxTest: FC = () => { >(MUTATION_KEYS.PATCH_MENTION); const patchMentionFunction = (args: { id: string; status: string }): void => patchMentionMutate({ memberId, ...args }); + const { mutate: deleteMentionMutate } = useMutation< ChatMention, unknown, @@ -87,6 +92,7 @@ const ChatboxTest: FC = () => { >(MUTATION_KEYS.DELETE_MENTION); const deleteMentionFunction = (mentionId: string): void => deleteMentionMutate({ memberId, mentionId }); + const { mutate: clearAllMentionsMutate } = useMutation< ChatMention[], unknown, @@ -95,6 +101,10 @@ const ChatboxTest: FC = () => { const clearAllMentionsFunction = (): void => clearAllMentionsMutate({ memberId }); + const { mutate: clearChat }: { mutate: ClearChatHookType } = useMutation( + MUTATION_KEYS.CLEAR_ITEM_CHAT, + ); + // adapt the width of the chatbox to simulate the width used on Graasp const onChangePanelWidth = ( _: unknown, @@ -108,78 +118,95 @@ const ChatboxTest: FC = () => { } }; + const i18n = useMemo(() => { + const i18nInstance = buildI18n(namespaces.chatbox); + i18nInstance.changeLanguage(lang); + return i18nInstance; + }, [lang]); + return ( -
-
- Test parameters - setChatId(target.value)} - /> - } - label="Chat Id" - labelPlacement="top" - /> - - Language - setLang(target.value)} - > - } label="French" /> - } label="English" /> - - - - Chatbox params + +
+
+ Test parameters setShowTools(!showTools)} + setChatId(target.value)} /> } - label="Show Admin tools" + label="Chat Id" + labelPlacement="top" /> - + Language + setLang(target.value)} + > + } label="French" /> + } + label="English" /> - } - labelPlacement="top" - label="Panel Width" + + + + Chatbox params + setShowTools(!showTools)} + /> + } + label="Show Admin tools" + /> + + } + labelPlacement="top" + label="Panel Width" + /> + + - - -
-
- + +
+
+ +
-
+ ); }; diff --git a/example/src/components/ChatboxWrapper.tsx b/example/src/components/ChatboxWrapper.tsx index 882d0d83..73aa2f44 100644 --- a/example/src/components/ChatboxWrapper.tsx +++ b/example/src/components/ChatboxWrapper.tsx @@ -7,7 +7,6 @@ import { PartialNewChatMessage, } from '@graasp/query-client/dist/src/types'; -import { ClearChatHookType } from '../../../src/types'; import { DEFAULT_LANG } from '../config/constants'; import { hooks, useMutation } from '../config/queryClient'; @@ -53,9 +52,6 @@ const ChatboxWrapper: FC = ({ }: { mutate: (message: PartialChatMessage) => void } = useMutation( MUTATION_KEYS.PATCH_ITEM_CHAT_MESSAGE, ); - const { mutate: clearChat }: { mutate: ClearChatHookType } = useMutation( - MUTATION_KEYS.CLEAR_ITEM_CHAT, - ); return ( = ({ sendMessageFunction={sendMessage} deleteMessageFunction={deleteMessage} editMessageFunction={editMessage} - clearChatFunction={clearChat} + // clearChatFunction={clearChat} useAvatarHook={hooks.useAvatar as AvatarHookType} /> ); diff --git a/package.json b/package.json index fb4d00a5..0bcd3356 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "react-dom": "*" }, "dependencies": { - "@graasp/translations": "github:graasp/graasp-translations", + "@graasp/translations": "github:graasp/graasp-translations#34/chatboxTranslations", "@graasp/ui": "github:graasp/graasp-ui", "clsx": "1.1.1", "i18next": "21.8.1", @@ -123,8 +123,7 @@ }, "resolutions": { "@types/react": "17.0.2", - "@graasp/sdk": "github:graasp/graasp-sdk#main", - "@graasp/translations": "github:graasp/graasp-translations#main" + "@graasp/sdk": "github:graasp/graasp-sdk#main" }, "files": [ "dist" diff --git a/src/components/Chatbox/AdminTools.tsx b/src/components/Chatbox/AdminTools.tsx deleted file mode 100644 index f0892c40..00000000 --- a/src/components/Chatbox/AdminTools.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { FC } from 'react'; - -import Box from '@material-ui/core/Box'; - -import { adminToolsContainerCypress } from '../../config/selectors'; -import { ToolVariants, ToolVariantsType } from '../../types'; -import ClearChat from './ClearChat'; -import ExportChat from './ExportChat'; - -type Props = { - variant?: ToolVariantsType; -}; - -const AdminTools: FC = ({ variant = ToolVariants.BUTTON }) => { - return ( - - - - - ); -}; - -export default AdminTools; diff --git a/src/components/Chatbox/Chatbox.tsx b/src/components/Chatbox/Chatbox.tsx index 1c0fabfa..a336c5c4 100644 --- a/src/components/Chatbox/Chatbox.tsx +++ b/src/components/Chatbox/Chatbox.tsx @@ -18,7 +18,6 @@ import { HooksContextProvider } from '../../context/HooksContext'; import { MessagesContextProvider } from '../../context/MessagesContext'; import type { ClearChatHookType, ImmutableMember } from '../../types'; import { AvatarHookType, ChatMessageList } from '../../types'; -import AdminTools from './AdminTools'; import Header from './Header'; import InputBar from './InputBar'; import Messages from './Messages'; @@ -112,7 +111,6 @@ const Chatbox: FC = ({ sendMessageFunction={sendMessageFunction} editMessageFunction={editMessageFunction} /> - {showAdminTools && }
diff --git a/src/components/Chatbox/ClearChat.tsx b/src/components/Chatbox/ClearChat.tsx index 8b4d0161..43694ac5 100644 --- a/src/components/Chatbox/ClearChat.tsx +++ b/src/components/Chatbox/ClearChat.tsx @@ -5,35 +5,38 @@ import { Box, Tooltip, Typography } from '@material-ui/core'; import IconButton from '@material-ui/core/IconButton'; import { DeleteForever } from '@material-ui/icons'; +import { CHATBOX, namespaces } from '@graasp/translations'; import { Button } from '@graasp/ui'; import { clearChatButtonCypress } from '../../config/selectors'; -import { useHooksContext } from '../../context/HooksContext'; -import { useMessagesContext } from '../../context/MessagesContext'; -import { ToolVariants, ToolVariantsType } from '../../types'; +import { ClearChatHookType, ToolVariants, ToolVariantsType } from '../../types'; import ConfirmationDialog from '../common/ConfirmationDialog'; import ExportChat from './ExportChat'; type Prop = { variant?: ToolVariantsType; + chatId: string; + clearChatHook?: ClearChatHookType; }; -const ClearChat: FC = ({ variant = ToolVariants.BUTTON }) => { +const ClearChat: FC = ({ + chatId, + clearChatHook, + variant = ToolVariants.BUTTON, +}) => { const [openConfirmation, setOpenConfirmation] = useState(false); - const { t } = useTranslation(); - const { clearChatHook: clearChat } = useHooksContext(); - const { chatId, messages } = useMessagesContext(); + const { t } = useTranslation(namespaces.chatbox); - if (!clearChat || !messages || !messages?.size) { + if (!clearChatHook) { return null; } const handleClearChat = (): void => { - clearChat?.(chatId); + clearChatHook?.(chatId); }; const getContent = (contentType: ToolVariantsType): ReactElement => { - const text = t('Clear Chat'); + const text = t(CHATBOX.CLEAR_ALL_CHAT); switch (contentType) { case ToolVariants.ICON: @@ -50,6 +53,7 @@ const ClearChat: FC = ({ variant = ToolVariants.BUTTON }) => { case ToolVariants.BUTTON: return ( - ); - } - }; - return ( -
- {getContent(variant)} - - {t(CHATBOX.CLEAR_ALL_CHAT_CONTENT)} - - - } - confirmText={t(CHATBOX.CLEAR_ALL_CHAT)} - onConfirm={(): void => { - setOpenConfirmation(false); - handleClearChat(); - }} - onCancel={(): void => { - setOpenConfirmation(false); - }} + + -
+ ); }; diff --git a/src/components/AdminTools/ClearChatButton.tsx b/src/components/AdminTools/ClearChatButton.tsx new file mode 100644 index 00000000..bb65ac0f --- /dev/null +++ b/src/components/AdminTools/ClearChatButton.tsx @@ -0,0 +1,104 @@ +import { FC, ReactElement, useState } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { Box, Tooltip, Typography } from '@material-ui/core'; +import IconButton from '@material-ui/core/IconButton'; +import { DeleteForever } from '@material-ui/icons'; + +import { CHATBOX, namespaces } from '@graasp/translations'; +import { Button } from '@graasp/ui'; + +import { clearChatButtonCypress } from '../../config/selectors'; +import { + ClearChatHookType, + ExportChatHookType, + ToolVariants, + ToolVariantsType, +} from '../../types'; +import ConfirmationDialog from '../common/ConfirmationDialog'; +import ExportChat from './ExportChat'; + +type Prop = { + variant: ToolVariantsType; + chatId: string; + clearChatHook: ClearChatHookType; + exportChatHook: ExportChatHookType; +}; + +const ClearChatButton: FC = ({ + chatId, + clearChatHook, + exportChatHook, + variant, +}) => { + const [openConfirmation, setOpenConfirmation] = useState(false); + const { t } = useTranslation(namespaces.chatbox); + + if (!clearChatHook) { + return null; + } + + const handleClearChat = (): void => { + clearChatHook?.(chatId); + }; + + const getContent = (contentType: ToolVariantsType): ReactElement => { + const text = t(CHATBOX.CLEAR_ALL_CHAT); + + switch (contentType) { + case ToolVariants.ICON: + return ( + + setOpenConfirmation(true)} + > + + + + ); + case ToolVariants.BUTTON: + return ( + + ); + } + }; + + return ( +
+ {getContent(variant)} + + {t(CHATBOX.CLEAR_ALL_CHAT_CONTENT)} + + + } + confirmText={t(CHATBOX.CLEAR_ALL_CHAT)} + onConfirm={(): void => { + setOpenConfirmation(false); + handleClearChat(); + }} + onCancel={(): void => { + setOpenConfirmation(false); + }} + /> +
+ ); +}; + +export default ClearChatButton; diff --git a/src/index.ts b/src/index.ts index 0a6d23ce..f2abdfac 100644 --- a/src/index.ts +++ b/src/index.ts @@ -6,7 +6,7 @@ export { default as MentionButton } from './components/Mentions/MentionButton'; // Admin tools to export and clear the chat // should be used in the item settings -export { default as ClearChatButton } from './components/AdminTools/ClearChat'; +export { default as ClearChatButton } from './components/AdminTools/ClearChatButton'; export { default as DownloadChatButton } from './components/AdminTools/ExportChat'; export type { Member, ChatMessage, AvatarHookType } from './types'; From 203dfda25156930d6a5e23d39480ed44a073e126 Mon Sep 17 00:00:00 2001 From: spaenleh Date: Wed, 7 Sep 2022 17:52:39 +0200 Subject: [PATCH 11/13] feat: remove clear chat and download chat from chatbox --- example/src/components/ChatboxTest.tsx | 13 +- src/components/AdminTools/ClearChat.tsx | 51 -------- src/components/AdminTools/ClearChatButton.tsx | 104 --------------- src/components/AdminTools/ExportChat.tsx | 120 ------------------ src/index.ts | 5 - 5 files changed, 1 insertion(+), 292 deletions(-) delete mode 100644 src/components/AdminTools/ClearChat.tsx delete mode 100644 src/components/AdminTools/ClearChatButton.tsx delete mode 100644 src/components/AdminTools/ExportChat.tsx diff --git a/example/src/components/ChatboxTest.tsx b/example/src/components/ChatboxTest.tsx index 7d140ad5..1014acda 100644 --- a/example/src/components/ChatboxTest.tsx +++ b/example/src/components/ChatboxTest.tsx @@ -14,12 +14,11 @@ import { makeStyles, } from '@material-ui/core'; -import { ClearChatButton, MentionButton, ToolVariants } from '@graasp/chatbox'; +import { MentionButton } from '@graasp/chatbox'; import { MUTATION_KEYS } from '@graasp/query-client'; import { ChatMention } from '@graasp/query-client/dist/src/types'; import buildI18n, { namespaces } from '@graasp/translations'; -import { ClearChatHookType } from '../../../dist/types'; import { DEFAULT_CHAT_ID, DEFAULT_LANG, @@ -101,10 +100,6 @@ const ChatboxTest: FC = () => { const clearAllMentionsFunction = (): void => clearAllMentionsMutate({ memberId }); - const { mutate: clearChat }: { mutate: ClearChatHookType } = useMutation( - MUTATION_KEYS.CLEAR_ITEM_CHAT, - ); - // adapt the width of the chatbox to simulate the width used on Graasp const onChangePanelWidth = ( _: unknown, @@ -197,12 +192,6 @@ const ChatboxTest: FC = () => { deleteMentionFunction={deleteMentionFunction} clearAllMentionsFunction={clearAllMentionsFunction} /> -
= ({ - chatId, - clearChatHook, - exportChatHook, - variant = ToolVariants.BUTTON, - lang = langs.en, -}) => { - const i18n = useMemo(() => { - const i18nInstance = buildI18n(namespaces.chatbox); - i18nInstance.changeLanguage(lang); - return i18nInstance; - }, [lang]); - - if (!clearChatHook) { - return null; - } - - return ( - - - - ); -}; - -export default ClearChat; diff --git a/src/components/AdminTools/ClearChatButton.tsx b/src/components/AdminTools/ClearChatButton.tsx deleted file mode 100644 index bb65ac0f..00000000 --- a/src/components/AdminTools/ClearChatButton.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import { FC, ReactElement, useState } from 'react'; -import { useTranslation } from 'react-i18next'; - -import { Box, Tooltip, Typography } from '@material-ui/core'; -import IconButton from '@material-ui/core/IconButton'; -import { DeleteForever } from '@material-ui/icons'; - -import { CHATBOX, namespaces } from '@graasp/translations'; -import { Button } from '@graasp/ui'; - -import { clearChatButtonCypress } from '../../config/selectors'; -import { - ClearChatHookType, - ExportChatHookType, - ToolVariants, - ToolVariantsType, -} from '../../types'; -import ConfirmationDialog from '../common/ConfirmationDialog'; -import ExportChat from './ExportChat'; - -type Prop = { - variant: ToolVariantsType; - chatId: string; - clearChatHook: ClearChatHookType; - exportChatHook: ExportChatHookType; -}; - -const ClearChatButton: FC = ({ - chatId, - clearChatHook, - exportChatHook, - variant, -}) => { - const [openConfirmation, setOpenConfirmation] = useState(false); - const { t } = useTranslation(namespaces.chatbox); - - if (!clearChatHook) { - return null; - } - - const handleClearChat = (): void => { - clearChatHook?.(chatId); - }; - - const getContent = (contentType: ToolVariantsType): ReactElement => { - const text = t(CHATBOX.CLEAR_ALL_CHAT); - - switch (contentType) { - case ToolVariants.ICON: - return ( - - setOpenConfirmation(true)} - > - - - - ); - case ToolVariants.BUTTON: - return ( - - ); - } - }; - - return ( -
- {getContent(variant)} - - {t(CHATBOX.CLEAR_ALL_CHAT_CONTENT)} - - - } - confirmText={t(CHATBOX.CLEAR_ALL_CHAT)} - onConfirm={(): void => { - setOpenConfirmation(false); - handleClearChat(); - }} - onCancel={(): void => { - setOpenConfirmation(false); - }} - /> -
- ); -}; - -export default ClearChatButton; diff --git a/src/components/AdminTools/ExportChat.tsx b/src/components/AdminTools/ExportChat.tsx deleted file mode 100644 index 08d54dc9..00000000 --- a/src/components/AdminTools/ExportChat.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import moment from 'moment'; - -import { FC, ReactElement, useState } from 'react'; -import { CSVLink as CsvLink } from 'react-csv'; -import { useTranslation } from 'react-i18next'; - -import { IconButton, Tooltip } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; -import { GetApp } from '@material-ui/icons'; - -import { Button } from '@graasp/ui'; - -import { exportChatButtonCypress } from '../../config/selectors'; -import { EXPORT_CSV_HEADERS, EXPORT_DATE_FORMAT } from '../../constants'; -import { - ExportChatHookType, - ExportedChatMessage, - ToolVariants, - ToolVariantsType, -} from '../../types'; -import { normalizeMentions } from '../../utils/mentions'; - -const useStyles = makeStyles({ - link: { - textDecoration: 'none', - width: 'fit-content', - }, -}); - -type Props = { - chatId: string; - variant?: ToolVariantsType; - text?: string; - exportChatHook: ExportChatHookType; -}; - -// todo: convert this into a backend call -const ExportChat: FC = ({ - chatId, - variant = ToolVariants.ICON, - text, - exportChatHook, -}) => { - const [filename, setFilename] = useState(''); - const [data, setData] = useState([]); - const { t } = useTranslation(); - const classes = useStyles(); - - const { refetch } = exportChatHook(chatId, { enabled: false }); - - if (!chatId) { - return null; - } - - // generate file name when user clicks on the button - const onClick = async (): Promise => { - const currentDate = moment().format(EXPORT_DATE_FORMAT); - setFilename(`${currentDate}_chat_${chatId}.csv`); - - // fetch the data - const { data: exportedChat, isSuccess } = await refetch(); - // if any of the used values is falsy we should not display the button - if (!exportedChat || !isSuccess) { - setData([]); - return; - } - - const csvMessages: ExportedChatMessage[] = exportedChat.messages - ?.map((message) => ({ - ...(message.toJS() as ExportedChatMessage), - body: normalizeMentions(message.body), - })) - .toArray(); - // render nothing if there is no data - if (!csvMessages.length) { - setData([]); - return; - } - setData(csvMessages); - }; - - const getContent = (variant: ToolVariantsType): ReactElement | null => { - const contentText: string = text || t('Download Chat'); - switch (variant) { - case ToolVariants.ICON: - return ( - - - - - - ); - case ToolVariants.BUTTON: - return ; - default: - return null; - } - }; - - return ( - - {getContent(variant)} - - ); -}; - -export default ExportChat; diff --git a/src/index.ts b/src/index.ts index f2abdfac..0a352b5c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,11 +4,6 @@ export { default } from './components/Chatbox/Chatbox'; // should be placed in the header next to the profile picture export { default as MentionButton } from './components/Mentions/MentionButton'; -// Admin tools to export and clear the chat -// should be used in the item settings -export { default as ClearChatButton } from './components/AdminTools/ClearChatButton'; -export { default as DownloadChatButton } from './components/AdminTools/ExportChat'; - export type { Member, ChatMessage, AvatarHookType } from './types'; export { ImmutableMember, ToolVariants } from './types'; export * from './utils/mentions'; From ca1550992a8b8fd4a911f9d6ee3ab83686be475f Mon Sep 17 00:00:00 2001 From: spaenleh Date: Wed, 7 Sep 2022 17:55:27 +0200 Subject: [PATCH 12/13] fix : remove unused tests --- cypress/integration/admin-tools.cy.tsx | 97 -------------------------- cypress/integration/render-ui.cy.tsx | 42 ----------- 2 files changed, 139 deletions(-) delete mode 100644 cypress/integration/admin-tools.cy.tsx diff --git a/cypress/integration/admin-tools.cy.tsx b/cypress/integration/admin-tools.cy.tsx deleted file mode 100644 index f89f99b4..00000000 --- a/cypress/integration/admin-tools.cy.tsx +++ /dev/null @@ -1,97 +0,0 @@ -// todo: outdated -> rewrite -export {}; - -// /// -// import { List } from 'immutable'; - -// import { ImmutableMember, Member } from '../../src'; -// import Chatbox from '../../src/components/Chatbox/Chatbox'; -// import { -// adminToolsContainerCypress, -// cancelDialogButtonCypress, -// clearChatButtonCypress, -// confirmDialogButtonCypress, -// dataCyWrapper, -// exportChatButtonCypress, -// } from '../../src/config/selectors'; -// import { verifyDownloadedChat } from '../../src/test/utils/utils'; -// import { CHAT_ID, CHAT_MESSAGES, spyMethod } from '../fixtures/chat_messages'; -// import { MEMBERS } from '../fixtures/members'; - -// const mountChatbox = (showTools: boolean, emptyData = false): void => { -// cy.mount( -// , -// ); -// }; - -// describe('Admin tools', () => { -// it('should show admin tools', () => { -// // show tools -// mountChatbox(true); -// cy.get(dataCyWrapper(adminToolsContainerCypress)) -// .should('exist') -// .and('be.visible'); -// }); - -// it('should not show admin tools', () => { -// // do not show tools -// mountChatbox(false); -// cy.get(dataCyWrapper(adminToolsContainerCypress)).should('not.exist'); -// }); - -// it('should show export chat and download csv', () => { -// // show tools -// mountChatbox(true); -// cy.get(dataCyWrapper(exportChatButtonCypress)) -// .should('exist') -// .and('be.visible') -// // download file -// .click(); - -// // get file name from data-cy-filename attribute and check local csv -// cy.get(dataCyWrapper(exportChatButtonCypress)) -// .should('have.attr', 'data-cy-filename') -// .then((filename) => { -// verifyDownloadedChat(filename.toString(), CHAT_MESSAGES.length); -// }); -// }); - -// it('should not show export chat with empty chat', () => { -// // show tools but with no data -// mountChatbox(true, true); -// cy.get(dataCyWrapper(adminToolsContainerCypress)).should('exist'); -// cy.get(dataCyWrapper(exportChatButtonCypress)).should('not.exist'); -// }); - -// it('should show clear chat button', () => { -// const clearChatSpy = spyMethod('clearChatSpy'); -// cy.mount( -// , -// ); -// cy.get(dataCyWrapper(clearChatButtonCypress)) -// .should('exist') -// .and('be.visible') -// // click button -// .click(); -// cy.get(dataCyWrapper(cancelDialogButtonCypress)).should('be.visible'); -// cy.get(dataCyWrapper(confirmDialogButtonCypress)) -// .should('be.visible') -// // validate popup -// .click(); -// // check that spy method has been called -// cy.get('@clearChatSpy').should('have.been.called'); -// }); -// }); diff --git a/cypress/integration/render-ui.cy.tsx b/cypress/integration/render-ui.cy.tsx index 4519f613..ba6ff489 100644 --- a/cypress/integration/render-ui.cy.tsx +++ b/cypress/integration/render-ui.cy.tsx @@ -87,45 +87,3 @@ describe('Messages container', () => { }); }); }); - -// describe('Export Chat button', () => { -// it('should show export button', () => { -// cy.mount( -// , -// ).then(() => -// cy.get(dataCyWrapper(exportChatButtonCypress)).should('exist'), -// ); -// }); - -// it('should not show button when chat is empty', () => { -// cy.mount( -// , -// ).then(() => -// cy.get(dataCyWrapper(exportChatButtonCypress)).should('not.exist'), -// ); -// }); - -// it('should not show export button', () => { -// cy.mount( -// , -// ).then(() => -// cy.get(dataCyWrapper(exportChatButtonCypress)).should('not.exist'), -// ); -// }); -// }); From 5d452ad0f8ed38be711ea6d5110cdb6859ba562f Mon Sep 17 00:00:00 2001 From: spaenleh Date: Thu, 8 Sep 2022 10:15:16 +0200 Subject: [PATCH 13/13] fix: apply PR changes --- example/src/components/ChatboxTest.tsx | 2 -- example/src/components/ChatboxWrapper.tsx | 1 - example/src/config/{constants.js => constants.ts} | 2 +- src/components/Chatbox/EditBanner.tsx | 5 +---- src/components/Chatbox/Input.tsx | 5 ----- src/components/Chatbox/InputBar.tsx | 1 - 6 files changed, 2 insertions(+), 14 deletions(-) rename example/src/config/{constants.js => constants.ts} (88%) diff --git a/example/src/components/ChatboxTest.tsx b/example/src/components/ChatboxTest.tsx index 1014acda..08d26069 100644 --- a/example/src/components/ChatboxTest.tsx +++ b/example/src/components/ChatboxTest.tsx @@ -119,8 +119,6 @@ const ChatboxTest: FC = () => { return i18nInstance; }, [lang]); - console.log(currentMember); - return (
diff --git a/example/src/components/ChatboxWrapper.tsx b/example/src/components/ChatboxWrapper.tsx index 73aa2f44..01153c21 100644 --- a/example/src/components/ChatboxWrapper.tsx +++ b/example/src/components/ChatboxWrapper.tsx @@ -65,7 +65,6 @@ const ChatboxWrapper: FC = ({ sendMessageFunction={sendMessage} deleteMessageFunction={deleteMessage} editMessageFunction={editMessage} - // clearChatFunction={clearChat} useAvatarHook={hooks.useAvatar as AvatarHookType} /> ); diff --git a/example/src/config/constants.js b/example/src/config/constants.ts similarity index 88% rename from example/src/config/constants.js rename to example/src/config/constants.ts index f0f1bd40..edfeeb50 100644 --- a/example/src/config/constants.js +++ b/example/src/config/constants.ts @@ -16,5 +16,5 @@ export const TOOLS_SIZE = 64; export const GRAASP_PANEL_WIDTH = 290; -export const DEFAULT_CHAT_ID = ''; +export const DEFAULT_CHAT_ID = 'mock-id-replace-me!'; export const DEFAULT_LANG = 'fr'; diff --git a/src/components/Chatbox/EditBanner.tsx b/src/components/Chatbox/EditBanner.tsx index fb89d580..9e74881f 100644 --- a/src/components/Chatbox/EditBanner.tsx +++ b/src/components/Chatbox/EditBanner.tsx @@ -75,10 +75,7 @@ const EditBanner: FC = ({ onClose, editedText }) => { className={classes.oldTextPreview} data-cy={editBannerOldTextCypress} > - { - // todo: make this work as expected in dev - normalizeMentions(editedText) - } + {normalizeMentions(editedText)} diff --git a/src/components/Chatbox/Input.tsx b/src/components/Chatbox/Input.tsx index 724a7c75..e806a95e 100644 --- a/src/components/Chatbox/Input.tsx +++ b/src/components/Chatbox/Input.tsx @@ -89,7 +89,6 @@ const Input: FC = ({ border: '1px solid silver', width: '100%', overflow: 'auto', - // height: '70px', height: '100%', maxHeight: '30vh', lineHeight: 'inherit', @@ -100,7 +99,6 @@ const Input: FC = ({ border: '1px solid transparent', boxSizing: 'border-box', overflow: 'hidden', - // height: '70px', height: '100%', maxHeight: '30vh', }, @@ -156,13 +154,10 @@ const Input: FC = ({ const onSend = (): void => { if (textInput) { let expandedMentions: string[] = currentMentions; - console.log('expanded mentions initial', expandedMentions); // expand '@all' to all members in mentions array (skip if there are no members) if (currentMentions.includes(ALL_MEMBERS_ID) && members?.size) { expandedMentions = members.map((m) => m.id).toArray(); - console.log('All detected, mentions are now', expandedMentions); } - console.log('Just before sending mentions are', expandedMentions); sendMessageFunction?.({ message: textInput, mentions: expandedMentions }); // reset input content setTextInput(''); diff --git a/src/components/Chatbox/InputBar.tsx b/src/components/Chatbox/InputBar.tsx index 6e492887..99ef256c 100644 --- a/src/components/Chatbox/InputBar.tsx +++ b/src/components/Chatbox/InputBar.tsx @@ -59,7 +59,6 @@ const InputBar: FC = ({ body, }); } else { - console.log('message body to send is', body); sendMessageFunction?.({ chatId, body }); } // reset editing