<commit_before>import * as React from "react";
import { Component } from "react";

import { LiveData } from "../models/LiveData";

type IProps = {
    liveData: LiveData | null;
    onClick: () => void;
};

export class CurrentUsage extends Component<IProps> {
    render() {
        return (
            <table className="column column-30" onClick={this.onClick}>
                <thead>
                    <tr>
                        <th>Current</th>
                        <th>Water</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{this.displayableCurrent}</td>
                        <td>{this.displayableWater}</td>
                    </tr>
                </tbody>
            </table>
        );
    }

    private onClick = () => {
        this.props.onClick();
    };

    private get displayableCurrent(): string {
        const { liveData } = this.props;

        if (liveData) {
            return `${liveData.current * 1000} W`;
        } else {
            return "...";
        }
    }

    private get displayableWater(): string {
        const { liveData } = this.props;

        if (!liveData) {
            return "...";
        }

        return `${liveData.water_current} L/m`;
    }
}<commit_msg>Make CurrentUsage component functional...<commit_after>import { LiveData } from "../models/LiveData";

type Props = {
    liveData: LiveData | null;
    onClick: () => void;
};

export function CurrentUsage({ liveData, onClick }: Props) {
    return (
        <table className="column column-30" onClick={onClick}>
            <thead>
                <tr>
                    <th>Current</th>
                    <th>Water</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{displayableCurrent()}</td>
                    <td>{displayableWater()}</td>
                </tr>
            </tbody>
        </table>
    );

    function displayableCurrent(): string {
        if (liveData) {
            return `${liveData.current * 1000} W`;
        } else {
            return "...";
        }
    }

    function displayableWater(): string {
        if (!liveData) {
            return "...";
        }

        return `${liveData.water_current} L/m`;
    }
}
{'fraction_non_alphanumeric': 0.13917525773195877, 'fraction_numerical': 0.005154639175257732, 'mean_word_length': 1.2810969637610186, 'pattern_counts': {'":': 0, '<': 40, '<?xml version=': 0, '>': 43, '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': '4205179', 'n_tokens_mistral': 660, 'n_tokens_neox': 621, 'n_words': 133}