feat: add english translations for all hardcoded text

Author: ReidyT

.eslintignore

@@ -2,4 +2,4 @@ build
 public
 coverage
 src/registerServiceWorker.js
-cypress/integration/examples
+cypress/integration/examples

package.json

@@ -14,6 +14,7 @@
     "@emotion/styled": "11.11.0",
     "@graasp/apps-query-client": "3.3.0",
     "@graasp/sdk": "3.3.0",
+    "@graasp/translations": "^1.23.0",
     "@graasp/ui": "4.1.1",
     "@mui/icons-material": "5.11.16",
     "@mui/lab": "5.0.0-alpha.136",
@@ -26,15 +27,14 @@
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.1.2",
     "cypress-vite": "^1.5.0",
-    "i18next": "22.5.0",
     "lodash.isequal": "^4.5.0",
     "lodash.isobject": "3.0.2",
     "lodash.isstring": "4.0.1",
     "qs": "6.11.2",
     "randomcolor": "0.6.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-i18next": "12.3.1",
+    "react-i18next": "14.0.5",
     "react-markdown": "^8.0.7",
     "react-toastify": "9.1.3",
     "remark-breaks": "^3.0.3",
@@ -75,7 +75,6 @@
     "@commitlint/config-conventional": "17.6.7",
     "@cypress/code-coverage": "3.12.17",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
-    "@types/i18n": "0.13.10",
     "@types/jest": "29.5.11",
     "@types/lodash.isequal": "^4.5.6",
     "@types/lodash.isobject": "3.0.7",

src/components/Root.tsx

@@ -14,12 +14,10 @@ import { CssBaseline, ThemeProvider, createTheme, styled } from '@mui/material';
 import { grey, orange, pink } from '@mui/material/colors';
 import { StyledEngineProvider } from '@mui/material/styles';
 
+import { TEXT_ANALYSIS } from '@/langs/constants';
+
 import { ENABLE_MOCK_API } from '../config/env';
