<commit_before>import React, { MouseEvent } from 'react';
import { Icon, useLoading, classnames } from 'react-components';

import { Element } from '../../models/element';
import { isMessage as testIsMessage, isStarred as testIsStarred } from '../../helpers/elements';
import { useStar } from '../../hooks/useApplyLabels';

interface Props {
    element?: Element;
}

const ItemStar = ({ element = {} }: Props) => {
    const [loading, withLoading] = useLoading();
    const star = useStar();

    const isMessage = testIsMessage(element);
    const isStarred = testIsStarred(element);
    const iconName = isStarred ? 'starfull' : 'star';

    const handleClick = async (event: MouseEvent) => {
        event.stopPropagation();
        withLoading(star(isMessage, [element.ID || ''], !isStarred));
    };

    return (
        <button
            disabled={loading}
            type="button"
            className={classnames([
                'starbutton item-star inline-flex stop-propagation',
                isStarred && 'starbutton--is-starred'
            ])}
            onClick={handleClick}
        >
            <Icon name={iconName} />
        </button>
    );
};

export default ItemStar;<commit_msg>Fix - missing classes for layout/animation<commit_after>import React, { MouseEvent } from 'react';
import { Icon, useLoading, classnames } from 'react-components';

import { Element } from '../../models/element';
import { isMessage as testIsMessage, isStarred as testIsStarred } from '../../helpers/elements';
import { useStar } from '../../hooks/useApplyLabels';

interface Props {
    element?: Element;
}

const ItemStar = ({ element = {} }: Props) => {
    const [loading, withLoading] = useLoading();
    const star = useStar();

    const isMessage = testIsMessage(element);
    const isStarred = testIsStarred(element);
    const iconName = isStarred ? 'starfull' : 'star';

    const handleClick = async (event: MouseEvent) => {
        event.stopPropagation();
        withLoading(star(isMessage, [element.ID || ''], !isStarred));
    };

    return (
        <button
            disabled={loading}
            type="button"
            className={classnames([
                'starbutton relative item-star inline-flex stop-propagation',
                isStarred && 'starbutton--is-starred'
            ])}
            onClick={handleClick}
        >
            <Icon name={iconName} className="starbutton-icon-star" />
        </button>
    );
};

export default ItemStar;
{'fraction_non_alphanumeric': 0.1404561824729892, 'fraction_numerical': 0.0, 'mean_word_length': 2.5919540229885056, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 13, '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': '2270965', 'n_tokens_mistral': 688, 'n_tokens_neox': 690, 'n_words': 167}