102 lines
3.2 KiB
TypeScript
102 lines
3.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Tooltip from '@mui/material/Tooltip';
|
|
import Chip from '@mui/material/Chip';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Popover from '@mui/material/Popover';
|
|
import AddReactionOutlinedIcon from '@mui/icons-material/AddReactionOutlined';
|
|
import { nextcloudApi } from '../../services/nextcloud';
|
|
|
|
const QUICK_REACTIONS = ['\u{1F44D}', '\u2764\uFE0F', '\u{1F602}', '\u{1F62E}', '\u{1F622}', '\u{1F389}'];
|
|
|
|
interface MessageReactionsProps {
|
|
token: string;
|
|
messageId: number;
|
|
reactions: Record<string, number>;
|
|
reactionsSelf: string[];
|
|
onReactionToggled: () => void;
|
|
}
|
|
|
|
const MessageReactions: React.FC<MessageReactionsProps> = ({
|
|
token,
|
|
messageId,
|
|
reactions,
|
|
reactionsSelf,
|
|
onReactionToggled,
|
|
}) => {
|
|
const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
|
|
const [loading, setLoading] = useState<string | null>(null);
|
|
|
|
const handleToggle = async (emoji: string) => {
|
|
setLoading(emoji);
|
|
try {
|
|
if (reactionsSelf.includes(emoji)) {
|
|
await nextcloudApi.removeReaction(token, messageId, emoji);
|
|
} else {
|
|
await nextcloudApi.addReaction(token, messageId, emoji);
|
|
}
|
|
onReactionToggled();
|
|
} catch {
|
|
// ignore
|
|
} finally {
|
|
setLoading(null);
|
|
}
|
|
};
|
|
|
|
const hasReactions = Object.keys(reactions).length > 0;
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.25, mt: 0.25, alignItems: 'center' }}>
|
|
{hasReactions && Object.entries(reactions).map(([emoji, count]) => (
|
|
<Chip
|
|
key={emoji}
|
|
label={`${emoji} ${count}`}
|
|
size="small"
|
|
onClick={() => handleToggle(emoji)}
|
|
disabled={loading === emoji}
|
|
sx={{
|
|
height: 20,
|
|
fontSize: '0.75rem',
|
|
cursor: 'pointer',
|
|
border: '1px solid',
|
|
borderColor: reactionsSelf.includes(emoji) ? 'primary.main' : 'transparent',
|
|
bgcolor: reactionsSelf.includes(emoji) ? 'primary.light' : 'action.hover',
|
|
'& .MuiChip-label': { px: 0.5 },
|
|
}}
|
|
/>
|
|
))}
|
|
<Tooltip title="Reaktion hinzuf\u00FCgen">
|
|
<IconButton
|
|
size="small"
|
|
onClick={(e) => setAnchorEl(e.currentTarget)}
|
|
sx={{ width: 20, height: 20, opacity: 0.6, '&:hover': { opacity: 1 } }}
|
|
>
|
|
<AddReactionOutlinedIcon sx={{ fontSize: '0.85rem' }} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Popover
|
|
open={Boolean(anchorEl)}
|
|
anchorEl={anchorEl}
|
|
onClose={() => setAnchorEl(null)}
|
|
anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
|
|
transformOrigin={{ vertical: 'bottom', horizontal: 'left' }}
|
|
>
|
|
<Box sx={{ display: 'flex', p: 0.5, gap: 0.25 }}>
|
|
{QUICK_REACTIONS.map((emoji) => (
|
|
<IconButton
|
|
key={emoji}
|
|
size="small"
|
|
onClick={() => { handleToggle(emoji); setAnchorEl(null); }}
|
|
sx={{ fontSize: '1rem', minWidth: 32, minHeight: 32 }}
|
|
>
|
|
{emoji}
|
|
</IconButton>
|
|
))}
|
|
</Box>
|
|
</Popover>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default MessageReactions;
|