diff --git a/src/constants/translations/en/categories.json b/src/constants/translations/en/categories.json index b26fb574e..a55758010 100644 --- a/src/constants/translations/en/categories.json +++ b/src/constants/translations/en/categories.json @@ -1,19 +1,19 @@ { - "Computer science": "Computer science", - "Music": "Music", - "Psychology": "Psychology", - "Finances": "Finances", - "Audit": "Audit", - "Astronomy": "Astronomy", - "Biology": "Biology", - "Cooking": "Cooking", - "Languages": "Languages", - "Painting": "Painting", - "Design": "Design", - "Marketing": "Marketing", - "IT": "IT", - "Mathematics": "Mathematics", - "Chemistry": "Chemistry", - "Physics": "Physics", - "History": "History" + "Computer science": "Computer science", + "Music": "Music", + "Psychology": "Psychology", + "Finances": "Finances", + "Audit": "Audit", + "Astronomy": "Astronomy", + "Biology": "Biology", + "Cooking": "Cooking", + "Languages": "Languages", + "Painting": "Painting", + "Design": "Design", + "Marketing": "Marketing", + "IT": "IT", + "Mathematics": "Mathematics", + "Chemistry": "Chemistry", + "Physics": "Physics", + "History": "History" } \ No newline at end of file diff --git a/src/constants/translations/en/index.ts b/src/constants/translations/en/index.ts index 8aa95dbb3..d892ddc1d 100644 --- a/src/constants/translations/en/index.ts +++ b/src/constants/translations/en/index.ts @@ -45,6 +45,8 @@ import editProfilePage from './edit-profile.json' import quiz from './quiz.json' import bookmarkedOffers from './bookmarked-offers-page.json' import activeStudents from './active-students.json' +import categories from './categories.json' +import subjects from './subjects.json' const en = { translations: { @@ -94,7 +96,9 @@ const en = { editProfilePage, quiz, bookmarkedOffers, - activeStudents + activeStudents, + categories, + subjects } } diff --git a/src/constants/translations/uk/index.ts b/src/constants/translations/uk/index.ts index e16fde121..8e69dd88b 100644 --- a/src/constants/translations/uk/index.ts +++ b/src/constants/translations/uk/index.ts @@ -45,6 +45,8 @@ import userProfilePage from './user-profile-page.json' import quiz from './quiz.json' import bookmarkedOffers from './bookmarked-offers-page.json' import activeStudents from './active-students.json' +import categories from './categories.json' +import subjects from './subjects.json' const uk = { translations: { @@ -94,7 +96,9 @@ const uk = { userProfilePage, quiz, bookmarkedOffers, - activeStudents + activeStudents, + categories, + subjects } } diff --git a/src/containers/edit-profile/professional-info-tab/add-professional-category-modal/AddProfessionalCategoryModal.tsx b/src/containers/edit-profile/professional-info-tab/add-professional-category-modal/AddProfessionalCategoryModal.tsx index 18b28e7b4..c65cbb72a 100644 --- a/src/containers/edit-profile/professional-info-tab/add-professional-category-modal/AddProfessionalCategoryModal.tsx +++ b/src/containers/edit-profile/professional-info-tab/add-professional-category-modal/AddProfessionalCategoryModal.tsx @@ -13,6 +13,7 @@ import { CategoryNameInterface, ComponentEnum, MainUserRole, + ServiceFunction, SubjectInterface, UserMainSubject } from '~/types' @@ -33,6 +34,7 @@ import { } from '~/containers/edit-profile/professional-info-tab/add-professional-category-modal/AddProfessionalCategoryModal.constants' import { styles } from '~/containers/edit-profile/professional-info-tab/add-professional-category-modal/AddProfessionalCategoryModal.styles' +import { AxiosHeaders, AxiosResponse, InternalAxiosRequestConfig } from 'axios' interface SubjectGroupProps { subject: Partial @@ -51,10 +53,41 @@ function SubjectGroup({ }: Readonly) { const { t } = useTranslation() - const getSubjectsNames = useCallback( - () => subjectService.getSubjectsNames(selectedCategory), - [selectedCategory] - ) + const getSubjectsNames = useCallback(async () => { + try { + const response = await subjectService.getSubjectsNames(selectedCategory) + const translatedSubjects = response.data.map((subject) => ({ + ...subject, + displayName: t(`subjects.${subject.name}`, { + defaultValue: subject.name + }) + })) + return { + data: translatedSubjects, + status: 200, + statusText: 'OK', + headers: {}, + config: { + headers: new AxiosHeaders(), + method: 'GET', + url: '' + } as InternalAxiosRequestConfig + } as AxiosResponse<{ name: string; _id: string }[]> + } catch (error) { + console.error('Error fetching subjects:', error) + return { + data: [], + status: 500, + statusText: 'Error', + headers: {}, + config: { + headers: new AxiosHeaders(), + method: 'GET', + url: '' + } as InternalAxiosRequestConfig + } as AxiosResponse<{ name: string; _id: string }[]> + } + }, [selectedCategory, t]) const handleDisableOptions = (option: Partial) => { return disableOptions.some((subject) => subject._id === option._id) @@ -75,7 +108,7 @@ function SubjectGroup({ disabled={!selectedCategory} fullWidth getOptionDisabled={handleDisableOptions} - labelField='name' + labelField='displayName' onChange={(_, value) => handleChange(value!)} service={getSubjectsNames} textFieldProps={{ @@ -112,36 +145,38 @@ const AddProfessionalCategoryModal: FC = ({ const formSubmission = () => { const userRoleCategory = userRole as MainUserRole - const { category } = data - - // TODO: icon should be displayed accordingly to category + const { category, subjects } = data if (category.appearance === undefined) { category.appearance = { color: '#E3B21C', icon: 'ScienceRoundedIcon' } } - + const sanitizedCategory = { + ...category, + name: t(`categories.${category.name}`, { + lng: 'en', + defaultValue: category.name + }) + } + const sanitizedSubjects = subjects.map((subject) => ({ + ...subject, + name: t(`subjects.${subject.name}`, { + lng: 'en', + defaultValue: subject.name + }) + })) + const categoryData: UserMainSubject = { + ...data, + category: sanitizedCategory, + subjects: sanitizedSubjects, + _id: isEdit ? (initialValuesFromProps?._id ?? '') : uuidv4(), + isDeletionBlocked + } if (isEdit) { - const categoryToUpdate: UserMainSubject = { - _id: initialValuesFromProps?._id ?? '', - isDeletionBlocked, - ...data - } dispatch( - updateCategory({ - category: categoryToUpdate, - userRole: userRoleCategory - }) + updateCategory({ category: categoryData, userRole: userRoleCategory }) ) } else { - const categoryToAdd: UserMainSubject = { - _id: uuidv4(), - isDeletionBlocked, - ...data - } dispatch( - addCategory({ - category: categoryToAdd, - userRole: userRoleCategory - }) + addCategory({ category: categoryData, userRole: userRoleCategory }) ) } closeModal() @@ -208,7 +243,36 @@ const AddProfessionalCategoryModal: FC = ({ ) return isBlocked && isCurrent } - + const fetchTranslatedCategories: ServiceFunction< + CategoryNameInterface[] + > = async () => { + try { + const response = await categoryService.getCategoriesNames() + const translatedCategories = response.data.map((category) => ({ + ...category, + displayName: t(`categories.${category.name}`, { + defaultValue: category.name + }) + })) + return { + ...response, + data: translatedCategories + } + } catch (error) { + console.error('Error fetching categories:', error) + return { + data: [], + status: 500, + statusText: 'Error', + headers: {}, + config: { + headers: new AxiosHeaders(), + method: 'GET', + url: '' + } + } as AxiosResponse + } + } const SubjectsGroup = data.subjects.map((subject, index) => ( >} @@ -239,9 +303,9 @@ const AddProfessionalCategoryModal: FC = ({ disabled={isDeletionBlocked} fullWidth getOptionDisabled={handleBlockOption} - labelField='name' + labelField='displayName' onChange={handleMainStudyCategoryChange} - service={categoryService.getCategoriesNames} + service={fetchTranslatedCategories} textFieldProps={{ label: `${t( 'editProfilePage.profile.professionalTab.mainStudyCategory' diff --git a/src/containers/edit-profile/professional-info-tab/professional-category/ProfessionalCategory.tsx b/src/containers/edit-profile/professional-info-tab/professional-category/ProfessionalCategory.tsx index 62f418420..a579c1bed 100644 --- a/src/containers/edit-profile/professional-info-tab/professional-category/ProfessionalCategory.tsx +++ b/src/containers/edit-profile/professional-info-tab/professional-category/ProfessionalCategory.tsx @@ -86,7 +86,7 @@ const ProfessionalCategory: FC = ({ labelSx={styles.subjectChipLabel(categoryColor)} sx={styles.subjectChip(categoryColor)} > - {subject.name} + {t(`subjects.${subject.name}`, { defaultValue: subject.name })} )) @@ -130,7 +130,9 @@ const ProfessionalCategory: FC = ({ label={t('editProfilePage.profile.professionalTab.mainStudyCategory')} > - {item.category.name} + {t(`categories.${item.category.name}`, { + defaultValue: item.category.name + })} createdAt: string updatedAt: string + displayName?: string } export interface SubjectNameInterface {