File size: 4,058 Bytes
fed832e |
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 |
import { useEffect, useRef, useState } from 'react';
import { useSelector } from 'react-redux';
import Edit from '../assets/edit.svg';
import Exit from '../assets/exit.svg';
import Message from '../assets/message.svg';
import MessageDark from '../assets/message-dark.svg';
import CheckMark2 from '../assets/checkMark2.svg';
import Trash from '../assets/trash.svg';
import { selectConversationId } from '../preferences/preferenceSlice';
interface ConversationProps {
name: string;
id: string;
}
interface ConversationTileProps {
conversation: ConversationProps;
selectConversation: (arg1: string) => void;
onDeleteConversation: (arg1: string) => void;
onSave: ({ name, id }: ConversationProps) => void;
}
export default function ConversationTile({
conversation,
selectConversation,
onDeleteConversation,
onSave,
}: ConversationTileProps) {
const conversationId = useSelector(selectConversationId);
const tileRef = useRef<HTMLInputElement>(null);
const isDarkTheme = document.documentElement.classList.contains('dark');
const [isEdit, setIsEdit] = useState(false);
const [conversationName, setConversationsName] = useState('');
// useOutsideAlerter(
// tileRef,
// () =>
// handleSaveConversation({
// id: conversationId || conversation.id,
// name: conversationName,
// }),
// [conversationName],
// );
useEffect(() => {
setConversationsName(conversation.name);
}, [conversation.name]);
function handleEditConversation() {
setIsEdit(true);
}
function handleSaveConversation(changedConversation: ConversationProps) {
if (changedConversation.name.trim().length) {
onSave(changedConversation);
setIsEdit(false);
} else {
onClear();
}
}
function onClear() {
setConversationsName(conversation.name);
setIsEdit(false);
}
return (
<div
ref={tileRef}
onClick={() => {
selectConversation(conversation.id);
}}
className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${conversationId === conversation.id ? 'bg-gray-100 dark:bg-purple-taupe' : ''
}`}
>
<div
className={`flex ${conversationId === conversation.id ? 'w-[75%]' : 'w-[95%]'
} gap-4`}
>
<img src={isDarkTheme ? MessageDark : Message} className="ml-4 w-5 dark:text-white" />
{isEdit ? (
<input
autoFocus
type="text"
className="h-6 w-full px-1 text-sm font-normal leading-6 outline-[#0075FF] focus:outline-1"
value={conversationName}
onChange={(e) => setConversationsName(e.target.value)}
/>
) : (
<p className="my-auto overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-normal leading-6 text-eerie-black dark:text-white">
{conversationName}
</p>
)}
</div>
{conversationId === conversation.id && (
<div className="flex text-white dark:text-[#949494]">
<img
src={isEdit ? CheckMark2 : Edit}
alt="Edit"
className="mr-2 h-4 w-4 cursor-pointer hover:opacity-50 text-white"
id={`img-${conversation.id}`}
onClick={(event) => {
event.stopPropagation();
isEdit
? handleSaveConversation({
id: conversationId,
name: conversationName,
})
: handleEditConversation();
}}
/>
<img
src={isEdit ? Exit : Trash}
alt="Exit"
className={`mr-4 ${isEdit ? 'h-3 w-3' : 'h-4 w-4'
}mt-px cursor-pointer hover:opacity-50`}
id={`img-${conversation.id}`}
onClick={(event) => {
event.stopPropagation();
isEdit ? onClear() : onDeleteConversation(conversation.id);
}}
/>
</div>
)}
</div>
);
}
|