From 321a0653e852d080d48355efc3f06ef43d260874 Mon Sep 17 00:00:00 2001
From: PavloDolia <123400767+PavloDolia@users.noreply.github.com>
Date: Fri, 2 Aug 2024 13:37:53 +0300
Subject: [PATCH] Rewrote SubjectsStep to tsx format (#2233)

* Rewrote SubjectsStep to tsx format

* fix sonar issue

* fix sonar issue 2
---
 ...sStep.styles.js => SubjectsStep.styles.ts} |  0
 .../{SubjectsStep.jsx => SubjectsStep.tsx}    | 47 +++++++++++++------
 .../{constants.js => constants.ts}            |  0
 .../common/interfaces/common.interfaces.ts    |  2 +-
 4 files changed, 33 insertions(+), 16 deletions(-)
 rename src/containers/tutor-home-page/subjects-step/{SubjectsStep.styles.js => SubjectsStep.styles.ts} (100%)
 rename src/containers/tutor-home-page/subjects-step/{SubjectsStep.jsx => SubjectsStep.tsx} (80%)
 rename src/containers/tutor-home-page/subjects-step/{constants.js => constants.ts} (100%)

diff --git a/src/containers/tutor-home-page/subjects-step/SubjectsStep.styles.js b/src/containers/tutor-home-page/subjects-step/SubjectsStep.styles.ts
similarity index 100%
rename from src/containers/tutor-home-page/subjects-step/SubjectsStep.styles.js
rename to src/containers/tutor-home-page/subjects-step/SubjectsStep.styles.ts
diff --git a/src/containers/tutor-home-page/subjects-step/SubjectsStep.jsx b/src/containers/tutor-home-page/subjects-step/SubjectsStep.tsx
similarity index 80%
rename from src/containers/tutor-home-page/subjects-step/SubjectsStep.jsx
rename to src/containers/tutor-home-page/subjects-step/SubjectsStep.tsx
index 6c20cb24c..61dc0440c 100644
--- a/src/containers/tutor-home-page/subjects-step/SubjectsStep.jsx
+++ b/src/containers/tutor-home-page/subjects-step/SubjectsStep.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react'
+import { useState, useCallback, SyntheticEvent } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import Box from '@mui/material/Box'
@@ -16,25 +16,35 @@ import img from '~/assets/img/tutor-home-page/become-tutor/study-category.svg'
 import { useStepContext } from '~/context/step-context'
 import { categoryService } from '~/services/category-service'
 import { subjectService } from '~/services/subject-service'
+import { CategoryNameInterface, SubjectNameInterface } from '~/types'
 
-const SubjectsStep = ({ btnsBox }) => {
+interface SubjectsStepProps {
+  btnsBox: JSX.Element
+}
+
+interface SubjectsType {
+  category: CategoryNameInterface | null
+  subject: SubjectNameInterface | null
+}
+
+const SubjectsStep = ({ btnsBox }: SubjectsStepProps) => {
   const { t } = useTranslation()
   const { isLaptopAndAbove, isMobile } = useBreakpoints()
   const { stepData, handleSubjects } = useStepContext()
   const subjectData = stepData.subjects
 
-  const [subjects, setSubjects] = useState({
+  const [subjects, setSubjects] = useState<SubjectsType>({
     category: null,
     subject: null
   })
 
   const [subjectError, setSubjectError] = useState('')
-  const [subjectFetched, setSubjectIsFetched] = useState(false)
+  const [subjectIsFetched, setSubjectIsFetched] = useState(false)
 
   const fetchSubjectHandler = () => setSubjectIsFetched(true)
 
   const getSubjectsNames = useCallback(
-    () => subjectService.getSubjectsNames(subjects.category._id),
+    () => subjectService.getSubjectsNames(subjects.category?._id ?? null),
     [subjects.category]
   )
 
@@ -44,18 +54,25 @@ const SubjectsStep = ({ btnsBox }) => {
     </Box>
   )
 
-  const onChangeCategory = (_, value) => {
-    setSubjects(
-      (prev) =>
-        prev.category?._id !== value?._id && {
-          category: value,
-          subject: null
-        }
+  const onChangeCategory = (
+    _: SyntheticEvent,
+    value: CategoryNameInterface | null
+  ) => {
+    setSubjects((prev) =>
+      prev.category?._id !== value?._id
+        ? {
+            category: value,
+            subject: null
+          }
+        : prev
     )
     setSubjectIsFetched(false)
   }
 
-  const onChangeSubject = (_, value) => {
+  const onChangeSubject = (
+    _: SyntheticEvent,
+    value: SubjectNameInterface | null
+  ) => {
     setSubjects((prev) => ({ category: prev.category, subject: value }))
     subjectError && setSubjectError('')
   }
@@ -89,7 +106,7 @@ const SubjectsStep = ({ btnsBox }) => {
       })
   }
 
-  const handleChipDelete = (item) => {
+  const handleChipDelete = (item: string) => {
     const newItems = subjectData.filter(({ name }) => name !== item)
     handleSubjects(newItems)
   }
@@ -117,7 +134,7 @@ const SubjectsStep = ({ btnsBox }) => {
           <AsyncAutocomplete
             axiosProps={{ onResponse: fetchSubjectHandler }}
             disabled={!subjects.category}
-            fetchCondition={!subjectFetched}
+            fetchCondition={!subjectIsFetched}
             fetchOnFocus
             labelField='name'
             onChange={onChangeSubject}
diff --git a/src/containers/tutor-home-page/subjects-step/constants.js b/src/containers/tutor-home-page/subjects-step/constants.ts
similarity index 100%
rename from src/containers/tutor-home-page/subjects-step/constants.js
rename to src/containers/tutor-home-page/subjects-step/constants.ts
diff --git a/src/types/common/interfaces/common.interfaces.ts b/src/types/common/interfaces/common.interfaces.ts
index cd47dd90f..8552be23e 100644
--- a/src/types/common/interfaces/common.interfaces.ts
+++ b/src/types/common/interfaces/common.interfaces.ts
@@ -119,7 +119,7 @@ export interface StepData {
     errors: Record<string, string>
   }
   photo: string[]
-  subjects: SubjectInterface[]
+  subjects: Array<SubjectNameInterface & { category: CategoryNameInterface }>
   language: UserResponse['nativeLanguage']
 }