feat(translations): translate course user roles

Author: adi-herwana-nus

client/app/api/course/Users.ts

@@ -1,12 +1,12 @@
 import { AxiosResponse } from 'axios';
 import {
+  CourseStaffRole,
   CourseUserBasicListData,
   CourseUserBasicMiniEntity,
   CourseUserData,
   CourseUserListData,
   ManageCourseUsersPermissions,
   ManageCourseUsersSharedData,
-  StaffRoles,
   UpdateCourseUserPatchData,
 } from 'types/course/courseUsers';
 import { TimelineData } from 'types/course/referenceTimelines';
@@ -110,13 +110,13 @@ export default class UsersAPI extends BaseCourseAPI {
    * Upgrade a user to staff.
    *
    * @param {CourseUserBasicMiniEntity[]} users
-   * @param {StaffRoles} role
+   * @param {CourseStaffRole} role
    * @return {Promise} list of upgraded users
    * error response: { errors: [] } - An array of errors will be returned upon validation error.
    */
   upgradeToStaff(
     users: CourseUserBasicMiniEntity[],
-    role: StaffRoles,
+    role: CourseStaffRole,
   ): Promise<AxiosResponse> {
     const userIds = users.map((user) => user.id);
     const params = {

client/app/bundles/course/container/Sidebar/CourseUserItem.tsx

@@ -4,8 +4,8 @@ import { Avatar, Typography } from '@mui/material';
 import { CourseLayoutData } from 'types/course/courses';
 
 import PopupMenu from 'lib/components/core/PopupMenu';
-import { COURSE_USER_ROLES } from 'lib/constants/sharedConstants';
 import useTranslation from 'lib/hooks/useTranslation';
+import roleTranslations from 'lib/translations/course/users/roles';
 
 import CourseUserProgress from './CourseUserProgress';
 import LevelRing from './LevelRing';
@@ -45,24 +45,30 @@ interface CourseUserNameAndRoleProps {
 
 const CourseUserNameAndRole = (
   props: CourseUserNameAndRoleProps,
-): JSX.Element => (
-  <>
-    <Typography
-      className="overflow-hidden text-ellipsis whitespace-nowrap"
-      variant="body2"
-    >
-      {props.from.courseUserName}
-    </Typography>
-
-    <Typography
-      className="overflow-hidden text-ellipsis whitespace-nowrap"
-      color="text.secondary"
-      variant="caption"
-    >
-      {COURSE_USER_ROLES[props.from.courseUserRole!]}
-    </Typography>
-  </>
-);
+): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Typography
+        className="overflow-hidden text-ellipsis whitespace-nowrap"
+        variant="body2"
+      >
+        {props.from.courseUserName}
+      </Typography>
+
+      {props.from.courseUserRole && (
+        <Typography
+          className="overflow-hidden text-ellipsis whitespace-nowrap"
+          color="text.secondary"
+          variant="caption"
+        >
+          {t(roleTranslations[props.from.courseUserRole])}
+        </Typography>
+      )}
+    </>
+  );
+};
 
 const SimpleCourseUserItemContent = (
   props: CourseUserItemProps,

client/app/bundles/course/enrol-requests/components/buttons/PendingEnrolRequestsButtons.tsx

@@ -1,17 +1,18 @@
 import { FC, memo, useState } from 'react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { defineMessages } from 'react-intl';
 import equal from 'fast-deep-equal';
 import { EnrolRequestRowData } from 'types/course/enrolRequests';
 
 import AcceptButton from 'lib/components/core/buttons/AcceptButton';
 import DeleteButton from 'lib/components/core/buttons/DeleteButton';
-import { COURSE_USER_ROLES } from 'lib/constants/sharedConstants';
 import { useAppDispatch } from 'lib/hooks/store';
 import toast from 'lib/hooks/toast';
+import useTranslation from 'lib/hooks/useTranslation';
+import roleTranslations from 'lib/translations/course/users/roles';
 
 import { approveEnrolRequest, rejectEnrolRequest } from '../../operations';
 
-interface Props extends WrappedComponentProps {
+interface Props {
   enrolRequest: EnrolRequestRowData;
 }
 const styles = {
@@ -53,7 +54,8 @@ const translations = defineMessages({
 });
 
 const PendingEnrolRequestsButtons: FC<Props> = (props) => {
-  const { intl, enrolRequest } = props;
+  const { enrolRequest } = props;
+  const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const [isApproving, setIsApproving] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
@@ -63,7 +65,7 @@ const PendingEnrolRequestsButtons: FC<Props> = (props) => {
     return dispatch(approveEnrolRequest(enrolRequest))
       .then(() => {
         toast.success(
-          intl.formatMessage(translations.approveSuccess, {
+          t(translations.approveSuccess, {
             name: enrolRequest.name,
           }),
         );
@@ -73,7 +75,7 @@ const PendingEnrolRequestsButtons: FC<Props> = (props) => {
           ? error.response.data.errors
           : '';
         toast.error(
-          intl.formatMessage(translations.approveFailure, {
+          t(translations.approveFailure, {
             error: errorMessage,
           }),
         );
@@ -86,7 +88,7 @@ const PendingEnrolRequestsButtons: FC<Props> = (props) => {
     return dispatch(rejectEnrolRequest(enrolRequest.id))
       .then(() => {
         toast.success(
-          intl.formatMessage(translations.rejectSuccess, {
+          t(translations.rejectSuccess, {
             name: enrolRequest.name,
           }),
         );
@@ -96,7 +98,7 @@ const PendingEnrolRequestsButtons: FC<Props> = (props) => {
           ? error.response.data.errors
           : '';
         toast.error(
-          intl.formatMessage(translations.rejectFailure, {
+          t(translations.rejectFailure, {
             error: errorMessage,
           }),
         );
@@ -111,28 +113,25 @@ const PendingEnrolRequestsButtons: FC<Props> = (props) => {
         disabled={isApproving || isDeleting}
         onClick={onApprove}
         sx={styles.buttonStyle}
-        tooltip={intl.formatMessage(translations.approveTooltip)}
+        tooltip={t(translations.approveTooltip)}
       />
       <DeleteButton
         className={`enrol-request-reject-${enrolRequest.id}`}
-        confirmMessage={intl.formatMessage(translations.rejectConfirm, {
-          role: COURSE_USER_ROLES[enrolRequest.role!],
+        confirmMessage={t(translations.rejectConfirm, {
+          role: t(roleTranslations[enrolRequest.role!]),
           name: enrolRequest.name,
           email: enrolRequest.email,
         })}
         disabled={isApproving || isDeleting}
         loading={isDeleting}
         onClick={onDelete}
         sx={styles.buttonStyle}
-        tooltip={intl.formatMessage(translations.rejectTooltip)}
+        tooltip={t(translations.rejectTooltip)}
       />
     </div>
   );
 };
 
-export default memo(
-  injectIntl(PendingEnrolRequestsButtons),
-  (prevProps, nextProps) => {
-    return equal(prevProps.enrolRequest, nextProps.enrolRequest);
-  },
-);
+export default memo(PendingEnrolRequestsButtons, (prevProps, nextProps) => {
+  return equal(prevProps.enrolRequest, nextProps.enrolRequest);
+});