Skip to content

Commit df401eb

Browse files
ReidyTReidyT
committed
chore: improve code from code review
- remove unnessecary namespaces and simplify i18next config file - replace sx width by fullwidth props
1 parent 4ee818e commit df401eb

23 files changed

+124
-95
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
"@emotion/styled": "11.11.0",
1515
"@graasp/apps-query-client": "3.3.0",
1616
"@graasp/sdk": "3.3.0",
17-
"@graasp/translations": "^1.23.0",
1817
"@graasp/ui": "4.1.1",
1918
"@mui/icons-material": "5.11.16",
2019
"@mui/lab": "5.0.0-alpha.136",
@@ -27,6 +26,7 @@
2726
"@testing-library/jest-dom": "5.16.5",
2827
"@testing-library/react": "14.1.2",
2928
"cypress-vite": "^1.5.0",
29+
"i18next": "^23.8.2",
3030
"lodash.isequal": "^4.5.0",
3131
"lodash.isobject": "3.0.2",
3232
"lodash.isstring": "4.0.1",
@@ -75,6 +75,7 @@
7575
"@commitlint/config-conventional": "17.6.7",
7676
"@cypress/code-coverage": "3.12.17",
7777
"@trivago/prettier-plugin-sort-imports": "4.3.0",
78+
"@types/i18n": "^0.13.10",
7879
"@types/jest": "29.5.11",
7980
"@types/lodash.isequal": "^4.5.6",
8081
"@types/lodash.isobject": "3.0.7",

‎src/@types/i18next.d.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { DEFAULT_NAMESPACE, resources } from '@/config/i18n';
2+
3+
declare module 'i18next' {
4+
interface CustomTypeOptions {
5+
defaultNS: typeof DEFAULT_NAMESPACE;
6+
resources: (typeof resources)['en'];
7+
}
8+
}

‎src/components/Root.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FC } from 'react';
2-
import { I18nextProvider } from 'react-i18next';
2+
import { I18nextProvider, useTranslation } from 'react-i18next';
33
import { ToastContainer } from 'react-toastify';
44
import 'react-toastify/dist/ReactToastify.min.css';
55

@@ -17,7 +17,7 @@ import { StyledEngineProvider } from '@mui/material/styles';
1717
import { TEXT_ANALYSIS } from '@/langs/constants';
1818