-import i18nConfig from '../config/i18n';
-import {
-  CONTEXT_FETCHING_ERROR_MESSAGE,
-  TOKEN_REQUEST_ERROR_MESSAGE,
-} from '../config/messages';
+import i18nConfig, { useTextAnalysisTranslation } from '../config/i18n';
 import {
   QueryClientProvider,
   ReactQueryDevtools,
@@ -75,53 +73,57 @@ const RootDiv = styled('div')({
   height: '100%',
 });
 
-const Root: FC = () => {
+// This function is necessary to allow to use translations.
+const AppWithContext = (): JSX.Element => {
   const [mockContext, setMockContext] = useObjectState(defaultMockContext);
+  const { t } = useTextAnalysisTranslation();
 
   return (
-    <RootDiv>
-      {/* Used to define the order of injected properties between JSS and emotion */}
-      <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={theme}>
-          <CssBaseline enableColorScheme />
-          <I18nextProvider i18n={i18nConfig}>
-            <QueryClientProvider client={queryClient}>
-              <WithLocalContext
-                defaultValue={window.Cypress ? window.appContext : mockContext}
-                LoadingComponent={<Loader />}
-                useGetLocalContext={hooks.useGetLocalContext}
-                useAutoResize={hooks.useAutoResize}
-                onError={() => {
-                  showErrorToast(CONTEXT_FETCHING_ERROR_MESSAGE);
-                }}
-              >
-                <WithTokenContext
-                  LoadingComponent={<Loader />}
-                  useAuthToken={hooks.useAuthToken}
-                  onError={() => {
-                    showErrorToast(TOKEN_REQUEST_ERROR_MESSAGE);
-                  }}
-                >
-                  <ToastContainer position="bottom-right" />
-                  <App />
-                  {import.meta.env.DEV && ENABLE_MOCK_API && (
-                    <GraaspContextDevTool
-                      members={mockMembers}
-                      context={mockContext}
-                      setContext={setMockContext}
-                    />
-                  )}
-                </WithTokenContext>
-              </WithLocalContext>
-              {import.meta.env.DEV && (
-                <ReactQueryDevtools position="top-right" />
-              )}
-            </QueryClientProvider>
-          </I18nextProvider>
-        </ThemeProvider>
-      </StyledEngineProvider>
-    </RootDiv>
+    <WithLocalContext
+      defaultValue={window.Cypress ? window.appContext : mockContext}
+      LoadingComponent={<Loader />}
+      useGetLocalContext={hooks.useGetLocalContext}
+      useAutoResize={hooks.useAutoResize}
+      onError={() => {
+        showErrorToast(t(TEXT_ANALYSIS.CONTEXT_FETCHING_ERROR_MESSAGE));
+      }}
+    >
+      <WithTokenContext
+        LoadingComponent={<Loader />}
+        useAuthToken={hooks.useAuthToken}
+        onError={() => {
+          showErrorToast(t(TEXT_ANALYSIS.TOKEN_REQUEST_ERROR_MESSAGE));
+        }}
+      >
+        <ToastContainer position="bottom-right" />
+        <App />
+        {import.meta.env.DEV && ENABLE_MOCK_API && (
+          <GraaspContextDevTool
+            members={mockMembers}
+            context={mockContext}
+            setContext={setMockContext}
+          />
+        )}
+      </WithTokenContext>
+    </WithLocalContext>
   );
 };
 
+const Root: FC = () => (
+  <RootDiv>
+    {/* Used to define the order of injected properties between JSS and emotion */}
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <CssBaseline enableColorScheme />
+        <I18nextProvider i18n={i18nConfig}>
+          <QueryClientProvider client={queryClient}>
+            <AppWithContext />
+            {import.meta.env.DEV && <ReactQueryDevtools position="top-right" />}
+          </QueryClientProvider>
+        </I18nextProvider>
+      </ThemeProvider>
+    </StyledEngineProvider>
+  </RootDiv>
+);
+
 export default Root;

src/components/common/PublicAlert.tsx

@@ -1,11 +1,12 @@
-import { useTranslation } from 'react-i18next';
-
 import { useLocalContext } from '@graasp/apps-query-client';
 
 import Alert from '@mui/material/Alert';
 
+import { useTextAnalysisTranslation } from '@/config/i18n';
+import { TEXT_ANALYSIS } from '@/langs/constants';
+
 const PublicAlert = (): JSX.Element | null => {
-  const { t } = useTranslation();
+  const { t } = useTextAnalysisTranslation();
 
   const context = useLocalContext();
 
@@ -16,7 +17,7 @@ const PublicAlert = (): JSX.Element | null => {
 
   return (
     <Alert severity="error">
-      {t('You are not authenticated. You cannot save any data')}
+      {t(TEXT_ANALYSIS.PUBLIC_ALERT_NOT_AUTHENTICATED)}
     </Alert>
   );
 };

src/components/common/chat/ChatBox.tsx

@@ -9,7 +9,10 @@ import {
   useLocalContext,
 } from '@graasp/apps-query-client';
 
-import { Alert, AlertTitle, Box, Stack, styled } from '@mui/material';
+import { Alert, Box, Stack, styled } from '@mui/material';
+
+import { useTextAnalysisTranslation } from '@/config/i18n';
+import { TEXT_ANALYSIS } from '@/langs/constants';
 
 import { APP_DATA_TYPES, ChatAppData } from '../../../config/appDataTypes';
 import {
@@ -20,10 +23,8 @@ import { DEFAULT_INITIAL_PROMPT } from '../../../config/appSettings';
 import {
   ANONYMOUS_USER,
   MAX_CONVERSATION_LENGTH,
-  MAX_CONVERSATION_LENGTH_ALERT,
   SCROLL_SAFETY_MARGIN,
 } from '../../../config/constants';
-import { CHAT_BOT_ERROR_MESSAGE } from '../../../config/messages';
 import { mutations } from '../../../config/queryClient';
 import { CHATBOT_MODE_CY, messagesDataCy } from '../../../config/selectors';
 import {
@@ -73,6 +74,7 @@ const StyledReactMarkdown = styled(ReactMarkdown)(({ theme }) => ({
 type Prop = { focusWord: string; isOpen: boolean };
 
 const ChatBox: FC<Prop> = ({ focusWord, isOpen }) => {
+  const { t } = useTextAnalysisTranslation();
   const { postAppDataAsync, postAppData, appDataArray } = useAppDataContext();
   const { appSettingArray } = useAppSettingContext();
   const context = useLocalContext();
@@ -113,7 +115,7 @@ const ChatBox: FC<Prop> = ({ focusWord, isOpen }) => {
         setLoading(true);
 
         const appData = {
-          message: CHAT_BOT_ERROR_MESSAGE,
+          message: t(TEXT_ANALYSIS.CHAT_BOT_ERROR_MESSAGE),
           keyword: focusWord,
         };
 
@@ -135,8 +137,7 @@ const ChatBox: FC<Prop> = ({ focusWord, isOpen }) => {
   const renderBar =
     chatAppData.length > MAX_CONVERSATION_LENGTH ? (
       <Alert severity="info">
-        <AlertTitle>Info</AlertTitle>
-        {MAX_CONVERSATION_LENGTH_ALERT}
+        {t(TEXT_ANALYSIS.MAX_CONVERSATION_LENGTH_ALERT)}
       </Alert>
     ) : (
       <InputBar onSend={(input) => onSend(input)} />

src/components/common/chat/InputBar.tsx

@@ -9,13 +9,17 @@ import {
   OutlinedInput,
 } from '@mui/material';
 
+import { useTextAnalysisTranslation } from '@/config/i18n';
+import { TEXT_ANALYSIS } from '@/langs/constants';
+
 import { ENTER_KEY } from '../../../config/constants';
 
 type Prop = {
   onSend: (input: string) => void;
 };
 
 const InputBar: FC<Prop> = ({ onSend }) => {
+  const { t } = useTextAnalysisTranslation();
   const [comment, setComment] = useState('');
 
   const onChange = ({ target }: { target: { value: string } }): void => {
@@ -37,23 +41,23 @@ const InputBar: FC<Prop> = ({ onSend }) => {
 
   return (
     <FormControl sx={{ m: 1 }} variant="outlined">
-      <InputLabel>reply here ...</InputLabel>
+      <InputLabel>{t(TEXT_ANALYSIS.INPUT_BAR_REPLY_HERE)}</InputLabel>
       <OutlinedInput
         value={comment}
         onChange={onChange}
         onKeyDown={onEnterPress}
         endAdornment={
           <InputAdornment position="end">
             <IconButton
-              aria-label="send"
+              aria-label={t(TEXT_ANALYSIS.INPUT_BAR_SEND_BTN)}
               onClick={() => handleClickSend(comment)}
               edge="end"
             >
               <SendIcon />
             </IconButton>
           </InputAdornment>
         }
-        label="reply here ..."
+        label={t(TEXT_ANALYSIS.INPUT_BAR_REPLY_HERE)}
       />
     </FormControl>
   );

src/components/common/display/Banner.tsx

@@ -2,6 +2,9 @@ import { FC, useState } from 'react';
 
 import { Box, Button, Typography } from '@mui/material';
 
+import { useTextAnalysisTranslation } from '@/config/i18n';
+import { TEXT_ANALYSIS } from '@/langs/constants';
+
 import { BANNER_CY, SHOW_KEYWORDS_BUTTON_CY } from '../../../config/selectors';
 import {
   DEFAULT_MARGIN,
@@ -15,11 +18,11 @@ type Prop = {
 };
 
 const Banner: FC<Prop> = ({ title, disabled, onClick }) => {
+  const { t } = useTextAnalysisTranslation();
   const [showKeywords, setShowKeywords] = useState(false);
 
-  // TODO: translate me
-  const SHOW_KEYWORDS_LABEL = 'show keywords';
-  const HIDE_KEYWORDS_LABEL = 'hide keywords';
+  const SHOW_KEYWORDS_LABEL = t(TEXT_ANALYSIS.BANNER_SHOW_KEYWORDS_BTN);
+  const HIDE_KEYWORDS_LABEL = t(TEXT_ANALYSIS.BANNER_HIDE_KEYWORDS_BTN);
 
   const toggleKeywords = (): void => {
     onClick(!showKeywords);