Fix sonar issues in pages, containers, components folders

src/components/accordion-with-image/AccordionWithImage.tsx

@@ -21,7 +21,7 @@ const AccordionWithImage: FC<AccordionWithImageProps> = ({ items }) => {
     <Box className='section' data-testid='accordion' sx={styles.feature}>
       <Box
         component='img'
-        src={items[expandedItem || 0].image}
+        src={items[expandedItem ?? 0].image}
         sx={styles.image}
       />
       <Accordions

src/components/async-autocomlete/AsyncAutocomplete.tsx

@@ -65,7 +65,7 @@ const AsyncAutocomplete = <
     () =>
       response.find(
         (option) => (valueField ? option[valueField] : option) === value
-      ) || null,
+      ) ?? null,
     [response, value, valueField]
   )
 

src/components/message/Message.styles.ts

@@ -24,11 +24,16 @@ export const styles = {
     typography: TypographyVariantEnum.Body1,
     p: '8px 16px'
   }),
-  findMessageCard: (isMyMessage: boolean, isFiltered: boolean) => ({
-    backgroundColor: isFiltered
-      ? `basic.${isMyMessage ? 'turquoiseDark' : 'turquoiseChat'}`
-      : `primary.${isMyMessage ? 500 : 100}`
-  }),
+  findMessageCard: (isMyMessage: boolean, isFiltered: boolean) => {
+    const basicShade = isMyMessage ? 'turquoiseDark' : 'turquoiseChat'
+    const primaryShade = isMyMessage ? 500 : 100
+
+    const backgroundColor = isFiltered
+      ? `basic.${basicShade}`
+      : `primary.${primaryShade}`
+
+    return { backgroundColor }
+  },
   date: (isMyMessage: boolean) => ({
     typography: TypographyVariantEnum.Caption,
     color: `primary.${isMyMessage ? 100 : 500}`,

src/containers/chat/chat-item/ChatItem.tsx

@@ -63,7 +63,7 @@ const ChatItem: FC<ItemOfChatProps> = ({
 
   const handleSelectedChat = () => {
     setSelectedChat(chat)
-    closeDrawer && closeDrawer()
+    closeDrawer?.()
   }
 
   const formattedTime =

src/containers/find-offer/offer-filter-block/offer-filter-list/OfferFilterList.tsx

@@ -60,12 +60,14 @@ const OfferFilterList: FC<OfferFilterListProps> = ({
   const handleFilterChange = (key: keyof FindOffersFilters) => () =>
     updateFilterByKey(key)
 
+  const getOptionLabelForLanguage = (option: LanguageFilter | null): string => {
+    return option?.trim() ? option : t('common.languages.allLanguages')
+  }
+
   const languagesFilter = (
     <Box>
       <AppAutoComplete
-        getOptionLabel={(option: LanguageFilter) =>
-          option || t('common.languages.allLanguages')
-        }
+        getOptionLabel={getOptionLabelForLanguage}
         onChange={handleLanguagesChange}
         options={languageValues}
         value={filters.language}

src/containers/my-cooperations/my-cooperations-details/MyCooperationsDetails.tsx

@@ -119,14 +119,12 @@ const MyCooperationsDetails = () => {
       updateInfo: updateInfo
     })
 
-  const languages =
-    offer.languages &&
-    offer.languages.map((item: string) => (
-      <Box key={item} sx={style.languageItem}>
-        <DoneIcon color='success' />
-        <Typography>{item}</Typography>
-      </Box>
-    ))
+  const languages = offer.languages?.map((item: string) => (
+    <Box key={item} sx={style.languageItem}>
+      <DoneIcon color='success' />
+      <Typography>{item}</Typography>
+    </Box>
+  ))
 
   const avatarSrc =
     displayedUser.photo &&

src/containers/my-resources/add-categories-modal/AddCategoriesModal.constants.ts

@@ -13,7 +13,7 @@ export const validations = (disallowedValues: string[]) => ({
   name: (value: string) => {
     const trimmedValue = value.trim()
     return (
-      emptyField({ value, helperText: textField(2, 35)(trimmedValue) }) ||
+      emptyField({ value, helperText: textField(2, 35)(trimmedValue) }) ??
       valueNotIn(trimmedValue, disallowedValues)
     )
   }

src/containers/my-resources/categories-container/CategoriesContainer.constansts.tsx

@@ -10,7 +10,7 @@ import { emptyField, textField } from '~/utils/validations/common'
 export const validation = (disallowedValues: string[]) => (value: string) => {
   const trimmedValue = value.trim()
   return Boolean(
-    emptyField({ value, helperText: textField(2, 35)(trimmedValue) }) ||
+    emptyField({ value, helperText: textField(2, 35)(trimmedValue) }) ??
       disallowedValues.includes(trimmedValue)
   )
 }

src/containers/my-resources/lessons-container/LessonsContainer.tsx

@@ -80,7 +80,7 @@ const LessonsContainer = () => {
   )
 
   const deleteLesson = useCallback(
-    (id?: string) => ResourceService.deleteLesson(id || ''),
+    (id?: string) => ResourceService.deleteLesson(id ?? ''),
     []
   )
 

src/containers/quiz/question-answer/Answer.tsx

@@ -66,7 +66,7 @@ const Answer: FC<AnswerProps> = ({
     _,
     checked
   ) => {
-    onCheckboxChange && onCheckboxChange(checked)
+    onCheckboxChange?.(checked)
   }
 
   const iconStyles = styles.icon(answerStatus)

src/containers/student-home-page/student-how-it-works/HowItWorksCards.js

@@ -5,21 +5,25 @@ import howItWorksStudentFourth from '~/assets/img/guest-home-page/howItWorksStud
 
 export const howItWorksCards = [
   {
+    id: 1,
     image: howItWorksStudentSecond,
     title: 'studentHomePage.howItWorks.selectATutor.title',
     description: 'studentHomePage.howItWorks.selectATutor.description'
   },
   {
+    id: 2,
     image: howItWorksStudentThird,
     title: 'studentHomePage.howItWorks.sendRequest.title',
     description: 'studentHomePage.howItWorks.sendRequest.description'
   },
   {
+    id: 3,
     image: howItWorksStudentFourth,
     title: 'studentHomePage.howItWorks.startLearning.title',
     description: 'studentHomePage.howItWorks.startLearning.description'
   },
   {
+    id: 4,
     image: howItWorksStudentFirst,
     title: 'studentHomePage.howItWorks.writeFeedback.title',
     description: 'studentHomePage.howItWorks.writeFeedback.description'

src/containers/student-home-page/student-how-it-works/StudentHowItWorks.jsx

@@ -18,9 +18,9 @@ const StudentHowItWorks = () => {
 
   const { path } = authRoutes.findOffers
 
-  const cards = howItWorksCards.map((item, index) => {
+  const cards = howItWorksCards.map((item) => {
     return (
-      <Box key={index} sx={styles.cardWrapper}>
+      <Box key={item.id} sx={styles.cardWrapper}>
         <Box
           alt={item.title}
           component='img'

src/pages/cookie-policy/CookiePolicy.jsx

@@ -11,9 +11,9 @@ import { styles } from './CookiePolicy.styles'
 const CookiePolicy = () => {
   const { t } = useTranslation()
 
-  const cookieItems = cookieItemsData.map((item, index) => {
+  const cookieItems = cookieItemsData.map((item) => {
     return (
-      <Box key={index} sx={styles.wrapper}>
+      <Box key={item.id} sx={styles.wrapper}>
         <Typography sx={styles.title}>{t(item.title)}</Typography>
 
         <Typography sx={item.subtitle && styles.subtitle}>

src/pages/cookie-policy/cookie-policy.constants.js

@@ -1,35 +1,43 @@
 export const cookieItemsData = [
   {
+    id: 1,
     title: 'cookiePolicyPage.whatAreCookies.title',
     description: 'cookiePolicyPage.whatAreCookies.description'
   },
   {
+    id: 2,
     title: 'cookiePolicyPage.howWeUseCookies.title',
     description: 'cookiePolicyPage.howWeUseCookies.description'
   },
   {
+    id: 3,
     title: 'cookiePolicyPage.disablingCookies.title',
     description: 'cookiePolicyPage.disablingCookies.description'
   },
   {
+    id: 4,
     title: 'cookiePolicyPage.theCookiesWeSet.title',
     subtitle: 'cookiePolicyPage.theCookiesWeSet.account.title',
     description: 'cookiePolicyPage.theCookiesWeSet.account.description'
   },
   {
+    id: 5,
     subtitle: 'cookiePolicyPage.theCookiesWeSet.login.title',
     description: 'cookiePolicyPage.theCookiesWeSet.login.description'
   },
   {
+    id: 6,
     subtitle: 'cookiePolicyPage.theCookiesWeSet.site.title',
     description: 'cookiePolicyPage.theCookiesWeSet.site.description'
   },
   {
+    id: 7,
     title: 'cookiePolicyPage.thirdPartyCookies.title',
     subtitle: 'cookiePolicyPage.thirdPartyCookies.subtitle',
     description: 'cookiePolicyPage.thirdPartyCookies.description'
   },
   {
+    id: 8,
     title: 'cookiePolicyPage.moreInformation.title',
     subtitle: 'cookiePolicyPage.moreInformation.subtitle'
   }

src/pages/find-offers/FindOffers.tsx

@@ -144,6 +144,29 @@ const FindOffers = () => {
     })
   }
 
+  const offersContent = useMemo(() => {
+    if (offersLoading) {
+      return <Loader pageLoad />
+    }
+
+    if (!items.length) {
+      return (
+        <NotFoundResults
+          data
+          description={t('findOffers.notFound.description')}
+        />
+      )
+    }
+
+    return (
+      <OfferContainer
+        offerCards={items}
+        updateOffersInfo={updateInfo}
+        viewMode={cardsView}
+      />
+    )
+  }, [offersLoading, items, updateInfo, cardsView, t])
+
   return (
     <PageWrapper>
       <OfferRequestBlock />
@@ -192,20 +215,7 @@ const FindOffers = () => {
             price={price}
           />
         </AppDrawer>
-        {offersLoading ? (
-          <Loader pageLoad />
-        ) : !items.length && !offersLoading ? (
-          <NotFoundResults
-            data
-            description={t('findOffers.notFound.description')}
-          />
-        ) : (
-          <OfferContainer
-            offerCards={items}
-            updateOffersInfo={updateInfo}
-            viewMode={cardsView}
-          />
-        )}
+        {offersContent}
       </Box>
       <AppPagination
         onChange={handlePageChange}