mister-webdev / movie-app

src/entities/LazyImage/LazyImage.tsx

import { useRef, useState } from 'react'
import { useIntersectionObserver } from 'shared/hooks/useIntersectionObserver'

interface IProps {
  imageUrl: string
  alt: string
  width: string
  height: string
}

export const LazyImage = ({ imageUrl, alt, width, height }: IProps) => {

Function component is not a function declaration

  const imgRef = useRef<HTMLImageElement | null>(null)
  const [isLoaded, setLoaded] = useState<boolean>(false)

  const setSrc = () => {
    let srcRef = imgRef?.current?.src
    srcRef = imgRef?.current?.dataset?.src

'srcRef' is assigned a value but never used.

    imgRef?.current?.removeAttribute('data-src')
    setLoaded(true)
  }

  useIntersectionObserver({
    target: imgRef,
    onIntersect: setSrc,
    rootMargin: '1200px',
    enabled: !isLoaded,
  })

  return (
    <img

Expected indentation of 6 space characters but found 4.

JSX not allowed in files with extension '.tsx'

      ref={imgRef}

Expected indentation of 8 space characters but found 6.

      data-src={imageUrl}

Expected indentation of 8 space characters but found 6.

Props should be sorted alphabetically

      alt={alt}

Expected indentation of 8 space characters but found 6.

Props should be sorted alphabetically

      width={width}

Expected indentation of 8 space characters but found 6.

      height={height}

Expected indentation of 8 space characters but found 6.

Props should be sorted alphabetically

      loading="lazy"

Expected indentation of 8 space characters but found 6.

Props should be sorted alphabetically

    />
  )
}