<commit_before>import React, { useState,useEffect } from 'react'
import { Link } from 'react-router-dom'
import styled from '@emotion/styled'
import StarRating from '../StarRating'
import {PHOTO_UPDATE} from '../../graphql/photo'
import { useMutation} from '@apollo/react-hooks';
const Container = styled('li')`
  width: 128px;
  height: 128px;
  border: 1px solid #888;
  list-style: none;
  margin: 0 20px 20px 0;
  display: inline-block;
  box-shadow: 0 2px 6px 1px rgba(0,0,0,.5);
  background: #292929;
  overflow: hidden;
  cursor: pointer;
  div {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }
  @media all and (max-width: 700px) {
    width: 96px;
    height: 96px;
  }
`
const Image = styled('div')`
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
`
const StarRatingStyled = styled('span')`
  position: relative;
  top: -18px;
  left: 1px;
`

const Thumbnail = ({id, imageUrl, starRating}) => {
  const [newStarRating, updateStarRating] = useState(starRating)
  useEffect (() => {
    updateStarRating(starRating)
  }, [starRating])
  const [updatePhoto] = useMutation(PHOTO_UPDATE)
  const onStarClick = (num, e) => {
    e.preventDefault()
    if (newStarRating === num) {
      updateStarRating(0)
      updatePhoto({
        variables: {
          photoId:id,
          starRating:0
        }
      }).catch(e => {})
    }
    else {
      updateStarRating(num)
      updatePhoto({
        variables: {
          photoId:id,
          starRating:num
        }
      }).catch(e => {})
    }
  }

  return (
    <Link to={`/photo/${id}`} key={id}>
      <Container>
        <Image style={{backgroundImage: 'url(' + imageUrl + ')'}} />
        <StarRatingStyled>
          <StarRating starRating={newStarRating} onStarClick={onStarClick} />
        </StarRatingStyled>
      </Container>
    </Link>
  )
}

export default Thumbnail
<commit_msg>implemented lazy load for thumbnails (related to #9)<commit_after>import React, { useState,useEffect } from 'react'
import { Link } from 'react-router-dom'
import styled from '@emotion/styled'
import StarRating from '../StarRating'
import {PHOTO_UPDATE} from '../../graphql/photo'
import { useMutation} from '@apollo/react-hooks';
import { LazyLoadImage } from 'react-lazy-load-image-component';
import 'react-lazy-load-image-component/src/effects/opacity.css';

const Container = styled('li')`
  width: 128px;
  height: 128px;

  img {
    width: 128px;
    height: 128px;
  }

  border: 1px solid #888;
  list-style: none;
  margin: 0 20px 20px 0;
  display: inline-block;
  box-shadow: 0 2px 6px 1px rgba(0,0,0,.5);
  background: #292929;
  overflow: hidden;
  cursor: pointer;
  div {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }
  @media all and (max-width: 700px) {
    width: 96px;
    height: 96px;

    img {
      width: 128px;
      height: 128px;
    }
  }
`
const Image = styled('div')`
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
`
const StarRatingStyled = styled('span')`
  position: relative;
  top: -25px;
  left: 1px;
`

const Thumbnail = ({id, imageUrl, starRating}) => {
  const [newStarRating, updateStarRating] = useState(starRating)
  useEffect (() => {
    updateStarRating(starRating)
  }, [starRating])
  const [updatePhoto] = useMutation(PHOTO_UPDATE)
  const onStarClick = (num, e) => {
    e.preventDefault()
    if (newStarRating === num) {
      updateStarRating(0)
      updatePhoto({
        variables: {
          photoId:id,
          starRating:0
        }
      }).catch(e => {})
    }
    else {
      updateStarRating(num)
      updatePhoto({
        variables: {
          photoId:id,
          starRating:num
        }
      }).catch(e => {})
    }
  }

  return (
    <Link to={`/photo/${id}`} key={id}>
      <Container>
        <LazyLoadImage effect="opacity" src={imageUrl} />
        <StarRatingStyled>
          <StarRating starRating={newStarRating} onStarClick={onStarClick} />
        </StarRatingStyled>
      </Container>
    </Link>
  )
}

export default Thumbnail

{'fraction_non_alphanumeric': 0.14477791116446578, 'fraction_numerical': 0.029051620648259304, 'mean_word_length': 2.8431734317343174, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1998384', 'n_tokens_mistral': 1541, 'n_tokens_neox': 1400, 'n_words': 322}