95 lines
2.5 KiB
JavaScript
95 lines
2.5 KiB
JavaScript
import {
|
|
IonContent,
|
|
IonHeader,
|
|
IonPage,
|
|
IonTitle,
|
|
IonToolbar,
|
|
IonSearchbar,
|
|
IonButtons,
|
|
IonButton,
|
|
IonIcon,
|
|
IonItem,
|
|
IonModal,
|
|
} from "@ionic/react";
|
|
import { checkmarkDone, createOutline } from "ionicons/icons";
|
|
import "./Chats.css";
|
|
|
|
import { ChatStore, ContactStore } from "../store";
|
|
import { getContacts, getChats } from "../store/Selectors";
|
|
import { useEffect, useState } from "react";
|
|
import ChatItem from "../components/ChatItem";
|
|
import { useRef } from "react";
|
|
import ContactModal from "../components/ContactModal";
|
|
|
|
const Chats = () => {
|
|
const pageRef = useRef(null);
|
|
const contacts = ContactStore.useState(getContacts);
|
|
const latestChats = ChatStore.useState(getChats);
|
|
|
|
const [results, setResults] = useState(latestChats);
|
|
const [showContactModal, setShowContactModal] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setResults(latestChats);
|
|
}, [latestChats]);
|
|
|
|
const search = (e) => {
|
|
const searchTerm = e.target.value;
|
|
|
|
if (searchTerm !== "") {
|
|
const searchTermLower = searchTerm.toLowerCase();
|
|
|
|
const newResults = latestChats.filter((chat) =>
|
|
contacts
|
|
.filter((c) => c.id === chat.contact_id)[0]
|
|
.name.toLowerCase()
|
|
.includes(searchTermLower)
|
|
);
|
|
setResults(newResults);
|
|
} else {
|
|
setResults(latestChats);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<IonPage ref={pageRef}>
|
|
<IonHeader>
|
|
<IonToolbar>
|
|
<IonButtons slot="start">
|
|
<IonButton fill="clear">Edit</IonButton>
|
|
</IonButtons>
|
|
<IonButtons slot="end">
|
|
<IonButton fill="clear" onClick={() => setShowContactModal(true)}>
|
|
<IonIcon icon={createOutline} />
|
|
</IonButton>
|
|
</IonButtons>
|
|
<IonTitle>Chats</IonTitle>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
<IonContent fullscreen>
|
|
<IonHeader collapse="condense">
|
|
<IonToolbar>
|
|
<IonTitle size="large">Chats</IonTitle>
|
|
</IonToolbar>
|
|
<IonSearchbar onIonChange={(e) => search(e)} />
|
|
</IonHeader>
|
|
|
|
{results.map((chat, index) => {
|
|
return <ChatItem chat={chat} key={index} />;
|
|
})}
|
|
|
|
<IonModal
|
|
isOpen={showContactModal}
|
|
swipeToClose={true}
|
|
presentingElement={pageRef.current}
|
|
onDidDismiss={() => setShowContactModal(false)}
|
|
>
|
|
<ContactModal close={() => setShowContactModal(false)} />
|
|
</IonModal>
|
|
</IonContent>
|
|
</IonPage>
|
|
);
|
|
};
|
|
|
|
export default Chats;
|