43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { requestLogs } from './radioAPI';
|
|
import styles from './LogViewer.module.scss';
|
|
|
|
export function LogViewer() {
|
|
const [loading, setLoading] = useState(false);
|
|
const [logs, setLogs] = useState<string[] | undefined>(undefined);
|
|
const [hidden, setHidden] = useState(true);
|
|
|
|
const onRequestLogsButtonClick = async () => {
|
|
setLoading(true);
|
|
const logs = await requestLogs();
|
|
setLogs(logs);
|
|
setLoading(false);
|
|
};
|
|
|
|
return (
|
|
<div className={styles.logsContainer}>
|
|
<div className={styles.buttonContainer}>
|
|
<button
|
|
className={styles.button}
|
|
onClick={onRequestLogsButtonClick}
|
|
>Recupera stato</button>
|
|
<button
|
|
className={styles.button}
|
|
onClick={() => setHidden(!hidden)}
|
|
>{hidden ? 'Mostra' : 'Nascondi'}</button>
|
|
</div>
|
|
<div className={styles.rowsContainer}>
|
|
{!hidden &&
|
|
<div className={styles.rows}>
|
|
{loading ?
|
|
'Caricamento' :
|
|
logs?.map((line, i) => <div
|
|
className={(i % 2) ? styles.even : styles.odd}
|
|
>{line}</div>)}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div >
|
|
);
|
|
}
|