fix: mentions not being sent in dev (#52)

* test: add logs

* test: add log in regex function

* test: check input of find mentions

* fix: use provided mention array instead of trying to extract from the markup

* fix: chat export and message preview

* feat: remove admin tools from the chatbox

* test: fix failing tests

* fix: clean up mention util and test

* feat: add export chat hooks

* feat: add translations to clearChatButton

* feat: remove clear chat and download chat from chatbox

* fix : remove unused tests

* fix: apply PR changes

README.md

@@ -10,4 +10,3 @@ following content:
 ```bash
 REACT_APP_API_HOST="http://localhost:3000"
 ```
-

cypress/integration/render-ui.cy.tsx

@@ -1,12 +1,11 @@
-/// <reference types="./cypress"/>
+/// <reference types="../cypress"/>
 import { List } from 'immutable';
 import { v4 } from 'uuid';
 
 import { ImmutableMember, Member } from '../../src';
 import Chatbox from '../../src/components/Chatbox/Chatbox';
 import {
   dataCyWrapper,
-  exportChatButtonCypress,
   inputTextFieldTextAreaCypress,
   messageIdCyWrapper,
   messagesContainerCypress,
@@ -88,45 +87,3 @@ describe('Messages container', () => {
     });
   });
 });
-
-describe('Export Chat button', () => {
-  it('should show export button', () => {
-    cy.mount(
-      <Chatbox
-        chatId={CHAT_ID}
-        currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(Object.values(MEMBERS) as Member[])}
-        messages={List(CHAT_MESSAGES)}
-        showAdminTools
-      />,
-    ).then(() =>
-      cy.get(dataCyWrapper(exportChatButtonCypress)).should('exist'),
-    );
-  });
-
-  it('should not show button when chat is empty', () => {
-    cy.mount(
-      <Chatbox
-        chatId={CHAT_ID}
-        currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(Object.values(MEMBERS) as Member[])}
-        showAdminTools
-      />,
-    ).then(() =>
-      cy.get(dataCyWrapper(exportChatButtonCypress)).should('not.exist'),
-    );
-  });
-
-  it('should not show export button', () => {
-    cy.mount(
-      <Chatbox
-        chatId={CHAT_ID}
-        currentMember={new ImmutableMember(MEMBERS.ANNA)}
-        members={List(Object.values(MEMBERS) as Member[])}
-        showAdminTools={false}
-      />,
-    ).then(() =>
-      cy.get(dataCyWrapper(exportChatButtonCypress)).should('not.exist'),
-    );
-  });
-});

example/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@graasp/chatbox": "link:..",
-    "@graasp/query-client": "github:graasp/graasp-query-client",
+    "@graasp/query-client": "github:graasp/graasp-query-client#202/exportChatHook",
     "@material-ui/core": "4.12.4",
     "@material-ui/icons": "4.11.2",
     "@material-ui/lab": "4.0.0-alpha.60",
@@ -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"
   },

example/src/components/ChatboxTest.tsx

