fix(i18n): add missing translation keys for all locales

[phungmanhcuong]

Summary

This pull request addresses missing translation keys across all supported locales, ensuring consistency and preventing fallback issues.

Changes Made

• Added missing keys to locale files for modules such as course, assessment, and submission.
• Verified alignment between locales to ensure completeness.
• Improved the overall quality and reliability of the internationalization (i18n) setup.

Impact

• Enhances the localization experience for all supported languages.
• Prevents incomplete translations and improves the user experience in non-default locales.

[cysjonathan]

By the way, your current PR state has a broken leaderboard page

[cysjonathan]

import { FC, memo, ReactNode, useMemo, useState } from 'react';
import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
import {
  ArrowDropDown as ArrowDropDownIcon,
  ArrowDropUp as ArrowDropUpIcon,
} from '@mui/icons-material';
import {
  Button,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from '@mui/material';
import equal from 'fast-deep-equal';
import {
  FolderMiniEntity,
  MaterialMiniEntity,
} from 'types/course/material/folders';

import TableContainer from 'lib/components/core/layouts/TableContainer';
import useTranslation, { Descriptor } from 'lib/hooks/useTranslation';

import TableMaterialRow from './TableMaterialRow';
import TableSubfolderRow from './TableSubfolderRow';

interface Props extends WrappedComponentProps {
  currFolderId: number;
  subfolders: FolderMiniEntity[];
  materials: MaterialMiniEntity[];
  isCurrentCourseStudent: boolean;
  isConcrete: boolean;
}

const translations = defineMessages({
  name: {
    id: 'course.material.folders.WorkbinTable.name',
    defaultMessage: 'Name',
  },
  lastModified: {
    id: 'course.material.folders.WorkbinTable.lastModified',
    defaultMessage: 'Last Modified',
  },
  startAt: {
    id: 'course.material.folders.WorkbinTable.startAt',
    defaultMessage: 'Start At',
  },
});

const WorkbinTable: FC<Props> = (props) => {
  const { t } = useTranslation();

  const {
    currFolderId,
    subfolders,
    materials,
    isCurrentCourseStudent,
    isConcrete,
  } = props;

  const [sortBy, setSortBy] = useState<Descriptor>(translations.name);
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');

  const sortedSubfolders = useMemo(() => {
    return subfolders.sort((a, b) => {
      switch (sortBy) {
        case translations.name:
          if (sortDirection === 'asc') {
            return a.name.toUpperCase() > b.name.toUpperCase() ? 1 : -1;
          }
          return a.name.toUpperCase() > b.name.toUpperCase() ? -1 : 1;

        case translations.startAt:
          if (sortDirection === 'asc') {
            return a.startAt > b.startAt ? 1 : -1;
          }
          return a.startAt > b.startAt ? -1 : 1;

        case translations.lastModified:
          if (sortDirection === 'asc') {
            return a.updatedAt > b.updatedAt ? 1 : -1;
          }
          return a.updatedAt > b.updatedAt ? -1 : 1;

        default:
          return 0;
      }
    });
  }, [subfolders, sortBy, sortDirection]);

  const sortedMaterials = useMemo(() => {
    return materials.sort((a, b) => {
      switch (sortBy) {
        case translations.name:
          if (sortDirection === 'asc') {
            return a.name.toUpperCase() > b.name.toUpperCase() ? 1 : -1;
          }
          return a.name.toUpperCase() > b.name.toUpperCase() ? -1 : 1;

        case translations.startAt:
          if (sortDirection === 'asc') {
            return a.updatedAt > b.updatedAt ? 1 : -1;
          }
          return a.updatedAt > b.updatedAt ? -1 : 1;

        default:
          return 0;
      }
    });
  }, [materials, sortBy, sortDirection]);

  const sort = (columnName: Descriptor): void => {
    if (columnName === sortBy) {
      if (sortDirection === 'asc') {
        setSortDirection('desc');
      } else {
        setSortDirection('asc');
      }
    } else {
      setSortBy(columnName);
      setSortDirection('asc');
    }
  };

  const columnHeaderWithSort = (columnName: Descriptor): JSX.Element => {
    let endIcon: ReactNode = null;
    if (sortBy === columnName && sortDirection === 'desc') {
      endIcon = <ArrowDropDownIcon />;
    } else if (sortBy === columnName && sortDirection === 'asc') {
      endIcon = <ArrowDropUpIcon />;
    }

    return (
      <Button
        disableFocusRipple
        disableRipple
        endIcon={endIcon}
        onClick={(): void => {
          sort(columnName);
        }}
        style={{ padding: 0, alignItems: 'center', justifyContent: 'start' }}
      >
        {t(columnName)}
      </Button>
    );
  };

  return (
    <TableContainer dense variant="bare">
      <TableHead>
        <TableRow>
          <TableCell>{columnHeaderWithSort(translations.name)}</TableCell>
          <TableCell>
            {columnHeaderWithSort(translations.lastModified)}
          </TableCell>
          {!isCurrentCourseStudent && (
            <TableCell>{columnHeaderWithSort(translations.startAt)}</TableCell>
          )}
          <TableCell />
        </TableRow>
      </TableHead>
      <TableBody>
        {sortedSubfolders.map((subfolder) => {
          return (
            <TableSubfolderRow
              key={`subfolder-${subfolder.id}`}
              currFolderId={currFolderId}
              isConcrete={isConcrete}
              isCurrentCourseStudent={isCurrentCourseStudent}
              subfolder={subfolder}
            />
          );
        })}
        {sortedMaterials.map((material) => {
          return (
            <TableMaterialRow
              key={`material-${material.id}`}
              currFolderId={currFolderId}
              isConcrete={isConcrete}
              isCurrentCourseStudent={isCurrentCourseStudent}
              material={material}
            />
          );
        })}
      </TableBody>
    </TableContainer>
  );
};

export default memo(injectIntl(WorkbinTable), (prevProps, nextProps) => {
  return equal(prevProps, nextProps);
});

You can do something like this, then you won't need to modify DataTable.jsx.

You may need to allow DataTable.ts label to accept Descriptor type.

[phungmanhcuong]

I have reverted the changes on DataTable.jsx and updated its usage places one step at a time.
However, I found that there is inconsistency in translating messages; some places use formatMessage, while others use useTranslation.

[cysjonathan]

The places which use formatMessage are older code before the useTranslation hook was created, For newer translations, we should use useTranslation where possible.

[cysjonathan]

We have const { t } = useTranslation(); for this?

[cysjonathan]

Use Descriptor type?

[hound]

Colon after property should be followed by one space

[phungmanhcuong]

@cysjonathan the PR has done and please take a look.

[cysjonathan]

Why aren't you using the useTranslation hook?

[cysjonathan]

The places which use formatMessage are older code before the useTranslation hook was created, For newer translations, we should use useTranslation where possible.

[cysjonathan]

Update?

[cysjonathan]

Unused useIntl import?