1919
import { ENABLE_MOCK_API } from '../config/env';
20-
import i18nConfig, { useTextAnalysisTranslation } from '../config/i18n';
20+
import i18nConfig from '../config/i18n';
2121
import {
2222
QueryClientProvider,
2323
ReactQueryDevtools,
@@ -76,7 +76,7 @@ const RootDiv = styled('div')({
7676
// This function is necessary to allow to use translations.
7777
const AppWithContext = (): JSX.Element => {
7878
const [mockContext, setMockContext] = useObjectState(defaultMockContext);
79-
const { t } = useTextAnalysisTranslation();
79+
const { t } = useTranslation();
8080

8181
return (
8282
<WithLocalContext

‎src/components/common/PublicAlert.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1+
import { useTranslation } from 'react-i18next';
2+
13
import { useLocalContext } from '@graasp/apps-query-client';
24

35
import Alert from '@mui/material/Alert';
46

5-
import { useTextAnalysisTranslation } from '@/config/i18n';
67
import { TEXT_ANALYSIS } from '@/langs/constants';
78

89
const PublicAlert = (): JSX.Element | null => {
9-
const { t } = useTextAnalysisTranslation();
10+
const { t } = useTranslation();
1011

1112
const context = useLocalContext();
1213

‎src/components/common/chat/ChatBox.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import randomColor from 'randomcolor';
22

33
import { FC, useEffect, useRef, useState } from 'react';
4+
import { useTranslation } from 'react-i18next';
45
import ReactMarkdown from 'react-markdown';
56

67
import {
@@ -11,7 +12,6 @@ import {
1112

1213
import { Alert, Box, Stack, styled } from '@mui/material';
1314

14-
import { useTextAnalysisTranslation } from '@/config/i18n';
1515
import { TEXT_ANALYSIS } from '@/langs/constants';
1616

1717
import { APP_DATA_TYPES, ChatAppData } from '../../../config/appDataTypes';
@@ -74,7 +74,7 @@ const StyledReactMarkdown = styled(ReactMarkdown)(({ theme }) => ({
7474
type Prop = { focusWord: string; isOpen: boolean };
7575

7676
const ChatBox: FC<Prop> = ({ focusWord, isOpen }) => {
77-
const { t } = useTextAnalysisTranslation();
77+
const { t } = useTranslation();
7878
const { postAppDataAsync, postAppData, appDataArray } = useAppDataContext();
7979
const { appSettingArray } = useAppSettingContext();
8080
const context = useLocalContext();

‎src/components/common/chat/InputBar.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { FC, KeyboardEventHandler, useState } from 'react';
2+
import { useTranslation } from 'react-i18next';
23

34
import SendIcon from '@mui/icons-material/Send';
45
import {
@@ -9,7 +10,6 @@ import {
910
OutlinedInput,
1011
} from '@mui/material';
1112

12-
import { useTextAnalysisTranslation } from '@/config/i18n';
1313
import { TEXT_ANALYSIS } from '@/langs/constants';
1414

1515
import { ENTER_KEY } from '../../../config/constants';
@@ -19,7 +19,7 @@ type Prop = {
1919
};
2020

2121
const InputBar: FC<Prop> = ({ onSend }) => {
22-
const { t } = useTextAnalysisTranslation();
22+
const { t } = useTranslation();
2323
const [comment, setComment] = useState('');
2424

2525
const onChange = ({ target }: { target: { value: string } }): void => {

‎src/components/common/display/Banner.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { FC, useState } from 'react';
2+
import { useTranslation } from 'react-i18next';
23

34
import { Box, Button, Typography } from '@mui/material';
45

5-
import { useTextAnalysisTranslation } from '@/config/i18n';
66
import { TEXT_ANALYSIS } from '@/langs/constants';
77

88
import { BANNER_CY, SHOW_KEYWORDS_BUTTON_CY } from '../../../config/selectors';
@@ -18,7 +18,7 @@ type Prop = {
1818
};
1919

2020
const Banner: FC<Prop> = ({ title, disabled, onClick }) => {
21-
const { t } = useTextAnalysisTranslation();
21+
const { t } = useTranslation();
2222
const [showKeywords, setShowKeywords] = useState(false);
2323

2424
const SHOW_KEYWORDS_LABEL = t(TEXT_ANALYSIS.BANNER_SHOW_KEYWORDS_BTN);

‎src/components/common/settings/GraaspButton.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { FC } from 'react';
22

33
import { Button, SxProps } from '@mui/material';
44

5-
import { FULL_WIDTH, GRAASP_VIOLET } from '../../../config/stylingConstants';
5+
import { GRAASP_VIOLET } from '../../../config/stylingConstants';
66

77
type Prop = {
88
buttonDataCy: string;
@@ -28,11 +28,11 @@ const GraaspButton: FC<Prop> = ({
2828
<Button
2929
data-cy={buttonDataCy}
3030
variant="contained"
31+
fullWidth={fullWidth}
3132
sx={{
3233
backgroundColor: GRAASP_VIOLET,
3334
minHeight,
3435
marginRight,
35-
...(fullWidth && { width: FULL_WIDTH }),
3636
...sx,
3737
}}
3838
onClick={handleOnClick}

‎src/components/common/settings/KeyWords.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { FC, useState } from 'react';
2+
import { useTranslation } from 'react-i18next';
23
import { toast } from 'react-toastify';
34

45
import DeleteIcon from '@mui/icons-material/Delete';
@@ -18,7 +19,6 @@ import {
1819
tooltipClasses,
1920
} from '@mui/material';
2021

21-
import { useTextAnalysisTranslation } from '@/config/i18n';
2222
import { TEXT_ANALYSIS } from '@/langs/constants';
2323
import { isKeywordPresent } from '@/utils/keywords';
2424

@@ -32,7 +32,6 @@ import {
3232
} from '../../../config/selectors';
3333
import {
3434
DEFAULT_IN_SECTION_SPACING,
35-
FULL_WIDTH,
3635
ICON_MARGIN,
3736
} from '../../../config/stylingConstants';
3837
import GraaspButton from './GraaspButton';
@@ -62,7 +61,7 @@ const KeyWords: FC<Prop> = ({
6261
chatbotEnabled,
6362
onChange,
6463
}) => {
65-
const { t } = useTextAnalysisTranslation();
64+
const { t } = useTranslation();
6665
const defaultKeywordDef = { word: '', def: '' };
6766
const [keywordDef, setKeywordDef] = useState<Keyword>(defaultKeywordDef);
6867

@@ -158,14 +157,14 @@ const KeyWords: FC<Prop> = ({
158157
<TextField
159158
data-cy={ENTER_KEYWORD_FIELD_CY}
160159
label="Enter the keyword"
161-
sx={{ width: FULL_WIDTH }}
160+
fullWidth
162161
value={keywordDef.word}
163162
onChange={(e) => updateKeywordDefinition('word', e.target)}
164163
/>
165164
<TextField
166165
data-cy={ENTER_DEFINITION_FIELD_CY}
167166
label="Enter the keyword's definition"
168-
sx={{ width: FULL_WIDTH }}
167+
fullWidth
169168
value={keywordDef.def}
170169
onChange={(e) => updateKeywordDefinition('def', e.target)}
171170
/>

‎src/components/common/settings/SetText.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import { FC } from 'react';
22

33
import { Box, TextField } from '@mui/material';
44

5-
import { FULL_WIDTH } from '../../../config/stylingConstants';
6-
75
type Prop = {
86
value: string;
97
textFieldLabel: string;
@@ -38,7 +36,7 @@ const SetText: FC<Prop> = ({
3836
label={textFieldLabel}
3937
variant="outlined"
4038
onChange={handleChange}
41-
sx={{ width: FULL_WIDTH }}
39+
fullWidth
4240
value={value}
4341
minRows={minRows}
4442
/>

‎src/components/common/settings/SwitchModes.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { FC } from 'react';
2+
import { useTranslation } from 'react-i18next';
23

34
import { FormControlLabel, Switch } from '@mui/material';
45

5-
import { useTextAnalysisTranslation } from '@/config/i18n';
66
import { TEXT_ANALYSIS } from '@/langs/constants';
77

88
import { USE_CHATBOT_DATA_CY } from '../../../config/selectors';
@@ -13,7 +13,7 @@ type Prop = {
1313
};
1414

1515
const SwitchModes: FC<Prop> = ({ value, onChange }) => {
16-
const { t } = useTextAnalysisTranslation();
16+
const { t } = useTranslation();
1717
const handleOnChange = ({ target }: { target: { checked: boolean } }): void =>
1818
onChange(target.checked);
1919

‎src/components/views/admin/BuilderView.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { FC, useEffect, useState } from 'react';
2+
import { useTranslation } from 'react-i18next';
23

34
import { Alert, Box, Button, Stack, Typography } from '@mui/material';
45

56
import GraaspButton from '@/components/common/settings/GraaspButton';
6-
import { useTextAnalysisTranslation } from '@/config/i18n';
77
import { TEXT_ANALYSIS } from '@/langs/constants';
88

99
import {
@@ -78,7 +78,7 @@ type SettingValue = (typeof defaultSettings)[SettingKey]['value'];
7878
const settingKeys = Object.keys(defaultSettings).map((k) => k as SettingKey);
7979

8080
const BuilderView: FC = () => {
81-
const { t } = useTextAnalysisTranslation();
81+
const { t } = useTranslation();
8282
const [settings, setSettings] = useState(defaultSettings);
8383

8484
// This state is used to avoid to erase changes if another setting is saved.

‎src/components/views/read/PlayerView.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { FC, ReactElement, useEffect, useState } from 'react';
2+
import { useTranslation } from 'react-i18next';
23

34
import { Box } from '@mui/material';
45

5-
import { useTextAnalysisTranslation } from '@/config/i18n';
66
import { TEXT_ANALYSIS } from '@/langs/constants';
77

88
import { APP_DATA_TYPES } from '../../../config/appDataTypes';
@@ -22,7 +22,6 @@ import {
2222
DEFAULT_USE_CHATBOT_SETTING,
2323
} from '../../../config/appSettings';
2424
import { PLAYER_VIEW_CY } from '../../../config/selectors';
25-
import { FULL_WIDTH } from '../../../config/stylingConstants';
2625
import { getDataAppSetting } from '../../../utils/appSettings';
2726
import PublicAlert from '../../common/PublicAlert';
2827
import ChatbotWindow from '../../common/chat/ChatbotWindow';
@@ -32,7 +31,7 @@ import { useAppDataContext } from '../../context/AppDataContext';
3231
import { useAppSettingContext } from '../../context/AppSettingContext';
3332

3433
const PlayerView: FC = () => {
35-
const { t } = useTextAnalysisTranslation();
34+
const { t } = useTranslation();
3635
const { appSettingArray } = useAppSettingContext();
3736
const { appDataArray, postAppData, deleteAppData } = useAppDataContext();
3837

@@ -109,7 +108,7 @@ const PlayerView: FC = () => {
109108
keywords={keywords}
110109
highlight={summon}
111110
openChatbot={openChatbot}
112-
width={FULL_WIDTH}
111+
width="100%"
113112
/>
114113
<ChatbotWindow
115114
closeChatbot={() => setChatbot(false)}

‎src/config/i18n.ts

+33-20
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,45 @@
1-
/* eslint-disable @typescript-eslint/explicit-function-return-type */
1+
import i18n from 'i18next';
22

3-
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
4-
import { initReactI18next, useTranslation } from 'react-i18next';
5-
6-
import buildI18n, { namespaces } from '@graasp/translations';
3+
import { initReactI18next } from 'react-i18next';
74

85
import ar from '../langs/ar.json';
96
import de from '../langs/de.json';
107
import en from '../langs/en.json';
8+
import es from '../langs/es.json';
119
import fr from '../langs/fr.json';
1210
import it from '../langs/it.json';
1311

14-
const i18n = buildI18n().use(initReactI18next);
12+
export const DEFAULT_NAMESPACE = 'translations';
13+
export const DEFAULT_LANG = 'en';
14+
export const resources = {
15+
ar,
16+
de,
17+
en,
18+
es,
19+
fr,
20+
it,
21+
} as const;
1522

16-
export const TEXT_ANALYSIS_NAMESPACE = 'text-analysis';
17-
i18n.addResourceBundle('ar', TEXT_ANALYSIS_NAMESPACE, ar);
18-
i18n.addResourceBundle('de', TEXT_ANALYSIS_NAMESPACE, de);
19-
i18n.addResourceBundle('en', TEXT_ANALYSIS_NAMESPACE, en);
20-
i18n.addResourceBundle('fr', TEXT_ANALYSIS_NAMESPACE, fr);
21-
i18n.addResourceBundle('it', TEXT_ANALYSIS_NAMESPACE, it);
23+
declare module 'react-i18next' {
24+
interface CustomTypeOptions {
25+
defaultNS: typeof DEFAULT_NAMESPACE;
26+
resources: (typeof resources)['en'];
27+
}
28+
}
2229

23-
export const useTextAnalysisTranslation = () =>
24-
useTranslation(TEXT_ANALYSIS_NAMESPACE);
25-
export const useCommonTranslation = () => useTranslation(namespaces.common);
26-
export const useMessagesTranslation = () => useTranslation(namespaces.messages);
27-
export const useEnumsTranslation = () => useTranslation(namespaces.enums);
28-
export const useCategoriesTranslation = () =>
29-
useTranslation(namespaces.categories);
30-
export const useChatboxTranslation = () => useTranslation(namespaces.chatbox);
30+
i18n.use(initReactI18next).init({
31+
resources,
32+
fallbackLng: DEFAULT_LANG,
33+
lng: DEFAULT_LANG,
34+
// debug only when not in production
35+
debug: import.meta.env.DEV,
36+
ns: [DEFAULT_NAMESPACE],
37+
defaultNS: DEFAULT_NAMESPACE,
38+
keySeparator: false,
39+
interpolation: {
40+
escapeValue: false,
41+
formatSeparator: ',',
42+
},
43+
});
3144

3245
export default i18n;

‎src/config/stylingConstants.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
export const DEFAULT_MARGIN = '25px';
22
export const DEFAULT_BORDER_RADIUS = '10px';
33
export const ICON_MARGIN = '5px';
4-
export const FULL_WIDTH = '100%';
54
export const DEFAULT_SECTION_SPACING = 3;
65
export const DEFAULT_IN_SECTION_SPACING = 2;
76

‎src/langs/ar.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
{}
1+
{
2+
"translations": {}
3+
}

‎src/langs/constants.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,4 @@ export const TEXT_ANALYSIS = {
2424
BUILDER_CHATBOT_SETTING_INFO: 'BUILDER_CHATBOT_SETTING_INFO',
2525
BUILDER_KEYWORDS_SETTING_TITLE: 'BUILDER_KEYWORDS_SETTING_TITLE',
2626
BUILDER_SAVE_BTN: 'BUILDER_SAVE_BTN',
27-
};
27+
} as const;

‎src/langs/de.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
{}
1+
{
2+
"translations": {}
3+
}

0 commit comments

Comments
 (0)