mister-webdev / movie-app

src/entities/MoviesCardsGrid/index.tsx

import { FC } from 'react'

import { useQuery } from 'react-query'

import { Helmet } from 'react-helmet'

import { fetchMoviesList } from './model'

import { Grid, LoadingTape, Thumb } from 'shared/ui'

import { IMAGE_THUMB } from 'shared/config/images'


import NoImage from 'shared/assets/images/no_image.jpg'


interface IProps {

  currentPage: number

}


const MoviesCardsGrid: FC<IProps> = ({ currentPage }) => {

Function component is not a function declaration

  const { isLoading, error, data } = useQuery(

'error' is assigned a value but never used.

    ['moviesList', currentPage],

    () => fetchMoviesList(currentPage),

    {

      keepPreviousData: true,

    },

  )


  const IMAGE_URL = import.meta.env.APP_IMAGE_URL


  const imageLinksPreload = data?.movies?.map(({ poster_path }) => ({

    href: `${IMAGE_URL}/${IMAGE_THUMB.L}${poster_path}`,

    rel: 'preload',

    as: 'image',

  }))


  const renderedMoviesCards = data?.movies?.map(

    ({ genre_ids, id, title, poster_path, release_date, vote_average }) => {

      const moviePoster = poster_path

        ? `${IMAGE_URL}/${IMAGE_THUMB.L}${poster_path}`

        : NoImage


      return (

        <Thumb

Expected indentation of 10 space characters but found 8.

JSX not allowed in files with extension '.tsx'

          clickable

Expected indentation of 12 space characters but found 10.

          key={id}

Expected indentation of 12 space characters but found 10.

          alt={title}

Expected indentation of 12 space characters but found 10.

Props should be sorted alphabetically

          movieId={id}

Expected indentation of 12 space characters but found 10.

          title={title}

Expected indentation of 12 space characters but found 10.

          release={release_date}

Expected indentation of 12 space characters but found 10.

Props should be sorted alphabetically

          genres={genre_ids.join(', ')}

Expected indentation of 12 space characters but found 10.

Props should be sorted alphabetically

          rating={vote_average}

Expected indentation of 12 space characters but found 10.

Props should be sorted alphabetically

          image={moviePoster}

Expected indentation of 12 space characters but found 10.

Props should be sorted alphabetically

          isLazy

Expected indentation of 12 space characters but found 10.

Props should be sorted alphabetically

        />

      )

    },

  )


  return isLoading ? (

    <LoadingTape />

Expected indentation of 6 space characters but found 4.

  ) : (

    <>

Expected indentation of 6 space characters but found 4.

      <Helmet link={imageLinksPreload} />

Expected indentation of 8 space characters but found 6.

      <Grid>{renderedMoviesCards}</Grid>

Expected indentation of 8 space characters but found 6.

JSX element should start in a new line

{renderedMoviesCards} must be placed on a new line

    </>

  )

}


export { MoviesCardsGrid }