mister-webdev / movie-app

src/feature/pagination/Pagination.tsx

import { FC } from 'react'

import { useStore } from 'effector-react'

import { useQueryClient } from 'react-query'

import { prevPage, nextPage, setPage, $page, $isAscending } from './model'

import { usePagination, DOTS } from './usePagination'

import { useCustomEventDetail } from 'shared/hooks/useCustomEventDetail'

import { fetchMoviesList } from 'entities/MoviesCardsGrid/model'

import { Text } from 'shared/ui'


import { IPagination } from './types'


import clsx from 'clsx'

import styles from './Pagination.module.scss'


const Pagination: FC<IPagination> = ({ siblingCount = 1 }) => {

Function component is not a function declaration

  const isAscending = useStore($isAscending)

  const currentPage = useStore($page)


  const totalPages = useCustomEventDetail('gotTotalPages')


  const queryClient = useQueryClient()


  const prefetchPage = async (pageParam: number) => {

    await queryClient.prefetchQuery(['moviesList', pageParam], () =>

      fetchMoviesList(pageParam),

    )

  }


  const paginationRange = usePagination({

    currentPage,

    totalPages,

    siblingCount,

  }) as number[]


  if (currentPage === 0 || paginationRange?.length < 2) {

    return null

  }


  return (

    <div className={styles.paginationWrapper}>

Expected indentation of 6 space characters but found 4.

JSX not allowed in files with extension '.tsx'

      <ul className={styles.pagination}>

Expected indentation of 8 space characters but found 6.

        <li

Visible, non-interactive elements with click handlers must have at least one keyboard listener.

Non-interactive elements should not be assigned mouse or keyboard event listeners.

Expected indentation of 10 space characters but found 8.

          className={clsx(styles.paginationItem, {

Expected indentation of 12 space characters but found 10.

            [styles['disabled']]: currentPage === 1,

          })}

          onClick={() => prevPage()}

Expected indentation of 12 space characters but found 10.

JSX props should not use arrow functions

JSX attribute values should not contain functions created in the same scope

          onMouseEnter={() => prefetchPage(currentPage - 1)}

Expected indentation of 12 space characters but found 10.

JSX props should not use arrow functions

JSX attribute values should not contain functions created in the same scope

          onMouseDownCapture={() => prefetchPage(currentPage - 1)}

Expected indentation of 12 space characters but found 10.

Props should be sorted alphabetically

JSX props should not use arrow functions

JSX attribute values should not contain functions created in the same scope

        >

          <span className={styles.arrow}>&#10094;</span>

Expected indentation of 12 space characters but found 10.

❮ must be placed on a new line

        </li>

        {paginationRange?.map((pageNumber: number, idx) => {

Expected indentation of 10 space characters but found 8.

JSX element should start in a new line

          if (pageNumber === DOTS) {

            return (

              <li

Expected indentation of 16 space characters but found 14.

                key={`pagination-${idx}`}

Expected indentation of 18 space characters but found 16.

Do not use Array index in keys

                className={clsx(styles.paginationItem, styles.dots)}

Expected indentation of 18 space characters but found 16.

Props should be sorted alphabetically

              >

Expected indentation of 18 space characters but found 16.

                ...

              </li>

            )

          }


          return (

            <li

Visible, non-interactive elements with click handlers must have at least one keyboard listener.

Non-interactive elements should not be assigned mouse or keyboard event listeners.

Expected indentation of 14 space characters but found 12.

              key={`pagination-${idx}`}

Expected indentation of 16 space characters but found 14.

Do not use Array index in keys

              className={clsx(styles.paginationItem, {

Expected indentation of 16 space characters but found 14.

Props should be sorted alphabetically

                [styles['paginationForward']]:

                  pageNumber > 1 && pageNumber < totalPages && isAscending,

                [styles['paginationBackward']]:

                  pageNumber > 1 && pageNumber < totalPages && !isAscending,

                [styles['selected']]: pageNumber === currentPage,

              })}

              onClick={() => setPage(pageNumber)}

Expected indentation of 16 space characters but found 14.

JSX props should not use arrow functions

JSX attribute values should not contain functions created in the same scope

              onMouseEnter={() => prefetchPage(pageNumber)}

Expected indentation of 16 space characters but found 14.

JSX props should not use arrow functions

JSX attribute values should not contain functions created in the same scope

            >

              <Text tag="span">{pageNumber}</Text>

Expected indentation of 16 space characters but found 14.

{pageNumber} must be placed on a new line

            </li>

          )

        })}

        <li

Visible, non-interactive elements with click handlers must have at least one keyboard listener.

Non-interactive elements should not be assigned mouse or keyboard event listeners.

Expected indentation of 10 space characters but found 8.

JSX element should start in a new line

          className={clsx(styles.paginationItem, {

Expected indentation of 12 space characters but found 10.

            [styles['disabled']]: currentPage === totalPages,

          })}

          onClick={() => nextPage()}

Expected indentation of 12 space characters but found 10.

JSX props should not use arrow functions

JSX attribute values should not contain functions created in the same scope

          onMouseEnter={() => prefetchPage(currentPage + 1)}

Expected indentation of 12 space characters but found 10.

JSX props should not use arrow functions

JSX attribute values should not contain functions created in the same scope

          onMouseDownCapture={() => prefetchPage(currentPage + 1)}

Expected indentation of 12 space characters but found 10.

Props should be sorted alphabetically

JSX props should not use arrow functions

JSX attribute values should not contain functions created in the same scope

        >

          <span className={styles.arrow}>&#10095;</span>

Expected indentation of 12 space characters but found 10.

❯ must be placed on a new line

        </li>

      </ul>

    </div>

  )

}


export { Pagination }