@@ -1,4 +1,5 @@
-import { FC, useState } from 'react';
+import { FC, useEffect, useMemo, useState } from 'react';
+import { I18nextProvider } from 'react-i18next';
 
 import {
   Checkbox,
@@ -16,6 +17,7 @@ import {
 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 {
   DEFAULT_CHAT_ID,
@@ -31,6 +33,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',
@@ -66,6 +74,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,
@@ -74,13 +83,15 @@ const ChatboxTest: FC = () => {
   >(MUTATION_KEYS.PATCH_MENTION);
   const patchMentionFunction = (args: { id: string; status: string }): void =>
     patchMentionMutate({ memberId, ...args });
+
   const { mutate: deleteMentionMutate } = useMutation<
     ChatMention,
     unknown,
     { memberId: string; mentionId: string }
   >(MUTATION_KEYS.DELETE_MENTION);
   const deleteMentionFunction = (mentionId: string): void =>
     deleteMentionMutate({ memberId, mentionId });
+
   const { mutate: clearAllMentionsMutate } = useMutation<
     ChatMention[],
     unknown,
@@ -102,78 +113,93 @@ const ChatboxTest: FC = () => {
     }
   };
 
+  const i18n = useMemo(() => {
+    const i18nInstance = buildI18n(namespaces.chatbox);
+    i18nInstance.changeLanguage(lang);
+    return i18nInstance;
+  }, [lang]);
+
   return (
-    <div className={classes.container}>
-      <div className={classes.testContainer}>
-        <Typography variant="h5">Test parameters</Typography>
-        <FormControlLabel
-          className={classes.textInputControl}
-          control={
-            <TextField
-              className={classes.chatInputBox}
-              variant="outlined"
-              value={chatId}
-              fullWidth
-              onChange={({ target }): void => setChatId(target.value)}
-            />
-          }
-          label="Chat Id"
-          labelPlacement="top"
-        />
-        <FormControl>
-          <FormLabel component="legend">Language</FormLabel>
-          <RadioGroup
-            aria-label="language"
-            value={lang}
-            onChange={({ target }): void => setLang(target.value)}
-          >
-            <FormControlLabel value="fr" control={<Radio />} label="French" />
-            <FormControlLabel value="en" control={<Radio />} label="English" />
-          </RadioGroup>
-        </FormControl>
-        <FormControl>
-          <FormLabel component="legend">Chatbox params</FormLabel>
+    <I18nextProvider i18n={i18n}>
+      <div className={classes.container}>
+        <div className={classes.testContainer}>
+          <Typography variant="h5">Test parameters</Typography>
+          <Typography variant="body1">
+            Current User: {currentMember?.get('name')}
+          </Typography>
           <FormControlLabel
+            className={classes.textInputControl}
             control={
-              <Checkbox
-                value={showTools}
-                onChange={(): void => setShowTools(!showTools)}
+              <TextField
+                className={classes.chatInputBox}
+                variant="outlined"
+                value={chatId}
+                fullWidth
+                onChange={({ target }): void => setChatId(target.value)}
               />
             }
-            label="Show Admin tools"
+            label="Chat Id"
+            labelPlacement="top"
           />
-          <FormControlLabel
-            control={
-              <Slider
-                value={testWidth}
-                min={GRAASP_PANEL_WIDTH}
-                step={20}
-                max={800}
-                color="secondary"
-                onChange={onChangePanelWidth}
+          <FormControl>
+            <FormLabel component="legend">Language</FormLabel>
+            <RadioGroup
+              aria-label="language"
+              value={lang}
+              onChange={({ target }): void => setLang(target.value)}
+            >
+              <FormControlLabel value="fr" control={<Radio />} label="French" />
+              <FormControlLabel
+                value="en"
+                control={<Radio />}
+                label="English"
               />
-            }
-            labelPlacement="top"
-            label="Panel Width"
+            </RadioGroup>
+          </FormControl>
+          <FormControl>
+            <FormLabel component="legend">Chatbox params</FormLabel>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  value={showTools}
+                  onChange={(): void => setShowTools(!showTools)}
+                />
+              }
+              label="Show Admin tools"
+            />
+            <FormControlLabel
+              control={
+                <Slider
+                  value={testWidth}
+                  min={GRAASP_PANEL_WIDTH}
+                  step={20}
+                  max={800}
+                  color="secondary"
+                  onChange={onChangePanelWidth}
+                />
+              }
+              labelPlacement="top"
+              label="Panel Width"
+            />
+          </FormControl>
+          <MentionButton
+            color="primary"
+            useMentions={hooks.useMentions}
+            useMembers={hooks.useMembers}
+            patchMentionFunction={patchMentionFunction}
+            deleteMentionFunction={deleteMentionFunction}
+            clearAllMentionsFunction={clearAllMentionsFunction}
           />
-        </FormControl>
-        <MentionButton
-          color="primary"
-          useMentions={hooks.useMentions}
-          useMembers={hooks.useMembers}
-          patchMentionFunction={patchMentionFunction}
-          deleteMentionFunction={deleteMentionFunction}
-          clearAllMentionsFunction={clearAllMentionsFunction}
-        />
-      </div>
-      <div className={classes.chatboxContainer}>
-        <ChatboxWrapper
-          chatId={chatId}
-          lang={lang}
-          showAdminTools={showTools}
-        />
+        </div>
+        <div className={classes.chatboxContainer}>
+          <ChatboxWrapper
+            chatId={chatId}
+            lang={lang}
+            showAdminTools={showTools}
+          />
+        </div>
       </div>
-    </div>
+    </I18nextProvider>
   );
 };