added translation for dropdowns and for professional category card

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"
 }

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
   }
 }
 

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
   }
 }
 

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<SubjectInterface>
@@ -51,10 +53,41 @@ function SubjectGroup({
 }: Readonly<SubjectGroupProps>) {
   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<SubjectInterface>) => {
     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<AddProfessionalCategoryModalProps> = ({
 
   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<AddProfessionalCategoryModalProps> = ({
     )
     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<CategoryNameInterface[]>
+    }
+  }
   const SubjectsGroup = data.subjects.map((subject, index) => (
     <SubjectGroup
       disableOptions={data.subjects as Array<Partial<SubjectInterface>>}
@@ -239,9 +303,9 @@ const AddProfessionalCategoryModal: FC<AddProfessionalCategoryModalProps> = ({
           disabled={isDeletionBlocked}
           fullWidth
           getOptionDisabled={handleBlockOption}
-          labelField='name'
+          labelField='displayName'
           onChange={handleMainStudyCategoryChange}
-          service={categoryService.getCategoriesNames}
+          service={fetchTranslatedCategories}
           textFieldProps={{
             label: `${t(
               'editProfilePage.profile.professionalTab.mainStudyCategory'

src/containers/edit-profile/professional-info-tab/professional-category/ProfessionalCategory.tsx

@@ -86,7 +86,7 @@ const ProfessionalCategory: FC<ProfessionalCategoryProps> = ({
       labelSx={styles.subjectChipLabel(categoryColor)}
       sx={styles.subjectChip(categoryColor)}
     >
-      {subject.name}
+      {t(`subjects.${subject.name}`, { defaultValue: subject.name })}
     </AppChip>
   ))
 
@@ -130,7 +130,9 @@ const ProfessionalCategory: FC<ProfessionalCategoryProps> = ({
           label={t('editProfilePage.profile.professionalTab.mainStudyCategory')}
         >
           <CategoryIcon sx={styles.categoryIcon(categoryColor)} />
-          {item.category.name}
+          {t(`categories.${item.category.name}`, {
+            defaultValue: item.category.name
+          })}
         </DescriptionItem>
         <DescriptionItem
           label={t('editProfilePage.profile.professionalTab.subject')}

src/types/common/interfaces/common.interfaces.ts

@@ -45,6 +45,7 @@ export interface CategoryInterface {
 export interface CategoryNameInterface {
   _id: string
   name: string
+  displayName?: string
 }
 
 export interface SubjectInterface {
@@ -54,6 +55,7 @@ export interface SubjectInterface {
   totalOffers: DataByRole<number>
   createdAt: string
   updatedAt: string
+  displayName?: string
 }
 
 export interface SubjectNameInterface {