feat: improve mentions

.eslintrc

@@ -2,7 +2,6 @@
   "parser": "@typescript-eslint/parser",
   "extends": [
     "standard",
-    "standard-react",
     "plugin:prettier/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",

example/package.json

@@ -25,15 +25,12 @@
     "immutable": "4.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-scripts": "5.0.0",
-    "typescript": "4.3.5"
+    "react-scripts": "5.0.1",
+    "typescript": "4.7.4"
   },
   "devDependencies": {
     "@babel/plugin-syntax-object-rest-spread": "7.8.3"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",

example/src/App.tsx

@@ -1,11 +1,13 @@
+import { ReactElement } from 'react';
+
 import ChatboxTest from './components/ChatboxTest';
 import {
   QueryClientProvider,
   ReactQueryDevtools,
   queryClient,
 } from './config/queryClient';
 
-const App = () => {
+const App = (): ReactElement => {
   return (
     <QueryClientProvider client={queryClient}>
       <ChatboxTest />

example/src/components/ChatboxTest.tsx

@@ -25,9 +25,7 @@ import {
 import { hooks, useMutation } from '../config/queryClient';
 import ChatboxWrapper from './ChatboxWrapper';
 
-type Props = {};
-
-const ChatboxTest: FC<Props> = () => {
+const ChatboxTest: FC = () => {
   const [testWidth, setTestWidth] = useState(GRAASP_PANEL_WIDTH);
   const [showTools, setShowTools] = useState(false);
   const [lang, setLang] = useState(DEFAULT_LANG);
@@ -66,22 +64,37 @@ const ChatboxTest: FC<Props> = () => {
   }));
 
   const classes = useStyles();
-
+  const { data: currentMember } = hooks.useCurrentMember();
+  const memberId = currentMember?.get('id') as string;
   // mutations to handle the mentions
-  const { mutate: patchMentionFunction } = useMutation<
+  const { mutate: patchMentionMutate } = useMutation<
     ChatMention,
     unknown,
-    { id: string; status: string }
+    { memberId: string; id: string; status: string }
   >(MUTATION_KEYS.PATCH_MENTION);
-  const { mutate: deleteMentionFunction } = useMutation<
+  const patchMentionFunction = (args: { id: string; status: string }): void =>
+    patchMentionMutate({ memberId, ...args });
+  const { mutate: deleteMentionMutate } = useMutation<
     ChatMention,
     unknown,
-    string
+    { memberId: string; mentionId: string }
   >(MUTATION_KEYS.DELETE_MENTION);
+  const deleteMentionFunction = (mentionId: string): void =>
+    deleteMentionMutate({ memberId, mentionId });
+  const { mutate: clearAllMentionsMutate } = useMutation<
+    ChatMention[],
+    unknown,
+    { memberId: string }
+  >(MUTATION_KEYS.CLEAR_MENTIONS);
+  const clearAllMentionsFunction = (): void =>
+    clearAllMentionsMutate({ memberId });
 
   // adapt the width of the chatbox to simulate the width used on Graasp
-  const onChangePanelWidth = (_: unknown, newValue: number | number[]) => {
-    if (typeof newValue == 'number') {
+  const onChangePanelWidth = (
+    _: unknown,
+    newValue: number | number[],
+  ): void => {
+    if (typeof newValue === 'number') {
       setTestWidth(newValue);
     } else {
       setTestWidth(0);
@@ -100,7 +113,7 @@ const ChatboxTest: FC<Props> = () => {
               variant="outlined"
               value={chatId}
               fullWidth
-              onChange={({ target }) => setChatId(target.value)}
+              onChange={({ target }): void => setChatId(target.value)}
             />
           }
           label={'Chat Id'}
@@ -111,7 +124,7 @@ const ChatboxTest: FC<Props> = () => {
           <RadioGroup
             aria-label="language"
             value={lang}
-            onChange={({ target }) => setLang(target.value)}
+            onChange={({ target }): void => setLang(target.value)}
           >
             <FormControlLabel value="fr" control={<Radio />} label={'French'} />
             <FormControlLabel
@@ -127,7 +140,7 @@ const ChatboxTest: FC<Props> = () => {
             control={
               <Checkbox
                 value={showTools}
-                onChange={() => setShowTools(!showTools)}
+                onChange={(): void => setShowTools(!showTools)}
               />
             }
             label={'Show Admin tools'}
@@ -152,6 +165,7 @@ const ChatboxTest: FC<Props> = () => {
           useMembers={hooks.useMembers}
           patchMentionFunction={patchMentionFunction}
           deleteMentionFunction={deleteMentionFunction}
+          clearAllMentionsFunction={clearAllMentionsFunction}
         />
       </div>
       <div className={classes.chatboxContainer}>

package.json

@@ -55,12 +55,12 @@
     "i18next": "21.6.11",
     "immutable": "4.0.0",
     "lodash.truncate": "4.4.2",
-    "moment": "2.29.1",
+    "moment": "2.29.4",
     "prism-react-renderer": "1.3.5",
     "react-csv": "2.2.2",
-    "react-i18next": "11.15.3",
+    "react-i18next": "11.18.1",
     "react-markdown": "8.0.3",
-    "react-mentions": "4.4.6",
+    "react-mentions": "4.4.7",
     "react-router-dom": "6.3.0",
     "remark-breaks": "3.0.2",
     "remark-gfm": "3.0.1"
@@ -94,8 +94,8 @@
     "@types/react-dom": "17.0.11",
     "@types/react-mentions": "4.1.6",
     "@types/uuid": "8.3.4",
-    "@typescript-eslint/eslint-plugin": "5.9.0",
-    "@typescript-eslint/parser": "5.9.0",
+    "@typescript-eslint/eslint-plugin": "5.30.7",
+    "@typescript-eslint/parser": "5.30.7",
     "cross-env": "7.0.3",
     "cypress": "9.5.3",
     "enzyme": "3.11.0",
@@ -104,30 +104,28 @@
     "eslint": "7.32.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-config-standard": "16.0.3",
-    "eslint-config-standard-react": "11.0.1",
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-promise": "5.2.0",
-    "eslint-plugin-react": "7.28.0",
-    "eslint-plugin-react-app": "6.2.2",
-    "husky": "7.0.4",
+    "eslint-plugin-react": "7.30.1",
+    "husky": "8.0.1",
     "jest": "27.4.7",
     "papaparse": "5.3.2",
-    "prettier": "2.5.1",
+    "prettier": "2.7.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.1",
     "rimraf": "3.0.2",
-    "rollup": "2.63.0",
+    "rollup": "2.77.0",
     "rollup-jest": "1.1.3",
     "rollup-plugin-import-css": "3.0.3",
     "rollup-plugin-peer-deps-external": "2.2.4",
-    "standard-version": "9.3.2",
+    "standard-version": "9.5.0",
     "ts-jest": "27.1.2",
-    "ts-loader": "9.2.7",
+    "ts-loader": "9.3.1",
     "tslib": "2.3.1",
-    "typescript": "4.3.5"
+    "typescript": "4.7.4"
   },
   "resolutions": {
     "@types/react": "17.0.2"

src/components/Chatbox/ClearChat.tsx

@@ -11,8 +11,8 @@ import { clearChatButtonCypress } from '../../config/selectors';
 import { useHooksContext } from '../../context/HooksContext';
 import { useMessagesContext } from '../../context/MessagesContext';
 import { ToolVariants, ToolVariantsType } from '../../types';
+import ConfirmationDialog from '../common/ConfirmationDialog';
 import ExportChat from './ExportChat';
-import ConfirmationDialog from './common/ConfirmationDialog';
 
 type Prop = {
   variant?: ToolVariantsType;

src/components/Chatbox/EditBanner.tsx

@@ -47,7 +47,7 @@ const useStyles = makeStyles((theme) => ({
 
 type Props = {
   onClose: () => void;
-  editedText?: string;
+  editedText: string;
 };
 
 const EditBanner: FC<Props> = ({ onClose, editedText }) => {

src/components/Chatbox/ExportChat.tsx

@@ -55,7 +55,7 @@ const ExportChat: FC<Props> = ({ variant = ToolVariants.ICON, text }) => {
         DEFAULT_USER_NAME;
       return {
         ...message,
-        body: normalizeMentions(message.body)!,
+        body: normalizeMentions(message.body),
         creatorName,
       };
     });

src/components/Chatbox/Input.tsx

@@ -31,7 +31,7 @@ import {
 } from '../../constants';
 import { useCurrentMemberContext } from '../../context/CurrentMemberContext';
 import { useMessagesContext } from '../../context/MessagesContext';
-import { getAllMentions } from '../../utils/mentions';
+import { getAllMentions, normalizeMentions } from '../../utils/mentions';
 
 type Props = {
   id?: string;
@@ -174,9 +174,10 @@ const Input: FC<Props> = ({
     // 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 =
-        textInput.length +
+        normalizedTextInput.length +
         (isMessageTooLong ? ` (max. ${HARD_MAX_MESSAGE_LENGTH} chars)` : '');
     }
     return (

src/components/Chatbox/MessageBody.tsx

@@ -121,15 +121,13 @@ const MessageBody: FC<Props> = ({ messageBody }) => {
         {({ className, tokens, getLineProps, getTokenProps }): ReactElement => (
           <div className={className}>
             {tokens.map((line, i) => (
-              // eslint-disable-next-line react/jsx-key
               <div
                 {...getLineProps({
                   line,
                   key: i,
                 })}
               >
                 {line.map((token, key) => (
-                  // eslint-disable-next-line react/jsx-key
                   <span
                     {...getTokenProps({
                       token,

src/components/Mentions/MentionButton.tsx

@@ -2,14 +2,7 @@ import { List, RecordOf } from 'immutable';
 
 import { FC, useState } from 'react';
 
-import {
-  Badge,
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  makeStyles,
-} from '@material-ui/core';
+import { Badge, IconButton, makeStyles } from '@material-ui/core';
 import { Notifications } from '@material-ui/icons';
 
 import {
@@ -19,6 +12,7 @@ import {
 import { Member } from '@graasp/ui/dist/types';
 
 import MentionsDialog from './MentionsDialog';
+import MentionsTable from './MentionsTable';
 
 const useStyles = makeStyles((theme) => ({
   badge: {
@@ -35,13 +29,15 @@ type Props = {
   useMembers: (memberIds: string[]) => { data?: List<Member> };
   patchMentionFunction: (args: { id: string; status: string }) => void;
   deleteMentionFunction: (id: string) => void;
+  clearAllMentionsFunction: () => void;
 };
 
 const MentionButton: FC<Props> = ({
   useMentions,
   useMembers,
   patchMentionFunction,
   deleteMentionFunction,
+  clearAllMentionsFunction,
 }) => {
   const classes = useStyles();
 
@@ -72,16 +68,18 @@ const MentionButton: FC<Props> = ({
           <Notifications color="primary" />
         </Badge>
       </IconButton>
-      <Dialog open={open} onClose={(): void => setOpen(false)}>
-        <DialogTitle>Notifications</DialogTitle>
-        <DialogContent>
-          <MentionsDialog
+      <MentionsDialog
+        content={
+          <MentionsTable
             mentions={mentionsWithMembers}
             patchMention={patchMentionFunction}
             deleteMention={deleteMentionFunction}
+            clearAllMentions={clearAllMentionsFunction}
           />
-        </DialogContent>
-      </Dialog>
+        }
+        open={open}
+        setOpen={setOpen}
+      />
     </div>
   );
 };