mister-webdev / movie-app

src/pages/movie/index.tsx

import { useMatch } from 'react-location'
import { Helmet } from 'react-helmet'
import { YoutubeVideo } from 'entities/YoutubeVideo'
import { Text, LoadingTape, Separator } from 'shared/ui'
import { IMAGE_BACKDROP } from 'shared/config/images'

import { IMovieDetailsVideos, IGenres, IMovieCast } from 'types/common'
import type { LocationGenerics } from 'app/Routes'

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

const Movie = () => {

Function component is not a function declaration

  const {
    data: { movie },
    isLoading,
  } = useMatch<LocationGenerics>()

  const { results } = movie?.videos as IMovieDetailsVideos

  const HeroImage = `${import.meta.env.APP_IMAGE_URL}/${IMAGE_BACKDROP.L}${
    movie?.backdrop_path
  }`

  console.log(movie)
  const trailer = results?.filter(
    ({ type }: { type: string }) => type === 'Trailer',
  )[0]

  const renderedGenres = movie?.genres.map(
    ({ id, name }: IGenres, idx: number, self: IGenres[]) => {
      return (
        <span className={styles.genreItem} key={id}>

Expected indentation of 10 space characters but found 8.

JSX not allowed in files with extension '.tsx'

Prop key must be placed on a new line

          <Text tag="h3">{name}</Text>

Expected indentation of 12 space characters but found 10.

{name} must be placed on a new line

          {idx !== self.length - 1 && <Separator>&#9898;</Separator>}

Expected indentation of 12 space characters but found 10.

JSX element should start in a new line

⚪ must be placed on a new line

        </span>
      )
    },
  )

  const renderedCast = movie?.credits?.cast.map((item: IMovieCast) => {})

'renderedCast' is assigned a value but never used.

'item' is defined but never used.

Unexpected empty arrow function.

  const SEO = () => (

Function component is not a function declaration

Declare this component outside parent component "Movie" or memoize it.

Declare only one React component per file

    <Helmet

Expected indentation of 6 space characters but found 4.

      defaultTitle="Moviez Rules"

Expected indentation of 8 space characters but found 6.

      titleTemplate="Moviez Rules - %s"

Expected indentation of 8 space characters but found 6.

      title={movie?.title}

Expected indentation of 8 space characters but found 6.

Props should be sorted alphabetically

      meta={[{ name: 'description', content: `${movie?.overview}` }]}

Expected indentation of 8 space characters but found 6.

Props should be sorted alphabetically

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

      link={[

Expected indentation of 8 space characters but found 6.

Props should be sorted alphabetically

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

        { rel: 'preconnect', href: 'https://i.ytimg.com' },
        { rel: 'preconnect', href: 'https://www.youtube.com' },
        { rel: 'preload', as: 'image', href: `${HeroImage}` },
      ]}
    />
  )

  return (
    <>

Expected indentation of 6 space characters but found 4.

      {SEO()}

Expected indentation of 8 space characters but found 6.

      {isLoading ? (

Expected indentation of 8 space characters but found 6.

JSX element should start in a new line

        <LoadingTape />

Expected indentation of 10 space characters but found 8.

      ) : (
        <div

Expected indentation of 10 space characters but found 8.

          className={styles.wrapper}

Expected indentation of 12 space characters but found 10.

          style={{ backgroundImage: `url(${HeroImage})` }}

Expected indentation of 12 space characters but found 10.

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

        >
          <div className={styles.rowHalf}>

Expected indentation of 12 space characters but found 10.

            {trailer && (

Expected indentation of 14 space characters but found 12.

              <YoutubeVideo embedId={trailer?.key} title={trailer?.name} />

Expected indentation of 12 space characters but found 14.

Prop title must be placed on a new line

            )}
            <div className={styles.content}>

Expected indentation of 14 space characters but found 12.

JSX element should start in a new line

              <Text tag="h1">{movie?.title}</Text>

Expected indentation of 16 space characters but found 14.

{movie?.title} must be placed on a new line

              <div className={styles.genres}>{renderedGenres}</div>

Expected indentation of 16 space characters but found 14.

JSX element should start in a new line

{renderedGenres} must be placed on a new line

              <Text>{movie?.overview}</Text>

Expected indentation of 16 space characters but found 14.

JSX element should start in a new line

{movie?.overview} must be placed on a new line

            </div>
          </div>
        </div>
      )}
    </>
  )
}

export default Movie