gistfile1.txt

import React  from 'react';
import { render, Box, Text } from 'ink';

import { useInput, useApp } from 'ink';
import { Tabs, Tab, TabProps } from 'ink-tab';
import { useState, useEffect } from 'react';
import Table from 'ink-table'
import TextInput from 'ink-text-input';

const fs = require('fs');

type Entry = {
    date: Date,
    value: number
}
type Data = {
    data: Array<Entry>
}
export const Pushups = () => {
    const [data, setValues] = useState<Data>({"data":[]})
    const [query, setQuery] = useState('');
    const [newEntry, setNewEntry] = useState(false);

    useInput((input, key) => {
        if (input === 'n') {
            setNewEntry(true)
        }
        if (key.return) {
            const date = new Date()
            const value = parseInt(query)
            const newData: Array<Entry> = data["data"]
            newData.push({
                date, value
            })
            fs.writeFileSync('./data/pushups.json', JSON.stringify({
                "data": newData
            }));
            setQuery("")
            setNewEntry(false)
        } 
    });
 
    useEffect(() => {
        const a = async () => {
            
            let rawdata = fs.readFileSync('./data/pushups.json');
            let data = JSON.parse(rawdata);
            setValues(data)
        }
        a()
        return (() => { })
    }, [newEntry]);

    return(<>
        <Box flexDirection="column"><Table data={
            data["data"].map(({date, value}) => ({
                "date": JSON.stringify(date),
                value
            }))
        } />
        {newEntry ? <TextInput value={query} onChange={setQuery} /> : <></>}
     </Box>
     </>)
}
export const Overview = () => {
    return(<><Text>Overview</Text></>)
}

export function App(props: any) {
    const [activeTabName, setActiveTabName] = useState<string | null>(null);
    const { exit } = useApp();

    useInput((input, key) => {
        if (input === 'q') {
            exit()
        }
    });

    function handleTabChange(name: string, activeTab: React.ReactElement<React.FunctionComponent<TabProps>>) {
        setActiveTabName(name);
    }

    return (
        <Box flexDirection="column">
            <Box>
                {activeTabName === 'pushups' && <Pushups />}
                {activeTabName === 'overview' && <Overview />}
            </Box>

            <Tabs keyMap={{
                useTab: true,
                useNumbers: true,
                previous: ['h', 'j'],
                next: ['k', 'l'],
            }} onChange={handleTabChange}>
                <Tab name="pushups">Pushups</Tab>
                <Tab name="overview">Overview</Tab>
            </Tabs>
        </Box>
    );
}


render(<App />);