<commit_before>import * as React from 'react';
import { SortableElement } from 'react-sortable-hoc';
import { jump, remove } from '../service';
import Track from '../model/Track';
import Handle from './Handle';
import { useEffect } from 'react';

interface Props extends React.HTMLProps<HTMLLIElement> {
    isCurrent: boolean;
    track: Track;
    position: number;
}

const TrackListItem = ({ isCurrent, track, position }: Props) => {

    const myRef = React.useRef(null)

    useEffect(() => {
        if (isCurrent) {
            myRef.current.scrollIntoView()
        }
    }, []);

    return (
        <li ref={myRef} className="flex items-center p-1 hover:bg-gray-300 group">
            <a href={track.href} target="_blank" className="flex-1 truncate">
                {isCurrent ?
                    <strong>{track.title}</strong> :
                    <span>{track.title}</span>}
            </a>
            <button onClick={() => jump(position)} disabled={isCurrent} className="ml-1 hidden group-hover:inline">
                <i className="icon-play-circled"></i>
            </button>
            <button onClick={() => remove(position)} className="mx-1 hidden group-hover:inline">
                <i className="icon-cancel-circled"></i>
            </button>
            <Handle />
        </li>
    );
}

export default SortableElement<Props>(TrackListItem);<commit_msg>Rename myRef to ref.<commit_after>import * as React from 'react';
import { SortableElement } from 'react-sortable-hoc';
import { jump, remove } from '../service';
import Track from '../model/Track';
import Handle from './Handle';
import { useEffect } from 'react';

interface Props extends React.HTMLProps<HTMLLIElement> {
    isCurrent: boolean;
    track: Track;
    position: number;
}

const TrackListItem = ({ isCurrent, track, position }: Props) => {

    const ref = React.useRef(null)

    useEffect(() => {
        if (isCurrent) {
            ref.current.scrollIntoView()
        }
    }, []);

    return (
        <li ref={ref} className="flex items-center p-1 hover:bg-gray-300 group">
            <a href={track.href} target="_blank" className="flex-1 truncate">
                {isCurrent ?
                    <strong>{track.title}</strong> :
                    <span>{track.title}</span>}
            </a>
            <button onClick={() => jump(position)} disabled={isCurrent} className="ml-1 hidden group-hover:inline">
                <i className="icon-play-circled"></i>
            </button>
            <button onClick={() => remove(position)} className="mx-1 hidden group-hover:inline">
                <i className="icon-cancel-circled"></i>
            </button>
            <Handle />
        </li>
    );
}

export default SortableElement<Props>(TrackListItem);
{'fraction_non_alphanumeric': 0.15354189140596908, 'fraction_numerical': 0.005034160373966199, 'mean_word_length': 2.355850422195416, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 49, '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': '3289051', 'n_tokens_mistral': 793, 'n_tokens_neox': 774, 'n_words': 182}