Fix active students block with no active cooperations (#2578)

* Fix active students block with no active cooperations

* Increase coverage

* Fix icon

src/components/active-students/ActiveStudentsBlock.styles.ts

@@ -15,6 +15,16 @@ export const styles = {
     mt: '34px',
     p: '20px'
   },
+  noStudentsWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: { md: '70px', xs: '30px' },
+    flexWrap: 'wrap',
+    mt: '34px',
+    p: '20px'
+  },
   showMoreWrapper: {
     width: { xs: '180px', md: 'auto' },
     cursor: 'pointer',

src/components/active-students/ActiveStudentsBlock.tsx

@@ -9,7 +9,7 @@ import Loader from '../loader/Loader'
 import { Cooperation, ItemsWithCount } from '~/types'
 import ActiveStudent from './ActiveStudent'
 import AppIconButton from '../app-icon-button/AppIconButton'
-import { MoreHoriz } from '@mui/icons-material'
+import { Add, MoreHoriz } from '@mui/icons-material'
 import { styles } from './ActiveStudentsBlock.styles'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
@@ -29,7 +29,37 @@ const ActiveStudentsBlock = () => {
   })
 
   if (loading) return <Loader pageLoad size={50} />
-  if (error || !response.items.length) return null
+  if (error) return null
+
+  const onShowMoreClick = () => {
+    navigate('/my-cooperations')
+  }
+
+  const onAddStudentClick = () => {
+    navigate('/categories/subjects/find-offers')
+  }
+
+  if (!response.items.length)
+    return (
+      <>
+        <Typography sx={styles.title}>{t('activeStudents.title')}</Typography>
+        <Box sx={styles.noStudentsWrapper}>
+          <Typography sx={styles.title}>
+            {t('activeStudents.noStudentsYet')}
+          </Typography>
+          <Box
+            data-testid='addStudent'
+            onClick={onAddStudentClick}
+            sx={styles.showMoreWrapper}
+          >
+            <AppIconButton size='medium' sx={styles.showMoreButton}>
+              <Add />
+            </AppIconButton>
+            <Typography>{t('activeStudents.addStudent')}</Typography>
+          </Box>
+        </Box>
+      </>
+    )
 
   const activeStudents = response.items.map((cooperation) => (
     <ActiveStudent
@@ -42,10 +72,6 @@ const ActiveStudentsBlock = () => {
     />
   ))
 
-  const onShowMoreClick = () => {
-    navigate('/my-cooperations')
-  }
-
   return (
     <>
       <Typography sx={styles.title}>{t('activeStudents.title')}</Typography>

src/constants/translations/en/active-students.json

@@ -1,4 +1,6 @@
 {
   "title": "Your Students",
-  "showMore": "show more"
+  "showMore": "show more",
+  "addStudent": "add student",
+  "noStudentsYet": "You don't have any students yet"
 }

src/constants/translations/uk/active-students.json

@@ -1,4 +1,6 @@
 {
   "title": "Ваші студенти",
-  "showMore": "показати більше"
+  "showMore": "показати більше",
+  "addStudent": "додати студента",
+  "noStudentsYet": "У вас ще немає студентів"
 }

tests/unit/components/active-students/ActiveStudentsBlock.spec.jsx

@@ -82,6 +82,21 @@ const noCooperationsMock = {
   error: null,
   fetchData: vi.fn()
 }
+
+const errorCooperationsMock = {
+  loading: false,
+  response: {
+    items: [],
+    count: 0
+  },
+  error: {
+    code: 'not found',
+    message: 'cooperation not found',
+    status: '404'
+  },
+  fetchData: vi.fn()
+}
+
 describe('ActiveStudentsBlock', () => {
   useAxios.mockImplementation(() => mockedData)
 
@@ -115,9 +130,26 @@ describe('ActiveStudentsBlock', () => {
     expect(screen.getByTestId('loader')).toBeInTheDocument()
   })
 
-  it('should not render when no active cooperations available', () => {
+  it('should render add student button when no active cooperations available', () => {
     useAxios.mockImplementation(() => noCooperationsMock)
     renderWithProviders(<ActiveStudentsBlock />)
+    const addStudent = screen.getByTestId('addStudent')
+    expect(addStudent).toBeInTheDocument()
+  })
+
+  it('should navigate to /categories/subjects/find-offers on add student button click', () => {
+    useAxios.mockImplementation(() => noCooperationsMock)
+    renderWithProviders(<ActiveStudentsBlock />)
+
+    const showMoreButton = screen.getByTestId('addStudent')
+    fireEvent.click(showMoreButton)
+
+    waitFor(() => expect(navigateMock).toHaveBeenCalled())
+  })
+
+  it('should not render on error', () => {
+    useAxios.mockImplementation(() => errorCooperationsMock)
+    renderWithProviders(<ActiveStudentsBlock />)
 
     expect(screen.queryByText('activeStudents.title')).not.toBeInTheDocument()
   })