device.view.tsx

import { useAppSelector } from '@hooks';
import { Col, Container, Row, Table } from 'react-bootstrap';
import './device.scss';
import { useDeviceViewModel } from '@viewmodel/device.viewmodel';

function DeviceView() {
    const { devices } = useAppSelector(state => state.device);
    useDeviceViewModel();


    const getDeviceTable = () => {
        return devices.map((device, index) => (
            <tr key={index}>
                <td>{device.name}</td>
                <td>{device.id}</td>
                <td>{device.pid}</td>
            </tr>
        ))
    }

    return (
        <div className='m-4 pt-4'>
            <Container className="bg-white rounded c-box">
                <Row >
                    <Col><h3>Device list</h3></Col>
                </Row>

                <Row className='mt-2'>
                    <Col>
                        <Table striped bordered hover className='table-primary'>
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>UUID</th>
                                    <th>User</th>
                                    <th>Last updated</th>
                                </tr>
                            </thead>
                            <tbody>
                                {getDeviceTable()}
                            </tbody>
                        </Table>
                    </Col>
                </Row>
            </Container>
        </div>
    )
}

export default DeviceView