132 lines
2.9 KiB
TypeScript
132 lines
2.9 KiB
TypeScript
import { Box, Button, TextField, Typography, Paper } from "@mui/material";
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { useState } from "react";
|
|
import { RootState, AppDispatch } from "../../redux/store/store";
|
|
import { markStudentAsSent } from "../../redux/slices/backlogSlice";
|
|
import { toast } from "sonner";
|
|
|
|
export default function EmailPage() {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
|
|
const { selectedIds } = location.state || { selectedIds: [] };
|
|
const students = useSelector(
|
|
(state: RootState) => state.backlogReducer.students
|
|
);
|
|
|
|
const selectedStudents = students.filter((student) =>
|
|
selectedIds.includes(student.id)
|
|
);
|
|
|
|
const [subject, setSubject] = useState("");
|
|
const [message, setMessage] = useState("");
|
|
const [attachment, setAttachment] = useState<File | null>(null);
|
|
|
|
const handleSend = () => {
|
|
if (!subject || !message) {
|
|
toast.warning("Subject and Message are required.");
|
|
return;
|
|
}
|
|
dispatch(markStudentAsSent(selectedIds));
|
|
toast.success("Emails sent successfully.");
|
|
navigate("/");
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
navigate("/");
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
minHeight: "100vh",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
backgroundColor: "#F5F8FA",
|
|
p: 2,
|
|
}}
|
|
>
|
|
<Paper
|
|
elevation={3}
|
|
sx={{ p: 4, maxWidth: "600px", width: "100%" }}
|
|
>
|
|
<Typography variant="h5" gutterBottom>
|
|
📧 Compose Email
|
|
</Typography>
|
|
|
|
<Typography sx={{ mb: 2 }}>
|
|
<b>To:</b> {selectedStudents.map((s) => s.name).join(", ")}
|
|
</Typography>
|
|
|
|
<TextField
|
|
fullWidth
|
|
label="Subject"
|
|
variant="outlined"
|
|
value={subject}
|
|
onChange={(e) => setSubject(e.target.value)}
|
|
sx={{ mb: 2 }}
|
|
/>
|
|
|
|
<TextField
|
|
fullWidth
|
|
label="Message"
|
|
variant="outlined"
|
|
multiline
|
|
rows={6}
|
|
value={message}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
sx={{ mb: 2 }}
|
|
/>
|
|
|
|
<Button
|
|
variant="outlined"
|
|
component="label"
|
|
sx={{ mb: 2, textTransform: "none" }}
|
|
>
|
|
📎 Upload Attachment
|
|
<input
|
|
type="file"
|
|
hidden
|
|
onChange={(e) =>
|
|
setAttachment(e.target.files?.[0] || null)
|
|
}
|
|
/>
|
|
</Button>
|
|
|
|
{attachment && (
|
|
<Typography variant="body2" sx={{ mb: 2 }}>
|
|
Selected: {attachment.name}
|
|
</Typography>
|
|
)}
|
|
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
mt: 2,
|
|
}}
|
|
>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
onClick={handleSend}
|
|
sx={{ textTransform: "none" }}
|
|
>
|
|
Send
|
|
</Button>
|
|
<Button
|
|
variant="outlined"
|
|
onClick={handleCancel}
|
|
sx={{ textTransform: "none" }}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</Box>
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
}
|