fix: add translations and improve styling with theme

graasp · Aug 23, 2022 · 9539bef · 9539bef
1 parent e653a57
commit 9539bef
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 102 deletions.
diff --git a/example/src/components/ChatboxWrapper.tsx b/example/src/components/ChatboxWrapper.tsx
@@ -27,13 +27,12 @@ const ChatboxWrapper: FC<Props> = ({
   // use kooks
   const { data: currentMember } = hooks.useCurrentMember();
   const { data: chat } = hooks.useItemChat(chatId);
+  const memberships = hooks.useItemMemberships(chatId).data;
   // get chat messages
   const chatMessages = chat?.messages;
 
-  // get id of member that posted messages in the chat
-  const memberIds: string[] = Array.from(
-    new Set(chatMessages?.map(({ creator }: { creator: string }) => creator)),
-  );
+  const memberIds: string[] =
+    memberships?.map((m) => m.memberId)?.toArray() || [];
 
   const member = new ImmutableMember(currentMember);
   const members = hooks.useMembers(memberIds).data;

diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "react-dom": "*"
   },
   "dependencies": {
-    "@graasp/translations": "github:graasp/graasp-translations.git",
+    "@graasp/translations": "github:graasp/graasp-translations#32/addMentionsTranslations",
     "@graasp/ui": "github:graasp/graasp-ui",
     "clsx": "1.1.1",
     "i18next": "21.8.1",
@@ -60,7 +60,7 @@
     "react-csv": "2.2.2",
     "react-i18next": "11.18.1",
     "react-markdown": "8.0.3",
-    "react-mentions": "4.4.7",
+    "react-mentions": "4.4.6",
     "react-router-dom": "6.3.0",
     "remark-breaks": "3.0.2",
     "remark-gfm": "3.0.1"

diff --git a/src/components/Chatbox/Input.tsx b/src/components/Chatbox/Input.tsx
@@ -9,7 +9,7 @@ import {
   SuggestionDataItem,
 } from 'react-mentions';
 
-import { Typography } from '@material-ui/core';
+import { Typography, useTheme } from '@material-ui/core';
 import Box from '@material-ui/core/Box';
 import IconButton from '@material-ui/core/IconButton';
 import { makeStyles } from '@material-ui/core/styles';
@@ -60,46 +60,8 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const inputStyle = {
-  width: '100%',
-  // mentions
-  control: {
-    minHeight: '63px',
-  },
-  input: {
-    padding: '9px',
-    border: '1px solid silver',
-    width: '100%',
-    overflow: 'auto',
-    height: '70px',
-    borderRadius: '4px',
-  },
-  highlighter: {
-    padding: '9px',
-    border: '1px solid transparent',
-    boxSizing: 'border-box',
-    overflow: 'hidden',
-    height: '70px',
-  },
-
-  suggestions: {
-    list: {
-      backgroundColor: 'white',
-      border: '1px solid rgba(0,0,0,0.15)',
-      fontSize: '1rem',
-    },
-    item: {
-      padding: '15px 20px',
-      borderBottom: '1px solid rgba(0,0,0,0.15)',
-      '&focused': {
-        backgroundColor: '#cee4e5',
-      },
-    },
-  },
-};
-
 const mentionStyle = {
-  backgroundColor: '#c5c9e8',
+  backgroundColor: '#b9b9ed',
 };
 
 const Input: FC<Props> = ({
@@ -110,6 +72,60 @@ const Input: FC<Props> = ({
   placeholder,
   sendMessageFunction,
 }) => {
+  // use mui theme for the mentions component
+  // we can not use 'useStyles' with it because it requests an object for the styles
+  const theme = useTheme();
+  // padding for the input field, needs to match the padding for the overlay
+  // in the 'highlighter' key
+  const inputPadding = theme.spacing(1);
+  const inputRadius = theme.spacing(0.5);
+  const inputStyle = {
+    width: '100%',
+    minWidth: '0px',
+    // mentions
+    control: {
+      minHeight: '63px',
+    },
+    input: {
+      padding: inputPadding,
+      border: '1px solid silver',
+      width: '100%',
+      overflow: 'auto',
+      height: '70px',
+      borderRadius: inputRadius,
+    },
+    highlighter: {
+      padding: inputPadding,
+      border: '1px solid transparent',
+      boxSizing: 'border-box',
+      overflow: 'hidden',
+      height: '70px',
+    },
+
+    suggestions: {
+      // hides the sharp corners
+      overflow: 'hidden',
+      borderRadius: inputRadius,
+      list: {
+        // hides the sharp corners
+        overflow: 'hidden',
+        backgroundColor: 'white',
+        fontSize: '1rem',
+        border: '1px solid rgba(0,0,0,0.15)',
+        borderRadius: inputRadius,
+      },
+      item: {
+        display: {
+          // change the style of the suggestions
+        },
+        padding: theme.spacing(0.5, 2),
+        '&focused': {
+          backgroundColor: '#b9b9ed',
+        },
+      },
+    },
+  };
+
   const classes = useStyles();
   const { members } = useMessagesContext();
   const { id: currentMemberId } = useCurrentMemberContext();
@@ -178,9 +194,13 @@ const Input: FC<Props> = ({
     let helperText = ' ';
     const normalizedTextInput = normalizeMentions(textInput);
     if (textInput) {
-      helperText =
-        normalizedTextInput.length +
-        (isMessageTooLong ? ` (max. ${HARD_MAX_MESSAGE_LENGTH} chars)` : '');
+      helperText = normalizedTextInput.length.toString();
+      // append the max message size
+      if (isMessageTooLong) {
+        helperText += t(CHATBOX.INPUT_MESSAGE_TOO_LONG, {
+          length: HARD_MAX_MESSAGE_LENGTH,
+        });
+      }
     }
     return (
       <Typography
@@ -213,7 +233,7 @@ const Input: FC<Props> = ({
           onKeyDown={keyDown}
           style={inputStyle}
           forceSuggestionsAboveCursor
-          a11ySuggestionsListLabel={'Suggested mentions'}
+          a11ySuggestionsListLabel={t(CHATBOX.SUGGESTED_MENTIONS)}
           placeholder={placeholder || t(CHATBOX.INPUT_FIELD_PLACEHOLDER)}
         >
           <Mention

diff --git a/src/components/Mentions/MentionButton.tsx b/src/components/Mentions/MentionButton.tsx
@@ -1,6 +1,7 @@
 import { List } from 'immutable';
 
-import { FC, useState } from 'react';
+import { FC, useMemo, useState } from 'react';
+import { I18nextProvider } from 'react-i18next';
 import { QueryObserverResult } from 'react-query';
 
 import { Badge, IconButton, makeStyles } from '@material-ui/core';
@@ -11,12 +12,14 @@ import {
   MemberRecord,
 } from '@graasp/query-client/dist/src/types';
 import { MentionStatus } from '@graasp/sdk';
+import buildI18n, { CHATBOX, langs, namespaces } from '@graasp/translations';
 
 import MentionsDialog from './MentionsDialog';
 import MentionsTable from './MentionsTable';
 
 type Props = {
   color?: 'primary' | 'secondary';
+  lang?: string;
   useMentions: (
     options?: { getUpdates?: boolean | undefined } | undefined,
   ) => QueryObserverResult<MemberMentionsRecord>;
@@ -28,12 +31,18 @@ type Props = {
 
 const MentionButton: FC<Props> = ({
   color = 'primary',
+  lang = langs.en,
   useMentions,
   useMembers,
   patchMentionFunction,
   deleteMentionFunction,
   clearAllMentionsFunction,
 }) => {
+  const i18n = useMemo(() => {
+    const i18nInstance = buildI18n(namespaces.chatbox);
+    i18nInstance.changeLanguage(lang);
+    return i18nInstance;
+  }, [lang]);
   const useStyles = makeStyles((theme) => ({
     badge: {
       '& .MuiBadge-badge': {
@@ -46,6 +55,7 @@ const MentionButton: FC<Props> = ({
     },
   }));
   const classes = useStyles();
+  const t = i18n.t;
 
   const { data: memberMentions } = useMentions();
   const mentions = memberMentions?.mentions;
@@ -58,39 +68,43 @@ const MentionButton: FC<Props> = ({
   const mentionsWithMembers = mentions?.map((m) => {
     return m.update(
       'creator',
-      () => members.find((u) => u.id === m.creator)?.name || 'Anonymous',
+      () =>
+        members.find((u) => u.id === m.creator)?.name ||
+        t(CHATBOX.ANONYMOUS_USER),
     );
   });
 
   const [open, setOpen] = useState(false);
 
   return (
     <div>
-      <IconButton onClick={(): void => setOpen(true)}>
-        <Badge
-          className={classes.badge}
-          overlap="circular"
-          color={color}
-          badgeContent={
-            mentions?.filter((m) => m.status === MentionStatus.UNREAD)?.size ||
-            0
+      <I18nextProvider i18n={i18n}>
+        <IconButton onClick={(): void => setOpen(true)}>
+          <Badge
+            className={classes.badge}
+            overlap="circular"
+            color={color}
+            badgeContent={
+              mentions?.filter((m) => m.status === MentionStatus.UNREAD)
+                ?.size || 0
+            }
+          >
+            <Notifications color={color} />
+          </Badge>
+        </IconButton>
+        <MentionsDialog
+          content={
+            <MentionsTable
+              mentions={mentionsWithMembers}
+              patchMention={patchMentionFunction}
+              deleteMention={deleteMentionFunction}
+              clearAllMentions={clearAllMentionsFunction}
+            />
           }
-        >
-          <Notifications color={color} />
-        </Badge>
-      </IconButton>
-      <MentionsDialog
-        content={
-          <MentionsTable
-            mentions={mentionsWithMembers}
-            patchMention={patchMentionFunction}
-            deleteMention={deleteMentionFunction}
-            clearAllMentions={clearAllMentionsFunction}
-          />
-        }
-        open={open}
-        setOpen={setOpen}
-      />
+          open={open}
+          setOpen={setOpen}
+        />
+      </I18nextProvider>
     </div>
   );
 };