Added Chat Page
This commit is contained in:
300
components/GroupSettingsModal.tsx
Normal file
300
components/GroupSettingsModal.tsx
Normal file
@@ -0,0 +1,300 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import useSWR from 'swr';
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string | null;
|
||||
}
|
||||
|
||||
interface Participant {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string | null;
|
||||
}
|
||||
|
||||
interface Conversation {
|
||||
id: string;
|
||||
name: string | null;
|
||||
type: string;
|
||||
displayName: string;
|
||||
participants: Participant[];
|
||||
}
|
||||
|
||||
interface GroupSettingsModalProps {
|
||||
conversation: Conversation;
|
||||
onClose: () => void;
|
||||
onUpdate: () => void;
|
||||
}
|
||||
|
||||
const fetcher = (url: string) => fetch(url).then((res) => res.json());
|
||||
|
||||
export default function GroupSettingsModal({
|
||||
conversation,
|
||||
onClose,
|
||||
onUpdate,
|
||||
}: GroupSettingsModalProps) {
|
||||
const [groupName, setGroupName] = useState(conversation.name || '');
|
||||
const [search, setSearch] = useState('');
|
||||
const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
|
||||
const [isUpdating, setIsUpdating] = useState(false);
|
||||
const [isAdding, setIsAdding] = useState(false);
|
||||
|
||||
const { data: users, error } = useSWR<User[]>(
|
||||
search ? `/api/users?search=${encodeURIComponent(search)}` : null,
|
||||
fetcher
|
||||
);
|
||||
|
||||
const existingParticipantIds = conversation.participants.map((p) => p.id);
|
||||
|
||||
const handleUpdateName = async () => {
|
||||
if (!groupName.trim()) {
|
||||
alert('Le nom du groupe ne peut pas être vide');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsUpdating(true);
|
||||
try {
|
||||
const response = await fetch(`/api/conversations/${conversation.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ name: groupName }),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
onUpdate();
|
||||
onClose();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert(error.error || 'Erreur lors de la mise à jour');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur:', error);
|
||||
alert('Erreur lors de la mise à jour');
|
||||
} finally {
|
||||
setIsUpdating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddParticipants = async () => {
|
||||
if (selectedUsers.length === 0) {
|
||||
alert('Veuillez sélectionner au moins un utilisateur');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsAdding(true);
|
||||
try {
|
||||
const response = await fetch(`/api/conversations/${conversation.id}/participants`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ userIds: selectedUsers }),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setSelectedUsers([]);
|
||||
setSearch('');
|
||||
onUpdate();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert(error.error || 'Erreur lors de l\'ajout des participants');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur:', error);
|
||||
alert('Erreur lors de l\'ajout des participants');
|
||||
} finally {
|
||||
setIsAdding(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveParticipant = async (userId: string) => {
|
||||
if (!confirm('Êtes-vous sûr de vouloir retirer cet utilisateur du groupe ?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/conversations/${conversation.id}/participants?userId=${userId}`,
|
||||
{
|
||||
method: 'DELETE',
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
onUpdate();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert(error.error || 'Erreur lors du retrait du participant');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur:', error);
|
||||
alert('Erreur lors du retrait du participant');
|
||||
}
|
||||
};
|
||||
|
||||
const handleUserToggle = (userId: string) => {
|
||||
if (selectedUsers.includes(userId)) {
|
||||
setSelectedUsers(selectedUsers.filter((id) => id !== userId));
|
||||
} else {
|
||||
setSelectedUsers([...selectedUsers, userId]);
|
||||
}
|
||||
};
|
||||
|
||||
const availableUsers = users?.filter((u) => !existingParticipantIds.includes(u.id)) || [];
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] flex flex-col">
|
||||
<div className="p-6 border-b border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold text-gray-900">Paramètres du groupe</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-600 transition-colors"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-6">
|
||||
{/* Nom du groupe */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Nom du groupe
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={groupName}
|
||||
onChange={(e) => setGroupName(e.target.value)}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
|
||||
/>
|
||||
<button
|
||||
onClick={handleUpdateName}
|
||||
disabled={isUpdating || groupName.trim() === conversation.name}
|
||||
className="px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isUpdating ? 'Mise à jour...' : 'Mettre à jour'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Participants existants */}
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-700 mb-3">
|
||||
Participants ({conversation.participants.length})
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{conversation.participants.map((participant) => (
|
||||
<div
|
||||
key={participant.id}
|
||||
className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
|
||||
>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{participant.name || 'Utilisateur'}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">{participant.email}</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleRemoveParticipant(participant.id)}
|
||||
className="text-red-600 hover:text-red-700 text-sm"
|
||||
>
|
||||
Retirer
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ajouter des participants */}
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-700 mb-3">Ajouter des participants</h3>
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="Rechercher des utilisateurs..."
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
|
||||
/>
|
||||
{search && (
|
||||
<>
|
||||
{error && (
|
||||
<div className="text-sm text-red-600">Erreur lors de la recherche</div>
|
||||
)}
|
||||
{!users && !error && (
|
||||
<div className="text-sm text-gray-500">Recherche...</div>
|
||||
)}
|
||||
{availableUsers.length === 0 && users && (
|
||||
<div className="text-sm text-gray-500">
|
||||
Aucun utilisateur disponible ou déjà dans le groupe
|
||||
</div>
|
||||
)}
|
||||
{availableUsers.length > 0 && (
|
||||
<>
|
||||
<div className="max-h-48 overflow-y-auto border border-gray-200 rounded-lg divide-y divide-gray-100">
|
||||
{availableUsers.map((user) => (
|
||||
<label
|
||||
key={user.id}
|
||||
className="flex items-center gap-3 p-3 hover:bg-gray-50 cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedUsers.includes(user.id)}
|
||||
onChange={() => handleUserToggle(user.id)}
|
||||
className="rounded border-gray-300 text-lblue focus:ring-lblue"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{user.name || 'Utilisateur'}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">{user.email}</div>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
{selectedUsers.length > 0 && (
|
||||
<button
|
||||
onClick={handleAddParticipants}
|
||||
disabled={isAdding}
|
||||
className="w-full px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isAdding
|
||||
? 'Ajout...'
|
||||
: `Ajouter ${selectedUsers.length} participant${selectedUsers.length > 1 ? 's' : ''}`}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 border-t border-gray-200">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-full px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
Fermer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user