209 lines
9.7 KiB
JavaScript
209 lines
9.7 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import { useAuth } from '../contexts/AuthContext.jsx';
|
|
import { api } from '../utils/api.js';
|
|
import { useToast } from '../contexts/ToastContext.jsx';
|
|
import Avatar from './Avatar.jsx';
|
|
|
|
export default function GroupInfoModal({ group, onClose, onUpdated, onBack }) {
|
|
const { user } = useAuth();
|
|
const toast = useToast();
|
|
const [members, setMembers] = useState([]);
|
|
const [editing, setEditing] = useState(false);
|
|
const [newName, setNewName] = useState(group.name);
|
|
const [addSearch, setAddSearch] = useState('');
|
|
const [addResults, setAddResults] = useState([]);
|
|
|
|
const isDirect = !!group.is_direct;
|
|
const isOwner = group.owner_id === user.id;
|
|
const isAdmin = user.role === 'admin';
|
|
const canManage = !isDirect && ((group.type === 'private' && isOwner) || (group.type === 'public' && isAdmin));
|
|
const canRename = !isDirect && !group.is_default && ((group.type === 'public' && isAdmin) || (group.type === 'private' && isOwner));
|
|
|
|
useEffect(() => {
|
|
if (group.type === 'private') {
|
|
api.getMembers(group.id).then(({ members }) => setMembers(members)).catch(() => {});
|
|
}
|
|
}, [group.id]);
|
|
|
|
useEffect(() => {
|
|
if (addSearch) {
|
|
api.searchUsers(addSearch).then(({ users }) => setAddResults(users)).catch(() => {});
|
|
}
|
|
}, [addSearch]);
|
|
|
|
const handleRename = async () => {
|
|
if (!newName.trim() || newName === group.name) { setEditing(false); return; }
|
|
try {
|
|
await api.renameGroup(group.id, newName.trim());
|
|
toast('Renamed', 'success');
|
|
onUpdated();
|
|
setEditing(false);
|
|
} catch (e) { toast(e.message, 'error'); }
|
|
};
|
|
|
|
const handleLeave = async () => {
|
|
if (!confirm('Leave this message?')) return;
|
|
try {
|
|
await api.leaveGroup(group.id);
|
|
toast('Left message', 'success');
|
|
onClose();
|
|
if (isDirect) {
|
|
// For direct messages: socket group:deleted fired by server handles
|
|
// removing from sidebar and clearing active group — no manual refresh needed
|
|
} else {
|
|
onUpdated();
|
|
if (onBack) onBack();
|
|
}
|
|
} catch (e) { toast(e.message, 'error'); }
|
|
};
|
|
|
|
const handleTakeOwnership = async () => {
|
|
if (!confirm('Take ownership of this private group?')) return;
|
|
try {
|
|
await api.takeOwnership(group.id);
|
|
toast('Ownership taken', 'success');
|
|
onUpdated();
|
|
onClose();
|
|
} catch (e) { toast(e.message, 'error'); }
|
|
};
|
|
|
|
const handleAdd = async (u) => {
|
|
try {
|
|
await api.addMember(group.id, u.id);
|
|
toast(`${u.name} added`, 'success');
|
|
api.getMembers(group.id).then(({ members }) => setMembers(members));
|
|
setAddSearch('');
|
|
setAddResults([]);
|
|
} catch (e) { toast(e.message, 'error'); }
|
|
};
|
|
|
|
const handleRemove = async (member) => {
|
|
if (!confirm(`Remove ${member.name}?`)) return;
|
|
try {
|
|
await api.removeMember(group.id, member.id);
|
|
toast(`${member.name} removed`, 'success');
|
|
setMembers(prev => prev.filter(m => m.id !== member.id));
|
|
} catch (e) { toast(e.message, 'error'); }
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
if (!confirm('Delete this message? This cannot be undone.')) return;
|
|
try {
|
|
await api.deleteGroup(group.id);
|
|
toast('Deleted', 'success');
|
|
onUpdated();
|
|
onClose();
|
|
if (onBack) onBack();
|
|
} catch (e) { toast(e.message, 'error'); }
|
|
};
|
|
|
|
// For direct messages: only show Delete button (owner = remaining user after other left)
|
|
const canDeleteDirect = isDirect && isOwner;
|
|
const canDeleteRegular = !isDirect && (isOwner || (isAdmin && group.type === 'public')) && !group.is_default;
|
|
|
|
return (
|
|
<div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
|
|
<div className="modal">
|
|
<div className="flex items-center justify-between" style={{ marginBottom: 20 }}>
|
|
<h2 className="modal-title" style={{ margin: 0 }}>Message Info</h2>
|
|
<button className="btn-icon" onClick={onClose}>
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Name */}
|
|
<div style={{ marginBottom: 16 }}>
|
|
{editing ? (
|
|
<div className="flex gap-2">
|
|
<input className="input flex-1" value={newName} onChange={e => setNewName(e.target.value)} autoFocus onKeyDown={e => e.key === 'Enter' && handleRename()} />
|
|
<button className="btn btn-primary btn-sm" onClick={handleRename}>Save</button>
|
|
<button className="btn btn-secondary btn-sm" onClick={() => setEditing(false)}>Cancel</button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-8" style={{ gap: 12 }}>
|
|
<h3 style={{ fontSize: 18, fontWeight: 600, flex: 1 }}>{group.name}</h3>
|
|
{canRename && (
|
|
<button className="btn-icon" onClick={() => setEditing(true)} title="Rename">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-6" style={{ gap: 8, marginTop: 4 }}>
|
|
<span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
|
{isDirect ? 'Direct message' : group.type === 'public' ? 'Public message' : 'Private message'}
|
|
</span>
|
|
{!!group.is_readonly && <span className="readonly-badge" style={{ fontSize: 11, padding: '2px 8px', borderRadius: 10, background: '#fff3e0', color: '#e65100' }}>Read-only</span>}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Members — shown for private non-direct groups */}
|
|
{group.type === 'private' && !isDirect && (
|
|
<div style={{ marginBottom: 16 }}>
|
|
<div className="text-sm font-medium" style={{ color: 'var(--text-secondary)', marginBottom: 8 }}>
|
|
Members ({members.length})
|
|
</div>
|
|
<div style={{ maxHeight: 180, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 4 }}>
|
|
{members.map(m => (
|
|
<div key={m.id} className="flex items-center" style={{ gap: 10, padding: '6px 0' }}>
|
|
<Avatar user={m} size="sm" />
|
|
<span className="flex-1 text-sm">{m.name}</span>
|
|
{m.id === group.owner_id && <span className="text-xs" style={{ color: 'var(--text-tertiary)' }}>Owner</span>}
|
|
{canManage && m.id !== group.owner_id && (
|
|
<button
|
|
onClick={() => handleRemove(m)}
|
|
title="Remove"
|
|
style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-tertiary)', padding: '2px 4px', borderRadius: 4, lineHeight: 1, transition: 'color var(--transition)' }}
|
|
onMouseEnter={e => e.currentTarget.style.color = 'var(--error)'}
|
|
onMouseLeave={e => e.currentTarget.style.color = 'var(--text-tertiary)'}
|
|
>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
|
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
|
</svg>
|
|
</button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
{canManage && (
|
|
<div style={{ marginTop: 12 }}>
|
|
<input className="input" placeholder="Search to add member..." value={addSearch} onChange={e => setAddSearch(e.target.value)} />
|
|
{addResults.length > 0 && addSearch && (
|
|
<div style={{ border: '1px solid var(--border)', borderRadius: 'var(--radius)', marginTop: 4, maxHeight: 150, overflowY: 'auto', background: 'var(--surface)' }}>
|
|
{addResults.filter(u => !members.find(m => m.id === u.id)).map(u => (
|
|
<button key={u.id} className="flex items-center gap-2 w-full" style={{ gap: 10, padding: '8px 12px', textAlign: 'left', transition: 'background var(--transition)', color: 'var(--text-primary)' }} onClick={() => handleAdd(u)} onMouseEnter={e => e.currentTarget.style.background = 'var(--background)'} onMouseLeave={e => e.currentTarget.style.background = ''}>
|
|
<Avatar user={u} size="sm" />
|
|
<span className="text-sm flex-1">{u.name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex-col gap-2">
|
|
{/* Direct message: leave (if not already owner/last person) */}
|
|
{isDirect && !isOwner && (
|
|
<button className="btn btn-secondary w-full" onClick={handleLeave}>Leave Conversation</button>
|
|
)}
|
|
{/* Regular private: leave if not owner */}
|
|
{!isDirect && group.type === 'private' && !isOwner && (
|
|
<button className="btn btn-secondary w-full" onClick={handleLeave}>Leave Group</button>
|
|
)}
|
|
{/* Admin take ownership (non-direct only) */}
|
|
{!isDirect && isAdmin && group.type === 'private' && !isOwner && (
|
|
<button className="btn btn-secondary w-full" onClick={handleTakeOwnership}>Take Ownership (Admin)</button>
|
|
)}
|
|
{/* Delete */}
|
|
{(canDeleteDirect || canDeleteRegular) && (
|
|
<button className="btn btn-danger w-full" onClick={handleDelete}>Delete</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|