Skip to content

Commit 4e4b5ba

Browse files
adi-herwana-nuscysjonathan
adi-herwana-nus
authored and
cysjonathan
committed
style(admin): remove injectIntl from components
1 parent 788d8f1 commit 4e4b5ba

File tree

4 files changed

+50
-44
lines changed

4 files changed

+50
-44
lines changed

‎client/app/bundles/system/admin/admin/components/buttons/UsersButtons.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FC, memo, useState } from 'react';
2-
import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
2+
import { defineMessages } from 'react-intl';
33
import equal from 'fast-deep-equal';
44
import { UserMiniEntity } from 'types/users';
55

@@ -12,7 +12,7 @@ import useTranslation from 'lib/hooks/useTranslation';
1212

1313
import { deleteUser } from '../../operations';
1414

15-
interface Props extends WrappedComponentProps {
15+
interface Props {
1616
user: UserMiniEntity;
1717
}
1818

@@ -49,7 +49,7 @@ const translations = defineMessages({
4949
});
5050

5151
const UserManagementButtons: FC<Props> = (props) => {
52-
const { intl, user } = props;
52+
const { user } = props;
5353
const dispatch = useAppDispatch();
5454
const [isDeleting, setIsDeleting] = useState(false);
5555
const { t } = useTranslation();
@@ -58,15 +58,15 @@ const UserManagementButtons: FC<Props> = (props) => {
5858
setIsDeleting(true);
5959
return dispatch(deleteUser(user.id))
6060
.then(() => {
61-
toast.success(intl.formatMessage(translations.deletionSuccess));
61+
toast.success(t(translations.deletionSuccess));
6262
})
6363
.catch((error) => {
6464
setIsDeleting(false);
6565
const errorMessage = error.response?.data?.errors
6666
? error.response.data.errors
6767
: '';
6868
toast.error(
69-
intl.formatMessage(translations.deletionFailure, {
69+
t(translations.deletionFailure, {
7070
error: errorMessage,
7171
}),
7272
);
@@ -108,7 +108,7 @@ const UserManagementButtons: FC<Props> = (props) => {
108108
};
109109

110110
export default memo(
111-
injectIntl(UserManagementButtons),
111+
UserManagementButtons,
112112
(prevProps, nextProps) => {
113113
return equal(prevProps.user, nextProps.user);
114114
},

‎client/app/bundles/system/admin/admin/components/tables/UsersTable.tsx‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FC, ReactElement, useState } from 'react';
2-
import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
2+
import { defineMessages } from 'react-intl';
33
import {
44
CircularProgress,
55
MenuItem,
@@ -28,8 +28,9 @@ import toast from 'lib/hooks/toast';
2828
import tableTranslations from 'lib/translations/table';
2929

3030
import { indexUsers, updateUser } from '../../operations';
31+
import useTranslation from 'lib/hooks/useTranslation';
3132

32-
interface Props extends WrappedComponentProps {
33+
interface Props {
3334
users: UserMiniEntity[];
3435
userCounts: AdminStats;
3536
filter: { active: boolean; role: string };
@@ -65,10 +66,11 @@ const translations = defineMessages({
6566
});
6667

6768
const UsersTable: FC<Props> = (props) => {
68-
const { title, renderRowActionComponent, intl, filter, users, userCounts } =
69+
const { title, renderRowActionComponent, filter, users, userCounts } =
6970
props;
7071
const [isLoading, setIsLoading] = useState(false);
7172
const dispatch = useAppDispatch();
73+
const { t } = useTranslation();
7274

7375
const [tableState, setTableState] = useState<TableState>({
7476
count: userCounts.usersCount,
@@ -88,14 +90,14 @@ const UsersTable: FC<Props> = (props) => {
8890
return dispatch(updateUser(user.id, newUser))
8991
.then(() => {
9092
toast.success(
91-
intl.formatMessage(translations.renameSuccess, {
93+
t(translations.renameSuccess, {
9294
oldName: user.name,
9395
newName,
9496
}),
9597
);
9698
})
9799
.catch((error) => {
98-
toast.error(intl.formatMessage(translations.updateNameFailure));
100+
toast.error(t(translations.updateNameFailure));
99101
throw error;
100102
});
101103
};
@@ -117,14 +119,14 @@ const UsersTable: FC<Props> = (props) => {
117119
.then(() => {
118120
updateValue(newRole);
119121
toast.success(
120-
intl.formatMessage(translations.changeRoleSuccess, {
122+
t(translations.changeRoleSuccess, {
121123
name: user.name,
122124
role: USER_ROLES[newRole],
123125
}),
124126
);
125127
})
126128
.catch(() => {
127-
toast.error(intl.formatMessage(translations.updateRoleFailure));
129+
toast.error(t(translations.updateRoleFailure));
128130
});
129131
};
130132

@@ -143,7 +145,7 @@ const UsersTable: FC<Props> = (props) => {
143145
}),
144146
)
145147
.catch(() =>
146-
toast.error(intl.formatMessage(translations.fetchFilteredUsersFailure)),
148+
toast.error(t(translations.fetchFilteredUsersFailure)),
147149
)
148150
.finally(() => {
149151
setIsLoading(false);
@@ -166,7 +168,7 @@ const UsersTable: FC<Props> = (props) => {
166168
}),
167169
)
168170
.catch(() =>
169-
toast.error(intl.formatMessage(translations.fetchFilteredUsersFailure)),
171+
toast.error(t(translations.fetchFilteredUsersFailure)),
170172
)
171173
.finally(() => {
172174
setIsLoading(false);
@@ -196,7 +198,7 @@ const UsersTable: FC<Props> = (props) => {
196198
rowsPerPage: DEFAULT_TABLE_ROWS_PER_PAGE,
197199
rowsPerPageOptions: [DEFAULT_TABLE_ROWS_PER_PAGE],
198200
search: true,
199-
searchPlaceholder: intl.formatMessage(translations.searchText),
201+
searchPlaceholder: t(translations.searchText),
200202
selectableRows: 'none',
201203
serverSide: true,
202204
setTableProps: (): Record<string, unknown> => {
@@ -224,7 +226,7 @@ const UsersTable: FC<Props> = (props) => {
224226
},
225227
{
226228
name: 'name',
227-
label: intl.formatMessage(tableTranslations.name),
229+
label: t(tableTranslations.name),
228230
options: {
229231
alignCenter: false,
230232
sort: false,
@@ -247,7 +249,7 @@ const UsersTable: FC<Props> = (props) => {
247249
},
248250
{
249251
name: 'email',
250-
label: intl.formatMessage(tableTranslations.email),
252+
label: t(tableTranslations.email),
251253
options: {
252254
alignCenter: false,
253255
sort: false,
@@ -267,7 +269,7 @@ const UsersTable: FC<Props> = (props) => {
267269
},
268270
{
269271
name: 'instances',
270-
label: intl.formatMessage(tableTranslations.instances),
272+
label: t(tableTranslations.instances),
271273
options: {
272274
alignCenter: false,
273275
sort: false,
@@ -292,7 +294,7 @@ const UsersTable: FC<Props> = (props) => {
292294
},
293295
{
294296
name: 'role',
295-
label: intl.formatMessage(tableTranslations.role),
297+
label: t(tableTranslations.role),
296298
options: {
297299
alignCenter: false,
298300
sort: false,
@@ -326,7 +328,7 @@ const UsersTable: FC<Props> = (props) => {
326328
},
327329
{
328330
name: 'actions',
329-
label: intl.formatMessage(tableTranslations.actions),
331+
label: t(tableTranslations.actions),
330332
options: {
331333
empty: true,
332334
sort: false,
@@ -359,4 +361,4 @@ const UsersTable: FC<Props> = (props) => {
359361
);
360362
};
361363

362-
export default injectIntl(UsersTable);
364+
export default UsersTable;

‎client/app/bundles/system/admin/instance/instance/components/buttons/UsersButtons.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FC, memo, useState } from 'react';
2-
import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
2+
import { defineMessages } from 'react-intl';
33
import equal from 'fast-deep-equal';
44
import { InstanceUserMiniEntity } from 'types/system/instance/users';
55

@@ -9,8 +9,9 @@ import { useAppDispatch } from 'lib/hooks/store';
99
import toast from 'lib/hooks/toast';
1010

1111
import { deleteUser } from '../../operations';
12+
import useTranslation from 'lib/hooks/useTranslation';
1213

13-
interface Props extends WrappedComponentProps {
14+
interface Props {
1415
user: InstanceUserMiniEntity;
1516
}
1617

@@ -34,23 +35,24 @@ const translations = defineMessages({
3435
});
3536

3637
const UserManagementButtons: FC<Props> = (props) => {
37-
const { intl, user } = props;
38+
const { user } = props;
3839
const dispatch = useAppDispatch();
40+
const { t } = useTranslation();
3941
const [isDeleting, setIsDeleting] = useState(false);
4042

4143
const onDelete = (): Promise<void> => {
4244
setIsDeleting(true);
4345
return dispatch(deleteUser(user.id))
4446
.then(() => {
45-
toast.success(intl.formatMessage(translations.deletionSuccess));
47+
toast.success(t(translations.deletionSuccess));
4648
})
4749
.catch((error) => {
4850
setIsDeleting(false);
4951
const errorMessage = error.response?.data?.errors
5052
? error.response.data.errors
5153
: '';
5254
toast.error(
53-
intl.formatMessage(translations.deletionFailure, {
55+
t(translations.deletionFailure, {
5456
error: errorMessage,
5557
}),
5658
);
@@ -62,22 +64,22 @@ const UserManagementButtons: FC<Props> = (props) => {
6264
<div key={`buttons-${user.id}`}>
6365
<DeleteButton
6466
className={`user-delete-${user.id} p-0`}
65-
confirmMessage={intl.formatMessage(translations.deletionConfirm, {
67+
confirmMessage={t(translations.deletionConfirm, {
6668
role: USER_ROLES[user.role],
6769
name: user.name,
6870
email: user.email,
6971
})}
7072
disabled={isDeleting}
7173
loading={isDeleting}
7274
onClick={onDelete}
73-
tooltip={intl.formatMessage(translations.deleteTooltip)}
75+
tooltip={t(translations.deleteTooltip)}
7476
/>
7577
</div>
7678
);
7779
};
7880

7981
export default memo(
80-
injectIntl(UserManagementButtons),
82+
UserManagementButtons,
8183
(prevProps, nextProps) => {
8284
return equal(prevProps.user, nextProps.user);
8385
},

‎client/app/bundles/system/admin/instance/instance/components/tables/UsersTable.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FC, ReactElement, useState } from 'react';
2-
import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
2+
import { defineMessages } from 'react-intl';
33
import {
44
CircularProgress,
55
MenuItem,
@@ -31,8 +31,9 @@ import toast from 'lib/hooks/toast';
3131
import tableTranslations from 'lib/translations/table';
3232

3333
import { indexUsers, updateUser } from '../../operations';
34+
import useTranslation from 'lib/hooks/useTranslation';
3435

35-
interface Props extends WrappedComponentProps {
36+
interface Props {
3637
users: InstanceUserMiniEntity[];
3738
userCounts: InstanceAdminStats;
3839
title: string;
@@ -68,10 +69,11 @@ const translations = defineMessages({
6869
});
6970

7071
const UsersTable: FC<Props> = (props) => {
71-
const { title, renderRowActionComponent, intl, users, userCounts, filter } =
72+
const { title, renderRowActionComponent, users, userCounts, filter } =
7273
props;
7374
const [isLoading, setIsLoading] = useState(false);
7475
const dispatch = useAppDispatch();
76+
const { t } = useTranslation();
7577

7678
const [tableState, setTableState] = useState<TableState>({
7779
count: userCounts.usersCount,
@@ -96,14 +98,14 @@ const UsersTable: FC<Props> = (props) => {
9698
.then(() => {
9799
updateValue(newRole);
98100
toast.success(
99-
intl.formatMessage(translations.changeRoleSuccess, {
101+
t(translations.changeRoleSuccess, {
100102
name: user.name,
101103
role: INSTANCE_USER_ROLES[newRole],
102104
}),
103105
);
104106
})
105107
.catch(() => {
106-
toast.error(intl.formatMessage(translations.updateRoleFailure));
108+
toast.error(t(translations.updateRoleFailure));
107109
});
108110
};
109111

@@ -122,7 +124,7 @@ const UsersTable: FC<Props> = (props) => {
122124
}),
123125
)
124126
.catch(() =>
125-
toast.error(intl.formatMessage(translations.fetchFilteredUsersFailure)),
127+
toast.error(t(translations.fetchFilteredUsersFailure)),
126128
)
127129
.finally(() => {
128130
setIsLoading(false);
@@ -145,7 +147,7 @@ const UsersTable: FC<Props> = (props) => {
145147
}),
146148
)
147149
.catch(() =>
148-
toast.error(intl.formatMessage(translations.fetchFilteredUsersFailure)),
150+
toast.error(t(translations.fetchFilteredUsersFailure)),
149151
)
150152
.finally(() => {
151153
setIsLoading(false);
@@ -175,7 +177,7 @@ const UsersTable: FC<Props> = (props) => {
175177
rowsPerPage: DEFAULT_TABLE_ROWS_PER_PAGE,
176178
rowsPerPageOptions: [DEFAULT_TABLE_ROWS_PER_PAGE],
177179
search: true,
178-
searchPlaceholder: intl.formatMessage(translations.searchText),
180+
searchPlaceholder: t(translations.searchText),
179181
selectableRows: 'none',
180182
serverSide: true,
181183
setTableProps: (): Record<string, unknown> => {
@@ -212,15 +214,15 @@ const UsersTable: FC<Props> = (props) => {
212214
},
213215
{
214216
name: 'name',
215-
label: intl.formatMessage(tableTranslations.name),
217+
label: t(tableTranslations.name),
216218
options: {
217219
alignCenter: false,
218220
sort: false,
219221
},
220222
},
221223
{
222224
name: 'email',
223-
label: intl.formatMessage(tableTranslations.email),
225+
label: t(tableTranslations.email),
224226
options: {
225227
alignCenter: false,
226228
sort: false,
@@ -240,7 +242,7 @@ const UsersTable: FC<Props> = (props) => {
240242
},
241243
{
242244
name: 'courses',
243-
label: intl.formatMessage(tableTranslations.relatedCourses),
245+
label: t(tableTranslations.relatedCourses),
244246
options: {
245247
alignCenter: false,
246248
sort: false,
@@ -262,7 +264,7 @@ const UsersTable: FC<Props> = (props) => {
262264
},
263265
{
264266
name: 'role',
265-
label: intl.formatMessage(tableTranslations.role),
267+
label: t(tableTranslations.role),
266268
options: {
267269
alignCenter: false,
268270
sort: false,
@@ -296,7 +298,7 @@ const UsersTable: FC<Props> = (props) => {
296298
},
297299
{
298300
name: 'actions',
299-
label: intl.formatMessage(tableTranslations.actions),
301+
label: t(tableTranslations.actions),
300302
options: {
301303
empty: true,
302304
sort: false,
@@ -329,4 +331,4 @@ const UsersTable: FC<Props> = (props) => {
329331
);
330332
};
331333

332-
export default injectIntl(UsersTable);
334+
export default UsersTable;

0 commit comments

Comments
 (0)