<commit_before>import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { Container, Jumbotron } from 'react-bootstrap';
import CategoryIcon from './CategoryIcon';

export default () => {

    const { id } = useParams();
    const [document, setDocument] = useState(null);

    useEffect (() => {
        getDocument(id).then(setDocument);
    }, [id]);

    return (document && document.resource)
        ? renderDocument(document)
        : renderError();
};


const renderDocument = (document: any) => {

    console.log(document);

    const resource = document.resource;
    const fieldList = renderFieldList(resource);
    return (
        <Jumbotron fluid>
            <Container>
                <h1>
                    <CategoryIcon category={ resource.type } size="40" />
                    &nbsp; { resource.identifier }
                </h1>
                { fieldList }
            </Container>
        </Jumbotron>
    );
};


const renderFieldList = (resource: any) => {

    const fields = Object.keys(resource)
        .filter(key => !['relations', 'geometry', 'id'].includes(key))
        .map(key => [
            <dt key={ `${key}_dt`}>{ key }</dt>,
            <dd key={ `${key}_dd`}>{ renderFieldValue(resource[key]) }</dd>
        ]);
    return <dl>{ fields }</dl>;
};


const renderFieldValue = (value: any) => {

    if (Array.isArray(value)) return renderFieldValueArray(value);
    if (typeof value === 'object') return renderFieldValueObject(value);
    return value;
};


const renderFieldValueArray = (values: any[]) =>
    values.length > 1
        ? values.map((value, i) => <li key={ `${value}_${i}` }>{ renderFieldValue(value) }</li>)
        : renderFieldValue(values[0]);


const renderFieldValueObject = (object: any) => {

    if (object.label) return object.label;

    const listItems = Object.keys(object).map(key => <li key={ key }><strong>{ key }:</strong> { object[key] }</li>);
    return <ul>{ listItems }</ul>;
};


const renderError = () => {
    return <div>Error: No matching document found.</div>;
};


const getDocument = async (id: string) => {
    const response = await fetch(`/documents/${id}`);
    return await response.json();
};<commit_msg>Implement rendering of boolean field values<commit_after>import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { Container, Jumbotron } from 'react-bootstrap';
import CategoryIcon from './CategoryIcon';

export default () => {

    const { id } = useParams();
    const [document, setDocument] = useState(null);

    useEffect (() => {
        getDocument(id).then(setDocument);
    }, [id]);

    return (document && document.resource)
        ? renderDocument(document)
        : renderError();
};


const renderDocument = (document: any) => {

    const resource = document.resource;
    const fieldList = renderFieldList(resource);
    return (
        <Jumbotron fluid>
            <Container>
                <h1>
                    <CategoryIcon category={ resource.type } size="40" />
                    &nbsp; { resource.identifier }
                </h1>
                { fieldList }
            </Container>
        </Jumbotron>
    );
};


const renderFieldList = (resource: any) => {

    const fields = Object.keys(resource)
        .filter(key => !['relations', 'geometry', 'id'].includes(key))
        .map(key => [
            <dt key={ `${key}_dt`}>{ key }</dt>,
            <dd key={ `${key}_dd`}>{ renderFieldValue(resource[key]) }</dd>
        ]);
    return <dl>{ fields }</dl>;
};


const renderFieldValue = (value: any) => {

    if (Array.isArray(value)) return renderFieldValueArray(value);
    if (typeof value === 'object') return renderFieldValueObject(value);
    if (typeof value === 'boolean') return renderFieldValueBoolean(value);
    return value;
};


const renderFieldValueArray = (values: any[]) =>
    values.length > 1
        ? values.map((value, i) => <li key={ `${value}_${i}` }>{ renderFieldValue(value) }</li>)
        : renderFieldValue(values[0]);


const renderFieldValueObject = (object: any) => {

    if (object.label) return object.label;

    const listItems = Object.keys(object).map(key => <li key={ key }><strong>{ key }:</strong> { object[key] }</li>);
    return <ul>{ listItems }</ul>;
};


const renderFieldValueBoolean = (value: boolean) => value ? 'yes' : 'no';


const renderError = () => {
    return <div>Error: No matching document found.</div>;
};


const getDocument = async (id: string) => {
    const response = await fetch(`/documents/${id}`);
    return await response.json();
};
{'fraction_non_alphanumeric': 0.1681339918402405, 'fraction_numerical': 0.002576766158471119, 'mean_word_length': 2.814905814905815, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 78, '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': '3351573', 'n_tokens_mistral': 1383, 'n_tokens_neox': 1351, 'n_words': 339}