41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { Button, Container, List, ListItem, ListItemText, Stack, TextField, Typography } from '@mui/material';
|
|
import { useState } from 'react';
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
import { useAreas } from '../hooks/dataHooks';
|
|
import { useDatabase } from '../context/DBProvider';
|
|
|
|
export const ManageAreasScreen = () => {
|
|
const db = useDatabase();
|
|
const areas = useAreas();
|
|
const [name, setName] = useState('');
|
|
|
|
const addArea = async () => {
|
|
if (!name) return;
|
|
await db.areas.add({ id: uuidv4(), name, created_at: Date.now(), updated_at: Date.now() });
|
|
setName('');
|
|
};
|
|
|
|
return (
|
|
<Container sx={{ py: 4 }}>
|
|
<Typography variant="h5" gutterBottom>
|
|
Manage Areas
|
|
</Typography>
|
|
<Stack spacing={2}>
|
|
<Stack direction="row" spacing={1}>
|
|
<TextField fullWidth label="Area name" value={name} onChange={(event) => setName(event.target.value)} />
|
|
<Button variant="contained" onClick={addArea} disabled={!name}>
|
|
Add
|
|
</Button>
|
|
</Stack>
|
|
<List>
|
|
{areas.map((area) => (
|
|
<ListItem key={area.id} divider>
|
|
<ListItemText primary={area.name} />
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Stack>
|
|
</Container>
|
|
);
|
|
};
|