Refactor area and category management UI

src/screens/ManageAreasScreen.tsx

@@ -1,72 +1,35 @@
-import {
-  Alert,
-  AlertColor,
-  Button,
-  Container,
-  IconButton,
-  List,
-  ListItem,
-  ListItemText,
-  Stack,
-  TextField,
-  Typography,
-} from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
-import EditIcon from '@mui/icons-material/Edit';
-import CheckIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
-import { useState } from 'react';
+import { AlertColor, Container, Typography } from '@mui/material';
 import { v4 as uuidv4 } from 'uuid';
-import { useAreas } from '../hooks/dataHooks';
+import { EditableEntityList, ActionOutcome } from '../components/EditableEntityList';
 import { useDatabase } from '../context/DBProvider';
+import { useAreas } from '../hooks/dataHooks';
 
 const ManageAreasScreen = () => {
   const db = useDatabase();
   const areas = useAreas();
-  const [name, setName] = useState('');
-  const [editingAreaId, setEditingAreaId] = useState<string | null>(null);
-  const [editName, setEditName] = useState('');
-  const [feedback, setFeedback] = useState<{ text: string; severity: AlertColor } | null>(null);
 
-  const addArea = async () => {
-    if (!name) return;
+  const addArea = async (name: string): Promise<ActionOutcome> => {
     await db.areas.add({ id: uuidv4(), name, created_at: Date.now(), updated_at: Date.now() });
-    setName('');
+    return { text: 'Area added.', severity: 'success' };
   };
 
-  const startEditing = (areaId: string, currentName: string) => {
-    setEditingAreaId(areaId);
-    setEditName(currentName);
-    setFeedback(null);
+  const saveArea = async (areaId: string, updatedName: string): Promise<ActionOutcome> => {
+    await db.areas.update(areaId, { name: updatedName, updated_at: Date.now() });
+    return { text: 'Area updated.', severity: 'success' };
   };
 
-  const saveArea = async () => {
-    if (!editingAreaId || !editName) return;
-    await db.areas.update(editingAreaId, { name: editName, updated_at: Date.now() });
-    setEditingAreaId(null);
-    setEditName('');
-    setFeedback({ text: 'Area updated.', severity: 'success' });
-  };
-
-  const cancelEditing = () => {
-    setEditingAreaId(null);
-    setEditName('');
-  };
-
-  const deleteArea = async (areaId: string) => {
+  const deleteArea = async (areaId: string): Promise<ActionOutcome> => {
     const usageCount = await db.pickLists.where('area_id').equals(areaId).count();
     if (usageCount > 0) {
-      setFeedback({
+      return {
         text: `Cannot delete this area while ${usageCount} pick list(s) use it. Remove those lists first.`,
-        severity: 'error',
-      });
-      return;
+        severity: 'error' satisfies AlertColor,
+        success: false,
+      };
     }
+
     await db.areas.delete(areaId);
-    if (editingAreaId === areaId) {
-      cancelEditing();
-    }
-    setFeedback({ text: 'Area deleted.', severity: 'success' });
+    return { text: 'Area deleted.', severity: 'success' };
   };
 
   return (
@@ -74,59 +37,17 @@ const ManageAreasScreen = () => {
       <Typography variant="h5" gutterBottom>
         Manage Areas
       </Typography>
-      <Stack spacing={2}>
-        {feedback ? <Alert severity={feedback.severity}>{feedback.text}</Alert> : null}
-        <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>
-              {editingAreaId === area.id ? (
-                <Stack direction="row" alignItems="center" spacing={1} sx={{ width: '100%' }}>
-                  <TextField
-                    size="small"
-                    fullWidth
-                    value={editName}
-                    onChange={(event) => setEditName(event.target.value)}
-                  />
-                  <IconButton color="primary" onClick={saveArea} disabled={!editName} aria-label="Save area">
-                    <CheckIcon />
-                  </IconButton>
-                  <IconButton onClick={cancelEditing} aria-label="Cancel editing">
-                    <CloseIcon />
-                  </IconButton>
-                </Stack>
-              ) : (
-                <Stack direction="row" alignItems="center" spacing={1} sx={{ width: '100%' }}>
-                  <ListItemText primary={area.name} />
-                  <Stack direction="row" spacing={0.5}>
-                    <IconButton
-                      onClick={() => startEditing(area.id, area.name)}
-                      aria-label={`Edit ${area.name}`}
-                      size="small"
-                    >
-                      <EditIcon fontSize="small" />
-                    </IconButton>
-                    <IconButton
-                      onClick={() => deleteArea(area.id)}
-                      aria-label={`Delete ${area.name}`}
-                      size="small"
-                    >
-                      <DeleteIcon fontSize="small" />
-                    </IconButton>
-                  </Stack>
-                </Stack>
-              )}
-            </ListItem>
-          ))}
-        </List>
-      </Stack>
+      <EditableEntityList
+        nameLabel="Area name"
+        addButtonLabel="Add"
+        entityLabel="Area"
+        entities={areas.map((area) => ({ id: area.id, name: area.name }))}
+        onAdd={addArea}
+        onUpdate={saveArea}
+        onDelete={(areaId, areaName) => deleteArea(areaId)}
+      />
     </Container>
   );
 };
 
-export default ManageAreasScreen
+export default ManageAreasScreen;