39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useAppSelector, useAppDispatch } from '../../app/hooks';
|
|
import { selectLogsLoading, selectLogs, requestLogsThunk } from './radioSlice';
|
|
import styles from './LogViewer.module.scss';
|
|
|
|
export function LogViewer() {
|
|
const loading = useAppSelector(selectLogsLoading);
|
|
const logs = useAppSelector(selectLogs);
|
|
const [hidden, setHidden] = useState(true);
|
|
|
|
const dispatch = useAppDispatch();
|
|
|
|
return (
|
|
<div className={styles.logsContainer}>
|
|
<div className={styles.buttonContainer}>
|
|
<button
|
|
className={styles.button}
|
|
onClick={() => dispatch(requestLogsThunk())}
|
|
>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 >
|
|
);
|
|
}
|