Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 | 4x 136x 136x 136x 136x 136x 136x 30x 30x 136x 15x 15x 136x 3x 3x 136x 6x 6x 2x 4x 136x 9x 6x 3x 3x 127x 103x 69x 24x 13x 13x 11x | import React, { useEffect, useState } from "react";
import { Box, Button, CircularProgress, IconButton, Stack, TextField, Typography } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import CommentIcon from "@mui/icons-material/Comment";
import AddCommentIcon from "@mui/icons-material/AddComment";
import EditIcon from "@mui/icons-material/Edit";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
/**
* Per-question comment on a submitted answer.
*
* Editable mode (teacher, `readOnly` false/omitted) — purely presentational,
* `onSave`/`onDelete` are provided by the parent, which persists the change
* via the student-submission comment endpoint (add/update/delete) and only
* updates the `comment` prop once the request confirms. `isSaving`/`isDeleting`
* reflect that in-flight request so the editor stays open (with a spinner)
* until it resolves, instead of flipping views optimistically.
*
* Read-only mode (student viewing their own submission, `readOnly` true) —
* just displays the teacher's comment, or a muted placeholder when there
* isn't one yet. No editing affordances.
*/
const CommentBox = ({ comment, isSaving, isDeleting, onSave, onDelete, readOnly = false }) => {
const theme = useTheme();
const hasComment = Boolean(comment && comment.trim());
const isBusy = Boolean(isSaving || isDeleting);
const [isEditing, setIsEditing] = useState(false);
const [draft, setDraft] = useState(comment || "");
useEffect(() => {
setDraft(comment || "");
setIsEditing(false);
}, [comment]);
const startEditing = () => {
setDraft(comment || "");
setIsEditing(true);
};
const cancelEditing = () => {
setDraft(comment || "");
setIsEditing(false);
};
const saveComment = () => {
const trimmed = draft.trim();
if (!trimmed) {
onDelete();
} else {
onSave(trimmed);
}
// Editing stays open (with a spinner via isBusy) until the parent confirms
// the request and the `comment` prop actually changes — see the effect above.
};
if (readOnly) {
if (!hasComment) {
return (
<Typography variant="body2" color="text.secondary" fontStyle="italic">
Your teacher hasn't left a comment on this question yet.
</Typography>
);
}
const dark = theme.palette.mode === "dark";
return (
<Box
sx={{
p: 1.5,
borderRadius: 1.5,
border: "1px solid",
borderColor: "info.main",
bgcolor: dark ? "#12293a" : "#e8f4fb",
display: "flex",
alignItems: "flex-start",
gap: 1,
}}
>
<CommentIcon fontSize="small" color="info" sx={{ mt: 0.25, flexShrink: 0 }} />
<Typography variant="body2" sx={{ whiteSpace: "pre-wrap", color: "text.primary" }}>
{comment}
</Typography>
</Box>
);
}
if (isEditing) {
return (
<Box sx={{ mt: 1.5 }}>
<Typography
variant="caption"
color="text.secondary"
sx={{ fontWeight: 600, display: "flex", alignItems: "center", gap: 0.5, mb: 0.75 }}
>
<CommentIcon fontSize="inherit" />
Comment for this answer
</Typography>
<TextField
autoFocus
fullWidth
multiline
minRows={2}
size="small"
disabled={isBusy}
placeholder="Leave feedback for the student on this question..."
value={draft}
onChange={(e) => setDraft(e.target.value)}
/>
<Stack direction="row" spacing={1} sx={{ mt: 1 }}>
<Button
size="small"
variant="contained"
onClick={saveComment}
disabled={isBusy}
startIcon={isBusy ? <CircularProgress size={14} color="inherit" /> : undefined}
>
{isBusy ? "Saving..." : "Save"}
</Button>
<Button size="small" variant="text" onClick={cancelEditing} disabled={isBusy}>
Cancel
</Button>
</Stack>
</Box>
);
}
if (hasComment) {
const dark = theme.palette.mode === "dark";
return (
<Box
sx={{
mt: 1.5,
p: 1.5,
borderRadius: 1.5,
border: "1px solid",
borderColor: "info.main",
bgcolor: dark ? "#12293a" : "#e8f4fb",
display: "flex",
alignItems: "flex-start",
gap: 1,
}}
>
<CommentIcon fontSize="small" color="info" sx={{ mt: 0.25, flexShrink: 0 }} />
<Box sx={{ flex: 1, minWidth: 0 }}>
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600, display: "block" }}>
Your Comment
</Typography>
<Typography variant="body2" sx={{ whiteSpace: "pre-wrap", color: "text.primary" }}>
{comment}
</Typography>
</Box>
<Stack direction="row" spacing={0.5} sx={{ flexShrink: 0 }}>
<IconButton size="small" onClick={startEditing} disabled={isBusy} aria-label="Edit comment">
<EditIcon fontSize="small" />
</IconButton>
<IconButton size="small" onClick={onDelete} disabled={isBusy} aria-label="Delete comment">
{isDeleting ? (
<CircularProgress size={16} color="inherit" />
) : (
<DeleteOutlineIcon fontSize="small" />
)}
</IconButton>
</Stack>
</Box>
);
}
return (
<Box sx={{ mt: 1.5 }}>
<Button
size="small"
variant="outlined"
startIcon={<AddCommentIcon fontSize="small" />}
onClick={startEditing}
disabled={isBusy}
>
Add Comment
</Button>
</Box>
);
};
export default CommentBox;
|