back

frontend/src/components/NewMeetingDialog.jsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import {
+    Button, TextField, Dialog, DialogTitle, DialogContent, DialogActions,
+    CircularProgress, Alert
+} from '@mui/material';
+
+const NewMeetingDialog = ({ open, onClose, onCreate }) => {
+    const [topic, setTopic] = useState('');
+    const [meetingDate, setMeetingDate] = useState(new Date().toISOString().split('T')[0]); // Defaults to today
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+
+    const handleCreate = async () => {
+        if (!topic || !meetingDate) {
+            setError('Both topic and date are required.');
+            return;
+        }
+        setError('');
+        setLoading(true);
+        try {
+            // The onCreate prop is expected to be an async function
+            // that returns the newly created meeting.
+            await onCreate(topic, meetingDate);
+            handleClose(); // Close the dialog on success
+        } catch (err) {
+            setError(err.message || 'Failed to create meeting.');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleClose = () => {
+        if (loading) return; // Prevent closing while loading
+        setTopic('');
+        setMeetingDate(new Date().toISOString().split('T')[0]);
+        setError('');
+        onClose(); // Call the parent's onClose handler
+    };
+
+    return (
+        <Dialog open={open} onClose={handleClose} fullWidth maxWidth="xs">
+            <DialogTitle>Create a New Meeting</DialogTitle>
+            <DialogContent>
+                {error && <Alert severity="error" sx={{ mb: 2, mt: 1 }}>{error}</Alert>}
+                <TextField
+                    autoFocus
+                    margin="dense"
+                    id="topic"
+                    label="Meeting Topic"
+                    type="text"
+                    fullWidth
+                    variant="standard"
+                    value={topic}
+                    onChange={(e) => setTopic(e.target.value)}
+                    sx={{ mt: 2 }}
+                />
+                <TextField
+                    margin="dense"
+                    id="meetingDate"
+                    label="Meeting Date"
+                    type="date"
+                    fullWidth
+                    variant="standard"
+                    value={meetingDate}
+                    onChange={(e) => setMeetingDate(e.target.value)}
+                    InputLabelProps={{
+                        shrink: true,
+                    }}
+                    sx={{ mt: 2 }}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={handleClose} disabled={loading}>Cancel</Button>
+                <Button onClick={handleCreate} variant="contained" disabled={loading}>
+                    {loading ? <CircularProgress size={24} /> : 'Create'}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default NewMeetingDialog;