74 lines
2.3 KiB
JavaScript
74 lines
2.3 KiB
JavaScript
import {
|
|
IonIcon,
|
|
IonItem,
|
|
IonItemOption,
|
|
IonItemOptions,
|
|
IonItemSliding,
|
|
IonNavLink,
|
|
IonText,
|
|
IonThumbnail,
|
|
} from '@ionic/react';
|
|
import { checkmarkDone } from 'ionicons/icons';
|
|
import ChatHelloworld from '../../pages/chat';
|
|
import { ContactStore } from '../../store';
|
|
import { getContacts } from '../../store/Selectors';
|
|
|
|
import HKPartyIonDeleteIcon from '../HKPartyIonDeleteIcon';
|
|
import './style.scss';
|
|
|
|
const ChatItem = ({ chat }) => {
|
|
const contacts = ContactStore.useState(getContacts);
|
|
const { chats, contact_id } = chat;
|
|
const { read, date, preview, received } = chats[chats.length - 1];
|
|
const contact = contacts.filter(c => c.id === contact_id)[0];
|
|
const notificationCount = chats.filter(chat => chat.read === false).length;
|
|
|
|
return (
|
|
<>
|
|
<IonItemSliding>
|
|
{/*
|
|
<IonItemOptions side="start">
|
|
<IonItemOption color="success">Archive</IonItemOption>
|
|
</IonItemOptions>
|
|
*/}
|
|
|
|
{/* */}
|
|
<IonNavLink routerDirection="forward" component={() => <ChatHelloworld />}>
|
|
<IonItem
|
|
className="chat-row"
|
|
// routerLink={`/tabs/messages/${contact.id}`}
|
|
|
|
lines="full"
|
|
detail={false}
|
|
>
|
|
<IonThumbnail slot="start" style={{ '--border-radius': '50%' }}>
|
|
<img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
|
|
</IonThumbnail>
|
|
<div className="chat-row-content">
|
|
<IonText>{contact.name}</IonText>
|
|
<IonText>{read && received && <IonIcon icon={checkmarkDone} color="primary" />}</IonText>
|
|
<IonText>{preview}</IonText>
|
|
</div>
|
|
<div slot="end">
|
|
<div>
|
|
<IonText>{date}</IonText>
|
|
<IonText>
|
|
{notificationCount > 0 && <IonText className="chat-notification">{notificationCount}</IonText>}
|
|
</IonText>
|
|
</div>
|
|
</div>
|
|
</IonItem>
|
|
</IonNavLink>
|
|
{/* */}
|
|
<IonItemOptions side="end">
|
|
<IonItemOption color="danger">
|
|
<HKPartyIonDeleteIcon size={'large'} />
|
|
</IonItemOption>
|
|
</IonItemOptions>
|
|
</IonItemSliding>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ChatItem;
|