<commit_before>import React from 'react';

export default ({post}) => {
    const { id, title, date, imgsrc, comment } = post
    return (
        <div className="thread-post">
            <div className="post-info">
                <span className={title ? "subtitle-active" : ""}>{title}</span>
                <span className="dateTime">{date}</span>
                <span className="postNum">No.{id}</span>
                <span className="backlink"></span>
            </div>
            {createImageIfExists(imgsrc)}
            <blockquote>
                <div className="postMessage" 
                     dangerouslySetInnerHTML={{__html: comment}}></div>
            </blockquote>
        </div>
    )
}


function createImageIfExists(imgsrc) {
    if (imgsrc) return <div className="post-img"><img src={imgsrc.sm} /></div>
}<commit_msg>Add image open/close to ThreadPost<commit_after>import React from 'react';
import $ from 'jquery';

export default ({post}) => {
    const { id, title, date, imgsrc, comment, ext } = post

    const SRC = imgsrc
    const ID = 'thread-media-' + id

    return (
        <div className='thread-post'>
            <div className='post-info'>
                <span className={title ? 'subtitle-active' : ''}>{title}</span>
                <span className='dateTime'>{date}</span>
                <span className='postNum'>No.{id}</span>
                <span className='backlink'></span>
            </div>
            {createMediaIfExists()}
            <blockquote>
                <div className='postMessage' 
                     dangerouslySetInnerHTML={{__html: comment}}></div>
            </blockquote>
        </div>
    )

    function createMediaIfExists() {
        if (SRC) {
            if (ext === '.webm') return createWebm();
            else return createImage(ID, SRC);
        }
    }
}


function createImage(ID, SRC) {
    return (
        <div>
            <img 
                className={'post-img'}
                id={ID}
                src={SRC.sm}
                onClick={toggleImage.bind(null, ID, SRC)}/>
        </div>
    )
}

function createWebm() {
    console.log('Webm creation attempted');
}

function toggleImage(ID, SRC) {
    const img = $(document.getElementById(ID))
    if (img.attr('src') === SRC.sm) {
        // blur image while large image is loading
        img
            .addClass('image-blur')
            .on({ 
                'load': () => img.removeClass('image-blur')
            })

        img.attr('src', SRC.lg);
    } else {
        img.attr('src', SRC.sm);
    }
}
{'fraction_non_alphanumeric': 0.15256211180124224, 'fraction_numerical': 0.0, 'mean_word_length': 1.8163934426229509, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 44, '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': '7226496', 'n_tokens_mistral': 760, 'n_tokens_neox': 733, 'n_words': 157}